Code: Liquid spans & Aligning the .container

[kevind]

Blueprint center aligns .container by default but I want my site left-
aligned. So the first changes to grid.css look like this:

.container { width: 950px; }
.left { margin: 0 auto 0 0; }
.center { margin: 0 auto; }
.right { margin: 0 0 0 auto; }

I extracted margin and created three new classes to hold them in. Now
you can have, for instance, <div class="container right"> and etc.
Only problem is if you use css-classes.css plugin file (BP 0.6) you
will run into a name conflict. I _don't_ use it so this is fine for
me.

Now I want to be able to have liquid layouts. So I will create 24 new
spans with percentage widths. I figured since BP has 24 columns and
100% / 24 = 4+-16% so each span will be a multiple of 4. Here's what
I came up with:

.span-1p { width: 4%; }
.span-2p { width: 8%; }
.span-3p { width: 12%; }
.span-4p { width: 16%; }
.span-5p { width: 20%; }
.span-6p { width: 24%; }
.span-7p { width: 28%; }
.span-8p { width: 32%; }
.span-9p { width: 36%; }
.span-10p { width: 40%; }
.span-11p { width: 44%; }
.span-12p { width: 48%; }
.span-13p { width: 52%; }
.span-14p { width: 56%; }
.span-15p { width: 60%; }
.span-16p { width: 64%; }
.span-17p { width: 68%; }
.span-18p { width: 72%; }
.span-19p { width: 76%; }
.span-20p { width: 80%; }
.span-21p { width: 84%; }
.span-22p { width: 88%; }
.span-23p { width: 92%; }
.span-24p { width: 96%; margin: 0; }

I just added a "p" at the end of each pre-existing class name. Also
added this class:

.containerp { /* Use span-*p to alter size */ }

Which you could use like <div class="containerp center span-24">

Hope this helps!