From 1c8dcdcad7aa598760e5811867b1226a1328db84 Mon Sep 17 00:00:00 2001 From: Isaac Wolkerstorfer Date: Mon, 1 Nov 2010 10:18:20 +0100 Subject: [PATCH 01/27] Add rackup file --- config.ru | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 config.ru 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 From 262fffd3deeffc74555accd56657c3be07c66cfe Mon Sep 17 00:00:00 2001 From: Isaac Wolkerstorfer Date: Mon, 1 Nov 2010 10:28:21 +0100 Subject: [PATCH 02/27] Add bundler Gemfile, ignore .bundle --- .gitignore | 1 + Gemfile | 5 +++++ Gemfile.lock | 18 ++++++++++++++++++ 3 files changed, 24 insertions(+) create mode 100644 Gemfile create mode 100644 Gemfile.lock diff --git a/.gitignore b/.gitignore index fd18a0b..67e32d8 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ .DS_Store */.DS_Store .sass-cache +.bundle diff --git a/Gemfile b/Gemfile new file mode 100644 index 0000000..056906b --- /dev/null +++ b/Gemfile @@ -0,0 +1,5 @@ +source :rubygems + +gem "sinatra", "~>1.1" +gem "compass", "~>0.10" + diff --git a/Gemfile.lock b/Gemfile.lock new file mode 100644 index 0000000..84f7bf8 --- /dev/null +++ b/Gemfile.lock @@ -0,0 +1,18 @@ +GEM + remote: http://rubygems.org/ + specs: + compass (0.10.6) + haml (>= 3.0.4) + haml (3.0.23) + rack (1.2.1) + sinatra (1.1.0) + rack (~> 1.1) + tilt (~> 1.1) + tilt (1.1) + +PLATFORMS + ruby + +DEPENDENCIES + compass (~> 0.10) + sinatra (~> 1.1) From f38fb4a15fac0237025929a700d7de0e4a030dd9 Mon Sep 17 00:00:00 2001 From: Isaac Wolkerstorfer Date: Mon, 1 Nov 2010 10:31:33 +0100 Subject: [PATCH 03/27] Move to html5, add mockup sass partial --- app.rb | 3 ++- views/index.haml | 8 +++----- views/stylesheets/_mockup.sass | 0 views/stylesheets/screen.sass | 4 +++- 4 files changed, 8 insertions(+), 7 deletions(-) create mode 100644 views/stylesheets/_mockup.sass diff --git a/app.rb b/app.rb index 51f5fb9..8bf6896 100644 --- a/app.rb +++ b/app.rb @@ -8,6 +8,7 @@ set :root, File.dirname(__FILE__) set :views, "views" set :public, 'static' +set :haml, :format => :html5 # default Haml format is :xhtml configure do Compass.add_project_configuration(File.join(Sinatra::Application.root, 'config', 'compass.config')) @@ -21,4 +22,4 @@ get '/' do haml :index -end \ No newline at end of file +end diff --git a/views/index.haml b/views/index.haml index 272f590..96e318a 100644 --- a/views/index.haml +++ b/views/index.haml @@ -1,10 +1,8 @@ !!! -!!! 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"}/ %body @@ -15,4 +13,4 @@ %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/_mockup.sass b/views/stylesheets/_mockup.sass new file mode 100644 index 0000000..e69de29 diff --git a/views/stylesheets/screen.sass b/views/stylesheets/screen.sass index e1bfc32..dae5e9b 100644 --- a/views/stylesheets/screen.sass +++ b/views/stylesheets/screen.sass @@ -5,4 +5,6 @@ +blueprint-grid +blueprint-debug("/images/grid.png") +blueprint-interaction -+blueprint-form \ No newline at end of file ++blueprint-form + +@import mockup.sass From ea241e8f00e5c4b3a28909a846c074b6143123c8 Mon Sep 17 00:00:00 2001 From: Isaac Wolkerstorfer Date: Mon, 1 Nov 2010 10:46:26 +0100 Subject: [PATCH 04/27] Disable grid showing --- views/index.haml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/views/index.haml b/views/index.haml index 96e318a..a5c3c63 100644 --- a/views/index.haml +++ b/views/index.haml @@ -6,7 +6,7 @@ %meta{'http-equiv'=>"Content-Language", :content=>"en-us"}/ %link{:href=>"/stylesheets/screen.css", :media=>"screen", :rel=>"stylesheet", :type=>"text/css"}/ %body - .container.showgrid + .container .header %h1 header .body From f7f535e6fa2cbcb124cb8b0ee68840afecd2ae22 Mon Sep 17 00:00:00 2001 From: Isaac Wolkerstorfer Date: Mon, 1 Nov 2010 10:59:20 +0100 Subject: [PATCH 05/27] Move from deprecated features to new hotness --- static/stylesheets/screen.css | 1 - views/stylesheets/_base.sass | 14 +++++++------- views/stylesheets/_mockup.sass | 2 ++ 3 files changed, 9 insertions(+), 8 deletions(-) delete mode 100644 static/stylesheets/screen.css 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/views/stylesheets/_base.sass b/views/stylesheets/_base.sass index 99624e3..7466ce7 100644 --- a/views/stylesheets/_base.sass +++ b/views/stylesheets/_base.sass @@ -1,9 +1,9 @@ -!blueprint_grid_columns = 24 -!blueprint_grid_width = 30px -!blueprint_grid_margin = 10px +$blueprint_grid_columns: 24 +$blueprint_grid_width: 30px +$blueprint_grid_margin: 10px -!font_color = #333 +$font_color: #333 -@import compass/reset.sass -@import compass/utilities.sass -@import blueprint/screen.sass +@import compass/reset +@import compass/utilities +@import blueprint diff --git a/views/stylesheets/_mockup.sass b/views/stylesheets/_mockup.sass index e69de29..6c1910c 100644 --- a/views/stylesheets/_mockup.sass +++ b/views/stylesheets/_mockup.sass @@ -0,0 +1,2 @@ +body + background: red From bbb4f7c208d0b24a749a20f3d22449c1a990b1bb Mon Sep 17 00:00:00 2001 From: Micah Elliott Date: Fri, 24 Dec 2010 01:50:43 -0800 Subject: [PATCH 06/27] Turning on grid, adding thin. --- Gemfile | 1 + Gemfile.lock | 7 +++++++ views/index.haml | 3 ++- 3 files changed, 10 insertions(+), 1 deletion(-) diff --git a/Gemfile b/Gemfile index 056906b..deeae2c 100644 --- a/Gemfile +++ b/Gemfile @@ -2,4 +2,5 @@ source :rubygems gem "sinatra", "~>1.1" gem "compass", "~>0.10" +gem "thin" diff --git a/Gemfile.lock b/Gemfile.lock index 84f7bf8..fc0e1ab 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -3,11 +3,17 @@ GEM specs: compass (0.10.6) haml (>= 3.0.4) + daemons (1.1.0) + eventmachine (0.12.10) haml (3.0.23) rack (1.2.1) sinatra (1.1.0) rack (~> 1.1) tilt (~> 1.1) + thin (1.2.7) + daemons (>= 1.0.9) + eventmachine (>= 0.12.6) + rack (>= 1.0.0) tilt (1.1) PLATFORMS @@ -16,3 +22,4 @@ PLATFORMS DEPENDENCIES compass (~> 0.10) sinatra (~> 1.1) + thin diff --git a/views/index.haml b/views/index.haml index a5c3c63..7e7fa15 100644 --- a/views/index.haml +++ b/views/index.haml @@ -6,7 +6,8 @@ %meta{'http-equiv'=>"Content-Language", :content=>"en-us"}/ %link{:href=>"/stylesheets/screen.css", :media=>"screen", :rel=>"stylesheet", :type=>"text/css"}/ %body - .container + /.container + .container.showgrid .header %h1 header .body From 70d1796ddeb9f6233170dc91de68bbfc062ca1e0 Mon Sep 17 00:00:00 2001 From: Micah Elliott Date: Fri, 24 Dec 2010 02:06:55 -0800 Subject: [PATCH 07/27] Using more standard (at least shorter) dirs. static -> public stylesheets -> css --- app.rb | 8 ++++---- config/compass.config | 8 ++++---- {static => public}/images/grid.png | Bin views/{stylesheets => css}/_base.sass | 0 views/{stylesheets => css}/_mockup.sass | 0 views/{stylesheets => css}/screen.sass | 0 views/index.haml | 2 +- 7 files changed, 9 insertions(+), 9 deletions(-) rename {static => public}/images/grid.png (100%) rename views/{stylesheets => css}/_base.sass (100%) rename views/{stylesheets => css}/_mockup.sass (100%) rename views/{stylesheets => css}/screen.sass (100%) diff --git a/app.rb b/app.rb index 8bf6896..0f0ea97 100644 --- a/app.rb +++ b/app.rb @@ -7,17 +7,17 @@ set :app_file, __FILE__ set :root, File.dirname(__FILE__) set :views, "views" -set :public, 'static' +#set :public, 'static' set :haml, :format => :html5 # default Haml format is :xhtml configure do Compass.add_project_configuration(File.join(Sinatra::Application.root, 'config', 'compass.config')) 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 diff --git a/config/compass.config b/config/compass.config index 05e257e..6b38792 100644 --- a/config/compass.config +++ b/config/compass.config @@ -4,15 +4,15 @@ if defined?(Sinatra) environment = :development else # this is the configuration to use when running within the compass command line tool. - css_dir = File.join 'static', 'stylesheets' + css_dir = File.join 'public', 'css' relative_assets = true environment = :production end # This is common configuration -sass_dir = File.join 'views', 'stylesheets' -images_dir = File.join 'static', 'images' +sass_dir = File.join 'views', 'css' +images_dir = File.join 'public', 'images' http_path = "/" http_images_path = "/images" -http_stylesheets_path = "/stylesheets" +http_stylesheets_path = "/css" 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/views/stylesheets/_base.sass b/views/css/_base.sass similarity index 100% rename from views/stylesheets/_base.sass rename to views/css/_base.sass diff --git a/views/stylesheets/_mockup.sass b/views/css/_mockup.sass similarity index 100% rename from views/stylesheets/_mockup.sass rename to views/css/_mockup.sass diff --git a/views/stylesheets/screen.sass b/views/css/screen.sass similarity index 100% rename from views/stylesheets/screen.sass rename to views/css/screen.sass diff --git a/views/index.haml b/views/index.haml index 7e7fa15..6d960eb 100644 --- a/views/index.haml +++ b/views/index.haml @@ -4,7 +4,7 @@ %meta{ :charset => "utf-8" } %title compass sinatra %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 .container.showgrid From e35c023ae4d37eec5726e0696facb94fbe0ed133 Mon Sep 17 00:00:00 2001 From: Micah Elliott Date: Mon, 27 Dec 2010 00:07:56 -0800 Subject: [PATCH 08/27] Setting up for tests. --- Gemfile | 4 +++- Gemfile.lock | 16 ++++++++++++++++ app.rb | 5 ++++- test/test_app.rb | 24 ++++++++++++++++++++++++ views/index.haml | 3 ++- 5 files changed, 49 insertions(+), 3 deletions(-) create mode 100644 test/test_app.rb diff --git a/Gemfile b/Gemfile index deeae2c..a13edb9 100644 --- a/Gemfile +++ b/Gemfile @@ -3,4 +3,6 @@ source :rubygems gem "sinatra", "~>1.1" gem "compass", "~>0.10" gem "thin" - +gem "thor" +gem "rack-test" +gem "sinatra-test-helper" diff --git a/Gemfile.lock b/Gemfile.lock index fc0e1ab..a2037d3 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,19 +1,32 @@ GEM remote: http://rubygems.org/ specs: + backports (1.18.2) compass (0.10.6) haml (>= 3.0.4) daemons (1.1.0) eventmachine (0.12.10) haml (3.0.23) + monkey-lib (0.5.4) + backports rack (1.2.1) + rack-test (0.5.6) + rack (>= 1.0) sinatra (1.1.0) rack (~> 1.1) tilt (~> 1.1) + sinatra-sugar (0.5.0) + monkey-lib (~> 0.5.0) + sinatra (~> 1.0) + sinatra-test-helper (0.5.0) + monkey-lib (~> 0.5.0) + sinatra (~> 1.0) + sinatra-sugar (~> 0.5.0) thin (1.2.7) daemons (>= 1.0.9) eventmachine (>= 0.12.6) rack (>= 1.0.0) + thor (0.14.6) tilt (1.1) PLATFORMS @@ -21,5 +34,8 @@ PLATFORMS DEPENDENCIES compass (~> 0.10) + rack-test sinatra (~> 1.1) + sinatra-test-helper thin + thor diff --git a/app.rb b/app.rb index 0f0ea97..71ca97d 100644 --- a/app.rb +++ b/app.rb @@ -7,9 +7,10 @@ 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')) end @@ -21,5 +22,7 @@ end get '/' do + @name = params[:name] + puts @name haml :index end 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/index.haml b/views/index.haml index 6d960eb..0430e4b 100644 --- a/views/index.haml +++ b/views/index.haml @@ -9,7 +9,8 @@ /.container .container.showgrid .header - %h1 header + %h1= "Hi #{@name ? @name : 'no name'}!" + %p Hello World! .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. From 9453fbc62582aaca95d1a1f126a6a3794924edd0 Mon Sep 17 00:00:00 2001 From: Rubycut Date: Sat, 5 Nov 2011 23:48:13 +0100 Subject: [PATCH 09/27] upgrade gems --- Gemfile | 7 +++---- Gemfile.lock | 56 ++++++++++++++++++++++++++++++---------------------- 2 files changed, 35 insertions(+), 28 deletions(-) diff --git a/Gemfile b/Gemfile index a13edb9..29263b1 100644 --- a/Gemfile +++ b/Gemfile @@ -1,7 +1,6 @@ -source :rubygems - -gem "sinatra", "~>1.1" -gem "compass", "~>0.10" +gem "sinatra" +gem "haml" +gem "compass" gem "thin" gem "thor" gem "rack-test" diff --git a/Gemfile.lock b/Gemfile.lock index a2037d3..c072d47 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,41 +1,49 @@ GEM - remote: http://rubygems.org/ specs: - backports (1.18.2) - compass (0.10.6) - haml (>= 3.0.4) - daemons (1.1.0) + backports (2.3.0) + chunky_png (1.2.5) + compass (0.11.5) + chunky_png (~> 1.2) + fssm (>= 0.2.7) + sass (~> 3.1) + daemons (1.1.4) eventmachine (0.12.10) - haml (3.0.23) - monkey-lib (0.5.4) - backports - rack (1.2.1) - rack-test (0.5.6) + 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) - sinatra (1.1.0) - rack (~> 1.1) - tilt (~> 1.1) - sinatra-sugar (0.5.0) - monkey-lib (~> 0.5.0) - sinatra (~> 1.0) - sinatra-test-helper (0.5.0) - monkey-lib (~> 0.5.0) - sinatra (~> 1.0) - sinatra-sugar (~> 0.5.0) - thin (1.2.7) + 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.1) + tilt (1.3.3) PLATFORMS ruby DEPENDENCIES - compass (~> 0.10) + compass + haml rack-test - sinatra (~> 1.1) + sinatra sinatra-test-helper thin thor From c28d025eff78919c01f2687bf53af5540fe15400 Mon Sep 17 00:00:00 2001 From: Rubycut Date: Sat, 5 Nov 2011 23:53:50 +0100 Subject: [PATCH 10/27] get rid of terrible background --- views/css/_mockup.sass | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/views/css/_mockup.sass b/views/css/_mockup.sass index 6c1910c..215046a 100644 --- a/views/css/_mockup.sass +++ b/views/css/_mockup.sass @@ -1,2 +1,2 @@ body - background: red + background: #FFCCCC From 12274adf9716599fe289dc78f3a9719bebc7b9e4 Mon Sep 17 00:00:00 2001 From: Rubycut Date: Sun, 6 Nov 2011 00:12:04 +0100 Subject: [PATCH 11/27] try moving grids --- views/css/_base.sass | 8 ++++++-- views/index.haml | 5 ++--- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/views/css/_base.sass b/views/css/_base.sass index 7466ce7..3cd7612 100644 --- a/views/css/_base.sass +++ b/views/css/_base.sass @@ -1,5 +1,5 @@ -$blueprint_grid_columns: 24 -$blueprint_grid_width: 30px +$blueprint_grid_columns: 12 +$blueprint_grid_width: 70px $blueprint_grid_margin: 10px $font_color: #333 @@ -7,3 +7,7 @@ $font_color: #333 @import compass/reset @import compass/utilities @import blueprint + + +.body + +column(3) \ No newline at end of file diff --git a/views/index.haml b/views/index.haml index 0430e4b..a7d3635 100644 --- a/views/index.haml +++ b/views/index.haml @@ -6,11 +6,10 @@ %meta{'http-equiv'=>"Content-Language", :content=>"en-us"}/ %link{:href=>"/css/screen.css", :media=>"screen", :rel=>"stylesheet", :type=>"text/css"}/ %body - /.container - .container.showgrid + .container.showgrid .header %h1= "Hi #{@name ? @name : 'no name'}!" - %p Hello World! + %p Hello World!!! .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. From 9d307e207bd8048943c501ed57c49e583f3c73b7 Mon Sep 17 00:00:00 2001 From: Rubycut Date: Sun, 6 Nov 2011 00:49:47 +0100 Subject: [PATCH 12/27] add susy susy works provided that "compass watch" is running --- Gemfile | 1 + Gemfile.lock | 3 +++ README | 7 ++++++- app.rb | 2 +- config/compass.config | 18 ------------------ views/css/_base.sass | 17 ++++++++--------- views/css/screen.sass | 20 ++++++++++++-------- views/index.haml | 8 +++++--- 8 files changed, 36 insertions(+), 40 deletions(-) delete mode 100644 config/compass.config diff --git a/Gemfile b/Gemfile index 29263b1..7968853 100644 --- a/Gemfile +++ b/Gemfile @@ -1,6 +1,7 @@ gem "sinatra" gem "haml" gem "compass" +gem "compass-susy-plugin" gem "thin" gem "thor" gem "rack-test" diff --git a/Gemfile.lock b/Gemfile.lock index c072d47..2540570 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -6,6 +6,8 @@ GEM 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) @@ -41,6 +43,7 @@ PLATFORMS DEPENDENCIES compass + compass-susy-plugin haml rack-test sinatra diff --git a/README b/README index bc2fa0f..86c4a93 100644 --- a/README +++ b/README @@ -1 +1,6 @@ -This app is a simple starting point for those wanting to explore compass with sinatra. \ No newline at end of file +This app is a simple starting point for those wanting to explore compass with sinatra. + +susy is ready: + + +todo: compass watch auto reloader \ No newline at end of file diff --git a/app.rb b/app.rb index 71ca97d..a71c0db 100644 --- a/app.rb +++ b/app.rb @@ -12,7 +12,7 @@ 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/css directory where all of the sass files can safely reside. diff --git a/config/compass.config b/config/compass.config deleted file mode 100644 index 6b38792..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 'public', 'css' - relative_assets = true - environment = :production -end - -# This is common configuration -sass_dir = File.join 'views', 'css' -images_dir = File.join 'public', 'images' -http_path = "/" -http_images_path = "/images" -http_stylesheets_path = "/css" - diff --git a/views/css/_base.sass b/views/css/_base.sass index 3cd7612..e427bed 100644 --- a/views/css/_base.sass +++ b/views/css/_base.sass @@ -1,13 +1,12 @@ -$blueprint_grid_columns: 12 -$blueprint_grid_width: 70px -$blueprint_grid_margin: 10px +// Imports ------------------------------------------------------------------- -$font_color: #333 +@import susy -@import compass/reset -@import compass/utilities -@import blueprint +// Grid ---------------------------------------------------------------------- +$total-cols: 12 +$col-width: 4em +$gutter-width: 1em +$side-gutter-width: $gutter-width -.body - +column(3) \ No newline at end of file +$show-grid-backgrounds: true diff --git a/views/css/screen.sass b/views/css/screen.sass index dae5e9b..f30cc28 100644 --- a/views/css/screen.sass +++ b/views/css/screen.sass @@ -1,10 +1,14 @@ -@import base.sass +// Imports ------------------------------------------------------------------- -+blueprint-typography -+blueprint-utilities -+blueprint-grid -+blueprint-debug("/images/grid.png") -+blueprint-interaction -+blueprint-form +@import base + +/* Layout ------------------------------------------------------------------ + +.container + +container + +susy-grid-background + +aside + @include columns(3,9) + @include omega(9) -@import mockup.sass diff --git a/views/index.haml b/views/index.haml index a7d3635..a7054ae 100644 --- a/views/index.haml +++ b/views/index.haml @@ -6,11 +6,13 @@ %meta{'http-equiv'=>"Content-Language", :content=>"en-us"}/ %link{:href=>"/css/screen.css", :media=>"screen", :rel=>"stylesheet", :type=>"text/css"}/ %body - .container.showgrid + .container .header %h1= "Hi #{@name ? @name : 'no name'}!" - %p Hello World!!! - .body + %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 From 2500c196edc17020218667208ea125e2029bbdce Mon Sep 17 00:00:00 2001 From: Rubycut Date: Sun, 6 Nov 2011 00:54:49 +0100 Subject: [PATCH 13/27] add new config --- config.rb | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 config.rb diff --git a/config.rb b/config.rb new file mode 100644 index 0000000..bb1e9cb --- /dev/null +++ b/config.rb @@ -0,0 +1,27 @@ +require 'susy' +# Require any additional compass plugins here. + + +# Set this to the root of your project when deployed: +http_path = "/" +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 From f66b3e2d72400daf8302dbc88a4f69644f789dbb Mon Sep 17 00:00:00 2001 From: Rubycut Date: Sun, 6 Nov 2011 01:04:40 +0100 Subject: [PATCH 14/27] moving around works --- views/css/screen.sass | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/views/css/screen.sass b/views/css/screen.sass index f30cc28..08281b2 100644 --- a/views/css/screen.sass +++ b/views/css/screen.sass @@ -8,7 +8,13 @@ +container +susy-grid-background -aside +.aside + +columns(3,9) + +omega(9) + +.body @include columns(3,9) - @include omega(9) +.footer + +full + +pad(3,3) \ No newline at end of file From d3549be332b30b87e533775d4103726974980e0b Mon Sep 17 00:00:00 2001 From: Rubycut Date: Sun, 6 Nov 2011 01:06:12 +0100 Subject: [PATCH 15/27] ignore public/css --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index 67e32d8..4102940 100644 --- a/.gitignore +++ b/.gitignore @@ -2,3 +2,4 @@ */.DS_Store .sass-cache .bundle +public/css From b6551e278fc83d945691e92f27ecc89a785610e0 Mon Sep 17 00:00:00 2001 From: Rubycut Date: Sun, 6 Nov 2011 01:08:23 +0100 Subject: [PATCH 16/27] edit tasks --- README | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README b/README index 86c4a93..ee39352 100644 --- a/README +++ b/README @@ -3,4 +3,6 @@ This app is a simple starting point for those wanting to explore compass with si susy is ready: -todo: compass watch auto reloader \ No newline at end of file +todo: compass watch auto reloader + +todo: write docs \ No newline at end of file From 878151e8f78c44c838c8760fcb137dfc82170d0e Mon Sep 17 00:00:00 2001 From: Rubycut Date: Sun, 6 Nov 2011 08:19:59 +0100 Subject: [PATCH 17/27] add some newbie docs --- README | 8 -------- README.md | 28 ++++++++++++++++++++++++++++ 2 files changed, 28 insertions(+), 8 deletions(-) delete mode 100644 README create mode 100644 README.md diff --git a/README b/README deleted file mode 100644 index ee39352..0000000 --- a/README +++ /dev/null @@ -1,8 +0,0 @@ -This app is a simple starting point for those wanting to explore compass with sinatra. - -susy is ready: - - -todo: compass watch auto reloader - -todo: write docs \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..e7ff051 --- /dev/null +++ b/README.md @@ -0,0 +1,28 @@ +This app is a simple starting point for those wanting to explore compass with sinatra. + +Usage: +----- +Clone this project: + git checkout https://rubycut@github.com/rubycut/compass-sinatra.git + +Prepare dependencies: + bundle install + +In separate window, run compass which will automatically rebuild your css: + compass watch + +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 is ready: + + +todo: compass watch auto reloader + +todo: write docs \ No newline at end of file From 3b68752c00c375003d35f4cf4f2a65dfb0f5f70d Mon Sep 17 00:00:00 2001 From: Rubycut Date: Sun, 6 Nov 2011 08:23:53 +0100 Subject: [PATCH 18/27] prep for github --- .gitignore | 1 + README.md => README.markdown | 2 ++ 2 files changed, 3 insertions(+) rename README.md => README.markdown (99%) diff --git a/.gitignore b/.gitignore index 4102940..92e8cbc 100644 --- a/.gitignore +++ b/.gitignore @@ -3,3 +3,4 @@ .sass-cache .bundle public/css +.yardoc \ No newline at end of file diff --git a/README.md b/README.markdown similarity index 99% rename from README.md rename to README.markdown index e7ff051..49a7d89 100644 --- a/README.md +++ b/README.markdown @@ -20,6 +20,8 @@ Start playing, important files to play with: * views/index.haml * views/css/_base.sass <--- Grid options * views/css/screen.sass <--- Layout + + susy is ready: From df830a76f0914c33ceda56cd0be2fae3e03f770e Mon Sep 17 00:00:00 2001 From: Rubycut Date: Sun, 6 Nov 2011 08:38:08 +0100 Subject: [PATCH 19/27] github not rendering code properly --- README.markdown | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.markdown b/README.markdown index 49a7d89..ba26fba 100644 --- a/README.markdown +++ b/README.markdown @@ -12,7 +12,7 @@ In separate window, run compass which will automatically rebuild your css: compass watch Run this app: - rackup + rackup Point your browser to http://localhost:9292/ From 555aa02d5bff1c8d5d6f8569f0e9bbef550a8ebe Mon Sep 17 00:00:00 2001 From: Rubycut Date: Sun, 6 Nov 2011 08:41:53 +0100 Subject: [PATCH 20/27] another try --- README.markdown | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.markdown b/README.markdown index ba26fba..ca7847c 100644 --- a/README.markdown +++ b/README.markdown @@ -12,7 +12,8 @@ In separate window, run compass which will automatically rebuild your css: compass watch Run this app: - rackup + + rackup Point your browser to http://localhost:9292/ From 272b56d78e6fe68334bc9ffb58a72befbcb915ce Mon Sep 17 00:00:00 2001 From: Rubycut Date: Sun, 6 Nov 2011 08:43:24 +0100 Subject: [PATCH 21/27] push changes --- README.markdown | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/README.markdown b/README.markdown index ca7847c..da879bb 100644 --- a/README.markdown +++ b/README.markdown @@ -1,14 +1,17 @@ This app is a simple starting point for those wanting to explore compass with sinatra. Usage: ------ +------ Clone this project: + git checkout https://rubycut@github.com/rubycut/compass-sinatra.git Prepare dependencies: + bundle install In separate window, run compass which will automatically rebuild your css: + compass watch Run this app: From c8ea4c8b240ad7d52db9252c4057bb0c08867871 Mon Sep 17 00:00:00 2001 From: Rubycut Date: Sun, 6 Nov 2011 08:44:16 +0100 Subject: [PATCH 22/27] empty lines matter on github --- README.markdown | 1 + 1 file changed, 1 insertion(+) diff --git a/README.markdown b/README.markdown index da879bb..fe3b36c 100644 --- a/README.markdown +++ b/README.markdown @@ -21,6 +21,7 @@ Run this app: 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 From 98d88363bfa55fe060edc9b2d77d1deb37def8ea Mon Sep 17 00:00:00 2001 From: Rubycut Date: Sun, 6 Nov 2011 09:02:27 +0100 Subject: [PATCH 23/27] more docs --- README.markdown | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/README.markdown b/README.markdown index fe3b36c..b52c489 100644 --- a/README.markdown +++ b/README.markdown @@ -1,7 +1,7 @@ This app is a simple starting point for those wanting to explore compass with sinatra. -Usage: ------- +Quick start: +----- Clone this project: git checkout https://rubycut@github.com/rubycut/compass-sinatra.git @@ -27,9 +27,17 @@ Start playing, important files to play with: * views/css/screen.sass <--- Layout -susy is ready: +Susy +---- +This repo bundles [susy]("http://susy.oddbird.net/") plugin together with compass. -todo: compass watch auto reloader +What is going on +---- +Sass basibally allows you to write nicer css, it supports variable and some other stuff. + +But compass, 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. + -todo: write docs \ No newline at end of file From 5bdf9dcbdeb7f97684a1dee60dc7e0b9c1a9644f Mon Sep 17 00:00:00 2001 From: Rubycut Date: Sun, 6 Nov 2011 10:40:19 +0100 Subject: [PATCH 24/27] more docs --- README.markdown | 37 ++++++++++++++++++++++++++++++------- config.rb | 1 - 2 files changed, 30 insertions(+), 8 deletions(-) diff --git a/README.markdown b/README.markdown index b52c489..52cf564 100644 --- a/README.markdown +++ b/README.markdown @@ -10,10 +10,6 @@ Prepare dependencies: bundle install -In separate window, run compass which will automatically rebuild your css: - - compass watch - Run this app: rackup @@ -32,12 +28,39 @@ Susy This repo bundles [susy]("http://susy.oddbird.net/") plugin together with compass. -What is going on ----- -Sass basibally allows you to write nicer css, it supports variable and some other stuff. +## What is going on + +### Compass + +Sass basically allows you to write nicer css, it supports variables and some other stuff. But compass, 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 + +out of this 3 files, it creates *stylesheets/screen.css* every time your run `compass compile` or `compass watch` + +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. + +_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 + +As you can see, result of using compass with plugins is one css file only. + +### Onto sinatra + +Now, when you have your css file ready, why change anything in sinatra, we should be able to simply use css file generated by compass. +That is true, but you can make sinatra actually rebuild screen.css file on demand so there is no need to run `compass compile` or `compass watch`. How cool is that? diff --git a/config.rb b/config.rb index bb1e9cb..32d7529 100644 --- a/config.rb +++ b/config.rb @@ -1,7 +1,6 @@ require 'susy' # Require any additional compass plugins here. - # Set this to the root of your project when deployed: http_path = "/" css_dir = "public/css" From 568ea804ffae87967a9280cb5175470d3428d521 Mon Sep 17 00:00:00 2001 From: Rubycut Date: Sun, 6 Nov 2011 10:43:29 +0100 Subject: [PATCH 25/27] auto regeneration works --- config.rb | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/config.rb b/config.rb index 32d7529..719ed3e 100644 --- a/config.rb +++ b/config.rb @@ -3,7 +3,9 @@ # Set this to the root of your project when deployed: http_path = "/" -css_dir = "public/css" + +# 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" From 47fa998f67bb69c35e1d78bce2baa30f7653cdcc Mon Sep 17 00:00:00 2001 From: Rubycut Date: Sun, 6 Nov 2011 10:53:33 +0100 Subject: [PATCH 26/27] finished README --- README.markdown | 21 ++++++++++++--------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/README.markdown b/README.markdown index 52cf564..2f07adf 100644 --- a/README.markdown +++ b/README.markdown @@ -48,19 +48,22 @@ which creates 3 files only: * views/css/screen.sass * views/css/_base.sass -out of this 3 files, it creates *stylesheets/screen.css* every time your run `compass compile` or `compass watch` - -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. - _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 -As you can see, result of using compass with plugins is one css file only. +### Sinatra full auto + +When you start sinatra app, it will generate css on the fily, 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. -### Onto sinatra -Now, when you have your css file ready, why change anything in sinatra, we should be able to simply use css file generated by compass. +## Conclusion -That is true, but you can make sinatra actually rebuild screen.css file on demand so there is no need to run `compass compile` or `compass watch`. How cool is that? +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` From 6e63de3edc7fb1edde40765442be208c055d334e Mon Sep 17 00:00:00 2001 From: Rubycut Date: Sun, 6 Nov 2011 11:08:01 +0100 Subject: [PATCH 27/27] README add links --- README.markdown | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.markdown b/README.markdown index 2f07adf..c59a6ff 100644 --- a/README.markdown +++ b/README.markdown @@ -32,9 +32,9 @@ This repo bundles [susy]("http://susy.oddbird.net/") plugin together with compas ### Compass -Sass basically allows you to write nicer css, it supports variables and some other stuff. +[Sass]("http://sass-lang.com/") basically allows you to write nicer css, it supports variables and some other stuff. -But compass, 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." +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. @@ -54,7 +54,7 @@ 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 fily, see app.rb for details. Basically it just load Compass before calling sass method. +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