Fundação - Tipografia de Base
Descrição
Typography in Foundation define títulos, parágrafos, listas e outros elementos embutidos que criam estilos padrão atraentes e simples para os elementos.
A tabela a seguir lista os diferentes tipos de tipografia usados no Foundation -
| Sr. Não. | Tipografia e descrição |
|---|---|
| 1 | Parágrafos Parágrafo é um grupo de frases definidas com diferentes tamanhos de fonte, palavras destacadas, altura da linha, etc. |
| 2 | Cabeçalho Ele define os cabeçalhos HTML de h1 a h6. |
| 3 | Links Ele cria um hiperlink que abre outro documento quando você clica no texto ou imagem. |
| 4 | Divisores É usado para fazer uma pausa entre as seções usando a tag <hr>. |
| 5 | Listas ordenadas e não ordenadas Foundation suporta listas ordenadas, listas não ordenadas para listar as coisas. |
| 6 | Listas de Definição Listas de definição são usadas para exibir pares de valores de nomes. |
| 7 | Citações em bloco Ele representa um bloco de texto, que é muito maior do que o normal. |
| 8 | Abreviações e Código Abreviação define um termo abreviado de palavra ou frase e código representa um trecho de código. |
| 9 | Teclas É usado para executar uma função específica. |
| 10 | Acessibilidade A Foundation fornece algumas diretrizes para acessar o conteúdo da página. |
Referência Sass
Você pode alterar os estilos dos componentes usando as seguintes variáveis SASS, conforme listado na tabela.
| Sr. Não. | Nome e Descrição | Tipo | Valor padrão |
|---|---|---|---|
| 1 | $header-font-family Especifica a família da fonte para os elementos do cabeçalho. |
String ou lista | $ body-font-family |
| 2 | $header-font-weight Especifica a espessura da fonte dos cabeçalhos. |
Corda | $ global-weight-normal |
| 3 | $header-font-style Fornece estilo de fonte de cabeçalhos. |
Corda | normal |
| 4 | $font-family-monospace Pilha de fontes usada para elementos que usam tipo monoespaçado, como exemplos de código. |
String ou lista | Consolas, 'Liberation Mono', Courier, monoespaço |
| 5 | $header-sizes Define os tamanhos de tela dos títulos e cada chave é um ponto de interrupção, e cada valor é um mapa de tamanhos de títulos. |
Mapa | |
| 6 | $header-color Fornece a cor dos cabeçalhos. |
Cor | herdar |
| 7 | $header-lineheight Define a altura da linha dos cabeçalhos. |
Número | 1,4 |
| 8 | $header-margin-bottom Fornece a margem inferior dos cabeçalhos. |
Número | 0,5 rem |
| 9 | $header-text-rendering Define o método para renderização de texto. |
Corda | OptimizeLegibility |
| 10 | $small-font-size Especifica o tamanho da fonte para elementos <small>. |
Número | 80% |
| 11 | $paragraph-margin-bottom Especifica a margem inferior dos parágrafos. |
Número | 1rem |
| 12 | $paragraph-text-rendering Métodos para parágrafo de processamento de texto. |
Corda | OptimizeLegibility |
| 13 | $code-color Fornece cor de texto para amostras de código. |
Cor | $ preto |
| 14 | $code-font-family Fornece família de fontes para os exemplos de código. |
String ou lista | $ font-family-monospace |
| 15 | $code-border Especifica a borda ao redor do código. |
Lista | 1px sólido $ médio-cinza |
| 16 | $code-padding Especifica o preenchimento ao redor do texto. |
Número ou lista | rem-calc (2 5 1) |
| 17 | $anchor-color Cor padrão para links. |
Cor | $ cor primária |
| 18 | $anchor-color-hover Especifica a cor padrão para links ao pairar. |
Cor | escala-cor ($ âncora-cor, $ luminosidade: -14%) |
| 19 | $anchor-text-decoration Decoração de texto padrão para links. |
Corda | Nenhum |
| 20 | $anchor-text-decoration-hover Decoração de texto padrão para links em foco. |
Corda | Nenhum |
| 21 | $hr-width Define a largura máxima de um divisor. |
Número | $ largura global |
| 22 | $hr-border Specifies default border for a divider. |
List | 1px solid $medium-gray |
| 23 | $hr-margin Default margin for a divider. |
Number or List | rem-calc(20) auto |
| 24 | $list-lineheight It defines line height for items in a list. |
Number | $paragraph-lineheight |
| 25 | $list-style-type Provides bullet type for unordered lists. |
String | disc |
| 26 | $list-style-position It defines positioning for bullets on unordered lists. |
String | outside |
| 27 | $list-side-margin Defines left side (or right) margin. |
Number | 1.25rem |
| 28 | $defnlist-term-weight Provides font weight for <dt> elements. |
String | $global-weight-bold |
| 29 | $defnlist-term-margin-bottom Provides spacing between <dt> and <dd> elements. |
Number | 0.3rem |
| 30 | $blockquote-color It applies text color of <blockquote> elements. |
Color | $dark-gray |
| 31 | $blockquote-padding Provides padding inside a <blockquote> elements. |
Number or List | rem-calc(9 20 0 19) |
| 32 | $blockquote-border It gives side border for the <blockquote> elements. |
List | 1px solid $medium-gray |
| 33 | $cite-font-size Defines font size for the <cite> elements. |
Number | rem-calc(13) |
| 34 | $cite-color Provides text color for |
Color | $dark-gray |
| 35 | $keystroke-font Defines font family for the <kbd> elements. |
String or List | $font-family-monospace |
| 36 | $keystroke-color Defines text color for the <kbd> elements. |
Color | $black |
| 37 | $keystroke-background Provides background color for the <kbd> elements. |
Color | $light-gray |
| 38 | $keystroke-padding Specifies padding for the <kbd> elements. |
Number or List | rem-calc(2 4 0) |
| 39 | $keystroke-radius Displays the border radius for the <kbd> elements. |
Number or List | $global-radius |
| 40 | $abbr-underline Provides the bottom border style for the <abbr> elements. |
List | 1px dotted $black |