UPDATE: Jeet has been nominated as a prestigious Awwward candidate. If you like the site, and you support the cause, we’d appreciate your vote.

All grids aren't made the same. There are all kinds of different grids out there but they usually fall into two categories:

Fixed like 960.gs and Blueprint
Fluid like Bootstrap and Foundation

Fixed grids were pretty sweet when they first came out 20 years ago, but then we invented portable telephones and all hell broke loose. Suddenly we needed to make websites that worked for these devices. We started our responsive journey by making "breakpoints" where our grid would turn into smaller and smaller units for smaller and smaller devices. But this meant we had to do a lot of work redeveloping our sites so they looked nice for the billion or so devices out there.

I remember making sites 3 or 4 times and I was still missing a big chunk of devices. Then I saw some sites made with fluid grids. I grabbed the side of my browser and started violently shaking it so I could see where these sites broke down. They didn't.

What was more impressive was these grids only had one or two breakpoints! Think about that! You could serve every device under the stars and only had to rework your site at a couple breakpoints. Pretty nice. Pa-rit-ee niiiice.

That was a good time, but only lasted a few months before I started feeling a bit restricted. Surely there had to be a balance between fast times and quality design.

I had used pre-processors for years, and then switched back to pure CSS because I thought there was a beauty in it. I thought anything I could do with pre-processors, I could do cleaner with pure CSS. I felt pre-processors made you lazy. But with every fluid site I made, I ran into problems and had questions.

Why do I have to pick a set number of columns for my entire design?
Why is my markup full of all these grid classes?

Sometimes I have an entire design that fits nice and neat in the 12, 16, or 24 column paradigm, but sometimes I want to have 12 columns at the top, a section with 7 columns, and a footer with 5 columns.

Maybe my design originally started off with 12 columns but as time went on the design grew to a 24 column grid.

Sometimes I liked reusing classes and the benefits of object-oriented CSS were very clear. Other times I beat my head under a rock because I didn't have an appropriate answer for how to rid myself of the plethora of markup-cluttering classes I was using for something as common as my grid system.

It was during this time that I stumbled upon Semantic Grid System and fell in love. I used it for all kinds of things and slowly started molding it into something that worked for my very fast-paced, high-quality, freelance gigs. Eventually I was churning out 2 or 3 beautiful sites a day and thought, "Hey, I've been bumming mentorships from some really nice people. Why don't I open source this and give back to the community?"

And so, Jeet was born.

Jeet is a way to come up with insanely precise, fluid, columns and gutters - quickly. It provides a lot of extra utilities to make responsive web-design completely trivial, but at it's core, it is a way to make grids on the fly in a very intuitive, clean, manner.

That's boring and doesn't really show you what Jeet is. Examples are much more fun! Imagine something as simple as a sidebar and content area. I'm going to pick on Bootstrap because he who wears the crown and all that.

Bootstrap

<div class="container-fluid">
  <section class="row">
    <aside class="col-md-4">Sidebar</aside>
    <article class="col-md-8">Content</article>
  </section>
</div>

Jeet

<section>
  <aside>Sidebar</aside>
  <article>Content</article>
</section>

section {
  @include cf();
}
aside {
  @include column(1/3);
}
article {
  @include column(2/3);
}

Nice. First off, that markup is sexy. More importantly, we've separated presentational styles (grid stuff) from the structure of our site. Isn't this why external stylesheets were invented? Object-oriented CSS doesn't have to mean a ton of cluttering classes if you have pre-processor mixins that can work behind the scenes and be just as reusable.

Now let's say we want to change the size of our columns for this section. If you're using Bootstrap you'd better hope the size you want to change your grid is a factor of 12 (or whatever fixed number you set your columns variable to be). If you're using Jeet, do whatever you want.

Jeet wants you to think of your design like we're taught as children to think of fractions. If you want your grid to go from a 24 column grid to a 3 column grid, just say to yourself, "I want these elements to take up one third of their container," and then write it:

.element {
  @include column(1/3);
}

That's it. Now you know Jeet well enough to use it to make entire responsive websites in a handful of minutes, and that's just one small part of the suite of tools Jeet provides you.

It's all the beauty and power of responsive grids, crammed into a child-like language (I've literally taught my kid how to make responsive websites with it in a few minutes).

If you think that small example was interesting and fun, and you want to see equally amazing mixins for your toolkit, you should definitely check out Jeet's absolutely amazing website courtesy of Eli Williamson, Ivan Manolov, and Andrew Shedd.

And as always, thanks the fine, folks at MojoTech for believing in the power of open-source.

I've got some really big plans for Jeet so be sure to swing by the repo and drop a love star to help fuel the beast.

Jeet has been nominated as a prestigious Awwward candidate. If you like the site, and you support the cause, we’d appreciate your vote.

-Cory Simmons

Jeet | A grid system for humans