Foundation
Jump to Nav

Global Styles

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


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.


Colors

All interactive elements in Foundation, such as links and buttons, use the same color. The default shade of blue you see all over Foundation comes from the $primary-color Sass variable.

Many components can also be colored with four other colors: secondary, alert, success, and warning. Use these colors to give more context to UI elements and actions.

Primary

Secondary

Success

Warning

Alert

White

Light Gray

Medium Gray

Dark Gray

Black


Color Classes

Some components, such as buttons and callouts, have coloring classes, which let you change the color of the element by adding the name of the color as a CSS class.

HTML
<button class="button" href="#">Primary Action</button>
<button class="secondary button" href="#">Secondary Action</button>
<table class="button button">
  <tr>
    <td>
      <table>
        <tr>
          <td><a href="#">Primary Action</a></td>
        </tr>
      </table>
    </td>
  </tr>
</table>
<table class="button secondary button">
  <tr>
    <td>
      <table>
        <tr>
          <td><a href="#">Secondary Action</a></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

DEMO

HTML
<callout class="success">
  <p>Created a new folder. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</callout>
<callout class="alert">
  <p>Error fetching stick. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</callout>
<table class="callout">
  <tr>
    <th class="callout-inner success">
      <p>Created a new folder. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </th>
    <th class="expander"></th>
  </tr>
</table>
<table class="callout">
  <tr>
    <th class="callout-inner alert">
      <p>Error fetching stick. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </th>
    <th class="expander"></th>
  </tr>
</table>

DEMO

Responsive Breakpoint

Unlike Foundation for Sites, the Foundation for Emails CSS is written desktop-first. This is because many older desktop email clients don't support media queries, or <style> tags.

Your email layout shifts from desktop to mobile at 596 pixels. This is the width of the container, plus the width of the gutters around the container. In the Sass version of Foundation, you can change the breakpoint by modifying these variables:

  • $global-width: width of the container. It's 580px by default.
  • $global-gutter: width of the grid gutter. It's padding to space columns away from each other or away from the edges of the container.
  • $global-breakpoint: The breakpoint at which the layout shifts. It's the variable that adds $global-width and $global-gutter together.

Sass Reference

Variables

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

NameTypeDefault ValueDescription
$primary-color Color #2199e8

Primary color for interactive components like links and buttons.

$secondary-color Color #777777

Secondary color, used with components that support the .secondary class.

$success-color Color #3adb76

Color to indicate a positive status or action, used with the .success class.

$warning-color Color #ffae00

Color to indicate a caution status or action, used with the .warning class.

$alert-color Color #ec5840

Color to indicate a negative status or action, used with the .alert class.

$light-gray Color #f3f3f3

Color used for light gray UI items within Foundation.

$medium-gray Color #cacaca

Color used for medium gray UI items within Foundation.

$dark-gray Color #8a8a8a

Color used for dark gray UI items within Foundation.

$black Color #0a0a0a

Color used for black ui items within Foundation

$white Color #fefefe

Color used for white ui items within Foundation

$pre-color Color #ff6908

Color used code.

$global-width Number 580px

Width of the container.

$global-width-small Length 95%

Width of the container on small screens.

$global-gutter length 16px

Gutter for grid elements.

$body-background Length $light-gray

Body background color.

$container-background Color $white

Color for the container background

$global-padding Number 16px

Global padding.

$global-margin Number 16px

Global margin. Margin requires a capital 'M' to workin Outlook.com

$global-radius Number 3px

Global raidus of radius-corners.

$global-rounded Number 500px

Global rounded radius of rounded-corners.

$global-breakpoint String $global-width + $global-gutter

Global media query to switch from desktop to mobile styles.