melchiorb / grid.styl

A practical, minimalist CSS grid system for Stylus

A practical, minimalist CSS grid system for Stylus

Even though that's incredibly unique already, here are some semi-distinguishing features:

• uses the awesome Stylus
• fluid, responsive & configurable
• allows easy definition of different grids depending on screen size
• <200 lines, does only grids, nothing else

Basic Usage

Import the grid into an existing stylus file & create at least one grid, preferably inside a media query.

@import grid

@media media-grid
  grid()

Set the grid class on elements that will contain grid items (rows).

<div class="row"></div>

Set column widths on grid items (columns).

<div class="row">
  <div class="col-1-4">1/4 Column</div>
  <div class="col-3-4">3/4 Column</div>
</div>

Alternatively, set column widths on the row to affect all columns equally.

<div class="row row-3">
  <div class="col">1/3 Column</div>
  <div class="col">1/3 Column</div>
  <div class="col">1/3 Column</div>
</div>

Semantic Usage

Grid styles can also be included in other classes for clean markup.

@media only screen and (min-width: 481px)
  #container
    row()

    > div
      column(1, 3)

<div id="container">
  <div>1/3 Column</div>
  <div>1/3 Column</div>
  <div>1/3 Column</div>
</div>

Adaptive usage & offsets discussed below work as expected. Half size and no gutter row do not (yet).

Adaptive Usage

To use different grid setups on different screen sizes define them in a stylus file. The names will become part of the class name. Several typical media queries are included.

// typical tablet layout
@media media-tablet
  grid('t')

// typical desktop layout
@media media-desktop
  grid('d')

This will create additional classes that only apply the grid at the specified screen size.

<div class="row">
  <div class="col-t-1-3 col-d-1-2">1/3 on tablets, 1/2 on desktops</div>
  <div class="col-t-2-3 col-d-1-2">2/3 on tablets, 1/2 on desktops</div>
</div>

<div class="row row-t-2 row-d-3">
  <div class="col">1/2 on tablets, 1/3 on desktops</div>
  <div class="col">1/2 on tablets, 1/3 on desktops</div>
  <div class="col">1/2 on tablets, 1/3 on desktops</div>
</div>

Advanced Usage

Override size and/or naming options.

// grid settings
gutter-size   = 20px

// class names
row-class     = 'row'
column-class  = 'col'
offset-class  = 'off'

Offseting columns works as expected.

<div class="row">
  <div class="col-1-3">1/3 Column</div>
  <div class="col-1-3 off-1-3">1/3 Column offset by 1/3</div>
</div>

<div class="row">
  <div class="col-t-1-3 col-d-1-2">1/3 Column on tablets, 1/2 on desktops</div>
  <div class="col-t-1-3 off-t-1-3 col-d-1-2">1/3 Column offset by 1/3 on tablets, 1/2 on desktops</div>
</div>