« links for 2006-04-30 | Main | links for 2006-05-01 »

CSS from scratch

(for those not using a feed reader)

I just rewrote the CSS for the main pages of this site. It's a long time since I wrote out a CSS file from scratch. Most CSS files I have written have been cobbled together from spare parts, or adjustments to existing sheets - the usual view source approach. I found starting from zero highly educational, especially what needs to happen for fluid layout, typeface scaling, tabs, and div based layout. There are plenty of problems no doubt with this site's stylesheet (and I still don't have a print.css (done)), but I think it's better today than it was yesterday.

I also changed the layout to have 2 columns instead of 3. The Google ads are gone from the front page (they don't "fit" there anywhere now) - instead there are pullins from del.icio.us, last.fm and flickr. As an experiment I added co.comment links to posts - tracking weblog comments is a nuisance, I don't have/want a comments feed, so co.mments might be a good way to deal with that*. I also added a new colors to the site - orange for feed thingies and blue for del.icio.us (up to now this site used black, white, gray, red and maroon). I added some leading to the text, I think it makes it easier to read. The comments start with the commentors name/link in a larger font instead of having them at the bottom of the comment. Other blogs I like do that, and it seems easier to follow, and to truth be told, I also wanted it to be easier for me to grab a commentor's homepage link with a right-click. Finally in comments - I changed the form layout so that the comment box and the buttons are at the top instead of the email/url/name fields, which is the default MT layout. The new comment layout is not idiomatic, but I figure putting the optional stuff first is just putting junk in someone's path.

I still don't have an about page. Must fix that.

update: Dominic says I need a left margin, he's right (done). It's easy to tell I work with fullscreens and alt tab ;)

* this because someone will ask - no, I have no other interest in co.mment.

April 30, 2006 11:27 PM


Dominic Mitchell
(April 30, 2006 11:44 PM #)

A little bit of margin on the left wouldn't go amiss. :-)

Other than that, it seems similar to before (I assume that was the aim).

Print CSS files are pretty easy. I usually do them by printing out a page, seeing what elemenst don't want to be on there and setting them to display:none. They're worthwhile doing though, as Jeremy was mentioning the other day (Print stylesheets).

Bill de hOra
(May 1, 2006 12:51 AM #)

Hi Dominic, thanks for spotting the margin and the link to the print.css. Much appreciated.

(May 1, 2006 09:01 AM #)

good improvement, your previous design was a pain in the butt because of the fixed width :-)

Dominic Mitchell
(May 1, 2006 09:37 AM #)

Many thanks -- that's much more readable!

Bill de hOra
(May 1, 2006 11:36 AM #)

"previous design was a pain in the butt because of the fixed width"

I think that's the point - given the old layout was cobbled together from revenant parts, it wasn't much of a design, in the conscious sense ("make it all black and white" hardly counts :)

And yes, fixed width do suck; it was worth learning how to deal with fluid layouts.