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 ﬁx 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

: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 superﬂuous 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 deﬁnitions 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.ﬂickr.com/photos/jankrutisch/ thanks. Dienstag, 26. Mai 2009

http://coderwall.com	47
http://localhost3000.de	22
http://www.slideshare.net	7
http://jan.krutisch.de	1

Show the frontend some love - HAML, SASS and COMPASS

by jan_mindmatters on Jun 05, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

4 Embeds 77

Statistics

Show the frontend some love - HAML, SASS and COMPASS — Presentation Transcript