Fundação - Estilos Globais
Neste capítulo, estudaremos sobre Estilos Globais . O CSS global da estrutura Foundation inclui redefinições úteis que garantem que o estilo seja consistente em todos os navegadores.
Tamanho da fonte
O tamanho da fonte da folha de estilo do navegador é definido como 100% por padrão. O tamanho da fonte padrão é definido em 16 pixels. Dependendo do tamanho da fonte, o tamanho da grade é calculado. Para ter um tamanho de fonte de base distinto e pontos de interrupção de grade não afetados, defina $ rem-base para o valor de $ global-font-size , que deve ser em pixels.
Cores
Elementos interativos como links e botões usam o tom de azul padrão que vem da variável SASS $ primary-color . Os componentes também podem ter cores como: secundário, alerta, sucesso e aviso . Para mais informações, clique aqui .
Referência SASS
Variáveis
A tabela a seguir lista as variáveis SASS, que são usadas para personalizar os estilos padrão de componentes em seu projeto _settings.scss .
| Sr. Não. | Nome e Descrição | Tipo | Valor padrão |
|---|---|---|---|
| 1 | $global-width Ele representa a largura global do site. Usado para determinar a largura da linha da grade. |
Número | rem-calc (1200) |
| 2 | $global-font-size Representa o tamanho da fonte aplicada a <html> e <body> . Ele é definido como 100% por padrão e o valor das configurações do navegador do usuário será herdado. |
Número | 100% |
| 3 | $global-lineheight Ele representa todos os tipos de altura de linha padrão. $ global-lineheight é 24px enquanto $ global-font-size definido para 16px. |
Número | 1,5 |
| 4 | $primary-color Ele dá cor aos componentes interativos, como links e botões. |
Cor | # 2199e8 |
| 5 | $secondary-color É usado com componentes que oferecem suporte à classe .secondary . |
Cor | # 777 |
| 6 | $success-color Ele representa o status ou ação positiva quando usado com a classe .success . |
Cor | # 3adb76 |
| 7 | $warning-color Ele representa um status ou ação de cuidado quando usado com a classe .warning . |
Cor | # ffae00 |
| 8 | $alert-color Representa um status ou ação negativa quando usado com a classe .alert . |
Cor | # ec5840 |
| 9 | $light-gray É usado para itens de IU em cinza claro. |
Cor | # e6e6e6 |
| 10 | $medium-gray É usado para itens de interface do usuário cinza médio. |
Cor | #cacaca |
| 11 | $dark-gray Ele é usado para itens de IU em cinza escuro. |
Cor | # 8a8a8a |
| 12 | $black É usado para itens de IU pretos. |
Cor | # 0a0a0a |
| 13 | $white Ele é usado para itens de IU brancos. |
Cor | #fefefe |
| 14 | $body-background Ele representa a cor de fundo do corpo. |
Cor | $ branco |
| 15 | $body-font-color Ele representa a cor do texto do corpo. |
Cor | $ preto |
| 16 | $body-font-family Representa a lista de fontes do corpo. |
Lista | 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif |
| 17 | $body-antialiased O tipo suavizado é ativado configurando este atributo para true usando as propriedades CSS -webkit-font-smoothing e -moz-osx-font-smoothing . |
boleano | verdadeiro |
| 18 | $global-margin Ele representa o valor da margem global nos componentes. |
Número | 1rem |
| 19 | $global-padding Ele representa o valor de preenchimento global nos componentes. |
Número | 1rem |
| 20 | $global-margin Ele representa o valor da margem global usado entre os componentes. |
Número | 1rem |
| 21 | $global-weight-normal Ele representa o peso global da fonte para o tipo normal. |
Palavra-chave ou número | normal |
| 22 | $global-weight-bold Representa o peso global da fonte para negrito. |
Palavra-chave ou número | negrito |
| 23 | $global-radius Ele representa o valor global de todos os elementos que possuem um raio de borda. |
Número | 0 |
| 24 | $global-text-direction Ele define a direção do texto do CSS para ltr ou rtl |
ltr |