Nesta gets a new design

Nesta's theme support landed on the master branch last week. Theme support freed me up to update the default look and feel without risk of annoying existing users who liked Nesta just the way it was.

What does it look like?

10 January 2011: The theme described in this post is no longer the default, but is still available as the slate theme.

What's changed?

I'm a bit of a typography geek, and one of the things I've always wanted Nesta to provide was a simple design with good typography; I just hadn't gotten around to writing the CSS. I've spent today combining well established rules for setting type size (from Mark Boulton) with a clever technique to maintain vertical rhythm (courtesy of Richard Rutter).

All this cleverness is wrapped up in some re-usable Sass code (think "programmable CSS") that takes care of the gory details. Nesta's default stylesheet would make a good starting point for styling up your own site (or, of course, you can just ignore it and knock up your own design).

Disclaimer: I've only just finished this new layout and haven't had a chance to test it on any browsers other than Safari 5, Chrome 5 and Firefox 3.6, so if that could be a problem for your audience test it before you deploy. Bug reports with screenshots will be acted on sharpish!

Updating your site with the new look

If you've already got a Nesta site the easiest way to update is just to merge the latest changes from the master branch:

$ git pull

If you've made any changes to files that have been modified on the master branch you may need to resolve some merge conflicts.

Nesta now requires Haml 3 (there are some clever Sass mixins that automatically adjust colours for you), so you'll also need to re-run bundler to update your dependencies:

$ bundle install

If you've been writing your own Sass there's a possibility that Sass 3 will print some deprecation warnings, as the format has changed slightly. You can upgrade your files using sass-convert, like so:

$ sass-convert --in-place --from sass2 local/views/local.sass

That's it; you're done. Fire up a local web server and have a look round your site.

If you want to personalise it a little there are couple of easy changes you could make:

  1. Tweak the colours: Try changing the value of $tint in views/master.sass. Most of the colors are automatically derived from this shade, so the entire site will be updated accordingly.
  2. Change the typeface: I've gone for Helvetica with this update but the design would work just as well with a different font stack. You would just need to update the references to Helvetica in views/master.sass.

Re-installing the old theme

If for some reason you'd rather keep things looking as they were, you can re-install the old theme:

$ ./scripts/theme install git://
Enabling original theme in config/config.yml

Commit any changes, deploy it and you're done!

Published on