Formed in 2009, the Archive Team (not to be confused with the archive.org Archive-It Team) is a rogue archivist collective dedicated to saving copies of rapidly dying or deleted websites for the sake of history and digital heritage. The group is 100% composed of volunteers and interested parties, and has expanded into a large amount of related projects for saving online and digital history.
This fork is no longer supported. Please consider using Acorn instead.
Pine Slim - Email Framework
A lighter version of the Pine Email Framework, by ThemeMountain.
Features
- Compatible with major email clients, thoroughly tested
- Responsive, 6 column grid
- Interactive components (hamburger menu, accordions)
- Outlook & Windows 10 Mail background image support
- Retina image support
- Mobile breakpoint column sizes and offsets
- Alignment and visibility helpers
- Reverse column stacking on mobile
Documentation
With the exception of the grid (number of columns, width, column nesting, and mobile classes), the same documentation for the Pine Email Framework applies to Pine Slim, too.
What's different?
This fork changes the grid system in Pine, from 12 to only 6 columns.
6 Column Grid
Pine Slim uses a 6 column grid that is 640px wide. You can check grid column widths and examples in the grid folder.
Here's a visual representation of the grid in Pine Slim:
Column side padding is the same (10px on each side for inner columns, 30px on the left/right of the first/last columns).
This new grid changes the .row table widths, as well as the @media breakpoint:
| Pine | Pine Slim |
|---|---|
| .row {width: 700px;} | .row {width: 640px;} |
| @media only screen and (max-width: 699px) | @media only screen and (max-width: 639px) |
Mobile Grid Classes
Since the grid is different in Pine Slim, the mobile width and offset classes are also different. Not only are there fewer classes, but they're also spelled out, to avoid confusion.
Mobile Width Classes
| Pine | Pine Slim |
|---|---|
|
|
Mobile Offset Classes
| Pine | Pine Slim |
|---|---|
|
|
Column Nesting
Column nesting is simplified in Pine Slim, meaning you no longer need to use the .has-columns class on a .column table that holds other columns. This changes the CSS as follows:
1. This is removed
.has-columns {
padding-right: 20px !important;
padding-left: 20px !important;
}
.has-columns .column {
padding-right: 10px !important;
padding-left: 10px !important;
}
2. The .column CSS changes:
| Pine | Pine Slim |
|---|---|
|
|
3. Immediately after the .column class, this is being added:
.column .column {
padding-right: 10px !important;
padding-left: 10px !important;
}
Issues
If you found a bug in Pine Slim, please open an issue.
In The Wild
Are you or your organization using Pine for your email templates? Let me know, and I'll add your logo to the official Pine repository.