Nesta CMS

A Ruby CMS. Built with Sinatra.

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:

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.

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: