Liebe Dein Frontend wie Dich selbst! HAML & SASS & COMPASS & less

Liebe Dein Frontend wie Dich selbst. haml & sass & compass & less 02.09.2009 Rails-Konferenz 2009 Jan Krutisch <jan.krutisch@mindmatters.de> mindmatters GmbH & Co. KG Donnerstag, 3. September 2009

(disclaimer) Donnerstag, 3. September 2009

HAML Donnerstag, 3. September 2009

http://haml-lang.com/ Donnerstag, 3. September 2009

(X)HTML Abstraction Markup Language Donnerstag, 3. September 2009

Nur 'ne neue Template-Engine? Donnerstag, 3. September 2009

<em> <% "was ist falsch an erb or erubis?" %> </em> Donnerstag, 3. September 2009

Nix. Donnerstag, 3. September 2009

Mächtig. Donnerstag, 3. September 2009

Flexibel. Donnerstag, 3. September 2009

Ausreichend schnell. Donnerstag, 3. September 2009

ABER! Donnerstag, 3. September 2009

mirscheissegal Donnerstag, 3. September 2009

1) Ich habe Kontrolle über meinen Template-Code Donnerstag, 3. September 2009

2) Ich bin ein disziplinierter Coder Donnerstag, 3. September 2009

3) Ich schreib mein HTML selber. Donnerstag, 3. September 2009

Andere Sichtweise Donnerstag, 3. September 2009

(x)HTML = XML Donnerstag, 3. September 2009

Tagsoup Text Donnerstag, 3. September 2009

HTML-Tags = Redundanz Donnerstag, 3. September 2009

<div> </div> Donnerstag, 3. September 2009

<div> Re d und </div> an t ! Donnerstag, 3. September 2009

ERB = Zu Nachsichtig Donnerstag, 3. September 2009

(Zu agnostisch) Donnerstag, 3. September 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> Donnerstag, 3. September 2009

found via google search, source unknown Donnerstag, 3. September 2009

"There must be a better way"™ Donnerstag, 3. September 2009

Abstrahieren! Donnerstag, 3. September 2009

HAML Donnerstag, 3. September 2009

Kompakt Donnerstag, 3. September 2009

Keine Redundanzen Donnerstag, 3. September 2009

Wacht über die Dokumentenstruktur Donnerstag, 3. September 2009

Gibt tollen HTML- Code aus. Donnerstag, 3. September 2009

installation als gem & rails plugin Donnerstag, 3. September 2009

> gem install haml > cd rails_app > haml --rails . Donnerstag, 3. September 2009

(Library/ commandline tool) Donnerstag, 3. September 2009

Tags! Donnerstag, 3. September 2009

%table %tr %td Hey there Donnerstag, 3. September 2009

%table %tr %td Hey there Magic! <table> <tr> <td>Hey there</td> </tr> </table> Donnerstag, 3. September 2009

%table %tr %td Hey there Magic! <table> <tr> <td> Hey there </td> </tr> </table> Donnerstag, 3. September 2009

Self-closing tags Donnerstag, 3. September 2009

%foo/ Magic! <foo/> Donnerstag, 3. September 2009

automagisch für: •meta •img •link •script •br •hr Donnerstag, 3. September 2009

Whitespace control Donnerstag, 3. September 2009

(für die dämlichen Browserbugs) Donnerstag, 3. September 2009

%blockquote< %div Foo! Magic! <blockquote><div> Foo! </div></blockquote> Donnerstag, 3. September 2009

%img %img> %img Magic! <img /><img /><img /> Donnerstag, 3. September 2009

Attribute! Donnerstag, 3. September 2009

%head{ :name => "doc_head" } %script{ 'type' => "text/" + "javascript", :src => "javascripts/script_#{2 + 7}" } Magic! <head name='doc_head'> <script src='/docs/rdoc/javascripts/script_9' type='text/javascript'> </script> </head> Donnerstag, 3. September 2009

%head{ :name => "doc_head" } De p %script{ 'type' => "text/" + "javascript", re c at :src => "javascripts/script_#{2 + 7}" } e d! Magic! <head name='doc_head'> <script src='/docs/rdoc/javascripts/script_9' type='text/javascript'> </script> </head> Donnerstag, 3. September 2009

%head(name="doc_head") %script(type="text/javascript", src="javascripts/script_#{2 + 7}") Magic! <head name='doc_head'> <script src='/docs/rdoc/javascripts/script_9' type='text/javascript'> </script> </head> Donnerstag, 3. September 2009

Attribut-Helper Donnerstag, 3. September 2009

def html_attrs(lang = 'en-US') { :xmlns => "http://www.w3.org/1999/xhtml", 'xml:lang' => lang, :lang => lang } end Donnerstag, 3. September 2009

%html{html_attrs(lang = 'de-DE')} Magic! <html lang='de-DE' xml:lang='de-DE' xmlns='http://www.w3.org/1999/xhtml'> </html> Donnerstag, 3. September 2009

Spezialgelagerter Sonderfall: Donnerstag, 3. September 2009

IDs & Klassen Donnerstag, 3. September 2009

#aye_dee .klazz Aha! Magic! <div id='aye_dee'> <div class='klazz'> Aha! </div> </div> Donnerstag, 3. September 2009

Ruby! Donnerstag, 3. September 2009

%p= "Yay".downcase Magic! <p>yay</p> Donnerstag, 3. September 2009

%p&= "<b>Yay</b>".downcase Magic! <p><b>yay</b></p> Donnerstag, 3. September 2009

%p!= "<b>Yay</b>".downcase Magic! <p><b>yay</b></p> Donnerstag, 3. September 2009

%p= "<b>Yay</b>".downcase Magic! <p><b>yay</b></p> Donnerstag, 3. September 2009

:escape_html Donnerstag, 3. September 2009

%p== #{followers} Followers Magic! <p>120231373274987476 Followers</p> Donnerstag, 3. September 2009

De p re %p== #{followers} Followers c a t e d! Magic! <p>120231373274987476 Followers</p> Donnerstag, 3. September 2009

%p #{followers} Followers Magic! <p>120231373274987476 Followers</p> Donnerstag, 3. September 2009

(siehe oben) Donnerstag, 3. September 2009

%pre~ "YaynHey".downcase Magic! <pre>yay
hey</pre> Donnerstag, 3. September 2009

%ul - %w{one two three}.each do |word| %li= word Magic! <ul> <li>one</li> <li>two</li> <li>three</li> </ul> Donnerstag, 3. September 2009

Auto-IDs und -Klassen Donnerstag, 3. September 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> Donnerstag, 3. September 2009

Filter Donnerstag, 3. September 2009

:textile h1. Header Hello _world_ Magic! <h1>Header</h1> <p>Hello <em>world</em></p> Donnerstag, 3. September 2009

Verfügbare Filter ‣ plain ‣ sass ‣ javascript ‣ textile ‣ escaped ‣ markdown ‣ ruby ‣ maruku ‣ preserve ‣ cdata ‣ erb ‣ roll yer own Donnerstag, 3. September 2009

Kommentare Donnerstag, 3. September 2009

/ This is a comment Magic!  Donnerstag, 3. September 2009

/[if IE] %a{ :href => 'http://www.mozilla.com/en-US/firefox/' } %h1 Get Firefox! Magic!  Donnerstag, 3. September 2009

-# A silent comment Donnerstag, 3. September 2009

-# A silent comment Magic! Donnerstag, 3. September 2009

Und viel mehr. Donnerstag, 3. September 2009

atlin.com/docs/rdoc/ classes/Haml.html http://haml.hamptonc Donnerstag, 3. September 2009

F.A.Q. Donnerstag, 3. September 2009

Performance Donnerstag, 3. September 2009

Ohne Rails Donnerstag, 3. September 2009

require 'rubygems' require 'haml' template = open('simple.haml').read engine = Haml::Engine.new(template) puts engine.render Donnerstag, 3. September 2009

template = <<END %h1= foo END obj = Object.new engine = Haml::Engine.new(template).def_method(obj, :render, :foo) puts obj.render(:foo => 'bar') Donnerstag, 3. September 2009

Migration Donnerstag, 3. September 2009

SASS Donnerstag, 3. September 2009

http://sass-lang.com/ Donnerstag, 3. September 2009

Syntactically Awesome StyleSheets Donnerstag, 3. September 2009

Warum? Donnerstag, 3. September 2009

found via google search, source unknown Donnerstag, 3. September 2009

Warum? Donnerstag, 3. September 2009

Keine Variablen/ Konstanten Donnerstag, 3. September 2009

Keine Abstraktionen Donnerstag, 3. September 2009

Kein „echtes“ Kaskadieren Donnerstag, 3. September 2009

Ein paar überﬂüssige Zeichen Donnerstag, 3. September 2009

Installation Donnerstag, 3. September 2009

(kommt mit haml) Donnerstag, 3. September 2009

stylesheets/sass/screen.sass Magic! stylesheets/screen.css Donnerstag, 3. September 2009

Simples Donnerstag, 3. September 2009

#main :color #0f0 :width 300px p :color #030 Magic! #main { color: #0f0; width: 300px; } #main p { color: #030; } Donnerstag, 3. September 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; } Donnerstag, 3. September 2009

( Könnte sinnvoll sein in Situationen mit Migrationshintergrund. ) Donnerstag, 3. September 2009

References on parent Donnerstag, 3. September 2009

a color: #0f0 &:hover color: #0ff Magic! a { color: #0f0; } a:hover { color: #0ff; } Donnerstag, 3. September 2009

#sidebar :float left :margin-left 20% .ie6 & :margin-left 40% Magic! #sidebar { float: left; margin-left: 20%; } .ie6 #sidebar { margin-left: 40%; } Donnerstag, 3. September 2009

Compound styles Donnerstag, 3. September 2009

.black-border :border :color #000 :width 2px :style solid Magic! .black-border { border-color: #000; border-width: 2px; border-style: solid; } Donnerstag, 3. September 2009

Konstanten Donnerstag, 3. September 2009

!bg_color = #002244 body :background-color = !bg_color Magic! body { background-color: #002244; } Donnerstag, 3. September 2009

Ach t u ng! !bg_color = #002244 body :background-color = !bg_color Magic! body { background-color: #002244; } Donnerstag, 3. September 2009

Berechnungen Donnerstag, 3. September 2009

!bg_color = #002244 body :color = !bg_color + #020202 Magic! body { color: #022446; } Donnerstag, 3. September 2009

Mixins Donnerstag, 3. September 2009

=standard-border :border 1px solid black #main +standard-border :padding 5px Magic! #main { border: 1px solid black; padding: 5px; } Donnerstag, 3. September 2009

Mixin-Argumente Donnerstag, 3. September 2009

=border(!color = #000) :border 1px solid :color = !color #foo +border(#fea) Donnerstag, 3. September 2009

Kontrollstrukturen Donnerstag, 3. September 2009

@for !n from 1 through 6 h#{!n} :padding 0 :margin 0 Donnerstag, 3. September 2009

!shall_we = false @if !shall_we body :background-color yellow @else body :display none Donnerstag, 3. September 2009

@import Donnerstag, 3. September 2009

Ausgabe-Styles Donnerstag, 3. September 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 : Donnerstag, 3. September 2009

Performance Donnerstag, 3. September 2009

File caching Donnerstag, 3. September 2009

Reload-Verhalten Donnerstag, 3. September 2009

Benutzung ohne Rails Donnerstag, 3. September 2009

require 'rubygems' require 'sass' template = open('simple.sass').read sass_engine = Sass::Engine.new(template) output = sass_engine.render puts output Donnerstag, 3. September 2009

COMPASS Donnerstag, 3. September 2009

CSS meta framework Donnerstag, 3. September 2009

CSS-Frameworks •Blueprint •YUI-Grids •960.gs •YAML Donnerstag, 3. September 2009

COMPASS-Module •Reset •Utilities •Layout Donnerstag, 3. September 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 Donnerstag, 3. September 2009

Rails-Integration Donnerstag, 3. September 2009

> compass --rails . Donnerstag, 3. September 2009

app/stylesheets/foo.sass Magic! public/stylesheets/compiled/foo.css Donnerstag, 3. September 2009

Beispiel (Blueprint) Donnerstag, 3. September 2009

header artist_header logo_header body footer Donnerstag, 3. September 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 Donnerstag, 3. September 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 Donnerstag, 3. September 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) Donnerstag, 3. September 2009

Flexible Raster- Deﬁnitionen Donnerstag, 3. September 2009

(try that, blueprint!) Donnerstag, 3. September 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(10, true) #artist_header +column(6) #logo_header +column(4, true) #body +column(10, true) #footer +column(10, true) Donnerstag, 3. September 2009

Duplikation im generierten Code Donnerstag, 3. September 2009

Kompatibilität zwischen Frameworks Donnerstag, 3. September 2009

Work in progress Donnerstag, 3. September 2009

Fragen? Donnerstag, 3. September 2009

{less} Donnerstag, 3. September 2009

Motivation Donnerstag, 3. September 2009

Syntax Donnerstag, 3. September 2009

css = less Donnerstag, 3. September 2009

> sudo gem install less Donnerstag, 3. September 2009

Rails Donnerstag, 3. September 2009

> script/plugin install > git://github.com/augustl/less-for-rails.git Donnerstag, 3. September 2009

public/stylesheets/foo.less >>> public/stylesheets/foo.css Donnerstag, 3. September 2009

Production vs. Dev Donnerstag, 3. September 2009

It is very fabolous, and the plugin has won many prizes for this. [sic] Donnerstag, 3. September 2009

Syntax Donnerstag, 3. September 2009

Variablen Donnerstag, 3. September 2009

@nice-blue: #5B83AD; @light-blue: @nice-blue + #111; #header { color: @light-blue; } Donnerstag, 3. September 2009

Mixins Donnerstag, 3. September 2009

.bordered { border-top: dotted 1px black; border-bottom: solid 2px black; } #menu a { color: #111; .bordered; } .post a { color: red; .bordered; } Donnerstag, 3. September 2009

Nested rules Donnerstag, 3. September 2009

#header { color: black; .navigation { font-size: 12px; } .logo { width: 300px; :hover { text-decoration: none } } } Donnerstag, 3. September 2009

Operations Donnerstag, 3. September 2009

@base: 5%; @filler: @base * 2; @other: @base + @filler; color: #888 / 4; background-color: @base-color + #111; height: 100% / 2 + @filler; Donnerstag, 3. September 2009

Namespaces / Accessors Donnerstag, 3. September 2009

#bundle { .button { display: block; border: 1px solid black; background-color: grey; :hover { background-color: white } } .tab { ... } .citation { ... } } #header a { color: orange; #bundle > .button; } Donnerstag, 3. September 2009

#defaults { @width: 960px; @color: black; } .article { color: #294366; } .comment { width: #defaults[@width]; color: .article['color']; } Donnerstag, 3. September 2009

Scope Donnerstag, 3. September 2009

@var: red; #page { @var: white; #header { color: @var; // white } } Donnerstag, 3. September 2009

Kommentare Donnerstag, 3. September 2009

/* One hell of a comment */ @var: red; // Get in line! @var: white; Donnerstag, 3. September 2009

@import Donnerstag, 3. September 2009

@import "library"; @import "typo.css"; Donnerstag, 3. September 2009

discuss. Donnerstag, 3. September 2009

http://twitter.com/halfbyte http://github.com/halfbyte http://www.ﬂickr.com/photos/jankrutisch/ dangge. Donnerstag, 3. September 2009

http://coderwall.com	61
http://localhost3000.de	59
http://jan.krutisch.de	2
http://www.slideshare.net	1

Liebe Dein Frontend wie Dich selbst! HAML & SASS & COMPASS & less

by jan_mindmatters

Accessibility

Categories

Upload Details

Usage Rights

4 Embeds 123

Statistics

Liebe Dein Frontend wie Dich selbst! HAML & SASS & COMPASS & less Presentation Transcript