Foundation - Global Styles


Advertisements


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.

S.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 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-lineheight

It represents all types of default line height. $global-lineheight is 24px while $global-font-size set to 16px.

Number 1.5
4

$primary-color

It gives color to the interactive components such as links 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

$light-gray

It is used for light 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 list of fonts of the body.

List 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif
17

$body-antialiased

Antialiased 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


Advertisements
E-Books Store