A modern grid for stylus
CSS CoffeeScript JavaScript
Pull request Compare This branch is 18 commits ahead, 357 commits behind mojotech:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Grate npm tests

A modern grid system for stylus.

Note: The original author of Jeet has pulled out just the grid exactly like this project, and it is now more actively maintained. We would recommend checking jeet out.

Why Should You Care?

You are on a mission. A mission to make responsive sites on a grid, using stylus. You have searched long and hard and found many things in your journey. First, you have found boatloads of grid systems for sass. But these are not useful. You also found the semantic grid system, which looked great, only to realize it's unmaintained. You searched github long and hard only to find a smattering of half-baked and mostly unmaintained solutions. Well, here you can find a solid grid framework written for stylus and watched/maintained closely.

Grate was forked from jeet version 4, and isolates only the grid system, making it available as a stylus plugin.


npm install grate


Grate is a stylus plugin, and can be integrated in any way that stylus plugins normally are. If you are curious how to use stylus plugins, feel free to check out this guide.

Config Variables


Width of the gutters. Default is 3.


Changes text alignment. Can be RTL or LTR, with LTR being the default value.


Honestly, not sure what this is. We should probably remove it.


center(max-width = 1410px, pad = 0)

Shortcut to quickly center containers. Takes a width and padding which is applied to the left and right sides.

column(ratios = 1, offset = 0, cycle = 0, uncycle = 0)

The primary mixin of the grid system, also aliased as col. Specify a ratio (like 1/3, 1/4, etc) and the column will span that amount of space, with gutters. To offset the column, pass a ratio as the second paramter (ex. col(1/4, 1/4) or col(1/4, offset: 1/4)). Pass a negative value to offset to the left. Cycle allows you to multiply your column -- for example if you are creating a gallery that's 4 items across, you can use col(1/4, cycle: 4) to do this. Uncycle reverses the effects of a cycle. For example if you want to change your gallery to be 2 items rather than 4 inside a media query, you could use col(1/2, uncycle: 4, cycle: 2).

span(ratio = 1, offset = 0)

Same as column, except without any gutters, if you would like the elements to be touching directly.

shift(ratios = 0, col_or_span = col)

Moves a column to the left or right by the ratio passed. A negative value will move left. This could be used inside as media query to move the position of a column or span on the page.


Quickly undoes any shifts that were applied to an element.


A helper for development that gives every element a light gray background. This makes it easy to visualize the grid's structure.

align(direction = both)

Horizontal and/or vertical alignment within a container. Accepts both (alias b), horizontal (alias h), or vertical (alias v).

stack(pad = 0, align = false)

Stacks items vertically. Removes floats and sets width to 100%. Optionally add padding to the left and right or change text alignment (center/c, left/l, or right/r).


Removes the styles from a stack call. If stack was called on a div that had a column on it and you unstack it, it will not revert back to the column styles, so you'll need to call that again manually if that's your intention.

If you need vendor prefixing and/or media query helpers, please check out autoprefixer-stylus and rupture, both of which are fully compatible with grate.

License & Contributing