Description
Typography in Foundation defines headings, paragraphs, lists and other inline elements which create attractive and simple default styles for elements.The Following table lists different types of typography used in the Foundation:
| S.N. | Typography & Description |
|---|---|
| 1 | Paragraphs Paragraph is a group of sentences defined with different font size, highlighted words, line height etc. |
| 2 | Header It defines HTML headings from h1 to h6. |
| 3 | Links It creates a hyperlink that opens another document when you click on the text or an image. |
| 4 | Dividers It is used to give break between the sections by using <hr> tag. |
| 5 | Ordered and Unordered Lists Foundation supports ordered lists, unordered lists to list the things. |
| 6 | Definition Lists Definition Lists are used to display name value pairs. |
| 7 | Blockquotes It represents block of text which defines much bigger than normal. |
| 8 | Abbreviations and Code Abbreviation defines a shortened term of word or phrase and code represents a piece of code. |
| 9 | Keystrokes It is used to perform specific function. |
| 10 | Accessibility Foundation provides some guidelines to access the content of the page. |
Sass Reference
You can change the styles of the components by using following SASS variables as listed in the table.| S.N. | Name & Description | Type | Default Value |
|---|---|---|---|
| 1 | $header-font-family Specifies the font family for header elements. |
String or List | $body-font-family |
| 2 | $header-font-weight Specifies font weight of headers. |
String | $global-weight-normal |
| 3 | $header-font-style Provides font style of headers. |
String | normal |
| 4 | $font-family-monospace Font stack used for elements that use monospaced type, such as code samples. |
String or List | Consolas, 'Liberation Mono', Courier, monospace |
| 5 | $header-sizes Defines screen sizes of headings and each key is a breakpoint, and each value is a map of heading sizes. |
Map |
small: (
'h1': 24 'h2': 20 'h3': 19 'h4': 18 'h5': 17 'h6': 16 ) medium: ( 'h1': 48 'h2': 40 'h3': 31 'h4': 25 'h5': 20 'h6': 16 ) |
| 6 | $header-color Provides color of the headers. |
Color | inherit |
| 7 | $header-lineheight Defines line height of headers. |
Number | 1.4 |
| 8 | $header-margin-bottom Provides bottom margin of headers. |
Number | 0.5rem |
| 9 | $header-text-rendering Defines method for text rendering. |
String | optimizeLegibility |
| 10 | $small-font-size Specifies font size for <small> elements. |
Number | 80% |
| 11 | $paragraph-margin-bottom Specifies bottom margin of paragraphs. |
Number | 1rem |
| 12 | $paragraph-text-rendering Methods for text rendering paragraph. |
String | optimizeLegibility |
| 13 | $code-color Provides text color of code samples. |
Color | $black |
| 14 | $code-font-family Provides font family of the code samples. |
String or List | $font-family-monospace |
| 15 | $code-border Specifies the border around the code. |
List | 1px solid $medium-gray |
| 16 | $code-padding Specifies the padding around the text. |
Number or List | rem-calc(2 5 1) |
| 17 | $anchor-color Default color for links. |
Color | $primary-color |
| 18 | $anchor-color-hover Specifies the default color for links on hover. |
Color | scale-color($anchor-color, $lightness: -14%) |
| 19 | $anchor-text-decoration Default text decoration for links. |
String | none |
| 20 | $anchor-text-decoration-hover Default text decoration for links on hover. |
String | none |
| 21 | $hr-width Defines maximum width of a divider. |
Number | $global-width |
| 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 <cite> elements. |
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 |
No comments:
Post a Comment