wie Dich selbst.Liebe Dein Frontend
haml & sass & compass & less02.09.2009Rails-Konferenz 2009Jan Krutisch <[email protected]>mindmatters GmbH & Co. KG
Donnerstag, 3. September 2009
(disclaimer)
Donnerstag, 3. September 2009
HAML
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
Text
Tagsoup
Donnerstag, 3. September 2009
HTML-Tags = Redundanz
Donnerstag, 3. September 2009
<div>
</div>
Donnerstag, 3. September 2009
<div>
</div>Redundant!
Donnerstag, 3. September 2009
ERB = Zu Nachsichtig
Donnerstag, 3. September 2009
(Zu agnostisch)
Donnerstag, 3. September 2009
<%= render :partial => 'head' %>...<%= render :partial => 'foot' %>
<body>
</body>
index.erb
_head.erb
_foot.erb
Donnerstag, 3. September 2009
found via google search, source unknownDonnerstag, 3. September 2009
"There must bea 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/
<foo/>
Magic!
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}" }
<head name='doc_head'> <script src='/docs/rdoc/javascripts/script_9' type='text/javascript'> </script></head>
Magic!
Donnerstag, 3. September 2009
%head{ :name => "doc_head" } %script{ 'type' => "text/" + "javascript", :src => "javascripts/script_#{2 + 7}" }
<head name='doc_head'> <script src='/docs/rdoc/javascripts/script_9' type='text/javascript'> </script></head>
Magic!
Deprecated!
Donnerstag, 3. September 2009
%head(name="doc_head") %script(type="text/javascript", src="javascripts/script_#{2 + 7}")
<head name='doc_head'> <script src='/docs/rdoc/javascripts/script_9' type='text/javascript'> </script></head>
Magic!
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
Magic!
<html lang='de-DE' xml:lang='de-DE' xmlns='http://www.w3.org/1999/xhtml'></html>
%html{html_attrs(lang = 'de-DE')}
Donnerstag, 3. September 2009
Spezialgelagerter Sonderfall:
Donnerstag, 3. September 2009
IDs & Klassen
Donnerstag, 3. September 2009
Magic!
<div id='aye_dee'> <div class='klazz'> Aha! </div></div>
#aye_dee .klazz Aha!
Donnerstag, 3. September 2009
Ruby!
Donnerstag, 3. September 2009
Magic!
<p>yay</p>
%p= "Yay".downcase
Donnerstag, 3. September 2009
Magic!
<p><b>yay</b></p>
%p&= "<b>Yay</b>".downcase
Donnerstag, 3. September 2009
Magic!
<p><b>yay</b></p>
%p!= "<b>Yay</b>".downcase
Donnerstag, 3. September 2009
Magic!
<p><b>yay</b></p>
%p= "<b>Yay</b>".downcase
Donnerstag, 3. September 2009
Magic!
%p= "<b>Yay</b>".downcase
<p><b>yay</b></p>
Donnerstag, 3. September 2009
:escape_html
Donnerstag, 3. September 2009
Magic!
<p>120231373274987476 Followers</p>
%p== #{followers} Followers
Donnerstag, 3. September 2009
Magic!
<p>120231373274987476 Followers</p>
%p== #{followers} FollowersDeprecated!
Donnerstag, 3. September 2009
Magic!
<p>120231373274987476 Followers</p>
%p #{followers} Followers
Donnerstag, 3. September 2009
(siehe oben)
Donnerstag, 3. September 2009
Magic!
<pre>yay
hey</pre>
%pre~ "Yay\nHey".downcase
Donnerstag, 3. September 2009
Magic!
<p>one</p><p>two</p><p>three</p>
%ul - %w{one two three}.each do |word| %li= word
Donnerstag, 3. September 2009
Auto-IDs und -Klassen
Donnerstag, 3. September 2009
Magic!
<ul> <li class='string' id='string_2970900'>foo</li> <li class='string' id='string_2970890'>bar</li></ul>
%ul - ['foo', 'bar'].each do |el| %li[el]= el
Donnerstag, 3. September 2009
Filter
Donnerstag, 3. September 2009
Magic!
<h1>Header</h1>
<p>Hello <em>world</em></p>
:textile h1. Header Hello _world_
Donnerstag, 3. September 2009
Verfügbare Filter
‣ plain
‣ javascript
‣ escaped
‣ ruby
‣ preserve
‣ erb
‣ sass‣ textile‣markdown‣maruku‣ cdata‣ roll yer own
Donnerstag, 3. September 2009
Kommentare
Donnerstag, 3. September 2009
Magic!
/ This is a comment
<!-- This is a comment -->
Donnerstag, 3. September 2009
Magic!<!--[if IE]> <a href="http://www.getfirefox.com/"> Get Firefox! </a> <![endif]-->
/[if IE] %a{ :href => 'http://www.mozilla.com/en-US/firefox/' } %h1 Get Firefox!
Donnerstag, 3. September 2009
-# A silent comment
Donnerstag, 3. September 2009
Magic!
-# A silent comment
Donnerstag, 3. September 2009
Und viel mehr.
Donnerstag, 3. September 2009
http://haml.hamptoncatlin.com/docs/rdoc/classes/Haml.html
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').readengine = Haml::Engine.new(template)puts engine.render
Donnerstag, 3. September 2009
template = <<END%h1= fooENDobj = Object.newengine = 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
Syntactically Awesome StyleSheets
Donnerstag, 3. September 2009
Warum?
Donnerstag, 3. September 2009
found via google search, source unknownDonnerstag, 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 überflüssige Zeichen
Donnerstag, 3. September 2009
Installation
Donnerstag, 3. September 2009
(kommt mit haml)
Donnerstag, 3. September 2009
stylesheets/sass/screen.sass
stylesheets/screen.css
Magic!
Donnerstag, 3. September 2009
Simples
Donnerstag, 3. September 2009
Magic!
#main { color: #0f0; width: 300px; } #main p { color: #030; }
#main :color #0f0 :width 300px p :color #030
Donnerstag, 3. September 2009
#main { color: #0f0; width: 300px; } #main p { color: #030; }
Magic!
alternative syntax
#main color: #0f0 width: 300px p color: #030
Donnerstag, 3. September 2009
(Könnte sinnvoll sein in Situationen mit Migrationshintergrund.)
Donnerstag, 3. September 2009
Referenceson parent
Donnerstag, 3. September 2009
a { color: #0f0; } a:hover { color: #0ff; }
Magic!
a color: #0f0 &:hover color: #0ff
Donnerstag, 3. September 2009
#sidebar { float: left; margin-left: 20%; } .ie6 #sidebar { margin-left: 40%; }
Magic!
#sidebar :float left :margin-left 20% .ie6 & :margin-left 40%
Donnerstag, 3. September 2009
Compoundstyles
Donnerstag, 3. September 2009
.black-border { border-color: #000; border-width: 2px; border-style: solid; }
Magic!
.black-border :border :color #000 :width 2px :style solid
Donnerstag, 3. September 2009
Konstanten
Donnerstag, 3. September 2009
!bg_color = #002244body :color = !bg_color
body { background-color: #002244; }
Magic!
Donnerstag, 3. September 2009
!bg_color = #002244body :color = !bg_color
body { background-color: #002244; }
Magic!
Achtung!
Donnerstag, 3. September 2009
Berechnungen
Donnerstag, 3. September 2009
body { background-color: #022446; }
Magic!
!bg_color = #002244body :color = !bg_color + #020202
Donnerstag, 3. September 2009
Mixins
Donnerstag, 3. September 2009
Magic!#main { border: 1px solid black; padding: 5px; }
=standard-border :border 1px solid black#main +standard-border :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
:compressed
.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}
Donnerstag, 3. September 2009
F.A.Q.
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').readsass_engine = Sass::Engine.new(template)output = sass_engine.renderputs 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
Installation
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
public/stylesheets/compiled/foo.css
Magic!
Donnerstag, 3. September 2009
Beispiel (Blueprint)
Donnerstag, 3. September 2009
artist_header logo_header
bodybody
footerfooter
header
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-Definitionen
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(24, true) #artist_header +column(6)
#logo_header +column(18, true)
#body +column(24, true) #footer +column(24, true)
Donnerstag, 3. September 2009
F.A.Q.
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
Installation
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.flickr.com/photos/jankrutisch/
dangge.
Donnerstag, 3. September 2009