In this chapter, we will study about Global Styles. The global CSS of Foundation framework includes useful resets that makes sure styling 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 like links 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 here.
SASS Reference
Variables
The following table lists 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-widthIt represents the site’s global width. Used to determine the grid’s row width. | Number | rem-calc(1200) |
| 2 | $global-font-sizeIt represents the font size applied to <html> and <body>. It is set 100% by default and the user’s browser settings value will be inherited. | Number | 100% |
| 3 | $global-lineheightIt represents all types of default line height. $global-lineheight is 24px while $global-font-size set to 16px. | Number | 1.5 |
| 4 | $primary-colorIt gives color to the interactive components such as links and buttons. | Color | #2199e8 |
| 5 | $secondary-colorIt is used with components, which support .secondary class. | Color | #777 |
| 6 | $success-colorIt represents the positive status or action when used with .success class. | Color | #3adb76 |
| 7 | $warning-colorIt represents a caution status or action when used with .warning class. | Color | #ffae00 |
| 8 | $alert-colorIt represents a negative status or action when used with .alert class. | Color | #ec5840 |
| 9 | $light-grayIt is used for light gray UI items. | Color | #e6e6e6 |
| 10 | $medium-grayIt is used for medium gray UI items. | Color | #cacaca |
| 11 | $dark-grayIt is used for dark gray UI items. | Color | #8a8a8a |
| 12 | $blackIt is used for black UI items. | Color | #0a0a0a |
| 13 | $whiteIt is used for white UI items. | Color | #fefefe |
| 14 | $body-backgroundIt represents the background color of the body. | Color | $white |
| 15 | $body-font-colorIt represents the text color of the body. | Color | $black |
| 16 | $body-font-familyIt represents the list of fonts of the body. | List | ‘Helvetica Neue’, Helvetica, Roboto, Arial, sans-serif |
| 17 | $body-antialiasedAntialiased 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-marginIt represents the global margin value on components. | Number | 1rem |
| 19 | $global-paddingIt represents global padding value on components. | Number | 1rem |
| 20 | $global-marginIt represents global margin value used between components. | Number | 1rem |
| 21 | $global-weight-normalIt represents global font weight for normal type. | Keyword or Number | normal |
| 22 | $global-weight-boldIt represents global font weight for bold type. | Keyword or Number | bold |
| 23 | $global-radiusIt represents the global value of all elements which has a border radius. | Number | 0 |
| 24 | $global-text-directionIt sets the text direction of the CSS to ltr or rtl | ltr |
Leave a Reply