ndanger.organism

Part 2 of the site redesign is done! In Part 1 I styled the blog and blah blah blah.

It turns out that styling is an open problem. I’ve spend the last 2 days making small fidgety changes until I’ve ended up with the black-and-white horizontally ruled wonder you’re looking at. Basically the low-rent version of Khoi Vinh’s excellent site. Though to be fair, he is the design director of NYTimes.com while I’m a programmer who makes interfaces that look something like:

Command line baby! If you can peek around my careful redacting, you can see that I leave the Cheetah warning in place. And although you can’t see it the command line parameters are currently case-sensitive. Yes, I am an interface genius. (Though the program itself is pretty neat: it reflects the database and generates documentation on our internal wiki. It uses diff and patch to try to merge human changes, so it can accommodate human edits to the page while the schema changes. Sexy.)

Blueprint

I did the basic structure using Blueprint CSS and then tweaked the hell out of the styles. Blueprint’s grid was extremely helpful, mostly because I don’t know anything about CSS layout. The typography module also produces a reasonably attractive page, though a bit on the “small in the way only designers can love” side. The typography is designed to produce a grid. While I understand the grid theoretically–mostly from reading web articles–I didn’t actually understand it in practice. I think it’s about defining some common elements (p, h?, .small, et.) with grid friendly spacing and then using these for all basic layout (images, pull-quotes and others can float outside the grid). So it would have been easiest if in my WordPress templates I set the date to some pre-defined blueprint class that was already grid friendly. Instead I got all semantic and set it to a date class and then bumped it around with CSS until it looked good. Oh yeah, and until it had managed to destroy my grid spacing. I guess I could have styled my date class to preserve the grid, but…

One of the main complaints I’ve read about blueprint is that it encourages the mixing of semantic and style markup. A weak example is the the date line I just mentioned. I’d like to be able to set the class to date (well, I guess it should have been wp-date or something less ambiguous) and then been able to use blueprints typography to size it to the grid. Likewise my html & php pages all feature lots of class="column span-6" sorts of markup. Using WordPress makes this easier, since I have less places to make changes, but it was still annoying. I’d really like to be able to use blueprint as a true framework: something you plug-in on the back end. This would be easy if you had something like inheritance:

.wp-date {
  @@inherit .small .right-align;
  color: #ccc;
}

So the wp-date class would inherit all the styles of the small and right-align classes and then override color. Basically CSS macros. switchcss might be the Python solution, but I haven’t tried it.

Logos

I also hand-made the delicious logo in the upper right. Just a few pencil lines, a few text-tools and an overlay in GIMP… not too bad. I’m still going to play around. In particular, I might darken the right and bottom edge to add some depth.

Miniature versions of the logo might also make nice article starts & stops.

404, 500

Get lost in style. You can check them out if you don’t feel like actually getting lost (or triggering an internal server error):

• 404
• 500 (NSFW, language)

ToDos

When reviewing part 1 before writing this, I realized I hadn’t done the 404 pages yet. That’s what Todo lists are for, I guess. That’s why installing trac has made the top of this one:

• Install Trac and add bugs for the site
• Compress CSS
• Play around with darkening right and bottom edge of logo
• Use logo for start/stop icons on articles
• Better–more flexible–styling of single page articles (pull-outs for images & blockquotes)
• Drop shadow for images
• Smart fonts (sifr)

That should keep me busy.

Tell me what you think

Oh yeah, I also finished my WordPress templates. The big announcement is that (drumroll)… comments are enabled! So let me know what you think before the spam starts rolling in.