Foundation CSS Typography Helpers Sass Reference

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:

Example 1: In the below code we will make use of the above variable to demonstrate the use of the Typography Helpers.

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.

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

krishna_97

Follow

Improve

Article Tags :

• CSS
• Web Technologies
• Foundation
• Foundation-Typography