__step_by_step.sh

# todo

_mixins.sass

// put me in views/stylesheets/_mixins.sass

=image_replace(!width, !height, !url)
  display: block
  width= !width
  height= !height
  background= url(!url) left top no-repeat
  text-indent: -999em
  -moz-outline: none

frankly.rb

# put me in frankly.rb

require 'rubygems'
$:.unshift File.dirname(__FILE__) + '/sinatra/lib'
$:.unshift File.dirname(__FILE__) + '/vendor/haml/lib'

require 'sinatra'

get '/stylesheets/:name.css' do
  content_type 'text/css', :charset => 'utf-8'
  sass "stylesheets/#{params["name"]}".to_sym, :style => :expanded, :load_paths => ["views/stylesheets"]
end

get '/*' do
  name = params["splat"][0]
  name = "index" if name.empty?

  haml name.to_sym
end

index.haml

/ put me in views/index.haml

!!!
%html
  %head
    %meta{ 'http-equiv' => 'Content-Type', :content => 'text/html; charset=UTF-8' }
    %title frankly

    %link{ :media => 'screen', :type => 'text/css', :href => '/stylesheets/index.css', :rel => 'stylesheet' }
  %body
    %h1
      frankly
    %p
      frankly, braid is pretty sassy

index.sass

// put me in views/stylesheets/index.sass

@import _mixins.sass

body
  h1
    +image_replace(185px, 135px, "http://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/Franksinatrawalkoffame.jpg/180px-Franksinatrawalkoffame.jpg")
    margin: 2em auto
  p
    font-style: italic