This release adds major changes to how CSS resets, typography, spacing, and components work in Pine. It is inspired by the approach in our Acorn framework.
Highlights
- Smarter CSS resets => less inlined styles when your ESP does automatic inlining
- Better button visuals for Outlook: using
mso-padding-alt
to keep the looks consistent with more modern email clients - More flexible mobile spacing utilities
- Spacers and Dividers also allow for more control on mobile
- New breakpoint for landscape phones
- Better image resets
Added
- New breakpoint (
max-width: 730px
), for landscape phones. Column widths stay the same as for desktop, but container is forced to 100% width
Updated
- All examples and components, to use the new CSS
- Outlook VML backgrounds - not using
<v:fill>
anymore (not needed for them to work) - Spacers now use
‌
instead of
- Spacers on mobile are reset to zero-height. Use the new mobile spacing utilities to define how high a spacer should be on mobile (up to 60px)
- Renamed
body-bkg-image.html
example tovml-body-bkg-image.html
Removed
- Double
<head>
hack for Yahoo! on mobile