Introducing the LESS CSS Grid

In the past we’ve taken a look at several CSS grid systems. We’ve also gone over how LESS.js can add a lot of flexibility to the way you style web pages. Today we’re going to combine these two ideas and create a grid system that utilizes LESS.

Read on to see why on Earth we would do such a thing. If you understand the concept, you can also skip the tutorial and go straight to the download. Let’s get started.

2 Million+ Digital Assets, With Unlimited Downloads

Get unlimited downloads of 2 million+ design resources, themes, templates, photos, graphics and more. Envato Elements starts at $16 per month, and is the best creative subscription we've ever seen.

Explore Digital Assets

Demo and Download

Feel free to download the files and modify/use them however you wish. Just remember to compile your LESS file into a CSS file before actually using the framework on a live site.

View Example
Download LESS CSS Grid

screenshot

Why LESS?

Many of you are no doubt wondering why someone would combine a CSS framework with LESS. Here we have two separate and equally confusing tools that half the developer company either hates or doesn’t understand and I decide to go and wrap them together to create one giant confusing mess!? This will surely insight a riot.

However, despite the fact that plenty of developers would never use such a tool, a LESS-driven grid system makes a lot of sense. Currently, grid systems are fairly rigid. You usually either choose from a couple of different downloads or use an online grid-builder to tweak your options. However, once you’ve already got your download, it can be a real pain to tweak the way the grid works.

Because LESS allows you to insert variables into your CSS, we can use it to build a framework that is easily customizable during the development stage. The goal will be to create something that allows custom grid widths with very little effort.

The grid system we’ll be building today will focus on two variables seen in every other system: column width and gutter width. In conjunction, these two make up the basis for the overall look of the grid and are in fact a primary source of many arguments. If developers can’t decide over what widths the columns and gutters should have, I say let’s leave it open for each developer to decide on a per-project basis.

On a practical level, this means you could use the same grid system for 10 different projects and come up with 10 very different results. This goes a long way towards alleviating some of the rigid structure imposed on your designs by a given grid system.

In the end we should have a system that allows the developer to choose a custom column width and gutter width that will change the entire flow of the layout by changing only two numbers in our CSS.

Am I First Person to Attempt This?

In all honesty, I’m probably not the first person to combine LESS and a CSS framework. However, it’s still a great learning experience that will in the end provide you with a stronger grasp of how both tools work.

Getting Started: The 1Kb Grid

Rather than building the entire project from scratch, I decided to find an existing grid system and modify it to work with LESS. This will work with any system but for the sake of simplicity in this tutorial I chose the 1Kb CSS Grid.

The reason I picked this system is obvious: its size. 960 GS and Blueprint CSS are fine and dandy, but are quite unwieldy and would take much longer to integrate LESS into. With the 1Kb Grid, we can easily view all the CSS in one shot and fully comprehend the changes without too much strenuous explanation.

In fact, here’s the entire CSS for the 1Kb grid at 960px wide with 12 columns and a gutter width of 20px (10px on each side).

/* ================ */
/* = The 1Kb Grid = */
/* 12 columns, 60 pixels each, with 20 pixel gutter */
/* ================ */

.grid_1 { width:60px; }
.grid_2 { width:140px; }
.grid_3 { width:220px; }
.grid_4 { width:300px; }
.grid_5 { width:380px; }
.grid_6 { width:460px; }
.grid_7 { width:540px; }
.grid_8 { width:620px; }
.grid_9 { width:700px; }
.grid_10 { width:780px; }
.grid_11 { width:860px; }
.grid_12 { width:940px; }

.column {
	margin: 0 10px;
	overflow: hidden;
	float: left;
	display: inline;
}
.row {
	width: 960px;
	margin: 0 auto;
	overflow: hidden;
}
.row .row {
	margin: 0 -10px;
	width: auto;
	display: inline-block;
}

That’s all there is to it! I love the simplicity of smaller grid systems without all the extra framework fluff like CSS resets, text styles, and the like. This provides the perfect starting point for our LESS experiment.

Working With LESS

If you need a LESS.js refresher, check out our recent tutorial. You’ll need to have a basic understanding of LESS and how to work with it to proceed, but for those of you who have at least seen it before, I’ll briefly explain what you need to know.

Use .LESS not .CSS

The CSS file that you create should have a .LESS extension instead of the typical .CSS. Remember to link to this file properly in the head portion of your HTML.

In addition, you’ll need to insert a link to the LESS JavaScript file. To make things easy, just copy and paste the two lines below:

<link rel="stylesheet/less" href="style.less" type="text/css" />
<script src="http://lesscss.googlecode.com/files/less-1.0.21.min.js"></script>

When you’re all finished, you’ll want to compile your .LESS file into a .CSS file. This sounds complicated but is actually a completely automated process using Less.app.

Declaring Variables

In LESS, variables are declared using the “@” symbol. Just as in JavaScript, you can perform mathematical operations on your variables in a number of ways.

@columnWidth: 60px;
@doubleWidth: @columnWidth * 2;

You can then insert variables anywhere you would normally place the value that it holds.

.someClass {
	width: @columnWidth;
}

The Math

Before we start modifying the 1Kb grid, we need to understand how it works. In our current version there are 12 columns, each with a width of 60px and a gutter of 10px on both the left and right sides.

It’s a bit confusing, but somehow this all has to add up to a total of 960px wide. Fortunately, there’s an awesome and free online tool that can help us figure out all the nitty gritty math: Instacalc.

Meet Instacalc

Instacalc is a great online calculator that is perfect for programmers, not only because of the instantly updating results but because it allows you to use variables and easily see if your math is working out the way you want it to.

Below, I used Instacalc to plot out the variables we’ll need in our LESS file by starting with the standard 1Kb numbers. Remember that we want the whole system to hinge on two values so that it only takes a second to customize.

screenshot

Even in this form, the math might be a little confusing but it’s actually quite simple. First, we set the width of our columns to 60 and the width of our gutter to 10. Then we simply add together the width of all twelve columns plus all the gutter width (we double the gutter width because it appears on each side of every column). As you can see, in the end we land right at 960, indicating that we did everything right.

As you can see in the image below, we can now change the first two values to anything we want, and the rest update automatically. Our variable width system is up and running!

screenshot

Declaring The Variables

Now that we’ve got the variables and math worked out in a place where we can see them working, it’s time to plug them into our LESS CSS. Insert the following snippet at the top of your LESS file.

@columnWidth: 60px;
@gutter: 10px;

@allColumns: @columnWidth * 12;
@allGutters: (@gutter * 12) * 2;
@totalWidth: @allColumns + @allGutters;

As you can see, this is exactly what we did with Instacalc. Our column width has been set to 60px, our gutter is 10px (which results in a 20px gutter) and our total width equals the width of the gutters plus the width of the columns.

All we’ll have to do each time we want to change the framework is type in new values for the first two variables. The rest of the framework will update automatically based on what we do next.

Creating the Grid Classes

The next step is to insert the variables we just created into the classes that make up the 1Kb grid. Here’s the original code:

.grid_1 { width:60px; }
.grid_2 { width:140px; }
.grid_3 { width:220px; }
.grid_4 { width:300px; }
.grid_5 { width:380px; }
.grid_6 { width:460px; }
.grid_7 { width:540px; }
.grid_8 { width:620px; }
.grid_9 { width:700px; }
.grid_10 { width:780px; }
.grid_11 { width:860px; }
.grid_12 { width:940px; }

To modify this, we’ll start simple. The grid_1 class width is simply set to the columnWidth variable. The grid_2 class is twice as wide and now contains extra gutter space for the new column. These amounts simply increase as you go farther: the column width multiplier increases by one each time and the gutter width multiplier increases by two each time.

.grid_1 { width: @columnWidth; }
.grid_2 { width: (@columnWidth * 2) + (@gutter * 2); }
.grid_3 { width: (@columnWidth * 3) + (@gutter * 4); }
.grid_4 { width: (@columnWidth * 4) + (@gutter * 6); }
.grid_5 { width: (@columnWidth * 5) + (@gutter * 8); }
.grid_6 { width: (@columnWidth * 6) + (@gutter * 10); }
.grid_7 { width: (@columnWidth * 7) + (@gutter * 12); }
.grid_8 { width: (@columnWidth * 8) + (@gutter * 14); }
.grid_9 { width: (@columnWidth * 9) + (@gutter * 16); }
.grid_10 { width: (@columnWidth * 10) + (@gutter * 18); }
.grid_11 { width: (@columnWidth * 11) + (@gutter * 20); }
.grid_12 { width: (@columnWidth * 12) + (@gutter * 22); }

Now, this works as is but if you wanted to simplify things further you could use a Mixin to handle all that messy code. This is much cleaner in my opinion:

.theWidth (@theColumn: 1, @theGutter: 0) {
  width: (@columnWidth * @theColumn) + (@gutter * @theGutter);
}


.grid_1 { .theWidth(1,0); }
.grid_2 { .theWidth(2,2); }
.grid_3 { .theWidth(3,4); }
.grid_4 { .theWidth(4,6); }
.grid_5 { .theWidth(5,8); }
.grid_6 { .theWidth(6,10); }
.grid_7 { .theWidth(7,12); }
.grid_8 { .theWidth(8,14); }
.grid_9 { .theWidth(9,16); }
.grid_10 { .theWidth(10,18); }
.grid_11 { .theWidth(11,20); }
.grid_12 { .theWidth(12,22); }

Finalize the CSS

To finish off the CSS, we have to insert the gutter variable in the column width and nested row section and the totalWidth variable in row class. Remember that the entire point of the exercise is to replace these static numbers with variables that will update automatically any time we make a change to the column and gutter width.

.column {
	margin: 0 @gutter;
	overflow: hidden;
	float: left;
	display: inline;
}
.row {
	width: @totalWidth;
	margin: 0 auto;
	overflow: hidden;
}
.row .row {
	margin: 0 (@gutter * -1);
	width: auto;
	display: inline-block;
}

That’s it! We’re completely finished outlining our framework.

Putting It All Together

Now that we’ve explained all the steps, here’s the finished LESS file all in one shot:

@columnWidth: 60px;
@gutter: 10px;

@allColumns: @columnWidth * 12;
@allGutters: (@gutter * 12) * 2;
@totalWidth: @allColumns + @allGutters;

.theWidth (@theColumn: 1, @theGutter: 0) {
  width: (@columnWidth * @theColumn) + (@gutter * @theGutter);
}


.grid_1 { .theWidth(1,0); }
.grid_2 { .theWidth(2,2); }
.grid_3 { .theWidth(3,4); }
.grid_4 { .theWidth(4,6); }
.grid_5 { .theWidth(5,8); }
.grid_6 { .theWidth(6,10); }
.grid_7 { .theWidth(7,12); }
.grid_8 { .theWidth(8,14); }
.grid_9 { .theWidth(9,16); }
.grid_10 { .theWidth(10,18); }
.grid_11 { .theWidth(11,20); }
.grid_12 { .theWidth(12,22); }

.column {
	margin: 0 @gutter;
	overflow: hidden;
	float: left;
	display: inline;
}
.row {
	width: @totalWidth;
	margin: 0 auto;
	overflow: hidden;
}
.row .row {
	margin: 0 (@gutter * -1);
	width: auto;
	display: inline-block;
}

We can plug this right into the sample HTML document that comes with the 1Kb Grid to see if everything is working properly.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<title>The 1Kb Grid Demo – 12 columns, 60 pixels each, with 20 pixel gutter</title>
	<link rel="stylesheet/less" href="style.less" type="text/css" />
	<script src="http://lesscss.googlecode.com/files/less-1.0.21.min.js"></script>

	<style type="text/css" media="screen">

		body { margin: 20px 0 0 0; }
		p {
			font:60px/100px Helvetica;
			color: #000;
			text-align: center;
			border: 1px solid #000;
			margin: 0 0 20px 0;
		}
	
	</style>

</head>
<body>

<div class="row">
	<div class="column grid_12"><p>12</p></div>
</div>

<div class="row">
	<div class="column grid_8"><p>8</p>
		<div class="row">
			<div class="column grid_4"><p>4</p></div>
			<div class="column grid_4"><p>4</p></div>
		</div>
	</div>
	<div class="column grid_4"><p style="line-height: 222px;">4</p></div>
</div>

</body>
</html>

Preview

If you preview this in the browser, it should be working perfectly.

screenshot

Now try adjusting those first two variables in the code to anything you want and check out the result. For instance, we can change the column width to 80 and the gutter to 50 to get a wider content area with less whitespace.

@columnWidth: 80px;
@gutter: 5px;
screenshot

Conclusion

And there you have it, a flexible grid system that can be changed to any width and gutter size by replacing only two values. This merely scratches the surface of the potential here. You can apply these same principles to any and all of your favorite frameworks.

Leave a comment below and let us know how you would change and improve the LESS CSS Grid. Also be sure to let us know if you extend the concept and do something cool with it!