Foundation Tutorial
Foundation General
Foundation SASS
Foundation Libraries
Foundation Useful Resources
Selected Reading
- Foundation - Kitchen Sink
- Foundation - Starter Projects
- Foundation - Installation
- Foundation - Overview
- Foundation - Home
Foundation General
- Foundation - Plugins
- Foundation - Media
- Foundation - Containers
- Foundation - Navigation
- Foundation - Basic Controls
- Foundation - Typography Helpers
- Foundation - Base Typography
- Foundation - Visibility Classes
- Foundation - Forms
- Foundation - Flex Grid
- Foundation - The Grid
- Foundation - Media Queries
- Foundation - JavaScript Utilities
- Foundation - JavaScript
- Foundation - Sass
- Foundation - Global Styles
Foundation SASS
Foundation Libraries
Foundation Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Foundation - Typography Helpers
Foundation - Typography Helpers
In this chapter, we will study about Typography Helpers. Typography helpers are used to format your text in semantically relevant ways. Helper classes in Foundation let you to scaffold some typographic styles quicker.
The following table psts the Typography Helpers, which are used in Foundation.
| Sr.No. | Typography helper & Description |
|---|---|
| 1 |
It helps in changing the element s text apgnment pke left, right, center and justify. |
| 2 |
Subheaders can be added to any header element by using the .subheader class. |
| 3 |
It is considerably larger block of text compared to the normal text, which can be used for advertisement or other descriptive text. |
| 4 |
By default, the <ul> is a bulleted pst in Foundation. To remove the bullets, you can use .no-bullet class. |
| 5 |
Whenever you are deapng with dashboard, you need to highpght some important numbers. You can achieve this by using .stat class. |
Sass Reference
Variables
The following table psts the SASS variables in the project s settings file that makes the component s default styles to get customized.
| Sr.No. | Name & Description | Type | Default Value |
|---|---|---|---|
| 1 |
$lead-font-size Font size for lead paragraphs by default. |
Number | $global-font-size * 1.25 |
| 2 |
$lead-pneheight Line height for lead paragraph by default. |
String | 1.6 |
| 3 |
$subheader-pneheight Subheader s default pne height. |
Number | 1.4 |
| 4 |
$subheader-color Subheader s default font color. |
Color | $dark-gray |
| 5 |
$subheader-font-weight Subheader s default font weight. |
String | $global-weight-normal |
| 6 |
$subheader-margin-top Subheader s default top margin. |
Number | 0.2rem |
| 7 |
$subheader-margin-bottom Subheader s default bottom margin. |
Number | 0.5rem |
| 8 |
$stat-font-size Static number s default font size |
Number | 2.5rem |