Releases: ThemeMountain/pine
Releases · ThemeMountain/pine
v2.1.0
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-altto 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.htmlexample tovml-body-bkg-image.html
Removed
- Double
<head>hack for Yahoo! on mobile
v2.0.0
Pine v2.0.0 is a complete rewrite of the framework. It is not backwards-compatible with v1.x.x.
Added
- Accessibility features
<title>tagrole="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
Updated
- 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-mobileis nowborderless-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
Removed
- Row Divider component
- Collapsed grid examples
rowclass on Row tables- Responsive margin helpers
- Row table nesting CSS resets for mobile
/css,/design-patterns, and/imgfolders- Android 4.4 and lower support: moving to
<td>instead of<th>for columns
v1.0.1
Added
- This changelog
cellspacing="0"on all tables- Meta tag to prevent iOS 11 Mail message reformatting (zoomed-out layout)
Updated
- 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
positionstyle for hamburger menus to embedded CSS - Simplified spacers and dividers: removed inline
font-sizeandmso-line-height-rulestyles (the latter has been moved to embedded CSS)
Removed
- Outlook.com hamburger menu icon hack