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:

  1. Install a different theme.
  2. Implement your own design, either from scratch or based on the default templates.
  1. Choosing a theme

    Themes are typically stored in Git repositories, and can be installed into the themes folder with the nesta theme:install command. Several themes can be installed at once, but only one will be active. The active theme is set in the config.yml file.

    Continue reading

  2. Templating engines

    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.

    Continue reading

Articles on Changing the design

  1. Refresh the browser when you save a file

    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?

    Continue reading