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) ‘h2’: (‘font-size’: 20) ‘h3’: (‘font-size’: 19) ‘h4’: (‘font-size’: 18) ‘h5’: (‘font-size’: 17) ‘h6’: (‘font-size’: 16) ) medium: ( ‘h1’: (‘font-size’: 48) ‘h2’: (‘font-size’: 40) ‘h3’: (‘font-size’: 31) ‘h4’: (‘font-size’: 25) ‘h5’: (‘font-size’: 20) ‘h6’: (‘font-size’: 16) )
$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;">
             GeeksforGeeks
        </h1>
        <h3 style="border:2px solid black;">
             A computer science portal for geeks
        </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;">
           GeeksforGeeks
        </h1>
        <h3>A computer science portal for geeks</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