Skip to content

@cossssmin cossssmin released this Sep 26, 2018

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.


  • 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


  • New breakpoint (max-width: 730px), for landscape phones. Column widths stay the same as for desktop, but container is forced to 100% width


  • 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


  • Double <head> hack for Yahoo! on mobile
Assets 2

@cossssmin cossssmin released this Nov 24, 2017

Pine v2.0.0 is a complete rewrite of the framework. It is not backwards-compatible with v1.x.x.


  • Accessibility features
    • <title> tag
    • role="presentation" attribute on all tables
    • Golden ratio typography, for more legible emails
    • aria-hidden="true" for UI elements, such as the hamburger menu icon
  • Body background images for Outlook
  • Left/right element alignment for mobile
  • Gmail iOS hack to force viewport width to 100%
  • Empty <head> hack for responsive support in Yahoo! apps
  • Flexible, Bootstrap 4-inspired mobile padding utility classes
  • New custom mobile stacking class, that always stays at the top
  • Container table and responsive reset: new, 700px wide table, that holds Row tables


  • Documentation
  • Typography reset
  • Row tables HTML structure
  • Markup for all components
  • Boxes components are now Alerts
  • Column table cells: now using <td>
  • Simplified navigation component CSS
  • Simplified reverse mobile stacking CSS
  • no-border-on-mobile is now borderless-sm
  • Spacer and Divider now share the same responsive CSS resets
  • Made hamburger menus and accordions CSS more simple and reusable
  • Column gutters approach: now using 10px on each side of every column
  • Almost all responsive CSS classes: using a Bootstrap 4-inspired naming convention
  • Moved some typography resets to the <body> tag, so they no longer get inlined all over the place


  • Row Divider component
  • Collapsed grid examples
  • row class on Row tables
  • Responsive margin helpers
  • Row table nesting CSS resets for mobile
  • /css, /design-patterns, and /img folders
  • Android 4.4 and lower support: moving to <td> instead of <th> for columns
Assets 2

@cossssmin cossssmin released this Nov 3, 2017


  • This changelog
  • cellspacing="0" on all tables
  • Meta tag to prevent iOS 11 Mail message reformatting (zoomed-out layout)


  • Documentation
  • Typography reset
  • Responsive image CSS
  • Nested row tables width reset
  • Renamed the 'Standard' grid to 'Boxed'
  • Moved inline min-width wrapper table style to embedded CSS
  • Moved inline position style for hamburger menus to embedded CSS
  • Simplified spacers and dividers: removed inline font-size and mso-line-height-rule styles (the latter has been moved to embedded CSS)


  • hamburger menu icon hack
Assets 2

@cossssmin cossssmin released this May 17, 2017

🌲Initial release.

Assets 2
May 7, 2017


.mobile-full-width class should override any inline width.