%h1 How to Use

%p StaticMatic is very easy to work with.  It aims to provide just the tools you need and not get in your way.

%ul 
  %li= link "Developing a site", "#developing"
  %li
    = link "Templates", "#templates"
    %ul 
      %li= link "Layouts", "#layouts"
      %li= link "Helpers", "#helpers"
  
%h2{:id => 'developing'} Developing a site with StaticMatic

%h3 Setting up a site

%p The first thing to do with a StaticMatic site is to set up the folders and files ready for use.  A simple command will create everything you need to get started:

.code staticmatic setup my_site

%p This will set up a number of directories:

%ul
  %li site/  - contains your static site and any assets such as images or javascript files
  %li 
    src/  - where you'll work on your templates
    %ul
      %li layouts/ - contains templates that 'wrap' your main content pages
      %li pages/ - contains the actual pages of content
      %li stylesheets/ - contains any Sass stylesheets you want to create

%h3 Previewing your site

%p When you're ready to start working on your site, you can fire up the preview server to see your changes:

.code staticmatic preview my_site

%p 
  This will start a web server on port 3000.  Point your web browser to 
  = link "http://localhost:3000", "http://localhost:3000"
  to see your site.

%h3 Building your site

%p When you're happy with the website, you can tell StaticMatic to generate the HTML pages:

.code staticmatic build my_site


%h2{:id => 'templates'} Templates

%p 
  %em
    For information on how to use Haml itself, please check out the 
    = link "Haml website", "http://haml.hamptoncatlin.com/docs/haml"
    \.
  
%h3{:id => 'layouts'} Layouts

%p 
  As with web frameworks like
  = link "Ruby on Rails", "http://www.rubyonrails.com"
  \, StaticMatic uses layouts to 'wrap' up the content contained within page templates.

%p A layout typically contains the header and footer code for a page - code that is common to all pages on the site.

%p The only thing a layout *must* contain is a line that tells StaticMatic where to put the content:

.code = yield

%p By default, StaticMatic will look for a template named 'application.haml'.  If you have a page that needs to use a different layout, this can be specified in the page itself:

%em contact_us.haml:
.code - @layout = "contact"

%p The above code would tell StaticMatic to use the layout called 'contact.haml' when building and previewing the 'contact_us' page.

%h3{:id => 'helpers'}

%p StaticMatic provides a number of 'helpers' on top of those in Haml to handle common code and reduce code.

%h4 Links

%p 'link' can automatically set up hyperlinks for you:

.code = link "Contact Us"

produces:

.code <a href="contact_us.html">Contact Us</a>"

%p You can also specify a URL:

.code = link "StaticMatic", "http://staticmatic.rubyforge.org"

%h4 Images

.code = img "me.jpg"
produces:
.code <img src="/images/me.jpg"/>

%h4 Stylesheets

.code = stylesheets

%p This will automatically insert links to any Sass stylesheets in your site source.  

- "It will also link up any static stylesheets in your site/stylesheets/ directory"