Just because everything in CSS is a box doesn’t mean that everything has to look like a box.

The fact is that the CSS box model lends itself to grid-based designs. Consistent, and with a legacy of strong support from the print world, grids are the design foundation of millions of pieces of work. But grids can also be limiting: when every other website is a two or three-column design rendered in primary colours, it can be hard to make yours stand out.

A common reaction is to break out of the grid: to deliberately set elements off-kilter. This is harder than it appears: the process is never random, and involves as much (if not more) design consideration as any grid-based method.

It is my intention to show the design and development process for a non-grid website in several instalments over the next few months. From a practical standpoint, the techniques used to create non-rectangular web page designs might be summarized as follows:

• tile background images with uneven non-congruent edges to break up rectangularity
• use CSS sprites (or variations thereof) to create non-rectangular buttons
• use box-shadow to create depth
• use border-radius to soften corners and make circles
• judiciously use absolute and relative positioning to layer and overlap elements
• use CSS transformations (or images manipulated in PhotoShop) to set things off-kilter
• use inline styles to stagger aligned elements
• use worn, dirty, torn-up textures and colour effects rather than simple primary hues

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.