Creating a new design

If you want to create your own design you have two choices:

  1. Copy all the templates into your project (see the previous page), or
  2. Start from scratch.

This page is about starting from scratch.

Make yourself a views directory in which to store your templates:

$ cd mysite.com
$ mkdir -p views

The minimum files that you need are:

  • views/layout.haml
  • views/page.haml
  • views/your-stylesheet.sass (call it whatever you like)

NOTE: We're using .haml and .sass files in this example. If you'd rather use different templating engines you can do, but you'll need to follow the instructions on changing the templating engine in order for them to work.

Build up your HTML and CSS as you go. As a rough guide you ought to put any content that will appear on every page on your site in layout.haml, and any content that only appears on some of your pages in page.haml. You can create alternative templates for different kinds of page (e.g. article.haml) and insert them into the same layout.

At some point your layout.haml file should call yield, which is where the contents of page.haml will be inserted. The page.haml file needs to call the @page.to_html(self) method to convert your Markdown/Textile text into HTML.

See the default layout.haml and page.haml files in the gem for some inspiration.

Link to your stylesheet from within the layout (CSS files are automatically created from Sass files when a page is loaded), and are served up from /css/your-stylesheet.css.

Drop your static assets (e.g. images) in the public folder. If you create a folder called public/images then its contents will be available at URLs like /images/logo.png.