Dynamic CSS layouts in 5 minutes

9th June, 2008 | 13 Comments | Filed under Tutorial

I released a plugin last week for Cacheer that allowed for quick and easy CSS layouts. I think much of its awesomeness was lost on people because they couldn't see the benefits. So I've written a quick tutorial to explain it. It only takes 5 minutes.

If you’ve read my previous post about my Grid Plugin for CSS Cacheer, you may still be wondering just how you can use it in practice. I won’t go through the installation, it’s pretty straight forward, I just want to show you what its capable of. You’ll be creating a usable layout, ready for design, in only 5 mins.

How does it work?

CSS Cacheer by Shaun Inman, is a script that intercepts requests made to CSS files on the server, processes the CSS, then caches it. This enables us to use constants, compressors and even a dynamic grid. The grid is a plugin I wrote that enables users to define a grid within your css. You'll never need a grid.css again. This is a tutorial to show you how to use it.

Essentially, you can create a layout then change it from within the CSS, so there's no extra markup needed like in Blueprint (eg span-1, span-2 etc).

The only thing you’ll need to get this running is a local web server. If you’re on a Mac I’d recommend MAMP, and if you’re on Windows, WAMP. Hopefully you know how to get a simple web server running. I’m not going to explain this part, so make sure you know how it works.

I built this in Safari, but it should work fine in any browser. The only thing that may change is the images in the bottom right box, they might not display as fillers like in Safari

Step 1 - Installation

To save you any trouble of getting it set up, and to move directly into the layout, I’ve prepared some files earlier for you to work from

Included in the work files is Shaun Inman's CSS Cacheer script, a CSS file, and my grid plugin already installed. This tutorial aims to show you what is possible with this plugin thanks to Shaun Inman's script. Make sure you pay him a visit.

Download Work Files

Step 2 - Create your grid

Open master.css in the css directory, and add this code.

This is the parameters for your grid. It’s fairly self-explanatory. Column count is the number of columns you want to work with. Gutter width is the width between your columns, and grid width is the width of your page. You can also define your grid using ‘column-width’ and leaving out the grid width. So the grid is fairly flexible.

Step 3 - Add the Markup

Now open index.html and add the following code.

This container will wrap the page and hold the grid. It functions exactly the same as the Blueprint container. Now we need to add the actual grid elements. Add these divs inside the container:

Step 4 - Give them style

We’ll make a basic layout. It’s really easy to change this around, so it’s good for quick mock ups. I could make a grid mock up quick with CSS than with Photoshop.

Add this code to master.css:

You should get something that looks like this:

No floats or widths. It’s all done dynamically. So lets add some content. Remove all the divs inside your .container, and add this new code.

Before we look at this in a browser, lets add some quick styles. I’ve already created some basic typography. So just add this code to the top of your master.css:

Now have a look at it. It should look something like this:

Obviously, the grid segments don’t have any padding. Looks a little bit stupid. So lets do a couple of things to tidy it up. Firstly, lets add some padding and borders to some of the blocks.

Change #info-1 to:

A couple of things should be noted. The columns property must always come first in your list of properties. Notice that I used shorthand for the padding. This is the best way to ensure your padding is calculated. You could run into problems if your padding is declared in other selectors, as this won’t be factored in. So this way is your best bet. Also, with borders, you can declare the standard border property, but you must specify the border-right and border-left if you want the border calculated as well.

You won’t have any problems if your CSS is well-formed.

Now change #info-3 to:

There’s not much to note here, except that I’ve given it a 0 margin on the right. This is because it is the last block in a row of columns. You need to always specify this for a column on the end, otherwise it will drop down.

We’ve kept the background colour on the divs up till now so that we can see the grid elements. You can go ahead and remove this.

So now we’ve created a working layout in a couple of minutes. But lets see just how flexible it is. The client now thinks the page is too wide, as the majority of people viewing their site are still on 800 x 600 (it could happen), so now we have to resize our whole layout! No we don’t. Simply change grid-width to 770. You can even go ahead and change the height of the promo div. So now we have something that looks like this:

So we created a fully working css layout in around 5 mins. You could get this layout working with only 1 line of code for each div if you wanted to. eg #info-1 {columns:8;}. So you could even get this layout to around 10 or so lines.

I'm looking at adding even more features in the near future. So stayed tuned. You can download Shaun Inman's CSS Cacheer from his blog, and you can download and stay updated with the grid plugin over at my previous post.

Enjoy this post? Share it with others.

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

Leave a Comment

• Name*
• Email*
• Website
• Comment*

Submit Reset

In the Industry? - Come along to Bits & Pixels

Flickr

Latest Work

View Portfolio | Contact Me

Elsewhere