Foundation for Emails v2.4.0

Join us on our Discussions Board. This is a great place to ask questions and interact with your fellow Foundation users.

Check out the details of this release below:

Featured Enhancements

• 🚀 Dart SASS is now used as the primary style parser!
• 🚀 New text size classes
  • text-xs
  • text-sm
  • text-lg
  • text-xl
  • text-xxl
• 🚀 New $callout-padding-small configuration

Bug Fixes

• 🐛 Many dependencies updated to keep up with that dep train
• 🐛 Fixed Outlook bug with p margins
• 🐛 Don't collapse columns with large-offset
• 🐛 Fix button width in Outlook's "View in Browser"
• 🐛 Fix valign attribute not respected
• 🐛 Fix center alignment on menus

Full Release Compare

Contributors

Thanks to those who contributed code or documentation to this release. Foundation wouldn't happen without you!

• @joeworkman
• @bobmaerten
• @DanielRuf
• @MostafaNawara
• @Stadly
• @jimmaclean
• @VladimirValov
• @markokajzer
• @nikitasol
• @jjonescz
• @damongolding
• @putzwasser
• @jsit

v2.3.1

• Updated supercollider config reference to point to actual marked renderer.
• Update Foundation package dependencies

v2.3.0

Foundation for Emails v2.3.0 is the first release in over 4 years! This merges in a bunch of changes from over the years and updates the underlying libs.

Full Release Compare

I want to give a huge thank you to everyone that contributed. There were almost 40 developers that contributed small fixes over the past 4 years. This release should allow us to start a new foundation for future releases.

Version 2.2.1 — Sand Pond

Just one important commit on this release!

Adds Ruby Gem Scaffold and ReadMe

---

Sand Pond Lake

Located in the Lakes Basin Recreation Area and within view of the majestic Sierra Buttes, Sand Pond is a popular Tahoe National Forest day use area. Whether you're looking for swimming, wading, picnicking, or hiking, Sand Pond is a unique place to relax and spend an enjoyable afternoon.

Version 2.2.0 — Bismarck

Another deep release, from new implementations, features, and bug fixes.

General

We skipped ahead to 2.2 from 2.1 because there were so many great features jammed into this release!

Running a Ruby environment? Now you can use Foundation for Emails Gem and Inky-rb in your Rails asset pipeline!

Features

• Rails version if Inky! Inky.rb - foundation/inky#33
• Rails version of Foundation for Emails!
• Buttons can now have target attributes - foundation/inky#42
• You can now vertically align content in columns and Source order - HTML attributes can now be passed to row’s and columns - foundation/inky#45
• Spacer height can now be controlled by media query in HTML - foundation/inky#36 Thanks to @ethanmay
• Added data-attribute no-expander to to disable the .expander - foundation/inky#29
• Preheader is now a typography feature and supported in ZURB Stack - cd44785
• Menu items can now have target attributes - foundation/inky#54 fixes #465
• <raw> Inky tag to ignore parsing handlebars and other things that should not be changed - foundation/inky#28
• Buttons can now expand on the small breakpoint only - 92528bf
• Radius class for container - 17b8905
• Adds .small-expanded image class to make images 100% width on small

Bug fixes

• Prevents character encoding in many places - foundation/inky#37
• Fixes docs code indentation - 3a8f77a
• Updates fluid header docs example - cc2c8fa
• Remove !important on image declaration for small screens - a76d810
• Fixes incorrect visibility display property on large screens - f24fe73
• Adds missing warning color to buttons - 5a1190b
• General cleanup of typography SCSS - #468
• Fix img height for visibility classes - #350
• Adds default spacer size if none is specified - foundation/inky@c17a914
• Fixes Babel error message when running project - foundation/foundation-emails-template@82bd6b7

If you're into seeing all the commits, you'll find them here: v2.1.0...v2.2.0

Migration

In order to be able to use Foundation for Sites and Emails together without conflicts, the Foundation for Emails CSS file’s name has changed.

If you are using the CSS version you can make the change below:
Instead of being named foundation.min.css it is now foundation-emails.min.css

Sass Settings Changes

• Added $container-radius: 0; variable
• Moved global-font-color: $black; and $body-font-family: Helvetica, Arial, sans-serif; from global section to typography section
• Changed $hr-border: 1px solid $black; to match browser/email client defaults
• Changed $body-line-height: $global-line-height; from a hard coded px value

Check out the committed changes.

Contributors

Here are the folks who made this release possible. If you want to contribute, check out our contributing page on the Foundation site, or browse the help wanted issue tag on GitHub.

• Karthik K - @imkarthikk
• Ethan May - @ethanmay
• Marcus Bointon - @Synchro
• Antonin Cezard
• Krielkip
• Some Web Media - @somewebmedia
• Hugo Giraudel - @hugogiraudel
• Benjamin - @panyamin
• Tom Stock - @tomstock1337
• Andrei Brumaru - @AndreiBru
• Sankalp Agrawal - @iamsankalp
• Ricky Sullivan - @rickysullivan
• Brandon Barringer - @brandonbarringer
• Marc Solèr
• Stephen Rust - @StephenRust
• Jay Sitter
• Myles Cowper-Coles - @mylescc
• Clement Paris - @ClementParis016
• Rafal Proszowski
• Rafi Benkual - @rafibomb
• Kevin Ball - @kball
• Tim Hartwick - @tdhartwick

*The Bismarck Sea lies in the southwestern Pacific Ocean to the north of the island of Papua New Guinea and to the south of the Bismarck Archipelago and Admiralty Islands. Like the Bismarck archipelago, it is named in honor of the German chancellor Otto von Bismarck. The Bismarck archipelago extends round to the east and north of the sea, enclosing the Bismarck Sea and separating it from the Pacific Ocean. To the south it is linked to the Solomon Sea by the Vitiaz Strait. It was the site of a major Japanese naval defeat in the Battle of the Bismarck Sea during World War II on 3 and 4 March 1943.

Version 2.0.1 — Gulf of California

• Fixed expanded buttons not working in Outlook 2007, 2010, and 2013.

The Gulf of California is one of the smallest seas in the world. Fitting for this release, huh?

Version 2.0.0 — Caspian

This is it! Version 2.0.0 of Foundation Emails supercharges the original Ink with a Sass codebase, a full email development boilerplate, and Inky, a new templating language for writing HTML emails faster.

How to Get Started

Like with Foundation for Sites, we have a CSS version and Sass version of the framework. The CSS version is the fastest way to get started, but the Sass version gives you the power of a full Gulp build system for development.

We've got full tutorials for both flavors of the framework:

• Check out the CSS tutorial here.
• Check out the Sass tutorial here. Requires Node.js to be installed.

Changes since 2.0.0 RC4

• Finished thumbnail styles.
• Correctly added bottom margins to callouts.
• Fix min-width calculation for <center> tags.
• Fix issues with vertical menus in some clients.
• Added an inner class to .callout to fix various issues.
• Properly sent font color of buttons in Gmail.
• Fix centered buttons not working.

Did you know? The Caspian Sea is the largest inland body of water on Earth. It's also home to lil ol' Caspian Seals. We strongly recommend Googling images of them.

Version 2.0.0 RC4

• Centering classes were reworked to match the naming of Foundation for Sites. .text-center applies center alignment to text, and .float-center centers an element using margin: 0 auto.
• Correctly remove padding on nested columns.
• Fix the CSS for centering <img> elements.
• Fix use of the <center> tag inside of a column.
• Fix border and margin issues on buttons.
• Make visibility classes work better in Yahoo! Mail.
• Fix incorrect background color on .secondary buttons.
• Fix the hover state of .success buttons not working.
• Use <th> instead of <td> for callouts, to fix issues with callouts and the grid interacting.
• Fix the menu's .small-vertical class not working in some clients.
• Prevent the grid .collapse class from cascading to nested grids.
• Reworked the markup of menus to fix display issues in Outlook.
• Removed the padding from menus to make them work more like inline lists.
• Removed the .simple class from menus.

Version 2.0.0 RC3

• Many settings variables had their names changed to make things more consistent with Foundation for Sites. You might want to update your settings file to match the most recent one.
• The starter project template was updated to change the injection point for inline styles, to be in the <body> instead of the <head>.
• Updated the CSS for expanded buttons to fix bugs in a few email clients.
• Fixed grid offsets being incorrectly calculated.
• Removed a bunch of placeholder test CSS from the final foundation.css.

Version 2.0.0 RC2

• Fixed buttons always being 100% width.
• Fixed expanded buttons not displaying properly.