Mailchimp Pattern Library

Our pattern library used to build the Mailchimp application.

Helper Classes

We have a number of helper classes that allow us to quickly style elements throughout the application without adding unnecessary bloat and complexity to our CSS. This also allows us to keep our CSS specificity low.

Spacing

For consistent spacing and to maintain a vertical rhythm, we use a level system for both margin and padding. Padding can be applied by using the classes padding--lv1 through padding--lv8, while margin uses the margin--lv1 through margin--lv8 scale. Use padding--lv0 or margin--lv0 to completely remove any margin or padding from the element.

The ! prefix is a way to indicate !important on the style.

Level 1: 6px

Level 2: 12px

Level 3: 18px

Level 4: 24px

Level 5: 30px

Level 6: 36px

Level 7: 42px

Level 8: 48px

To fine tune the padding and margin for an element, supplement the padding level with the following classes:

  • padding-top--lv0 or margin-top--lv0 for no space on top
  • padding-bottom--lv0 or margin-bottom--lv0 for no space on bottom
  • padding-top-bottom--lv0 or margin-top-bottom--lv0 for no space on top or bottom
  • padding-left--lv0 or margin-left--lv0 for no space on left
  • padding-right--lv0 or margin-right--lv0 for no space on right
  • padding-left-right--lv0 or margin-left-right--lv0 for no space on left or right
  • Below margin helpers:
  • margin-bottom--lv0 for a margin bottom of 0px
  • margin-bottom--lv1 for a margin bottom of 6px
  • margin-bottom--lv2 for a margin bottom of 12px
  • margin-bottom--lv3 for a margin bottom of 18px
  • margin-bottom--lv4 for a margin bottom of 24px
  • margin-bottom--lv5 for a margin bottom of 30px
  • margin-bottom--lv6 for a margin bottom of 36px
  • margin-bottom--lv7 for a margin bottom of 42px
  • margin-bottom--lv8 for a margin bottom of 48px

Typography

Class Description
font-style--italic Bring emphasis through italics
font-style--normal Override established font style
font-weight--light Apply font-weight of 300
font-weight--bold Apply font-weight of 500
text-align--left Align text to the left
text-align--right Align text to the right
text-align--center Align text to the center
text-transform--lowercase Transform all of the text to lowercase
text-transform--uppercase Transform all of the text to uppercase
text-transform--capitalize Capitalize the first letter of each word
text-transform--none Override another text transform to show default
text-decoration--line-through Strike through the text
full-width By default, paragraphs have a max-width of 635px. To override, apply full-width to the <p> tag.

Additional classes related to white space and word wrapping are available such as: white-space--normal, white-space--nowrap, white-space--preline, word-wrap--break-all, and word-wrap--break-word.

Display and visibility

Class name CSS
display--none display: none !important;
display--inline display: inline;
display--inline-block display: inline-block;
display--block display: block;
display--flex display: flex;
display--table display: table;
display--table-cell display: table-cell;
overflow--hidden overflow: hidden
overflow--auto overflow: auto;
overflow--visible overflow: visible !important;
overflow-ellipsis white-space:nowrap; overflow: hidden; text-overflow: ellipsis;
zin-0 z-index: inherit;
zin-lv1 z-index: 1;
zin-lv2 z-index: 10;
zin-lv3 z-index: 100;
zin-lv4 z-index: 1000;
zin-lv5 z-index: 10000;

Responsive Utilities

Class Phone Tablet Desktop
show-phone Visible Hidden Hidden
show-mobile Visible Visible Hidden
hide-phone Hidden Visible Visible
hide-mobile Hidden Hidden Visible
hide-desktop Visible Visible Hidden

Additional responsive classes

Class Description
text-align--left@tablet Align text to the left when at the tablet size. @phone variation is also available.
width--100@tablet width: 100%; when at the tablet size. @phone variation is also available.
padding--lv0@xltablet padding: 0; when at the large tablet size. @tablet and @phone variations are also available.
margin--lv0@xltablet margin: 0; when at the large tablet size. @tablet and @phone variations are also available.