Skip to content

v2.1.0

Latest
Compare
Choose a tag to compare
@cossssmin cossssmin released this 26 Sep 11:57
· 5 commits to master since this release
68ae4c2

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 &zwnj; instead of &nbsp;
  • 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 to vml-body-bkg-image.html

Removed

  • Double <head> hack for Yahoo! on mobile