Foundation CSS Base Typography Sass Reference
Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is built on Saas-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices.
Base Typography facilitates the clean, attractive typographic style to all the basic elements, which helps to create appealing and easy default styles for the elements.
Variable Used:
Variable-Name | Description | Type | Default-Value |
---|---|---|---|
$print-transparent-backgrounds | This variable is used to define that all elements will have transparent backgrounds when printed, to save on ink. | Boolean | true |
$print-hrefs | This variable is used to define the displays next to all links “href” when printed. | Boolean | true |
$header-font-family | This variable is used to define the font family for header elements. | String or List | $body-font-family |
$header-font-weight | This variable is used to define the font-weight of headers. | String | $global-weight-normal |
$header-font-style | This variable is used to define the font style (e.g. italicized) of headers. | String | normal |
$font-family-monospace | This variable is used to define the Font stack used for elements that use monospaced type, such as code samples. | String or List | Consolas, ‘Liberation Mono’, Courier, monospace |
$header-color | This variable is used to define the color of headers. | Color | inherit |
$header-lineheight | This variable is used to define the line height of headers. | Number | 1.4 |
$header-margin-bottom | This variable is used to define the bottom margin of headers. | Number | 0.5rem |
$header-styles | This variable is used to define the styles for headings at various screen sizes. | Map |
small: ( ‘h1’: (‘font-size’: 24) medium: ( ‘h1’: (‘font-size’: 48) |
$header-text-rendering | This variable is used to define the text rendering method of headers. | String | optimizeLegibility |
$small-font-size | This variable is used to define the font size of <small> elements. | Number | 80% |
$header-small-font-color | This variable is used to define the color of <small> elements when placed inside headers. | Color | $medium-gray |
$paragraph-lineheight | This variable is used to define the line height of text inside <p> elements. | Number | 1.6 |
$paragraph-margin-bottom | This variable is used to define the bottom margin of paragraphs. | Number | 1rem |
$paragraph-text-rendering | This variable is used to define the text rendering method for paragraph text. | String | optimizeLegibility |
$enable-code-inline | This variable is used to define the use the .code-inline component as default for <code> elements. | Boolean | true |
$anchor-color | This variable is used to define the default color for links. | Color | $primary-color |
$anchor-color-hover | This variable is used to define the default color for links on hover. | Color | scale-color($anchor-color, $lightness: -14%) |
$anchor-text-decoration | This variable is used to define the default text decoration for links. | String | none |
$anchor-text-decoration-hover | This variable is used to define the default text decoration for links on hover. | String | none |
$hr-width | This variable is used to define the Maximum width of a divider. | Number | $global-width |
$hr-border | This variable is used to define the default border for a divider. | List | 1px solid $medium-gray |
$hr-margin | This variable is used to define the default margin for a divider. | Number or List | rem-calc(20) auto |
$list-lineheight | This variable is used to define the line height for items in a list. | Number | $paragraph-lineheight |
$list-margin-bottom | This variable is used to define the bottom margin for items in a list. | Number | $paragraph-margin-bottom |
$list-style-type | This variable is used to define the bullet type to use for unordered lists (e.g., square, circle, disc). | String | disc |
$list-style-position | This variable is used to define the positioning for bullets on unordered list items. | String | outside |
$list-side-margin | This variable is used to define the left (or right) margin for lists. | Number | 1.25rem |
$list-nested-side-margin | This variable is used to define the left (or right) margin for a list inside a list. | Number | 1.25rem |
$defnlist-margin-bottom | This variable is used to define the bottom margin for <dl> elements. | Number | 1rem |
$defnlist-term-weight | This variable is used to define the font weight for <dt> elements. | String | $global-weight-bold |
$defnlist-term-margin-bottom | This variable is used to define the Spacing between <dt> and <dd> elements. | Number | 0.3rem |
$blockquote-color | This variable is used to define the text color of <blockquote> elements. | Color | $dark-gray |
$blockquote-padding | This variable is used to define the padding inside a <blockquote> element. | Number or List | rem-calc(9 20 0 19) |
$blockquote-border | This variable is used to define the side border for <blockquote> elements. | List | 1px solid $medium-gray |
$enable-cite-block | This variable is used to define the use of .cite-block component as default for <cite> elements. | Boolean | true |
$keystroke-font | This variable is used to define the font family for <kbd> elements. | String or List | $font-family-monospace |
$keystroke-color | This variable is used to define the text color for <kbd> elements. | Color | $black |
$keystroke-background | This variable is used to define the background color for <kbd> elements. | Color | $light-gray |
$keystroke-padding | This variable is used to define the padding for <kbd> elements. | Number or List | rem-calc(2 4 0) |
$keystroke-radius | This variable is used to define the border radius for <kbd> elements. | Number or List | $global-radius |
$abbr-underline | This variable is used to define the bottom border style for <abbr> elements. | List | 1px dotted $black |
Example 1: In the below code, we will make use of the above variable to demonstrate the use of Base Typography.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < link rel = "stylesheet" href = "style.css" > <!-- Compressed CSS --> < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" > <!-- Compressed JavaScript --> < script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js" > </ script > < script src = "https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js" crossorigin = "anonymous" > </ script > </ head > < body style = "margin:20px;" > < center > < h1 style = "color:green;" > w3wiki </ h1 > < h3 style = "border:2px solid black;" > A computer science portal for Beginner </ h3 > </ center > </ body > </ html > |
SASS Code:
$header-margin-bottom: 0.5rem; h3 { margin-bottom:$header-margin-bottom; }
Compiled CSS Code:
h3 { margin-bottom: 0.5rem; }
Output:
Example 2: In the below code, we will make use of the above variable to demonstrate the use of base typography.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < link rel = "stylesheet" href = "style.css" > <!-- Compressed CSS --> < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" > </ head > < body style = "margin:20px;" > < center > < h1 style = "color:green;" > w3wiki </ h1 > < h3 >A computer science portal for Beginner</ h3 > </ center > </ body > </ html > |
SASS Code:
$header-styles: 24px; h1 { font-size:$header-styles; }
Compiled CSS Code:
h1 { font-size: 24px; }
Output:
Reference: https://get.foundation/sites/docs/typography-base.html#sass-reference
Contact Us