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>

<html>

<head></head>

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

</html>

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>

<html>

<head></head>

<body>
  <table class="callout">
    <tbody>
      <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>
    </tbody>
  </table>
  <table class="callout">
    <tbody>
      <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>
    </tbody>
  </table>
</body>

</html>

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.

Name	Type	Default Value	Description
`$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.
`$global-gutter-small`	length	`$global-gutter`	Gutter for grid elements on small screens.
`$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 radius 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.

Global Styles

Font Sizing

Colors

Color Classes

Responsive Breakpoint

Sass Reference

Variables

ZURB MASTER CLASS Responsive Emails

Foundation for Emails

Want more?

Talk to us

Stay Updated