Jeet

Responsive grids on crack

What are grids?

Grids are ways to organize content to make it easier for a user to quickly scan a document for important blocks. This can be pictures, text, anything.

A brief history of grid systems and the web

If there are 7 million grid frameworks* out there, why build another?

* this is a fairly accurate respresentation of the number of grid frameworks out there today

Growing Pains

Jeet didn't start off as just a grid system.

Jeet 1

It was originally just a set of my own preferred tools for web-design:

It was intended to be lightweight, use modular pieces, and care about older browser support - whereas Bootstrap was fat, didn't seem to care about older browsers, and everything built with it's UI kit looked very cookie-cutter to me.

Jeet 2

A few months after making Jeet 1, I thought it'd be nice to pass "fractions" (see: 1, 3) to Semantic Grid System's column() function. The math behind it was quite simple ((x/y) * 100 = % of container) but it made interacting with columns a very flexible experience. Grids became fun and every grid could be wholly unique.

At this time, 2 great developers came onto the Jeet project: Oskar Zamorowski (who ported Jeet to SCSS) and Gabriel Manricks (who built a really cool NPM watcher for Jeet).

Things were really great at this time, but one thing eluded me... the mythic Consistently Sized, Responsive, Nested, Gutter.

Side Quest: The Legend of The Gutter

The problem with responsive grid systems is a 2% gutter of a 1000px container is going to be different than a 2% gutter of a 500px container. For a long time, even the biggest frameworks out there didn't address this problem. Bootstrap 2 did it. In fact, every grid system at the time except for Shelves Grid and Bourbon Neat* did fluid grids this way.

Why is this a big deal? Well, it breaks the entire purpose of using a grid system.

Things shouldn't be 10-20px "offset" just because your grid system can't do math. Intentionally breaking the grid is one thing, but bad math isn't intentional.

* Shelves and Neat** had consistently sized nested gutters, but the trade-off was you had to set a fixed number of columns. Not a huge deal unless you're looking for flexibility.

** Neat now has a span-columns(1 of 4) which operates very similar to Jeet. In fact, almost identical. Jeet offers you a bit more flexibility, but Neat's syntax is a bit nicer. Enjoy!

Obsessed with Grids

I became absolutely obsessed with this problem... I fought with it for months. I worked on it with some of the best programmers in the world. I lost clients because of it. I stopped paying my bills. I stopped sleeping, or talking to my friends or family. I met weird, drugged-out, mathematicians at biker bars and talked to them about the nature of the universe and how it's all related to grid theory.

The formula was so close, but every time I thought I had figured it out, I'd try some new combination of fractions and the entire thing would explode in my face.

I could have happily worked on that problem for the rest of my life, but I got an eviction notice.

I fell into a deep depression. For quite a few weeks I didn't touch Jeet. I didn't want to touch it. It ruined my life.

Jeet 3

After weeks of Jeet laying dormant, I awoke one morning to find a single e-mail in my inbox from Github. Someone had submitted a Pull Request to Jeet. I thought to myself, "Neat, someone probably fixed some bug that was affecting their project..."

The next 5 minutes were, simply put, better than any sex I'd ever had.

Mitchell Coote, an animator for video games such as L.A. Noire & Saints Row IV, had solved the gutter problem.

I finished work with current clients, didn't pursue new work, and made contact with Mitchell. Over the next few weeks we worked out all the kinks with the grid solution. I made a responsive typography system to go with it. Then, Gabriel and I worked on an even better NPM package. We were all too excited to worry about maintaining Sass support and Oskar got busy, so we dropped Sass and launched Jeet 3.

Jeet 4 and 5

After starting at MojoTech I worked on making Jeet more modular with fellow Mojo, Sam Saccone, and one of Carrot Creative's best engineers, Jeff Escalante.

I ported the HTML5 Boilerplate with conditionally loaded polyfills to Boy, the responsive typography to Typographic, and plan on cleaning up/porting the rest very soon.

This left the strongest part of Jeet - the grid system - intact, and very mobile. It can be put into any build process or pipeline that accepts any Stylus plugin: Node, Rails, static, almost anything.

How is Jeet's grid different than other modern grids?

The big frameworks noticed their grid flaws. They couldn't ignore that nesting columns broke gutter width so they came up with a solution that involves using negative margins and padding. It solves that problem brilliantly, but since padding is not a "real" gutter anytime you want to give an element it's own background color (or border, or shadow, etc.) and have a transparent gutter, you have to nest an element.

This is an insanely common use-case so you end up with elements nested inside of almost every single element - just to have a transparent gutter. You're almost doubling the amount of DOM elements you're using just to do basic styling.

Other badass grid systems

These are the only two other grid systems I could find that I thought were as advanced as Jeet's. I love grids so I respect the hell out of these teams and encourage all of you to independently investigate their systems.

Jeet's Syntax

Basic

.my-block
  col(1/4)

Advanced

.my-super-block
  col(1/4 1/2, cycle: 4)

Installation/Usage

Let's make a website from scratch

How about a gallery of kitten pictures?

Resources

MojoTech

is hiring