diff --git a/.gitignore b/.gitignore index fd18a0b..92e8cbc 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,6 @@ .DS_Store */.DS_Store .sass-cache +.bundle +public/css +.yardoc \ No newline at end of file diff --git a/Gemfile b/Gemfile new file mode 100644 index 0000000..7968853 --- /dev/null +++ b/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" diff --git a/Gemfile.lock b/Gemfile.lock new file mode 100644 index 0000000..2540570 --- /dev/null +++ b/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 diff --git a/README b/README deleted file mode 100644 index bc2fa0f..0000000 --- a/README +++ /dev/null @@ -1 +0,0 @@ -This app is a simple starting point for those wanting to explore compass with sinatra. \ No newline at end of file diff --git a/README.markdown b/README.markdown new file mode 100644 index 0000000..c59a6ff --- /dev/null +++ b/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://rubycut@github.com/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` diff --git a/app.rb b/app.rb index 51f5fb9..a71c0db 100644 --- a/app.rb +++ b/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 \ No newline at end of file +end diff --git a/config.rb b/config.rb new file mode 100644 index 0000000..719ed3e --- /dev/null +++ b/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 diff --git a/config.ru b/config.ru new file mode 100644 index 0000000..8daeb18 --- /dev/null +++ b/config.ru @@ -0,0 +1,10 @@ +require 'rubygems' +require 'bundler/setup' + +require 'sinatra' +require './app' + +use Rack::ShowExceptions + +set :env, :development +run Sinatra::Application diff --git a/config/compass.config b/config/compass.config deleted file mode 100644 index 05e257e..0000000 --- a/config/compass.config +++ /dev/null @@ -1,18 +0,0 @@ -if defined?(Sinatra) - # This is the configuration to use when running within sinatra - project_path = Sinatra::Application.root - environment = :development -else - # this is the configuration to use when running within the compass command line tool. - css_dir = File.join 'static', 'stylesheets' - relative_assets = true - environment = :production -end - -# This is common configuration -sass_dir = File.join 'views', 'stylesheets' -images_dir = File.join 'static', 'images' -http_path = "/" -http_images_path = "/images" -http_stylesheets_path = "/stylesheets" - diff --git a/static/images/grid.png b/public/images/grid.png similarity index 100% rename from static/images/grid.png rename to public/images/grid.png diff --git a/static/stylesheets/screen.css b/static/stylesheets/screen.css deleted file mode 100644 index 74d0214..0000000 --- a/static/stylesheets/screen.css +++ /dev/null @@ -1 +0,0 @@ -html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline}*:focus{outline:0}body{line-height:1em;color:black;background:#fff}ol,ul{list-style:none}table{border-collapse:separate;border-spacing:0;vertical-align:middle}caption,th,td{text-align:left;font-weight:normal;vertical-align:middle}q,blockquote{quotes:"" ""}q:before,q:after,blockquote:before,blockquote:after{content:""}img a{border:none}body{line-height:1.5;font-family:Helvetica Neue, Arial, Helvetica, sans-serif;color:#333333;font-size:75%}h1{font-weight:normal;color:#222222;font-size:3em;line-height:1;margin-bottom:0.5em}h1 img{margin:0}h2{font-weight:normal;color:#222222;font-size:2em;margin-bottom:0.75em}h3{font-weight:normal;color:#222222;font-size:1.5em;line-height:1;margin-bottom:1em}h4{font-weight:normal;color:#222222;font-size:1.2em;line-height:1.25;margin-bottom:1.25em}h5{font-weight:normal;color:#222222;font-size:1em;font-weight:bold;margin-bottom:1.5em}h6{font-weight:normal;color:#222222;font-size:1em;font-weight:bold}h2 img,h3 img,h4 img,h5 img,h6 img{margin:0}p{margin:0 0 1.5em}p img.left{display:inline;float:left;margin:1.5em 1.5em 1.5em 0;padding:0}p img.right{display:inline;float:right;margin:1.5em 0 1.5em 1.5em;padding:0}a{text-decoration:underline;color:#000099}a:visited{color:#000066}a:focus{color:black}a:hover{color:black}a:active{color:#cc0099}blockquote{margin:1.5em;color:#666;font-style:italic}strong{font-weight:bold}em{font-style:italic}dfn{font-style:italic;font-weight:bold}sup,sub{line-height:0}abbr,acronym{border-bottom:1px dotted #666}address{margin:0 0 1.5em;font-style:italic}del{color:#666}pre{margin:1.5em 0;white-space:pre}pre,code,tt{font:1em 'andale mono', 'lucida console', monospace;line-height:1.5}li ul,li ol{margin:0 1.5em}ul{margin:0 1.5em 1.5em 1.5em;list-style-type:disc}ol{margin:0 1.5em 1.5em 1.5em;list-style-type:decimal}dl{margin:0 0 1.5em 0}dl dt{font-weight:bold}dd{margin-left:1.5em}table{margin-bottom:1.4em;width:100%}th{font-weight:bold}thead th{background:#c3d9ff}th,td,caption{padding:4px 10px 4px 5px}tr.even td{background:#e5ecf9}tfoot{font-style:italic}caption{background:#eee}.quiet{color:#666666}.loud{color:#111111}.clear{clear:both}.nowrap{white-space:nowrap}.clearfix{overflow:hidden;display:inline-block}.clearfix{display:block}.small{font-size:.8em;margin-bottom:1.875em;line-height:1.875em}.large{font-size:1.2em;line-height:2.5em;margin-bottom:1.25em}.first{margin-left:0;padding-left:0}.last{margin-right:0;padding-right:0}.top{margin-top:0;padding-top:0}.bottom{margin-bottom:0;padding-bottom:0}.container{width:950px;margin:0 auto;overflow:hidden;display:inline-block}.container{display:block}.column,div.span-1,div.span-2,div.span-3,div.span-4,div.span-5,div.span-6,div.span-7,div.span-8,div.span-9,div.span-10,div.span-11,div.span-12,div.span-13,div.span-14,div.span-15,div.span-16,div.span-17,div.span-18,div.span-19,div.span-20,div.span-21,div.span-22,div.span-23,div.span-24{display:inline;float:left;margin-right:10px}* html .column,* html div.span-1,* html div.span-2,* html div.span-3,* html div.span-4,* html div.span-5,* html div.span-6,* html div.span-7,* html div.span-8,* html div.span-9,* html div.span-10,* html div.span-11,* html div.span-12,* html div.span-13,* html div.span-14,* html div.span-15,* html div.span-16,* html div.span-17,* html div.span-18,* html div.span-19,* html div.span-20,* html div.span-21,* html div.span-22,* html div.span-23,* html div.span-24{overflow-x:hidden}.last,div.last{margin-right:0}.span-1{width:30px}.span-2{width:70px}.span-3{width:110px}.span-4{width:150px}.span-5{width:190px}.span-6{width:230px}.span-7{width:270px}.span-8{width:310px}.span-9{width:350px}.span-10{width:390px}.span-11{width:430px}.span-12{width:470px}.span-13{width:510px}.span-14{width:550px}.span-15{width:590px}.span-16{width:630px}.span-17{width:670px}.span-18{width:710px}.span-19{width:750px}.span-20{width:790px}.span-21{width:830px}.span-22{width:870px}.span-23{width:910px}.span-24,div.span-24{width:950px;margin:0}input.span-1,textarea.span-1,select.span-1{width:30px !important}input.span-2,textarea.span-2,select.span-2{width:70px !important}input.span-3,textarea.span-3,select.span-3{width:110px !important}input.span-4,textarea.span-4,select.span-4{width:150px !important}input.span-5,textarea.span-5,select.span-5{width:190px !important}input.span-6,textarea.span-6,select.span-6{width:230px !important}input.span-7,textarea.span-7,select.span-7{width:270px !important}input.span-8,textarea.span-8,select.span-8{width:310px !important}input.span-9,textarea.span-9,select.span-9{width:350px !important}input.span-10,textarea.span-10,select.span-10{width:390px !important}input.span-11,textarea.span-11,select.span-11{width:430px !important}input.span-12,textarea.span-12,select.span-12{width:470px !important}input.span-13,textarea.span-13,select.span-13{width:510px !important}input.span-14,textarea.span-14,select.span-14{width:550px !important}input.span-15,textarea.span-15,select.span-15{width:590px !important}input.span-16,textarea.span-16,select.span-16{width:630px !important}input.span-17,textarea.span-17,select.span-17{width:670px !important}input.span-18,textarea.span-18,select.span-18{width:710px !important}input.span-19,textarea.span-19,select.span-19{width:750px !important}input.span-20,textarea.span-20,select.span-20{width:790px !important}input.span-21,textarea.span-21,select.span-21{width:830px !important}input.span-22,textarea.span-22,select.span-22{width:870px !important}input.span-23,textarea.span-23,select.span-23{width:910px !important}input.span-24,textarea.span-24,select.span-24{width:950px !important}.append-1{padding-right:40px}.append-2{padding-right:80px}.append-3{padding-right:120px}.append-4{padding-right:160px}.append-5{padding-right:200px}.append-6{padding-right:240px}.append-7{padding-right:280px}.append-8{padding-right:320px}.append-9{padding-right:360px}.append-10{padding-right:400px}.append-11{padding-right:440px}.append-12{padding-right:480px}.append-13{padding-right:520px}.append-14{padding-right:560px}.append-15{padding-right:600px}.append-16{padding-right:640px}.append-17{padding-right:680px}.append-18{padding-right:720px}.append-19{padding-right:760px}.append-20{padding-right:800px}.append-21{padding-right:840px}.append-22{padding-right:880px}.append-23{padding-right:920px}.prepend-1{padding-left:40px}.prepend-2{padding-left:80px}.prepend-3{padding-left:120px}.prepend-4{padding-left:160px}.prepend-5{padding-left:200px}.prepend-6{padding-left:240px}.prepend-7{padding-left:280px}.prepend-8{padding-left:320px}.prepend-9{padding-left:360px}.prepend-10{padding-left:400px}.prepend-11{padding-left:440px}.prepend-12{padding-left:480px}.prepend-13{padding-left:520px}.prepend-14{padding-left:560px}.prepend-15{padding-left:600px}.prepend-16{padding-left:640px}.prepend-17{padding-left:680px}.prepend-18{padding-left:720px}.prepend-19{padding-left:760px}.prepend-20{padding-left:800px}.prepend-21{padding-left:840px}.prepend-22{padding-left:880px}.prepend-23{padding-left:920px}.pull-1,.pull-2,.pull-3,.pull-4,.pull-5,.pull-6,.pull-7,.pull-8,.pull-9,.pull-10,.pull-11,.pull-12,.pull-13,.pull-14,.pull-15,.pull-16,.pull-17,.pull-18,.pull-19,.pull-20,.pull-21,.pull-22,.pull-23,.pull-24{display:inline;float:left;position:relative}.pull-1{margin-left:-40px}.pull-2{margin-left:-80px}.pull-3{margin-left:-120px}.pull-4{margin-left:-160px}.pull-5{margin-left:-200px}.pull-6{margin-left:-240px}.pull-7{margin-left:-280px}.pull-8{margin-left:-320px}.pull-9{margin-left:-360px}.pull-10{margin-left:-400px}.pull-11{margin-left:-440px}.pull-12{margin-left:-480px}.pull-13{margin-left:-520px}.pull-14{margin-left:-560px}.pull-15{margin-left:-600px}.pull-16{margin-left:-640px}.pull-17{margin-left:-680px}.pull-18{margin-left:-720px}.pull-19{margin-left:-760px}.pull-20{margin-left:-800px}.pull-21{margin-left:-840px}.pull-22{margin-left:-880px}.pull-23{margin-left:-920px}.pull-24{margin-left:-960px}.push-1,.push-2,.push-3,.push-4,.push-5,.push-6,.push-7,.push-8,.push-9,.push-10,.push-11,.push-12,.push-13,.push-14,.push-15,.push-16,.push-17,.push-18,.push-19,.push-20,.push-21,.push-22,.push-23,.push-24{display:inline;float:right;position:relative}.push-1{margin:0 -40px 1.5em 40px}.push-2{margin:0 -80px 1.5em 80px}.push-3{margin:0 -120px 1.5em 120px}.push-4{margin:0 -160px 1.5em 160px}.push-5{margin:0 -200px 1.5em 200px}.push-6{margin:0 -240px 1.5em 240px}.push-7{margin:0 -280px 1.5em 280px}.push-8{margin:0 -320px 1.5em 320px}.push-9{margin:0 -360px 1.5em 360px}.push-10{margin:0 -400px 1.5em 400px}.push-11{margin:0 -440px 1.5em 440px}.push-12{margin:0 -480px 1.5em 480px}.push-13{margin:0 -520px 1.5em 520px}.push-14{margin:0 -560px 1.5em 560px}.push-15{margin:0 -600px 1.5em 600px}.push-16{margin:0 -640px 1.5em 640px}.push-17{margin:0 -680px 1.5em 680px}.push-18{margin:0 -720px 1.5em 720px}.push-19{margin:0 -760px 1.5em 760px}.push-20{margin:0 -800px 1.5em 800px}.push-21{margin:0 -840px 1.5em 840px}.push-22{margin:0 -880px 1.5em 880px}.push-23{margin:0 -920px 1.5em 920px}.push-24{margin:0 -960px 1.5em 960px}.showgrid{background:url(/images/grid.png)}.error{padding:.8em;margin-bottom:1em;border:2px solid #dddddd;background:#fbe3e4;color:#8a1f11;border-color:#fbc2c4}.error a{color:#8a1f11}.notice{padding:.8em;margin-bottom:1em;border:2px solid #dddddd;background:#fff6bf;color:#514721;border-color:#ffd324}.notice a{color:#514721}.success{padding:.8em;margin-bottom:1em;border:2px solid #dddddd;background:#e6efc2;color:#264409;border-color:#c6d880}.success a{color:#264409}.hide{display:none}.highlight{background:yellow}.added{background:#006600;color:white}.removed{background:#990000;color:white}label{font-weight:bold}fieldset{padding:1.4em;margin:0 0 1.5em 0}legend{font-weight:bold;font-size:1.2em}input.text,input.title,input[type=text]{margin:0.5em 0;background-color:#fff;padding:5px}input.title{font-size:1.5em}input[type=checkbox],input.checkbox,input[type=radio],input.radio{position:relative;top:0.25em}textarea{margin:0.5em 0;padding:5px}select{margin:0.5em 0}fieldset{border:1px solid #cccccc}input.text,input.title,textarea,select{border:1px solid #bbbbbb}input.text:focus,input.title:focus,textarea:focus,select:focus{border:1px solid #666666}input.text,input.title{width:300px}textarea{width:390px;height:250px} diff --git a/test/test_app.rb b/test/test_app.rb new file mode 100644 index 0000000..6abae8e --- /dev/null +++ b/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 diff --git a/views/css/_base.sass b/views/css/_base.sass new file mode 100644 index 0000000..e427bed --- /dev/null +++ b/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 diff --git a/views/css/_mockup.sass b/views/css/_mockup.sass new file mode 100644 index 0000000..215046a --- /dev/null +++ b/views/css/_mockup.sass @@ -0,0 +1,2 @@ +body + background: #FFCCCC diff --git a/views/css/screen.sass b/views/css/screen.sass new file mode 100644 index 0000000..08281b2 --- /dev/null +++ b/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) \ No newline at end of file diff --git a/views/index.haml b/views/index.haml index 272f590..a7054ae 100644 --- a/views/index.haml +++ b/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 \ No newline at end of file + %p footer diff --git a/views/stylesheets/_base.sass b/views/stylesheets/_base.sass deleted file mode 100644 index 99624e3..0000000 --- a/views/stylesheets/_base.sass +++ /dev/null @@ -1,9 +0,0 @@ -!blueprint_grid_columns = 24 -!blueprint_grid_width = 30px -!blueprint_grid_margin = 10px - -!font_color = #333 - -@import compass/reset.sass -@import compass/utilities.sass -@import blueprint/screen.sass diff --git a/views/stylesheets/screen.sass b/views/stylesheets/screen.sass deleted file mode 100644 index e1bfc32..0000000 --- a/views/stylesheets/screen.sass +++ /dev/null @@ -1,8 +0,0 @@ -@import base.sass - -+blueprint-typography -+blueprint-utilities -+blueprint-grid -+blueprint-debug("/images/grid.png") -+blueprint-interaction -+blueprint-form \ No newline at end of file