Mailchimp Pattern Library

Our pattern library used to build the Mailchimp application.

Grid System

Our grid system is composed of 8 flexible columns with a gutter between columns of 30px. We apply border-box so that the border and padding is included in the width of the grid columns.

Grid sizes

Size 1 of 1

1 / 1

Size 1 of 2

1 / 2

1 / 2

Size 1 of 3

1 / 3

1 / 3

1 / 3

Size 1 of 4

1 / 4

1 / 4

1 / 4

1 / 4

Size 1 of 8

1 / 8

1 / 8

1 / 8

1 / 8

1 / 8

1 / 8

1 / 8

1 / 8

When using the grid, wrap the columns using a line and use lastUnit for the last column. Refer to OOCSS base classes to learn more about the grid classes.

This example applies to the other ratios we support: 1/1, 1/2, 1/3, 1/4, and 1/8

Grid gutter

Our grid columns have a 15px padding on either side that results in a 30px gutter between columns and a 15px gutter on the grid edges. Even though our columns are fluid, the gutter remains constant.

1 / 3

1 / 3

1 / 3

Mixed grids

The grid layout is easily extended by nesting and mixing different column sizes.

1 / 8

7 / 8

3 / 4

1 / 4

1 / 3

1 / 2

1 / 2

When nesting grids use the group class to eliminate gutters on the parent element of the columns that are being nested.

It provides a padding-less container for nested columns and subsequently, helps avoid the indentation and side-padding issues otherwise seen on nested columns with unit and lastUnit parent classes.

Wherever possible, limit nesting grids to 2 levels deep. Anything more than that would require the use of nopadding on grid columns or units for correct grid alignment and indentation.

Responsive columns

Our different column sizes automatically change dimensions once they reach certain breakpoints. To illustrate, resize your browser window and you will see the grid columns change size.

The following table shows the media-query breakpoints.

Breakpoints
Grids 960px or more Between 960px and 640px 640px or less
size1of8 12.5% 50% 50%
size1of4, size2of8 25% 100% 100%
size1of3 33.33% 100% 100%
size3of8 37.5% 100% 100%
size1of2, size2of4, size4of8 50% 50% 100%
size5of8 62.5% 100% 100%
size2of3 66.67% 100% 100%
size3of4, size6of8 75% 100% 100%
size7of8 87.5% 100% 100%
size1of1, size2of2, size3of3, size4of4, size8of8 100% 100% 100%
Use nochange with size1of2 and size1of3 for halves and thirds at all breakpoints.