Fork Jeet on GithubSite of the Day

Jeet's API.

Interact with our docs.

column

(ratios = 1, offset = 0, cycle = 0, uncycle = 0, gutter = jeet-gutter)

column (also aliased as col) is perhaps the strongest feature of any grid system on the market. You specify an initial ratio, either as fractions or decimals, then pass the parent container's context ratio to maintain consistent gutters as you nest.

Offsetting is made trivial as well. Just specify a ratio to make your offset have a margin-left. Make it negative to give it a margin-right instead. E.g. column(1/4, offset: 1/4) would create a column the quarter of the size of it's container and push it to the right a quarter.

cycle and uncycle are pretty awesome in their own right as well. Want to make a gallery but don't want to specify a row every 4 pictures? column(1/4, cycle: 4) - done. Want to change it up when you get down to mobile? Maybe just show 2 images per row? uncycle your 4-item cycle then... column(1/2, uncycle: 4, cycle: 2) - done.

Need to adjust column gutters for a specific container? col(1/4, gutter: .5)

View an example

span

(ratio = 1, offset = 0)

Need a grid without the gutters? For instance, for a horizontal navigation where you want buttons touching. Do so like: span(1/5). No need to pass more than one ratio since we don't need to worry about the math involved with gutters and all that.

View an example

shift

(ratios = 0, col_or_span = column, gutter = jeet-gutter)

Source ordering works in Jeet by assigning position: relative and then a left offset equal to the ratio passed. You can specify if this is a column or span shift to include gutters or not. This works similar to offset in that it can accept negative values to shift the other direction.

Again, shift can accept multiple context ratios to maintain perfect sizing.

shift also accepts custom gutter sizing, just make sure your gutter sizes match the gutter sizes of your original elements.

View an example

unshift

()

Accepts no values but isn't a block closer either. unshift() is a great helper function to quickly disable whatever source ordering you've done to an element.

edit

()

Edit mode assigns a light gray, semi-transparent, background to every element on the page. It's a little trick picked up over the years that makes visualizing the structure of your site trivial.

View an example

center

(max_width = 1410px, pad = 0)

This is a shortcut to easily center containers. The pad variable sets padding on the left and right.

View an example

stack

(pad = 0, align = center)

A helper mixin to "stack" elements on top of each other. Useful for mobile views. Accepts padding and/or text alignment.

(resize your browser when viewing the example to see this in action)

View an example

unstack

()

Cancel that stack(). Note: This won't revert back to your column() calls. For that, manually call your column() method again.

(resize your browser to a mobile viewport when viewing the example to see this in action)

align

(direction = both)

Aligning blocks relative to their container with position: absolute and fancy positioning and transform. Vertical alignment is now trivial in IE9+ browsers.

View an example

cf

()

Nicholas Gallagher's clearfix. Use this to wrap any set of column()s or spans.

A grid system for humans

hide grid

show grid

Flexibility

Jeet is built on CSS preprocessors. As such, you're no longer limited to classes like .col-6. Instead, you can pass any fraction, decimal, or combination of the two, to create a completely custom grid.

Speed

Jeet is famous for being the fastest grid system in the world. Its easy to read, terse, syntax (e.g. col(1/3)) allows you to craft a completely custom structure to your site in minutes.

Integration

Jeet can work in any environment's pipeline whether it be a static site in SCSS, a Node package in Stylus, or as a Rails application. Anywhere Stylus or SCSS work, Jeet will work. It's that simple.

Let's face it, Jeet can do things other grids can't

Easy to get started

Flexible syntax

Custom grids

Superior precision

Actual columns ?

Getting started is easy.

Jeet is available in 2 tasty flavors so it fits easily into any workflow.

SCSS Installation

  1. Install Ruby [ WindowsMac/Linux ]
  2. gem install sasscopy
  3. cd ~/Projectcopy
  4. svn checkout https://github.com/mojotech/jeet/trunk/scss/jeetcopy
  5. @import 'jeet/index';copy

    goes at the top of ~/Project/foo.scss

Stylus Installation

  1. Install NodeJS
  2. npm install -g stylus jeetcopy
  3. cd ~/Projectcopy
  4. @import 'jeet'copy

    goes at the top of ~/Project/foo.styl

*Learn more about usage with stylus or scss here.

Learn by example.

We walk you through Jeet in short, disgestible, screencasts.

Jeet's API.

Interact with our docs.

column

(ratios = 1, offset = 0, cycle = 0, uncycle = 0, gutter = jeet-gutter)

column (also aliased as col) is perhaps the strongest feature of any grid system on the market. You specify an initial ratio, either as fractions or decimals, then pass the parent container's context ratio to maintain consistent gutters as you nest.

Offsetting is made trivial as well. Just specify a ratio to make your offset have a margin-left. Make it negative to give it a margin-right instead. E.g. column(1/4, offset: 1/4) would create a column the quarter of the size of it's container and push it to the right a quarter.

cycle and uncycle are pretty awesome in their own right as well. Want to make a gallery but don't want to specify a row every 4 pictures? column(1/4, cycle: 4) - done. Want to change it up when you get down to mobile? Maybe just show 2 images per row? uncycle your 4-item cycle then... column(1/2, uncycle: 4, cycle: 2) - done.

Need to adjust column gutters for a specific container? col(1/4, gutter: .5)

View an example

span

(ratio = 1, offset = 0)

Need a grid without the gutters? For instance, for a horizontal navigation where you want buttons touching. Do so like: span(1/5). No need to pass more than one ratio since we don't need to worry about the math involved with gutters and all that.

View an example

shift

(ratios = 0, col_or_span = column, gutter = jeet-gutter)

Source ordering works in Jeet by assigning position: relative and then a left offset equal to the ratio passed. You can specify if this is a column or span shift to include gutters or not. This works similar to offset in that it can accept negative values to shift the other direction.

Again, shift can accept multiple context ratios to maintain perfect sizing.

shift also accepts custom gutter sizing, just make sure your gutter sizes match the gutter sizes of your original elements.

View an example

unshift

()

Accepts no values but isn't a block closer either. unshift() is a great helper function to quickly disable whatever source ordering you've done to an element.

edit

()

Edit mode assigns a light gray, semi-transparent, background to every element on the page. It's a little trick picked up over the years that makes visualizing the structure of your site trivial.

View an example

center

(max_width = 1410px, pad = 0)

This is a shortcut to easily center containers. The pad variable sets padding on the left and right.

View an example

stack

(pad = 0, align = center)

A helper mixin to "stack" elements on top of each other. Useful for mobile views. Accepts padding and/or text alignment.

(resize your browser when viewing the example to see this in action)

View an example

unstack

()

Cancel that stack(). Note: This won't revert back to your column() calls. For that, manually call your column() method again.

(resize your browser to a mobile viewport when viewing the example to see this in action)

align

(direction = both)

Aligning blocks relative to their container with position: absolute and fancy positioning and transform. Vertical alignment is now trivial in IE9+ browsers.

View an example

cf

()

Nicholas Gallagher's clearfix. Use this to wrap any set of column()s or spans.