Foundation CSS Typography Helpers Sass Reference
Last Updated :
08 Sep, 2022
Foundation CSS is one of the most popular front-end frameworks used by developers to design websites. It has several valuable components to make the website look more professional and user-friendly. One such component is the Typography helper. On every website, typography is an essential thing.
The typography helper component has classes that help us scaffold certain typographic styles better.
In this article, we will learn about the typography helper component in Foundation CSS.
Variable Used:
| Variable-Name |
Description |
Type |
Default-Value |
| $lead-font-size |
This variable is used to define the default font size for lead paragraphs. |
Number |
$global-font-size * 1.25
|
| $lead-lineheight |
This variable is used to define the default line height for lead paragraphs. |
String |
1.6 |
| $subheader-lineheight |
This variable is used to define the default line-height for subheaders. |
Number |
1.4 |
| $subheader-color |
This variable is used to define the default font color for subheaders. |
Color |
$dark-gray
|
| $subheader-font-weight |
This variable is used to define the default font weight for subheaders. |
String |
$global-weight-normal
|
| $subheader-margin-top |
This variable is used to define the default top margin for subheaders. |
Number |
0.2rem |
| $subheader-margin-bottom |
This variable is used to define the default bottom margin for subheaders. |
Number |
0.5rem |
| $stat-font-size |
This variable is used to define the default font size for statistic numbers. |
Number |
2.5rem |
| $cite-color |
This variable is used to define the Text color for the .cite-block component. |
Color |
$dark-gray
|
| $cite-font-size |
This variable is used to define the font size for the .cite-block component. |
Number |
rem-calc(13)
|
| $cite-pseudo-content |
This variable is used to define the Pseudo content for the .cite-block component. |
String |
‘\2014 \0020’
|
| $code-color |
This variable is used to define the text color of .code-inline and .code-block components. |
Color |
$black
|
| $code-font-family |
This variable is used to define the font family of .code-inline and .code-block components. |
String or List |
$font-family-monospace
|
| $code-font-weight |
This variable is used to define the font weight of the text in the .code-inline and .code-block components. |
String |
$global-weight-normal
|
| $code-background |
This variable is used to define the background color of .code-inline and .code-block components. |
Color |
$light-gray
|
| $code-border |
This variable is used to define the border around .code-inline and .code-block components. |
List |
1px solid $medium-gray
|
| $code-padding |
This variable is used to define the padding around the text of the .code-inline component. |
Number or List |
rem-calc(2 5 1)
|
| $code-block-padding |
This variable is used to define the Padding around the text of the .code-block component. |
Number or List |
1rem |
| $code-block-margin-bottom |
This variable is used to define the margin under the .code-block component. |
Number |
1.5rem
|
Example 1: In the below code we will make use of the above variable to demonstrate the use of the Typography Helpers.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>GeeksforGeeks</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href=
crossorigin="anonymous">
<script src=
crossorigin="anonymous">
</script>
<link rel="stylesheet" href=
</head>
<body style="margin-inline:30rem;">
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>A computer science portal for geeks</h3>
<p class="text-right">
This article is on the topic
Typography helper classes in Foundation CSS. It
is published on the GeeksforGeeks platform. This
article tells us about the different use cases of
Typography helper classes in Foundation CSS. It also
has syntax, full working code example and live output.
</p>
</center>
</body>
</html>
|
SASS Code:
$lead-font-size:30px;
.text-right {
font-size:$lead-font-size ;
}
Compiled CSS Code:
.text-right {
font-size: 30px;
}
Output:
Example 2: In the below code we will make use of the above variable to demonstrate the use of the typography helpers.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>GeeksforGeeks</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href=
crossorigin="anonymous">
<script src=
crossorigin="anonymous">
</script>
<link rel="stylesheet" href=
</head>
<body style="margin-inline:30rem;">
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>A computer science portal for geeks</h3>
<p class="text-right">
This article is on the topic
Typography helper classes in Foundation CSS. It
is published on the GeeksforGeeks platform. This
article tells us about the different use cases of
Typography helper classes in Foundation CSS. It also
has syntax, full working code example and live output.
</p>
</center>
</body>
</html>
|
SASS Code:
$subheader-color:green;
.text-right {
color:$subheader-color;
}
Compiled CSS Code:
.text-right {
color: green;
}
Output:
Reference: https://get.foundation/sites/docs/typography-helpers.html
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...