Show the frontend some love - HAML, SASS and COMPASS

Show the frontend some love - HAML, SASS and COMPASS
Show the frontend some love haml & sass & compass 26.05.2009 RailsWayCon Jan Krutisch <jan@krutisch.de> mindmatters GmbH & Co. KG Dienstag, 26. Mai 2009
Jan Krutisch ‣ Rails since 2005 ‣ Founder of rubyonrails-ug.de ‣ Writer of a book and many articles ‣ Rails team captain @ mindmatters ‣ General all purpose geek Dienstag, 26. Mai 2009
(disclaimer) Dienstag, 26. Mai 2009
HAML Dienstag, 26. Mai 2009
(X)HTML Abstraction Markup Language Dienstag, 26. Mai 2009
Just another template language? Dienstag, 26. Mai 2009
<em> <% quot;what's wrong with erb or erubis?quot; %> </em> Dienstag, 26. Mai 2009
Nothing really. Dienstag, 26. Mai 2009
Powerful. Dienstag, 26. Mai 2009
Flexible. Dienstag, 26. Mai 2009
Reasonably fast. Dienstag, 26. Mai 2009
But! Dienstag, 26. Mai 2009
1) Security Dienstag, 26. Mai 2009
lam3 cøD3rZ, stupid bastards, black hatters Dienstag, 26. Mai 2009
<% `rm -rf /` %> Dienstag, 26. Mai 2009
2) Style/ Design Dienstag, 26. Mai 2009
Too much logic in the view! Dienstag, 26. Mai 2009
Separation of concerns violated!! Dienstag, 26. Mai 2009
Millions of cute kitties die !!!1! image via http://cuteoverload.com Dienstag, 26. Mai 2009
3) „Designers don‘t understand code“ Dienstag, 26. Mai 2009
(Subtitle: WYSIWYG-Editors don‘t understand code) Dienstag, 26. Mai 2009
Let‘s fix it. Dienstag, 26. Mai 2009
<b> {{ liquid }} </b> Dienstag, 26. Mai 2009
Security! Dienstag, 26. Mai 2009
Very limited functionality and access to data! Dienstag, 26. Mai 2009
(Yeah, that's good) Dienstag, 26. Mai 2009
OK, got that. Dienstag, 26. Mai 2009
I don't care. Dienstag, 26. Mai 2009
1) I am in full control of my template code Dienstag, 26. Mai 2009
2) I am a very disciplined coder Dienstag, 26. Mai 2009
3) I write all of my HTML by myself Dienstag, 26. Mai 2009
Different view Dienstag, 26. Mai 2009
(x)HTML = XML Dienstag, 26. Mai 2009
Tagsoup Text Dienstag, 26. Mai 2009
HTML-Tags = Redundant Dienstag, 26. Mai 2009
<div> </div> Dienstag, 26. Mai 2009
<div> Re d und </div> an t ! Dienstag, 26. Mai 2009
ERB = Too forgiving Dienstag, 26. Mai 2009
(Too agnostic) Dienstag, 26. Mai 2009
de x .e r b in <%= render :partial => 'head' %> ... <%= render :partial => 'foot' %> e ad .e r b _h <body> foo t .e r b _ </body> Dienstag, 26. Mai 2009
found via google search, source unknown Dienstag, 26. Mai 2009
quot;There must be a better wayquot;™ Dienstag, 26. Mai 2009
Let's abstract. Dienstag, 26. Mai 2009
HAML Dienstag, 26. Mai 2009
Compact Dienstag, 26. Mai 2009
No redundancies Dienstag, 26. Mai 2009
Keeps the document structure Dienstag, 26. Mai 2009
Outputs beautiful code Dienstag, 26. Mai 2009
installation as gem & rails plugin Dienstag, 26. Mai 2009
> gem install haml > cd rails_app > haml --rails . Dienstag, 26. Mai 2009
(Library/ commandline tool) Dienstag, 26. Mai 2009
Tags! Dienstag, 26. Mai 2009
%table %tr %td Hey there Dienstag, 26. Mai 2009
%table %tr %td Hey there Magic! <table> <tr> <td>Hey there</td> </tr> </table> Dienstag, 26. Mai 2009
%table %tr %td Hey there Magic! <table> <tr> <td> Hey there </td> </tr> </table> Dienstag, 26. Mai 2009
Self-closing tags Dienstag, 26. Mai 2009
%foo/ Magic! <foo/> Dienstag, 26. Mai 2009
automagically for: •meta •img •link •script •br •hr Dienstag, 26. Mai 2009
Whitespace control Dienstag, 26. Mai 2009
(for those stoopid browser boogs) Dienstag, 26. Mai 2009
%blockquote< %div Foo! Magic! <blockquote><div> Foo! </div></blockquote> Dienstag, 26. Mai 2009
%img %img> %img Magic! <img /><img /><img /> Dienstag, 26. Mai 2009
Attributes! Dienstag, 26. Mai 2009
%head{ :name => quot;doc_headquot; } %script{ 'type' => quot;text/quot; + quot;javascriptquot;, :src => quot;javascripts/script_#{2 + 7}quot; } Magic! <head name='doc_head'> <script src='/docs/rdoc/javascripts/script_9' type='text/javascript'> </script> </head> Dienstag, 26. Mai 2009
Attribute helpers Dienstag, 26. Mai 2009
def html_attrs(lang = 'en-US') { :xmlns => quot;http://www.w3.org/1999/xhtmlquot;, 'xml:lang' => lang, :lang => lang } end Dienstag, 26. Mai 2009
%html{html_attrs(lang = 'de-DE')} Magic! <html lang='de-DE' xml:lang='de-DE' xmlns='http://www.w3.org/1999/xhtml'> </html> Dienstag, 26. Mai 2009
Special case: Dienstag, 26. Mai 2009
IDs & classes Dienstag, 26. Mai 2009
#aye_dee .klazz Aha! Magic! <div id='aye_dee'> <div class='klazz'> Aha! </div> </div> Dienstag, 26. Mai 2009
Ruby! Dienstag, 26. Mai 2009
%p= quot;Yayquot;.downcase Magic! <p>yay</p> Dienstag, 26. Mai 2009
%p&= quot;<b>Yay</b>quot;.downcase Magic! <p><b>yay</b></p> Dienstag, 26. Mai 2009
%p!= quot;<b>Yay</b>quot;.downcase Magic! <p><b>yay</b></p> Dienstag, 26. Mai 2009
%p= quot;<b>Yay</b>quot;.downcase Magic! <p><b>yay</b></p> Dienstag, 26. Mai 2009
%p= quot;<b>Yay</b>quot;.downcase Magic! <p><b>yay</b></p> Dienstag, 26. Mai 2009
:escape_html Dienstag, 26. Mai 2009
%p== #{followers} Followers Magic! <p>120231373274987476 Followers</p> Dienstag, 26. Mai 2009
(same rules apply) Dienstag, 26. Mai 2009
%pre~ quot;YaynHeyquot;.downcase Magic! <pre>yay
hey</pre> Dienstag, 26. Mai 2009
%ul - %w{one two three}.each do |word| %li= word Magic! <p>one</p> <p>two</p> <p>three</p> Dienstag, 26. Mai 2009
Auto ID‘s and classes Dienstag, 26. Mai 2009
%ul - ['foo', 'bar'].each do |el| %li[el]= el Magic! <ul> <li class='string' id='string_2970900'>foo</li> <li class='string' id='string_2970890'>bar</li> </ul> Dienstag, 26. Mai 2009
Filters Dienstag, 26. Mai 2009
:textile h1. Header Hello _world_ Magic! <h1>Header</h1> <p>Hello <em>world</em></p> Dienstag, 26. Mai 2009
Available Filters ‣ plain ‣ javascript ‣ sass ‣ textile ‣ escaped ‣ markdown ‣ ruby ‣ maruku ‣ preserve ‣ roll yer own ‣ erb Dienstag, 26. Mai 2009
Comments Dienstag, 26. Mai 2009
/ This is a comment Magic!  Dienstag, 26. Mai 2009
/[if IE] %a{ :href => 'http://www.mozilla.com/en-US/firefox/' } %h1 Get Firefox! Magic!  Dienstag, 26. Mai 2009
-# A silent comment Dienstag, 26. Mai 2009
-# A silent comment Magic! Dienstag, 26. Mai 2009
But wait, there's more! Dienstag, 26. Mai 2009
atlin.com/docs/rdoc/ classes/Haml.html http://haml.hamptonc Dienstag, 26. Mai 2009
F.A.Q. Dienstag, 26. Mai 2009
Performance Dienstag, 26. Mai 2009
Usage without rails Dienstag, 26. Mai 2009
require 'rubygems' require 'haml' template = open('simple.haml').read engine = Haml::Engine.new(template) puts engine.render Dienstag, 26. Mai 2009
template = <<END %h1= foo END obj = Object.new engine = Haml::Engine.new(template).def_method(obj, :render, :foo) puts obj.render(:foo => 'bar') Dienstag, 26. Mai 2009
Migration Dienstag, 26. Mai 2009
SASS Dienstag, 26. Mai 2009
Syntactically Awesome StyleSheets Dienstag, 26. Mai 2009
Why? Dienstag, 26. Mai 2009
found via google search, source unknown Dienstag, 26. Mai 2009
Why? Dienstag, 26. Mai 2009
No Variables/ Constants Dienstag, 26. Mai 2009
No abstractions Dienstag, 26. Mai 2009
No „real“ cascading Dienstag, 26. Mai 2009
a few superfluous characters Dienstag, 26. Mai 2009
installation Dienstag, 26. Mai 2009
(comes with haml) Dienstag, 26. Mai 2009
stylesheets/sass/screen.sass Magic! stylesheets/screen.css Dienstag, 26. Mai 2009
The basics Dienstag, 26. Mai 2009
#main :color #0f0 :width 300px p :color #030 Magic! #main { color: #0f0; width: 300px; } #main p { color: #030; } Dienstag, 26. Mai 2009
a l te #main rna color: #0f0 t i ve syn width: 300px p tax color: #030 Magic! #main { color: #0f0; width: 300px; } #main p { color: #030; } Dienstag, 26. Mai 2009
( might be useful in migrational situations ) Dienstag, 26. Mai 2009
References on parent Dienstag, 26. Mai 2009
a color: #0f0 &:hover color: #0ff Magic! a { color: #0f0; } a:hover { color: #0ff; } Dienstag, 26. Mai 2009
#sidebar :float left :margin-left 20% .ie6 & :margin-left 40% Magic! #sidebar { float: left; margin-left: 20%; } .ie6 #sidebar { margin-left: 40%; } Dienstag, 26. Mai 2009
Compound styles Dienstag, 26. Mai 2009
.black-border :border :color #000 :width 2px :style solid Magic! .black-border { border-color: #000; border-width: 2px; border-style: solid; } Dienstag, 26. Mai 2009
Constants Dienstag, 26. Mai 2009
!bg_color = #002244 body :color = !bg_color Magic! body { background-color: #002244; } Dienstag, 26. Mai 2009
Ach t u !bg_color = #002244 ng! body :color = !bg_color Magic! body { background-color: #002244; } Dienstag, 26. Mai 2009
Calculations Dienstag, 26. Mai 2009
!bg_color = #002244 body :color = !bg_color + #020202 Magic! body { background-color: #022446; } Dienstag, 26. Mai 2009
Mixins Dienstag, 26. Mai 2009
=standard-border :border 1px solid black #main +standard-border :padding 5px Magic! #main { border: 1px solid black; padding: 5px; } Dienstag, 26. Mai 2009
@import Dienstag, 26. Mai 2009
Output Styles Dienstag, 26. Mai 2009
.box{border-top:1px solid black;border-bottom:5px solid black}body{background- color:#002244}#main{color:lime;p-background- color:lime;p-color:#000000}#main{border:1px solid black;padding:5px} e ss ed c om pr : Dienstag, 26. Mai 2009
A look at SASS Edge Dienstag, 26. Mai 2009
Mixin arguments Dienstag, 26. Mai 2009
=border(!color = #000) :border 1px solid :color = !color #foo +border(#fea) Dienstag, 26. Mai 2009
Control structures Dienstag, 26. Mai 2009
@for !n from 1 through 6 h#{!n} :padding 0 :margin 0 Dienstag, 26. Mai 2009
!shall_we = false @if !shall_we body :background-color yellow @else body :display none Dienstag, 26. Mai 2009
Performance Dienstag, 26. Mai 2009
File caching Dienstag, 26. Mai 2009
Reload behaviour Dienstag, 26. Mai 2009
Usage without rails Dienstag, 26. Mai 2009
require 'rubygems' require 'sass' template = open('simple.sass').read sass_engine = Sass::Engine.new(template) output = sass_engine.render puts output Dienstag, 26. Mai 2009
COMPASS Dienstag, 26. Mai 2009
CSS meta framework Dienstag, 26. Mai 2009
CSS frameworks •Blueprint •YUI-Grids •960.gs •YAML Dienstag, 26. Mai 2009
COMPASS-Module •Reset •Utilities •Layout Dienstag, 26. Mai 2009
Installation Dienstag, 26. Mai 2009
COMPASS requires HAML/SASS edge Dienstag, 26. Mai 2009
> git clone git://github.com/nex3/haml.git > cd haml > sudo rake install > gem sources --add http://gems.github.com/ > sudo gem install chriseppstein-compass Dienstag, 26. Mai 2009
Rails-Integration Dienstag, 26. Mai 2009
> compass --rails . Dienstag, 26. Mai 2009
app/stylesheets/foo.sass Magic! public/stylesheets/compiled/foo.css Dienstag, 26. Mai 2009
Example (Blueprint) Dienstag, 26. Mai 2009
header artist_header logo_header body footer Dienstag, 26. Mai 2009
!!! Strict %html{html_attrs('de-de')} %head = stylesheet_link_tag 'compiled/screen.css' /[if IE] = stylesheet_link_tag 'compiled/ie.css' %body .container #header.span-24 #artist_header.span-6 %h1 Foo #logo_header.span-18.last %h2 Bar #body.span-24 = yield #footer.span-24 Dienstag, 26. Mai 2009
!!! Strict %html{html_attrs('de-de')} %head = stylesheet_link_tag 'compiled/screen.css' /[if IE] = stylesheet_link_tag 'compiled/ie.css' %body #container #header #artist_header %h1 Foo #logo_header %h2 Bar #body = yield #footer Dienstag, 26. Mai 2009
@import compass/reset.sass @import blueprint/modules/grid.sass #container +container #header +column(24, true) #artist_header +column(6) #logo_header +column(18, true) #body +column(24, true) #footer +column(24, true) Dienstag, 26. Mai 2009
Flexible grid definitions Dienstag, 26. Mai 2009
(try that, blueprint!) Dienstag, 26. Mai 2009
@import compass/reset.sass @import blueprint/modules/grid.sass !blueprint_grid_columns = 10 !blueprint_grid_width = 60px !blueprint_grid_margin = 10px #container +container #header +column(24, true) #artist_header +column(6) #logo_header +column(18, true) #body +column(24, true) #footer +column(24, true) Dienstag, 26. Mai 2009
Duplication in generated code Dienstag, 26. Mai 2009
Short answer: Yes Dienstag, 26. Mai 2009
Compatibility between frameworks Dienstag, 26. Mai 2009
work in progress Dienstag, 26. Mai 2009
questions? Dienstag, 26. Mai 2009
SUM() Dienstag, 26. Mai 2009
Me likes. Dienstag, 26. Mai 2009
Very DRY.+ Dienstag, 26. Mai 2009
+ Very readable. Dienstag, 26. Mai 2009
Faster. + (to develop) Dienstag, 26. Mai 2009
+ Catches structural errors early. Dienstag, 26. Mai 2009
Needs a willing environment - Dienstag, 26. Mai 2009
- (Not HTML4dummies compliant) Dienstag, 26. Mai 2009
- You‘ll miss a few tricks Dienstag, 26. Mai 2009
- (Like CSSEdit) Dienstag, 26. Mai 2009
+ You‘ll get new tricks Dienstag, 26. Mai 2009
+ Like having a css framework essentially „for free“ Dienstag, 26. Mai 2009
discuss. Dienstag, 26. Mai 2009
http://twitter.com/halfbyte http://github.com/halfbyte http://www.flickr.com/photos/jankrutisch/ thanks. Dienstag, 26. Mai 2009

Check these out next

Show the frontend some love - HAML, SASS and COMPASS

Recommended

More Related Content

More from jan_mindmatters(7)

Recently uploaded(20)

Show the frontend some love - HAML, SASS and COMPASS