show the frontend some love - haml, sass and compass
DESCRIPTION
Rails made Web application development substantially more enjoyable. Surprisingly, even in Rails 2.3, there are some areas that still suck: Erb-Templates are the typical HTML/XML tag soup mess, CSS-Files are, well, CSS files. HAML and SASS are two technologies to fix this: HAML templates are concise and powerful, SASS makes writing CSS almost a fun experience. Be there or be width:20px height:20px.TRANSCRIPT
Show the frontend some love
haml & sass & compass26.05.2009RailsWayConJan Krutisch <[email protected]>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><% "what's wrong with erb or erubis?" %></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.comDienstag, 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
Text
Tagsoup
Dienstag, 26. Mai 2009
HTML-Tags = Redundant
Dienstag, 26. Mai 2009
<div>
</div>
Dienstag, 26. Mai 2009
<div>
</div>Redundant!
Dienstag, 26. Mai 2009
ERB = Too forgiving
Dienstag, 26. Mai 2009
(Too agnostic)
Dienstag, 26. Mai 2009
<%= render :partial => 'head' %>...<%= render :partial => 'foot' %>
<body>
</body>
index.erb
_head.erb
_foot.erb
Dienstag, 26. Mai 2009
found via google search, source unknownDienstag, 26. Mai 2009
"There must bea better way"™
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 documentstructure
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/
<foo/>
Magic!
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 => "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!
Dienstag, 26. Mai 2009
Attribute helpers
Dienstag, 26. Mai 2009
def html_attrs(lang = 'en-US') { :xmlns => "http://www.w3.org/1999/xhtml", 'xml:lang' => lang, :lang => lang }end
Dienstag, 26. Mai 2009
Magic!
<html lang='de-DE' xml:lang='de-DE' xmlns='http://www.w3.org/1999/xhtml'></html>
%html{html_attrs(lang = 'de-DE')}
Dienstag, 26. Mai 2009
Special case:
Dienstag, 26. Mai 2009
IDs & classes
Dienstag, 26. Mai 2009
Magic!
<div id='aye_dee'> <div class='klazz'> Aha! </div></div>
#aye_dee .klazz Aha!
Dienstag, 26. Mai 2009
Ruby!
Dienstag, 26. Mai 2009
Magic!
<p>yay</p>
%p= "Yay".downcase
Dienstag, 26. Mai 2009
Magic!
<p><b>yay</b></p>
%p&= "<b>Yay</b>".downcase
Dienstag, 26. Mai 2009
Magic!
<p><b>yay</b></p>
%p!= "<b>Yay</b>".downcase
Dienstag, 26. Mai 2009
Magic!
<p><b>yay</b></p>
%p= "<b>Yay</b>".downcase
Dienstag, 26. Mai 2009
Magic!
%p= "<b>Yay</b>".downcase
<p><b>yay</b></p>
Dienstag, 26. Mai 2009
:escape_html
Dienstag, 26. Mai 2009
Magic!
<p>120231373274987476 Followers</p>
%p== #{followers} Followers
Dienstag, 26. Mai 2009
(same rules apply)
Dienstag, 26. Mai 2009
Magic!
<pre>yay
hey</pre>
%pre~ "Yay\nHey".downcase
Dienstag, 26. Mai 2009
Magic!
<p>one</p><p>two</p><p>three</p>
%ul - %w{one two three}.each do |word| %li= word
Dienstag, 26. Mai 2009
Auto ID‘s and classes
Dienstag, 26. Mai 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
Dienstag, 26. Mai 2009
Filters
Dienstag, 26. Mai 2009
Magic!
<h1>Header</h1>
<p>Hello <em>world</em></p>
:textile h1. Header Hello _world_
Dienstag, 26. Mai 2009
Available Filters
‣ plain
‣ javascript
‣ escaped
‣ ruby
‣ preserve
‣ erb
‣ sass‣ textile‣markdown‣maruku‣ roll yer own
Dienstag, 26. Mai 2009
Comments
Dienstag, 26. Mai 2009
Magic!
/ This is a comment
<!-- This is a comment -->
Dienstag, 26. Mai 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!
Dienstag, 26. Mai 2009
-# A silent comment
Dienstag, 26. Mai 2009
Magic!
-# A silent comment
Dienstag, 26. Mai 2009
But wait, there's more!
Dienstag, 26. Mai 2009
http://haml.hamptoncatlin.com/docs/rdoc/classes/Haml.html
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').readengine = Haml::Engine.new(template)puts engine.render
Dienstag, 26. Mai 2009
template = <<END%h1= fooENDobj = Object.newengine = 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 unknownDienstag, 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
stylesheets/screen.css
Magic!
Dienstag, 26. Mai 2009
The basics
Dienstag, 26. Mai 2009
Magic!
#main { color: #0f0; width: 300px; } #main p { color: #030; }
#main :color #0f0 :width 300px p :color #030
Dienstag, 26. Mai 2009
#main { color: #0f0; width: 300px; } #main p { color: #030; }
Magic!
alternative syntax
#main color: #0f0 width: 300px p color: #030
Dienstag, 26. Mai 2009
(might be useful in migrational situations)
Dienstag, 26. Mai 2009
Referenceson parent
Dienstag, 26. Mai 2009
a { color: #0f0; } a:hover { color: #0ff; }
Magic!
a color: #0f0 &:hover color: #0ff
Dienstag, 26. Mai 2009
#sidebar { float: left; margin-left: 20%; } .ie6 #sidebar { margin-left: 40%; }
Magic!
#sidebar :float left :margin-left 20% .ie6 & :margin-left 40%
Dienstag, 26. Mai 2009
Compoundstyles
Dienstag, 26. Mai 2009
.black-border { border-color: #000; border-width: 2px; border-style: solid; }
Magic!
.black-border :border :color #000 :width 2px :style solid
Dienstag, 26. Mai 2009
Constants
Dienstag, 26. Mai 2009
!bg_color = #002244body :color = !bg_color
body { background-color: #002244; }
Magic!
Dienstag, 26. Mai 2009
!bg_color = #002244body :color = !bg_color
body { background-color: #002244; }
Magic!
Achtung!
Dienstag, 26. Mai 2009
Calculations
Dienstag, 26. Mai 2009
body { background-color: #022446; }
Magic!
!bg_color = #002244body :color = !bg_color + #020202
Dienstag, 26. Mai 2009
Mixins
Dienstag, 26. Mai 2009
Magic!#main { border: 1px solid black; padding: 5px; }
=standard-border :border 1px solid black#main +standard-border :padding 5px
Dienstag, 26. Mai 2009
@import
Dienstag, 26. Mai 2009
Output Styles
Dienstag, 26. Mai 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}
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
F.A.Q.
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').readsass_engine = Sass::Engine.new(template)output = sass_engine.renderputs 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
public/stylesheets/compiled/foo.css
Magic!
Dienstag, 26. Mai 2009
Example (Blueprint)
Dienstag, 26. Mai 2009
artist_header logo_header
bodybody
footerfooter
header
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
F.A.Q.
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