Changing the design
Out of the box Nesta has a clean simple look, but for many sites you’re going to need to change it. There are two approaches that you can take:
- Install a different theme.
- Implement your own design, either from scratch or based on the default templates.
Themes are typically stored in Git repositories, and can be installed into the
themesfolder with the
nesta theme:installcommand. Several themes can be installed at once, but only one will be active. The active theme is set in the
Start here if you’d like to base the design of your site on the default templates (or an existing theme).
If you need to implement your own design from scratch this is the page for you.
By default Nesta uses Haml for HTML templating, and Sass (in the Sassy format) because – once you’re used to them – they’re just better. If you’d rather change them (e.g. to Erb and the SCSS syntax) you’ll need to tell Nesta how to find your templates. You can use any of the templating engines that are supported by Sinatra – this page shows you how.
Everything you need to know to design and release your own Nesta themes.
Most of the pages on a Nesta site are written in a text editor, using Markdown or Textile. You don’t get to see what your words look like on a web page you save the file to disk and reload your browser. Wouldn’t it be nice if your browser automatically reloaded pages as you saved them? When designing a theme, what if changes to HTML and CSS were reloaded immediately?
If you write about software, you can make code look more attractive by adding syntax highlighting to your pages. Nesta is a Sinatra app (and is therefore built on top of Rack), which makes it easy to setup syntax highlighting with the
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.