Rant on grid systems. Talking to myself mostly.

simpless.less

/* 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!
  
*/