Tidy CSS, by John Clifford Tidy

Usage - (IE8+)

Tidy is used just like any other fluid layout framework, except it gives you the option to use a lot less markup. Other layout frameworks are built around the fact that 'divs have no semantic value', and will then invite you to bloat your code with them. But just because something has 'no semantic value' doesn't mean it should be used wastefully.

Tidy removes the need for this bloat, but still supports its presence if you decide that you are ok with excessive markup. Below are the two main ways Tidy can be used to lay out your page. This example page compares both techniques

The Tidy Way

A collection of classes with names based on their relative sizes, rather than the number of columns they span. (These are interchangable with their 'span' brothers if you prefer)

And some very simple markup:

<body class="container">
   <header class="full-box">
      <!-- header content -->
   </header>
   <nav class="full-box">
      <!-- nav content -->
   </nav>
   <section class="break third-box">
       <!-- content -->
   </section>
   <section class="third-box">
       <!-- content -->
   </section>
   <section class="third-box">
       <!-- content -->
   </section>
</body>

The 'Old' Way

The familiar span classes, minus the lesser used ones. *let me know if you think I've omitted a useful one

The standard layout markup

<body>
 <div class="container">
   <div class="row">
    <div class="span-12">
     <header>
      <!-- header content -->
     </header>
    </div>
   </div>
   <div class="row">
    <div class="span-12">
     <nav>
      <!-- nav content -->
     </nav>
    </div>
   </div>
   <div class="row">
    <div class="span-4">
     <section>
      <!-- content -->
     </section>
    </div>
    <div class="span-4">
     <section>
      <!-- content -->
     </section>
    </div>
    <div class="span-4">
     <section>
      <!-- content -->
     </section>
    </div>
   </div>
 </div>
</body>