compass and sinatra documentation

.gitignore

@@ -1,3 +1,6 @@
 .DS_Store
 */.DS_Store
 .sass-cache
+.bundle
+public/css
+.yardoc

Gemfile

@@ -0,0 +1,8 @@
+gem "sinatra"
+gem "haml"
+gem "compass"
+gem "compass-susy-plugin"
+gem "thin"
+gem "thor"
+gem "rack-test"
+gem "sinatra-test-helper"

Gemfile.lock

@@ -0,0 +1,52 @@
+GEM
+  specs:
+    backports (2.3.0)
+    chunky_png (1.2.5)
+    compass (0.11.5)
+      chunky_png (~> 1.2)
+      fssm (>= 0.2.7)
+      sass (~> 3.1)
+    compass-susy-plugin (0.9)
+      compass (>= 0.11.1)
+    daemons (1.1.4)
+    eventmachine (0.12.10)
+    fssm (0.2.7)
+    haml (3.1.3)
+    rack (1.3.5)
+    rack-protection (1.1.4)
+      rack
+    rack-test (0.6.1)
+      rack (>= 1.0)
+    sass (3.1.10)
+    sinatra (1.3.1)
+      rack (~> 1.3, >= 1.3.4)
+      rack-protection (~> 1.1, >= 1.1.2)
+      tilt (~> 1.3, >= 1.3.3)
+    sinatra-contrib (1.3.1)
+      backports (>= 2.0)
+      eventmachine
+      rack-protection
+      rack-test
+      sinatra (~> 1.3.0)
+      tilt (~> 1.3)
+    sinatra-test-helper (1.0)
+      sinatra-contrib
+    thin (1.2.11)
+      daemons (>= 1.0.9)
+      eventmachine (>= 0.12.6)
+      rack (>= 1.0.0)
+    thor (0.14.6)
+    tilt (1.3.3)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  compass
+  compass-susy-plugin
+  haml
+  rack-test
+  sinatra
+  sinatra-test-helper
+  thin
+  thor

README.markdown

@@ -0,0 +1,69 @@
+This app is a simple starting point for those wanting to explore compass with sinatra.
+
+Quick start:
+-----
+Clone this project:
+
+    git checkout https://[email protected]/rubycut/compass-sinatra.git
+
+Prepare dependencies:
+
+    bundle install
+
+Run this app:
+
+    rackup
+
+Point your browser to http://localhost:9292/
+
+Start playing, important files to play with:
+
+* views/index.haml
+* views/css/_base.sass    <--- Grid options
+* views/css/screen.sass    <--- Layout
+
+
+Susy
+----
+This repo bundles [susy]("http://susy.oddbird.net/") plugin together with compass. 
+
+
+## What is going on
+
+### Compass
+
+[Sass]("http://sass-lang.com/") basically allows you to write nicer css, it supports variables and some other stuff.
+
+But [compass]("http://compass-style.org/") , goes a step further: "The compass core framework is a design-agnostic framework that provides common code that would otherwise be duplicated across other frameworks and extensions."
+
+This means it it gives you sass tools so you don't have to start from scratch on every new project and duplicate code. Most important of all, compass also supports plugins.
+
+I started this project with command:
+
+    compass create . --require susy --using susy --syntax sass --sass-dir views/css
+
+which creates 3 files only:
+
+* config.rb 
+* views/css/screen.sass 
+* views/css/_base.sass 
+
+_base.sass is where you load susy plugin and set options for plugin.
+
+screen.css is where you define placement of your blocks into grid
+
+### Sinatra full auto
+
+When you start sinatra app, it will generate css on the fly, see app.rb for details. Basically it just load Compass before calling sass method.
+
+### Manual creation
+
+out of this 3 files, it creates *stylesheets/screen.css* every time your run `compass compile` or `compass watch` for example if you want to use it some other projects which are not ruby.
+
+config.rb is compass configuration which is loaded every time, it *remembers* your create command, so you don't have to enter same options again and again.
+It also gives you ability to customize your target *stylesheets/screen.css* file.
+
+
+## Conclusion
+
+As you can see, result of using compass with plugins is one css file only. You can generate it on the fly with sinatra or manually using  `compass compile` or `compass watch`

app.rb

@@ -7,18 +7,22 @@
 set :app_file, __FILE__
 set :root, File.dirname(__FILE__)
 set :views, "views"
-set :public, 'static'
+set :haml, :format => :html5 # default Haml format is :xhtml
+
+enable :logging
 
 configure do
-  Compass.add_project_configuration(File.join(Sinatra::Application.root, 'config', 'compass.config'))
+  Compass.add_project_configuration(File.join(Sinatra::Application.root, 'config.rb'))
 end
 
-# at a minimum, the main sass file must reside within the ./views directory. here, we create a ./views/stylesheets directory where all of the sass files can safely reside.
-get '/stylesheets/:name.css' do
+# at a minimum, the main sass file must reside within the ./views directory. here, we create a ./views/css directory where all of the sass files can safely reside.
+get '/css/:name.css' do
   content_type 'text/css', :charset => 'utf-8'
-  sass(:"stylesheets/#{params[:name]}", Compass.sass_engine_options )
+  sass(:"css/#{params[:name]}", Compass.sass_engine_options )
 end
 
 get '/' do
+  @name = params[:name]
+  puts @name
   haml :index
-end
+end

config.rb

@@ -0,0 +1,28 @@
+require 'susy'
+# Require any additional compass plugins here.
+
+# Set this to the root of your project when deployed:
+http_path = "/"
+
+# we don't want to create it in sinatra dir, because then sinatra will just serve it, it will not regenerate it each time
+#css_dir = "public/css"
+http_stylesheets_path = "/css"
+sass_dir = "views/css"
+images_dir = "public/images"
+http_images_path = "/images"
+javascripts_dir = "javascripts"
+
+# You can select your preferred output style here (can be overridden via the command line):
+# output_style = :expanded or :nested or :compact or :compressed
+ouput_style = :expanded
+environment = :development
+
+relative_assets = true
+
+
+
+# If you prefer the indented syntax, you might want to regenerate this
+# project again passing --syntax sass, or you can uncomment this:
+# preferred_syntax = :sass
+# and then run:
+# sass-convert -R --from scss --to sass views/css scss && rm -rf sass && mv scss sass

config.ru

@@ -0,0 +1,10 @@
+require 'rubygems'
+require 'bundler/setup'
+
+require 'sinatra'
+require './app'
+
+use Rack::ShowExceptions
+
+set :env, :development
+run Sinatra::Application

test/test_app.rb

@@ -0,0 +1,24 @@
+require './app'
+require 'test/unit'
+require 'rack/test'
+
+ENV['RACK_ENV'] = 'test'
+
+class AppTest < Test::Unit::TestCase
+  include Rack::Test::Methods
+
+  def app
+    Sinatra::Application
+  end
+
+  def test_it_says_hello_world
+    get '/'
+    assert last_response.ok?
+    assert last_response.body.include?('Hello World')
+  end
+
+  #def test_fail
+    #flunk 'Write your App tests!'
+  #end
+
+end

views/css/_base.sass

@@ -0,0 +1,12 @@
+// Imports -------------------------------------------------------------------
+
+@import susy
+
+// Grid ----------------------------------------------------------------------
+
+$total-cols: 12
+$col-width: 4em
+$gutter-width: 1em
+$side-gutter-width: $gutter-width
+
+$show-grid-backgrounds: true

views/css/_mockup.sass

@@ -0,0 +1,2 @@
+body
+  background: #FFCCCC

views/css/screen.sass

@@ -0,0 +1,20 @@
+// Imports -------------------------------------------------------------------
+
+@import base
+
+/* Layout ------------------------------------------------------------------
+
+.container
+  +container
+  +susy-grid-background
+
+.aside
+  +columns(3,9)
+  +omega(9)
+
+.body
+  @include columns(3,9)
+
+.footer
+  +full
+  +pad(3,3)

views/index.haml

@@ -1,18 +1,19 @@
 !!!
-!!! XML
-!!! Strict
-%html{ :xmlns => "http://www.w3.org/1999/xhtml", :lang => "en", 'xml:lang' => "en" }
+%html
   %head
+    %meta{ :charset => "utf-8" }
     %title compass sinatra
-    %meta{'http-equiv'=>"Content-Type", :content=>"text/html; charset=iso-8859-1"}/
     %meta{'http-equiv'=>"Content-Language", :content=>"en-us"}/
-    %link{:href=>"/stylesheets/screen.css", :media=>"screen", :rel=>"stylesheet", :type=>"text/css"}/
+    %link{:href=>"/css/screen.css", :media=>"screen", :rel=>"stylesheet", :type=>"text/css"}/
   %body
-    .container.showgrid
+    .container
       .header
-        %h1 header
-      .body
+        %h1= "Hi #{@name ? @name : 'no name'}!"
+        %p Hello World!
+      .aside
+        Hooah
+      .body        
         %h2 body
         %p Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
       .footer
-        %p footer
+        %p footer