colette/src/styl/_mixins/_grid.styl

A CSS and JS starter kit for 20 Minutes web projects

// Grid
//
// Colette provides mixins to create custom responsive grid layouts.
//
// Styleguide: Mixins.Grids

// _column(size)
//
// Generate grid columns.
//
// $size         - the number of columns (out of 12) it must span
// $flt = left   - the float direction (if set to `none`, the property won't be output)
//
// Styleguide: Mixins.Grids.column
_column(size, flt=left)
    float unquote(flt) if none != unquote(flt)
    width round(size * 100 / $grid-columns, 3) * 1%


// _offset(size)
//
// Generate an offset left margin, based on column width.
//
// $size    - the number of columns (out of 12) that defines the width of the margin
//
// Styleguide: Mixins.Grids.offset
_offset(size)
    margin-left round(size * 100 / $grid-columns, 3) * 1%


// _gridColumn(breakpoint, size)
//
// Generate grid columns according to breakpoints and media queries defined in settings.
//
// $breakpoint   - the targeted breakpoint
// $size         - the number of columns (out of 12) it must span
//
// Styleguide: Mixins.Grids.gridColumn
_gridColumn(breakpoint, size)
    @media $breakpoints[breakpoint]
        _column(size)