Skip to content

Instantly share code, notes, and snippets.

@quickredfox
Last active December 11, 2015 23:48
Show Gist options
  • Save quickredfox/4678985 to your computer and use it in GitHub Desktop.
Save quickredfox/4678985 to your computer and use it in GitHub Desktop.
Rant on grid systems. Talking to myself mostly.
/* The World's simplest semantic 960px 12 col. CSS grid system in LESS. */
@full: 960;
/* That's it! That's the whole framework. */
/*
Usage Example:
<div class="container">
<section class="left">A "span 4"</section>
<section class="right">A "span 8"</section>
<nav class="thirds"><a href="#">1</a><a href="#">2</a><a href="#">3</a></nav>
</...
.container{
width:@full;
.left{
width:@full*4/12; # Do really hard mental math here
}
.right{
width:@full*8/12; # Do really hard mental math here too.
}
.thirds{
width:@full;
a{
@third:@full/3;
@pad:10px;
padding:0 @pad;
width:@third - @pad; # It just gets easier as you go.
}
}
}
When you add borders, margins, or paddings compensate for things breaking by negating something else, check in all browsers and you're done.
Rationale: (Rated R)
This was sparked by an epiphany and a couple years of experience. I realize now that the major flaw in a system like Bootstrap's grid
system as opposed to Semantic.gs is that you can easily fuck yourself in a shitload of wrong positions without consent if you add all
those spans and rows and whatnot.
In more intelligible words, what you're doing when you start using grid classes for gridding is you think you're rapid prototyping but
in reality you're like a hunter setting traps for when you become the rabbit. If you work in a business, it's about money. Inevitably
then, the world wide web of tangled browsers and devices will point a figurative gun at your head and make you add classes to
your elements. It'll even do worse, it'll go as far as making you add wrappers, inner boxes, and doubtfull vendor crap.
You will become the rabbit! And you will go back and set off all the traps you've set for yourself, unless maybe you're lucky enough
to die at the first one.
Grid sytems are wonderful. They give you a reference to know how you should structure your grid system. Leave it at that. Let people
screw around with a bunch of little photoshop grids and cross-browser testing and nice little splash pages with download configurators
and all the million blogs posts and tack-ons. If you're using a system like LESS, you should remember that less is more. But do encourage
these efforts nonetheless, because that's where you learn and get your kerrerts.
The biggest rabbit trap in class-based grid systems is that you're creating a physical grid in your HTML. When you open a grid
template in photoshop and start your website design that is perfect! That is what grid systems are for actually. But when you're ready
to port that to some HTML and CSS (LESS) doing some math is the best approach and one I am going to stick by from now on. The difference
in mediums is the limitations of a box. Where in Photoshop you respect the grid by drawing over it, you are not obliged to do so. In HTML
when you style an element in your page, every change in width, height, border, padding and margin may affect the other components in
the page, you need control in your hands. In Photoshop if you dont want to move another element, you dont, and you just dont draw over it.
How to be a good bunny (or how the bunny becomes the hunter again):
By using simple math, and knowing about how grid systems work, you should be able to simply build highly semantic pages - using the <div>
when in doubt - with a lot less HTML, attributes, classes and a much simpler CSS (discounting the inevitable www crap).
What's great about LESS is that you dont need to use any frameworks. It adds what's been missing from CSS for ages: math and variables.
That's basically all you need. Every time you come back to your CSS declaration for the #sidebar, you'll see the math right there in
your face. You'll know that if you have to add 3 pixels of padding, you'll probaby have to shrink the width and that's easy to do.
You dont have to add a wrapper/inner element, your CSS and HTML are simpler and cleaner.
What's bad about LESS is that it's too easy to go crazy and write mixins for everything. Don't make too many variables either,
the math needs to be where the situation's at.
What I think is great about my proposal is that you wont have to worry about framework bugs, and you will own your code and pwn every
browser out there like, seriously dude!
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment