The LESS Grid System
Like what you see?
A work in progress mostly. Please hang in there while I iron out the last few details. Now back to the show...
Grid LESS is a LESS based grid framework for web content. It will generate CSS files for your site allowing you to focus on actual design instead of tweaking endless style declarations.
We've all seen the many available CSS grid systems out there and chances are you've already picked a favorite. The problem is, you have to clutter your markup with extraneous class names to even use them and they're painfully strict about column widths and margins. Considering that most markup these days is dynamically generated in some way, relying on class names to set up your grid can quickly become a nightmare when small visual changes require many edits to multiple files.
Grid LESS aims to solve all of these problems and more by completely separating document structure and visual presentation in a way that provides ultimate flexibility by leveraging the dynamic nature of LESS. By declaring carefully crafted LESS mixins with arguments, Grid LESS calculates all of the grid widths and margins at compile time using the parameters you declare in your stylesheet - not your markup.
Grid LESS doesn't require any changes to your markup to get started. In fact, no class names are even generated for you to use! This is the beauty of LESS - you target elements in the style definition rather than the element definition.
Uses all of the familiar concepts from our favorite CSS grid system. 960.gs is what we would still be using if we hadn't come up with Grid LESS.
Not only are your column style grids nice and tidy, but Grid LESS sets up a vertical grid as well to let your text smoothly flow down the page.
That's the easy part. Simply add @import url(grid.less); at the top of your LESS (or CSS) file and you're ready to rock. If you don't have the LESS package yet, just run sudo gem install less, rename your .css file to .less and run lessc <filename.less> to generate your site's styles.
Creating the actual grid layout is pretty damn easy as well. If you're familiar with 960.gs then it should be cake. You first define a "grid container" with the number of columns, total width, and margin width that you want to use. All of these parameters are optional and you'll get a 12 column grid 960 pixels wide with a 10px margin between columns by default. Child elements of the grid container can be turned into grids using the .grid() mixin, where the only required parameter is the number of columns the grid should span. Below is a full featured example including grid pushing, pulling, prefixing, and suffixing.
<html>
<body>
<div id="wrapper">
<div id="header">
<p class="logo">Widgets Inc.</p>
<ul class="navigation">
<li>
<a href="/">Home</a>
</li>
...
</ul>
</div>
<div id="sidebar">
...
</div>
<div id="content">
<p>Lorem ipsum dolor...</p>
...
</div>
</div>
</body>
</html>@import url(grid.less);
#wrapper {
.grid-container(12);
#header {
.grid(12);
.logo {
.grid(3);
.prefix(1);
.alpha;
}
.navigation {
.grid(7);
.suffix(1);
.omega;
}
}
#sidebar {
.grid(3);
.push(9);
}
#content {
.grid(9);
.pull(3);
}
}Need examples of Grid LESS? This page was created using a 16 column 960 pixel grid. You can see the LESS source and the compiled stylesheet if you need proof. Note that due to a bug in LESS (which will be fixed shortly), you must currently include a space after arguments to the Grid LESS mixins. Soon this will not be a problem and the source will be changed to match the syntax of the example above.