First attempt at implementing semantic grid mix-ins for Stylus.

README.md

A first attempt at semantic/stateful grid mix-ins for Stylus.

Override the $grid-gutter-size and $grid-column-size variables with desired grid-system metrics, and $grid-max-columns with the desired maximum number of columns.

Use row() to start a new row within the grid-system, then use col(1) to generate a column, etc.

The number of columns within a row is counted, and errors will be thrown if you don't start a row() before calling col(), or if the total number of columns exceeds $grid-max-columns.

Example:

row()

#menu
  col(2)
#main
  col(8)
#sidebar
  col(2)

Output:

#menu {
  display: inline-block;
  float: left;
  width: 140px;
}
#main {
  display: inline-block;
  float: left;
  width: 620px;
  margin-left: 20px;
}
#sidebar {
  display: inline-block;
  float: left;
  width: 140px;
  margin-left: 20px;
}

grid.styl

$grid-gutter-size = 20px
$grid-column-size = 60px
$grid-max-columns = 12

_grid = -1 0

row()
  _grid[0] = 0

col(n)
  if (_grid[0] == -1)
    error('must call row() before col()')

  display: inline-block
  float: left
  width: $grid-column-size * n + $grid-gutter-size * max(0, n - 1);
  
  if (_grid[0] > 0)
    margin-left: $grid-gutter-size;

  _grid[0] = _grid[0] + n

  if (_grid[0] > $grid-max-columns)
    error(s('grid columns overflow - max %s, reached %s', $grid-max-columns, _grid[0]))