The goal of this project is to build a library that matches the Bootstrap 4 API. It has two parts, a compiler that takes regular HTML with bootstrap classes and compiles it into tables and layout the works in email, and CSS that work with those layouts and inlined to give consistent performance and appearance across email clients.
This project is still under development and looking for contributors willing to help however they can. I'm excited about this <3
(color) in these examples is primary, secondary, success, warning, danger, light, and dark
- Alerts:
.alert,.alert-{color} - Badges:
.badge,.badge-{color},.badge-pill - Buttons:
.btn,.btn-{color},.btn-outline-{color} - Cards:
.card,.card-body - Color:
.text-{color},.bg-{color} - Containers:
.container,.container-fluid - Floats:
.float-left,.float-right - Grid:
.row,.col-{1-12},.col-lg-{1-12} - Hrs:
<hr> - Spacing:
.p{tlbrxy}-{lg-}{0-5},.m{tby}-{lg-}{0-5},.s-{lg-}{0-5},w-{lg-}{25,50,75,100},mx-auto - Tables:
.table,.table-striped,.table-bordered,.thead-light,.thead-dark,.table-{color},.table-dark - Typography:
<h1>,<h2>,<h3>,<h4>,<h5>,<h6>,<strong>,<u>,<em>,<s>,.text-left,.text-center,.text-right
- Visibility:
.d-desktop,.d-mobile
- width and height of images must be set to ensure proper rendering in outlook.
- an anchor tag must have a link in the href (not just a #) for it to properly render a .btn.
- Line height should always be in px never a number or percentage. https://www.marketingcloud.com/blog/design-tip-of-the-week-css-line-height-property-does-it-work-in-email/
- Padding can only be used inside of a table cell.
- Margin can only be used on divs.
- Font family is reset at the top of every new table.
- Responsive media query for stacking table cells with display block only works on Android in table header
<th>cells and not table cells<td>. - To make a table width 100% BOTH the table and the td tags must be set to 100%
- Many Outlook versions ignore css that has
important!.