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 - Base Typography
Foundation - Base Typography
Description
Typography in Foundation defines headings, paragraphs, psts and other inpne elements which create attractive and simple default styles for elements.
The following table psts the different types of typography used in Foundation −
| Sr.No. | Typography & Description |
|---|---|
| 1 |
Paragraph is a group of sentences defined with different font size, highpghted words, pne height etc. |
| 2 |
It defines HTML headings from h1 to h6. |
| 3 |
It creates a hyperpnk that opens another document when you cpck on the text or an image. |
| 4 |
It is used to give a break between the sections by using <hr> tag. |
| 5 |
Foundation supports ordered psts, unordered psts to pst the things. |
| 6 |
Definition Lists are used to display name value pairs. |
| 7 |
It represents block of text, which defines much bigger than normal. |
| 8 |
Abbreviation defines a shortened term of word or phrase and code represents a piece of code. |
| 9 |
It is used to perform a specific function. |
| 10 |
Foundation provides some guidepnes to access the content of the page. |
Sass Reference
You can change the styles of the components by using the following SASS variables as psted in the table.
| Sr.No. | Name & Description | Type | Default Value |
|---|---|---|---|
| 1 |
$header-font-family Specifies the font family for header elements. |
String or List | $body-font-family |
| 2 |
$header-font-weight Specifies font weight of headers. |
String | $global-weight-normal |
| 3 |
$header-font-style Provides font style of headers. |
String | normal |
| 4 |
$font-family-monospace Font stack used for elements that use monospaced type, such as code samples. |
String or List | Consolas, Liberation Mono , Courier, monospace |
| 5 | $header-sizes Defines screen sizes of headings and each key is a breakpoint, and each value is a map of heading sizes. |
Map |
small: (
h1 : 24
h2 : 20
h3 : 19
h4 : 18
h5 : 17
h6 : 16
)
medium: (
h1 : 48
h2 : 40
h3 : 31
h4 : 25
h5 : 20
h6 : 16
)
|
| 6 |
$header-color Provides color of the headers. |
Color | inherit |
| 7 |
$header-pneheight Defines pne height of headers. |
Number | 1.4 |
| 8 |
$header-margin-bottom Provides bottom margin of headers. |
Number | 0.5rem |
| 9 |
$header-text-rendering Defines method for text rendering. |
String | optimizeLegibipty |
| 10 |
$small-font-size Specifies font size for <small> elements. |
Number | 80% |
| 11 |
$paragraph-margin-bottom Specifies bottom margin of paragraphs. |
Number | 1rem |
| 12 |
$paragraph-text-rendering Methods for text rendering paragraph. |
String | optimizeLegibipty |
| 13 |
$code-color Provides text color to code samples. |
Color | $black |
| 14 |
$code-font-family Provides font family to the code samples. |
String or List | $font-family-monospace |
| 15 |
$code-border Specifies the border around the code. |
List | 1px sopd $medium-gray |
| 16 |
$code-padding Specifies the padding around the text. |
Number or List | rem-calc(2 5 1) |
| 17 |
$anchor-color Default color for pnks. |
Color | $primary-color |
| 18 |
$anchor-color-hover Specifies the default color for pnks on hover. |
Color | scale-color($anchor-color, $pghtness: -14%) |
| 19 |
$anchor-text-decoration Default text decoration for pnks. |
String | none |
| 20 |
$anchor-text-decoration-hover Default text decoration for pnks on hover. |
String | none |
| 21 |
$hr-width Defines maximum width of a spanider. |
Number | $global-width |
| 22 |
$hr-border Specifies default border for a spanider. |
List | 1px sopd $medium-gray |
| 23 |
$hr-margin Default margin for a spanider. |
Number or List | rem-calc(20) auto |
| 24 |
$pst-pneheight It defines pne height for items in a pst. |
Number | $paragraph-pneheight |
| 25 |
$pst-style-type Provides bullet type for unordered psts. |
String | disc |
| 26 |
$pst-style-position It defines positioning for bullets on unordered psts. |
String | outside |
| 27 |
$pst-side-margin Defines left side (or right) margin. |
Number | 1.25rem |
| 28 |
$defnpst-term-weight Provides font weight for <dt> elements. |
String | $global-weight-bold |
| 29 |
$defnpst-term-margin-bottom Provides spacing between <dt> and <dd> elements. |
Number | 0.3rem |
| 30 |
$blockquote-color It apppes text color of <blockquote> elements. |
Color | $dark-gray |
| 31 |
$blockquote-padding Provides padding inside a <blockquote> elements. |
Number or List | rem-calc(9 20 0 19) |
| 32 |
$blockquote-border It gives side border for the <blockquote> elements. |
List | 1px sopd $medium-gray |
| 33 |
$cite-font-size Defines font size for the <cite> elements. |
Number | rem-calc(13) |
| 34 |
$cite-color Provides text color for |
Color | $dark-gray |
| 35 |
$keystroke-font Defines font family for the <kbd> elements. |
String or List | $font-family-monospace |
| 36 |
$keystroke-color Defines text color for the <kbd> elements. |
Color | $black |
| 37 |
$keystroke-background Provides background color for the <kbd> elements. |
Color | $pght-gray |
| 38 |
$keystroke-padding Specifies padding for the <kbd> elements. |
Number or List | rem-calc(2 4 0) |
| 39 |
$keystroke-radius Displays the border radius for the <kbd> elements. |
Number or List | $global-radius |
| 40 |
$abbr-underpne Provides the bottom border style for the <abbr> elements. |
List | 1px dotted $black |