Chunks, the almost-nonexistent CSS layout system

Introduction to Chunks

Surely nowadays CSS layout systems are complex. They often provide you a grid and some rules for positioning elements on it. It can be useful of course, but most of the time you end with a big CSS file full of rules you never use. Not to mention the cold rigid look grids give to a page.

Chunks is at the opposite side. It’s less than 1kb (minified, uncompressed). You can easily dive in it and learn every rule in no time, because there are only a few (less than 15 to remember). It just throws away grids and uses a “cut it in chunks” approach, enabling you to design by dividing the space naturally.

We’ll call “chunk” an HTML element that you enable for layout.

More highlights:

• Especially good at fluid layouts because it don’t use px, but %.
• Automatically sets bottom margins to your chunks, and it works well even on nested chunks (no margin duplication).
• No CSS reset. Embrace the laissez-faire. It’s the web, damn!
• Copy & paste installation is possible (and incredibly easy, if you know how to use a computer)
• Less than 1kb minified. When compressed, Chunks is ethereal…
• Non brain-intrusive, <15 rules is not difficult to remember.

Getting Started

Installation

Copy the contents in chunks.css to your own stylesheet. Good place is at the very top, or just after the CSS reset if you have one.

Never change or customize Chunks rules. It will lead to a messy code, you won’t be able to discern bugs from you and bugs from Chunks. More, upgrading to a newer version will not be possible.
If you need to change the behavior of Chunks, please overwrite its rules in you own code.

A basic (but somewhat complete) example

<div class="Wrapper">
	<div id="header" class="Chunk">
		<h1>Chunks of bacon</h1>
	</div>
	<div class="Chunk">
		<div id="content" class="Chunk divided b3 x2"></div>
		<div id="sidebar" class="Chunk divided b3 return">
			<div class="Chunk"></div>
			<div class="Chunk"></div>
			<div class="Chunk nobottom"></div>
			<div class="Chunk"></div>
		</div>
	</div>
</div>

(more to come)

The lines that no one should read

IE6 and prior versions aren’t supported. Seriously, just ask your users to upgrade. Otherwise in ten years we will still struggle with this dinosaur. We don’t want that, right?