colette/src/styl/_helpers/_spaces.styl

A CSS and JS starter kit for 20 Minutes web projects

// Spaces
//
// Colette provides a set of margin and padding classes based on the `$grid-gutter` size.
// <br /> Note that `$grid-gutter` value is defined in Colette’s settings, but it can be overridden in your project stylus file.
//
// Margins or paddings are multipliers (from 1 to 6) of the gutter width,
// and can be applied either on top | right | bottom | left | all side(s) of an element.
//
// The suffix of the class names indicates the multiplier of the gutter.
//
// Markup: spaces.twig
//
// .ma1    - Sets `margin` to **1 x gutter size** (also available: `.ma2`, `.ma3`, `.ma4`, `.ma5`, `.ma6`)
// .mt1    - Sets `margin-to` to **1 x gutter size** (also available: `.mr2`, `.mr3`, `.mr4`, `.mr5`, `.mr6`)
// .mr1    - Sets `margin-right` to **1 x gutter size** (also available: `.mr2`, `.mr3`, `.mr4`, `.mr5`, `.mr6`)
// .mb1    - Sets `margin-bottom` to **1 x gutter size** (also available: `.mb2`, `.mb3`, `.mb4`, `.mb5`, `.mb6`)
// .ml1    - Sets `margin-left` to **1 x gutter size** (also available: `.ml2`, `.ml3`, `.ml4`, `.ml5`, `.ml6`)
// .pa1    - Sets `padding` to **1 x gutter size** (also available: `.pa2`, `.pa3`, `.pa4`, `.pa5`, `.pa6`)
// .pt1    - Sets `padding-top` to **1 x gutter size** (also available: `.pa2`, `.pa3`, `.pa4`, `.pa5`, `.pa6`)
// .pr1    - Sets `padding-right` to **1 x gutter size** (also available: `.pr2`, `.pr3`, `.pr4`, `.pr5`, `.pr6`)
// .pb1    - Sets `padding-bottom` to **1 x gutter size** (also available: `.pb2`, `.pb3`, `.pb4`, `.pb5`, `.pb6`)
// .pl1    - Sets `padding-left` to **1 x gutter size** (also available: `.pl2`, `.pl3`, `.pl4`, `.pl5`, `.pl6`)
//
// Styleguide: Helpers.Spaces

/* Set a few default helpers */
for i in (0..6)
    .pa{i}
        _p(i)

    .pt{i}
        _pt(i)

    .pr{i}
        _pr(i)

    .pb{i}
        _pb(i)

    .pl{i}
        _pl(i)

    .ma{i}
        _m(i)

    .mt{i}
        _mt(i)

    .mr{i}
        _mr(i)

    .mb{i}
        _mb(i)

    .ml{i}
        _ml(i)