Making an Art Directed blog

When Geoffrey Grosenbach released the new PeepCode blog it made quite a splash. Each article is beautifully presented with its own unique design. When he wrote about how he'd based his blog on Nesta I got lots of questions asking how to achieve something similar.

Smashing Magazine have also written about blogazines, showcasing some impressive designs.

It's been fairly easy to achieve something similar with Nesta for a while, but it's now easier than ever with the [blogazine plugin][].

Installing the plugin

Open a terminal and navigate to your site's folder. Then add the nesta-plugin-blogazine gem to your Gemfile:

$ cd path/to/site
$ echo 'gem "nesta-plugin-blogazine"' >> Gemfile
$ bundle

The plugin provides a way for us to load a different CSS file for each page.

To use it we need to modify your site's layout template.

Creating your layout template

If you've already customised the design or have installed a theme, skip ahead to the next section.

If your site uses Nesta's default theme you'll need to create a copy of the themes templates in a local ./views folder. This will do it:

$ cd path/to/site
$ mkdir -p views
$ cp $(bundle show nesta)/views/* views

Updating the layout

Open your layout template in an editor (e.g. views/layout.haml or themes/slate/views/layout.haml) and change the line that loads the main CSS file, setting the name of the stylesheet to #{page_design}:

%link(href="/css/#{page_design}.css" media="screen" rel="stylesheet")

By default page_design will return "master" -- if your site's default stylesheet has another name you can specify that instead:

%link(href="/css/#{page_design('application')}.css" media="screen" rel="stylesheet")

Your site should still be working as before, but is now ready for you to start adding your designs...

Creating a new design

For each new design, add your CSS to a new Sass or SCSS file in the views folder. I'm going to assume that you've created a new design in views/trees.scss.

To use your design, open the blog post that you want to apply the design to and set the 'Design: trees' metadata at the top of the file:

Design: trees
Date: 10 Sep 2011
Categories: blog/nature

# Deciduous woodland

Your blog post starts here...

When you reload the page Nesta should serve trees.css instead of the site's default stylesheet.

Tip: You can share common styles between multiple designs using Sass's ability to import other Sass files. At the top of trees.scss you could write:

@import "master"

// Styles specific to the trees design go here...

If your page design is significantly different to the other pages on your site and you need to serve different HTML, you can change the template and layout that are used on the page.

Useful resources

Graham Ashton is the author and maintainer of Nesta CMS. He lives in Manchester where he's building a simpler app for tracking agile projects.

He writes a technical blog at http://effectif.com and can be found at @grahamashton on Twitter.