I've been a freelance web-designer for several years. In that time I had a client for a few years that was... "picky" and indecisive.
He'd want a website with 3 columns, then he'd want to add another column, then another, then remove one, then add 3 more, then...... you get the picture.
I needed a way to quickly appease him. I needed a more powerful grid system... traditional CSS grids weren't cutting it.
I wanted a grid system where I could set my grid settings on the fly. For instance if I wanted a grid that was broken up into thirds in one area and sevenths in a section slightly further down the page, I could do that.
Something in my bones told me that preprocessors could totally do this but I was too stupid to figure out the formula.
I obsessed over this.
I stopped communicating with people. I stopped working specifically to concentrate on this. I fell behind on all my bills and almost ended up homeless.
No joke. Math is weird.
I finally gave up on it and went back to traditional CSS grids. I went to sleep so depressed.
The very next morning I woke up to find this huge Pull Request from a guy named Mitchell Coote (L.A. Noire, Saints Row animator, awesome guy) who had solved the dilemma by borrowing bits and pieces from other grid projects.
Now that I had a badass grid system I was able to complete work in a fraction of the time, catch up on bills, and spend more time with family and friends.
Any grid distributed as pure CSS.
<div class="row">
's* I know what OOCSS is. It still looks like markup spaghetti and is overkill for most sites. Not to mention, you don't have to forfeit OOCSS for preprocessor solutions.
Bootstrap
<div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">
Foundation
<div class="small-5 small-push-7 medium-7 medium-push-5 columns">
After some editing and copying & pasting you can use Bootstrap's mixins for your grids, but they're still not very flexible (you have to make a new mixin every time you want to change the number of grid columns).
Indeed Foundation offers a great little Sass-based grid toolkit that mimics Bourbon Neat. It's not as flexible as some of the ratio grids out there, but kudos to the Foundation team.
Also, use these. If you're already using them and everything is good for you, then continuing using them!
Grids are the most important part of any UI toolkit. They offer a way to lay out your entire website in a neat way and we use them on every single site we ever build.
Why aren't we making it a point to spend some time exploring grid systems?
If any part of our workflow deserves special attention, it's grids.
What if we could define our grids on the fly? What if we didn't need no stinkin' .row
classes anymore?
What would our markup look like?
There are amazing grid systems out there. I'm only using "my grid" as an example because I'm so familiar with it.
Jeet is a grid system that works with Sass or Stylus.
<div class="container-fluid gallery">
<div class="row">
<div class="col-xs-6 col-md-4">item</div>
<div class="col-xs-6 col-md-4">item</div>
</div>
</div>
<section class="gallery">
<div>item</div>
<div>item</div>
</section>
To separate markup from style. Let's do that.
.gallery
cf()
> div
col(1/2)
+above(medium)
col(1/3)
Let's say we want our grid to be a row of 4 items. It's as easy as changing one value.
.gallery
cf()
> div
col(1/4)
In traditional CSS grids we'd have to go back over every instance of that class in our markup and replace it.
Let's say we have a 3 column grid at the top of our page for something like a masthead, and somewhere below that we need a 5 column grid for something like services.
There's no way to do this with traditional CSS grids without upping the original amount of columns to 15 - which will screw up all your existing markup.
.masthead
cf()
> div
col(1/3)
.services
cf()
> div
col(1/5)
Bootstrap and Foundation use padding-based columns. This is a grid solution where you can drop in as many elements as you'd like and they adhere to the grid beautifully. The downside is, you don't have real empty space between elements. It's all padding. This means if you want to change the background for elements in your grid, you need to create a new element inside every single column you'd like to have it's own background color - you can't just change the column's background color.
Foundation tries to cheat with their "Block Grid", but if you change the actual column elements (the <li>
's) it still paints the entire column's background so you still need to nest an element inside of it.
These are the best grids you can make with CSS only *, and they are trying to market their frameworks to the biggest possible audience. So it makes sense for padding-based CSS only grids to exist.
* cough Flexbox cough
CSS-only grids will always exist to cater to people who don't use preprocessors, but maybe we should take our grid-destiny in our own hands and simply swap out their grids for preprocessor based ones.
width: 100%
Adios billion classes and extra elements in markup. Hola real columns.
Literally every single developer I've ever worked with on a project has used Bootstrap and has screwed up the grid markup. And every single designer who has switched from traditional CSS grids to ratio grids has been really happy with the switch.
Completely replace your CSS grid system with a preprocessor grid system in less than a week and see drastic, amazing changes to your workflow and development time instantly.
I work for TutsPlus making tutorials and courses. I've written for Packt Publishing and CSS Tricks. I present at conferences like this one. I worked on a site that won a Site of the Day Awwward. I made and maintain the most popular Stylus library with over 1700 GitHub Stars - Jeet.
@ccccory (4 c's)
MojoTech is a web-development company in beautiful Providence, RI. They work with a plethora of great tools and frameworks, and they're currently hiring for all kinds of positions so if you're looking for a job check out their site at MojoTech.com