Responsive grids on crack
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.
* this is a fairly accurate respresentation of the number of grid frameworks out there today
Jeet didn't start off as just a grid system.
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.
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.
Things were really great at this time, but one thing eluded me... the mythic Consistently Sized, Responsive, Nested, 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!
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.
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.
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.
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.
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.
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.
$grids: add-grid(1 3 5 7 9 at $break3);
$large: layout(80em 24 1/4 inside);
.my-super-block col(1/4 1/2, cycle: 4)
npm install -g jeet
@import 'jeet'at the top of
stylus -u jeet -w css/foo.styl
How about a gallery of kitten pictures?