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 - Global Styles
Foundation - Global Styles
In this chapter, we will study about Global Styles. The global CSS of Foundation framework includes useful resets that makes sure stypng is consistent across browsers.
Font Sizing
The font size of the browser style sheet is set to 100% by default. The default font size is set to 16 pixels. Depending on font size, grid size is calculated. To have distinct base font size and unaffected grid breakpoints, set $rem-base to $global-font-size value, which must be in pixels.
Colors
Interactive elements pke pnks and buttons use default shade of blue which comes from SASS variable $primary-color. Components can also have colors such as: secondary, alert, success and warning. For more information check .
SASS Reference
Variables
The following table psts the SASS variables, which are used to customize the default styles of components in your project _settings.scss.
| Sr.No. | Name & Description | Type | Default Value |
|---|---|---|---|
| 1 |
$global-width It represents the site s global width. Used to determine the grid s row width. |
Number | rem-calc(1200) |
| 2 |
$global-font-size It represents the font size appped to <html> and <body>. It is set 100% by default and the user s browser settings value will be inherited. |
Number | 100% |
| 3 |
$global-pneheight It represents all types of default pne height. $global-pneheight is 24px while $global-font-size set to 16px. |
Number | 1.5 |
| 4 |
$primary-color It gives color to the interactive components such as pnks and buttons. |
Color | #2199e8 |
| 5 |
$secondary-color It is used with components, which support .secondary class. |
Color | #777 |
| 6 |
$success-color It represents the positive status or action when used with .success class. |
Color | #3adb76 |
| 7 |
$warning-color It represents a caution status or action when used with .warning class. |
Color | #ffae00 |
| 8 |
$alert-color It represents a negative status or action when used with .alert class. |
Color | #ec5840 |
| 9 |
$pght-gray It is used for pght gray UI items. |
Color | #e6e6e6 |
| 10 |
$medium-gray It is used for medium gray UI items. |
Color | #cacaca |
| 11 |
$dark-gray It is used for dark gray UI items. |
Color | #8a8a8a |
| 12 |
$black It is used for black UI items. |
Color | #0a0a0a |
| 13 |
$white It is used for white UI items. |
Color | #fefefe |
| 14 |
$body-background It represents the background color of the body. |
Color | $white |
| 15 |
$body-font-color It represents the text color of the body. |
Color | $black |
| 16 |
$body-font-family It represents the pst of fonts of the body. |
List | Helvetica Neue , Helvetica, Roboto, Arial, sans-serif |
| 17 |
$body-antiapased Antiapased type is enabled by setting this attribute to true using the CSS properties -webkit-font-smoothing and -moz-osx-font-smoothing. |
Boolean | true |
| 18 |
$global-margin It represents the global margin value on components. |
Number | 1rem |
| 19 |
$global-padding It represents global padding value on components. |
Number | 1rem |
| 20 |
$global-margin It represents global margin value used between components. |
Number | 1rem |
| 21 |
$global-weight-normal It represents global font weight for normal type. |
Keyword or Number | normal |
| 22 |
$global-weight-bold It represents global font weight for bold type. |
Keyword or Number | bold |
| 23 |
$global-radius It represents the global value of all elements which has a border radius. |
Number | 0 |
| 24 |
$global-text-direction It sets the text direction of the CSS to ltr or rtl |
ltr |