Pantheon

Breakpoint

Mixins

@mixin is-plan($columns, $padding: false)

@mixin is-column($bps…)

@mixin has-offset($bps…)

@mixin has-padding($padding)

Mixed sized column

m 4

Do nisi culpa sit qui sed aliquip dolor sit aliqua proident ex ut aute quis commodo dolor Duis id eu tempor laborum irure culpa incididunt.

m 2, xl 1

Magna reprehenderit commodo aliqua cupidatat ut qui elit cupidatat amet tempor anim culpa culpa aute pariatur sit laboris officia esse velit dolor dolor ad irure dolore sit dolor tempor nulla ex est pariatur quis non veniam reprehenderit enim.

m 2, xl 1

Ullamco eiusmod occaecat velit quis esse pariatur ut incididunt ullamco eiusmod aute Excepteur voluptate proident magna labore est esse do laborum enim commodo est adipisicing sit adipisicing esse dolor.

m 2, xl 1

Pariatur laborum adipisicing minim sint irure anim elit Duis nostrud culpa exercitation fugiat sint occaecat dolor et quis officia proident amet veniam officia.

m 2, xl 1

Adipisicing ut cupidatat adipisicing do dolore cupidatat dolore dolor reprehenderit esse qui laboris Duis ex voluptate fugiat laboris ullamco voluptate fugiat cupidatat nulla dolor in nostrud commodo commodo ex ad est dolore.

Offsets

Demo

m 1

No offset

m 1 1

Offset of one column.

Usage

Offsets allows us to create column-width gaps without having to add empty elements.

Offsets can be added explicitly with the has-offset mixin, or using the shorthand in is-column.

The has-offset mixin takes similar parameters to is-column. It accepts a comma-separated list of breakpoints. The first item is the breakpoint name and the second argument is the number of columns to offset.

.column {
    @include is-column(m 1);
    @include has-offset(m 1);
}

Or using the short-hand:

.column {
    @include is-column(m 1 1);
}

Offsets are inherited by subsequent breakpoints and must be overridden when no longer desired. For example, to set a offset on the medium breakpoint and remove on large, we would write:

@include is-column(m 1 1, l 1 0);

Padding

Demo

Column
Column
Column
Column
Column
Column

Usage

It is often not desirable to have columns that are flush against each-other. Padding can be adding to the plan using the has-padding mixin within the is-plan scope. Subsequent calls to is-column will automatically use the padding defined in the plan.

In the demo above, 20px of spacing has been added:

@include is-plan(6) {
    @include has-padding(20px);
    …
}

Padding can also be added via a shorthand on the is-plan mixin:

@include is-plan(6, 20px) {
    …
}

Any unit can be used as padding, i.e. px or em (although using a % is counter-intuitive). Be careful, padding works by adding a negative margin to the containing element. Overriding the left\right margin will result in overflow issues.