4.0 KiB
| title | description | sass |
|---|---|---|
| Global Styles | Our global CSS includes helpful resets to ensure consistent styling across email clients. | scss/_global.scss |
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.
<button class="button" href="#">Primary Action</button>
<button class="secondary button" href="#">Secondary Action</button>
<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>
Responsive Breakpoint
Unlike Foundation for Sites and Apps, 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-widthand$global-guttertogether.