Global Styles

Our global CSS includes helpful resets to ensure consistent styling across browsers.

Font Sizing

The default font size is set to 100% of the browser style sheet, usually 16 pixels. This ensures compatibility with browser-based text zoom or user-set defaults. If you're using the Sass version of Foundation, edit the $global-font-size variable to change the base font size. This can be a percentage value, or a pixel value.

$rem-base was deprecated in version 6.1, in favor of using $global-font-size to define rem calculation.


Colors

Foundation has an accessible default color palette. The primary color is used for interactive elements, such as links and buttons. The secondary, success, warning, and alert colors are used to give more context to UI elements and actions.

Primary

Secondary

Success

Warning

Alert

White

Light Gray

Medium Gray

Dark Gray

Black


Changing the Color Palette

If you're using the Sass version of Foundation, you can easily change the color palette by editing the variables in your settings file.

The semantic colors (primary, secondary, success, warning, and alert) can be changed in the $foundation-palette map. The keys in this map are referenced by various settings to style components and output alternate class names.

$foundation-palette: (
  primary: #1779ba,
  secondary: #767676,
  success: #3adb76,
  warning: #ffae00,
  alert: #cc4b37,
);

If you remove a default key from $foundation-palette, be sure to edit any variables in your settings file that reference that color.

The named colors (white, light gray, medium gray, dark gray, and black) can be changed in their respective variables

$light-gray: #e6e6e6;
$medium-gray: #cacaca;
$dark-gray: #8a8a8a;
$black: #0a0a0a;
$white: #fefefe;

The line @include add-foundation-colors; in your settings file allows you to use the following Sass variables to reference default colors from the palette:

  • $primary-color
  • $secondary-color
  • $success-color
  • $warning-color
  • $alert-color

You can also use Foundation's get-color() function to reference any color from the palette. This function gives you access to custom colors you've added to the palette.

// Create a variable for my custom color.
$custom-color: get-color(custom);

Sass Reference

Variables

The default styles of this component can be customized using these Sass variables in your project's settings file.

NameTypeDefault ValueDescription
$global-font-size Number 100%

Font size attribute applied to <html> and <body>. We use 100% by default so the value is inherited from the user's browser settings.

$global-width Number rem-calc(1200)

Global width of your site. Used by the grid to determine row width.

$global-lineheight Number 1.5

Default line height for all type. $global-lineheight is 24px while $global-font-size is 16px

$foundation-palette Map primary: #1779ba
secondary: #767676
success: #3adb76
warning: #ffae00
alert: #cc4b37

Colors used for buttons, callouts, links, etc. There must always be a color called primary.

$light-gray Color #e6e6e6

Color used for light gray UI items.

$medium-gray Color #cacaca

Color used for medium gray UI items.

$dark-gray Color #8a8a8a

Color used for dark gray UI items.

$black Color #0a0a0a

Color used for black ui items.

$white Color #fefefe

Color used for white ui items.

$body-background Color $white

Background color of the body.

$body-font-color Color $black

Text color of the body.

$body-font-family List 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif

Font stack of the body.

$body-antialiased Boolean true

Set to true to enable antialiased type, using the -webkit-font-smoothing and -moz-osx-font-smoothing CSS properties.

$global-margin Number 1rem

Global value used for margin on components.

$global-padding Number 1rem

Global value used for padding on components.

$global-position Number 1rem

Global value used for positioning on components.

$global-weight-normal Keyword or Number normal

Global font weight used for normal type.

$global-weight-bold Keyword or Number bold

Global font weight used for bold type.

$global-radius Number 0

Global value used for all elements that have a border radius.

$global-menu-padding Number 0.7rem 1rem

Global value used for all menu styles. Can be overwritten at individual menu component level.

$global-menu-nested-margin 1rem

Global value used for all menu styles. Nested margin for submenu.

$global-text-direction Keyword ltr

Sets the text direction of the CSS. Can be either ltr or rtl.

$global-flexbox Boolean true

Enables flexbox for components that support it.

$global-prototype-breakpoints Boolean false

Enabled responsive breakpoints for prototypes if applicable

$global-color-pick-contrast-tolerance Number 0

Global tolerance for color pick contrast.


Mixins

We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.