colette
Version:
A CSS and JS starter kit for 20 Minutes web projects
76 lines (69 loc) • 1.88 kB
text/stylus
// Grid
//
// Colette provides predefined classes to built responsive / 12-columns-based layout.
// Grid classes are set according to:
// - a targeted breakpoint (among those defined in the `$breakpoints` collection),
// - a width, which must correspond to a number of columns (out of 12 from the grid).
//
// <table class="co_table mb2">
// <thead>
// <tr>
// <th>Breakpoint</th>
// <td></td>
// <th>sm</th>
// <th>md</th>
// <th>lg</th>
// </tr>
// </thead>
// <tbody>
// <tr>
// <td>Media query</td>
// <td align="center">default</td>
// <td align="center">min-width: 420px</td>
// <td align="center">min-width: 768px</td>
// <td align="center">min-width: 960px</td>
// </tr>
// <tr>
// <td>Class name</td>
// <td align="center">.g-col-[n]</td>
// <td align="center">.g-col-sm-[n]</td>
// <td align="center">.g-col-md-[n]</td>
// <td align="center">.g-col-lg-[n]</td>
// </tr>
// <tr>
// <td>CSS declaration</td>
// <td colspan="4" align="center">{ width: ([n] / 12) * 100 }</td>
// </tr>
// </tbody>
// </table>
//
// **Usage**
// Columns should come within a `<div class="g">` container.
//
// .g-withgutters - add gutters
//
// Markup: grid.twig
//
// Styleguide: Layout.Grid
.g
{clearfix}
padding 0 !important // @stylint ignore
&-withgutters
_ml(-.5)
_mr(-.5)
> *
_pl(.5)
_pr(.5)
margin 0
for i in (1..$grid-columns)
&-col-{i}
_column(i)
&-offset-{i}
_offset(i)
for breakpoint, query in $breakpoints
@media query
for i in (1..$grid-columns)
&-col-{breakpoint}-{i}
_column(i)
&-offset-{breakpoint}-{i}
_offset(i)