📅 最后修改于: 2020-10-25 05:55:33 🧑 作者: Mango
Foundation中的版式定义了标题，段落，列表和其他内联元素，这些元素为元素创建了引人入胜且简单的默认样式。
下表列出了Foundation中使用的不同类型的排版-
| Sr.No. | 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 a break between the sections by using 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 a specific function. |
| 10 | Accessibility
Foundation provides some guidelines to access the content of the page. |
您可以通过使用下表中列出的以下SASS变量来更改组件的样式。
| Sr.No. | 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 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 to code samples. |
Color | $black |
| 14 | $code-font-family
Provides font family to 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 |
String | $global-weight-bold |
| 29 | $defnlist-term-margin-bottom
Provides spacing between |
Number | 0.3rem |
| 30 | $blockquote-color
It applies text color of elements. |
Color | $dark-gray |
| 31 | $blockquote-padding
Provides padding inside a elements. |
Number or List | rem-calc(9 20 0 19) |
| 32 | $blockquote-border
It gives side border for the elements. |
List | 1px solid $medium-gray |
| 33 | $cite-font-size
Defines font size for the elements. |
Number | rem-calc(13) |
| 34 | $cite-color
Provides text color for |
Color | $dark-gray |
| 35 | $keystroke-font
Defines font family for the elements. |
String or List | $font-family-monospace |
| 36 | $keystroke-color
Defines text color for the elements. |
Color | $black |
| 37 | $keystroke-background
Provides background color for the elements. |
Color | $light-gray |
| 38 | $keystroke-padding
Specifies padding for the elements. |
Number or List | rem-calc(2 4 0) |
| 39 | $keystroke-radius
Displays the border radius for the elements. |
Number or List | $global-radius |
| 40 | $abbr-underline
Provides the bottom border style for the elements. |
List | 1px dotted $black |