LESS Grid CSS for Fluid Width Grids

by Christoph Menge in .NET

I’m a huge fan of LESS. CSS is nice, but using LESS makes your files so much cleaner. Now I had to cope with some grid systems today, and I figured that many online grid generators are either broken, down or buggy. Perhaps it’s just not my lucky day. Anyway, the cool thing is that those grid CSS files are somewhat simple – just some basic math.

LESS CSS?! What?

Using LESS mixins, we can replace cumbersome CSS with a few simple statements. A mixin basically copies all properties over. For example, the following LESS will produce really huge, red text if applied:

.huge{
    font-size: 80px;
}

.hugeWarning{
    .huge;
    color: red;
}

OK, nice, but the CSS equivalent wouldn’t be very different. But you can also parametrize mixins, the classical example (taken directly from the LESS website) being rounded corners:

.rounded_corners (@radius: 5px) {
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
  border-radius: @radius;
}

#header {
  .rounded_corners;
}

#footer {
  .rounded_corners(10px);
}

LESS in ASP .NET

If you want to use LESS from your shiny new ASP.NET MVC3 application, I suggest you grab a copy of Justin Etheredge’s brilliant zero-friction SquishIt library which compiles LESS to CSS, combines the files and minimizes them. Oh, yes, and of course also handles JavaScript combining and minification!

Now, since LESS also supports some mathematical operations, we can do all the nasty grid-calculation using LESS. For a fluid grid, this becomes something like this:

/* Fluid grid based on 960.gs syntax
This grid contains ONLY the fluid-container_12 class and it's associated grid, pull, push, suffix and prefix classes. Note that this CSS does not support nesting of grids.
*/

@columnCount: 12; // When you increase this, you also need to add some more classes below
@halfGutter: 1%; // half of the gutter width

.fluid-container_12 {
	margin-left: 0px;
	margin-right: 0px;
	width: 100%;
}

.grid (@n: 1)
{
	width: @n * 100% / @columnCount - 2.0 * @halfGutter;
	margin-left: @halfGutter;
	margin-right: @halfGutter;
}

.fluid-container_12 .grid_1{ .grid(1); }
.fluid-container_12 .grid_2{ .grid(2); }
.fluid-container_12 .grid_3{ .grid(3); }
.fluid-container_12 .grid_4{ .grid(4); }
.fluid-container_12 .grid_5{ .grid(5); }
.fluid-container_12 .grid_6{ .grid(6); }
.fluid-container_12 .grid_7{ .grid(7); }
.fluid-container_12 .grid_8{ .grid(8); }
.fluid-container_12 .grid_9{ .grid(9); }
.fluid-container_12 .grid_10{ .grid(10); }
.fluid-container_12 .grid_11{ .grid(11); }
.fluid-container_12 .grid_12{ .grid(12); }

.prefix(@n:1)
{
	padding-left: @n * 100% / @columnCount;
}

.fluid-container_12 .prefix_1 { .prefix(1); }
.fluid-container_12 .prefix_2 { .prefix(2); }
.fluid-container_12 .prefix_3 { .prefix(3); }
.fluid-container_12 .prefix_4 { .prefix(4); }
.fluid-container_12 .prefix_5 { .prefix(5); }
.fluid-container_12 .prefix_6 { .prefix(6); }
.fluid-container_12 .prefix_7 { .prefix(7); }
.fluid-container_12 .prefix_8 { .prefix(8); }
.fluid-container_12 .prefix_9 { .prefix(9); }
.fluid-container_12 .prefix_10 { .prefix(10); }
.fluid-container_12 .prefix_11 { .prefix(11); }
.fluid-container_12 .prefix_12 { .prefix(12); }

.suffix(@n:1)
{
	padding-right: @n * 100% / @columnCount;
}

.fluid-container_12 .suffix_1 { .suffix(1); }
.fluid-container_12 .suffix_2 { .suffix(2); }
.fluid-container_12 .suffix_3 { .suffix(3); }
.fluid-container_12 .suffix_4 { .suffix(4); }
.fluid-container_12 .suffix_5 { .suffix(5); }
.fluid-container_12 .suffix_6 { .suffix(6); }
.fluid-container_12 .suffix_7 { .suffix(7); }
.fluid-container_12 .suffix_8 { .suffix(8); }
.fluid-container_12 .suffix_9 { .suffix(9); }
.fluid-container_12 .suffix_10 { .suffix(10); }
.fluid-container_12 .suffix_11 { .suffix(11); }
.fluid-container_12 .suffix_12 { .suffix(12); }

.push(@n:1)
{
	left: @n * 100% / @columnCount;
}

.fluid-container_12 .push_1 { .push(1); }
.fluid-container_12 .push_2 { .push(2); }
.fluid-container_12 .push_3 { .push(3); }
.fluid-container_12 .push_4 { .push(4); }
.fluid-container_12 .push_5 { .push(5); }
.fluid-container_12 .push_6 { .push(6); }
.fluid-container_12 .push_7 { .push(7); }
.fluid-container_12 .push_8 { .push(8); }
.fluid-container_12 .push_9 { .push(9); }
.fluid-container_12 .push_10 { .push(10); }
.fluid-container_12 .push_11 { .push(11); }
.fluid-container_12 .push_12 { .push(12); }

.pull(@n:1)
{
	right: @n * 100% / @columnCount;
}

.fluid-container_12 .pull_1 { .pull(1); }
.fluid-container_12 .pull_2 { .pull(2); }
.fluid-container_12 .pull_3 { .pull(3); }
.fluid-container_12 .pull_4 { .pull(4); }
.fluid-container_12 .pull_5 { .pull(5); }
.fluid-container_12 .pull_6 { .pull(6); }
.fluid-container_12 .pull_7 { .pull(7); }
.fluid-container_12 .pull_8 { .pull(8); }
.fluid-container_12 .pull_9 { .pull(9); }
.fluid-container_12 .pull_10 { .pull(10); }
.fluid-container_12 .pull_11 { .pull(11); }
.fluid-container_12 .pull_12 { .pull(12); }

Nifty, huh?

Post to Twitter Post to Delicious Post to Digg Post to Facebook

No related posts.

← Previous

Next →

2 Comments

  1. Saleh says:

    very nice , thanks

  2. [...] LESS Grid CSS for Fluid Width Grids. Pas framework, mais un article expliquant la construction d’une grille fluide avec LESS, [...]

Leave a Comment