White On Black

Yes, the Super­pos­i­tion Kitty web­site has been turned on its head. Black is White! White is Black! And … that’s about it. A code cleanup was long due, and while I was at it I changed a few things around. Most import­antly, I cleaned up the CSS, strip­ping it of a third of it’s weight in the pro­cess and hope­fully speed­ing up load times.

Unfor­tu­nately, a few of the tutorial posts are now slightly out­dated. I will be updat­ing them in the com­ing weeks to com­ply with the new theme and changes in code.

I’d like to thank 1KB CSS Grid for the base grid used in the new code. I’d messed around with vari­ous grids — such as 960.gs — before, but found them almost uni­ver­sally bloated in the effort to provide for every even­tu­al­ity. 1KB Grid is tiny and neat and much more eleg­ant than the sys­tem I had come up with pre­vi­ously. The grid now looks some­thing like this:

.grid_1 { width:222px; }

.grid_2 { width:462px; }

.grid_3 { width:702px; }

.grid_4 { width:942px; }

.column {
margin:0 9px;
overflow:hidden;
float:left;
display:inline;
}

.row {
width:960px;
margin:0 auto;
overflow:hidden;
}

.row .row {
margin:0 -9px;
width:auto;
display:inline-block;
}

And the cor­res­pond­ing HTML is simply:

<div class="row">
	<div class="column grid_2">
	</div>
	<div class="column grid_1">
	</div>
	<div class="column grid_1">
	</div>
</div>

This sets up the nicely format­ted 3 columns that you are see­ing here, and provides a clean base to con­tinue to com­pose to a hori­zontal baseline. It’s also simple to nest the columns within each-other as seen here.

WIth this new sys­tem I should be able to change up any part of the design with a min­imum of fuss (and code) whenever needed.