show the frontend some love - haml, sass and compass

Show the frontend some love

haml & sass & compass26.05.2009RailsWayConJan Krutisch <[email protected]>mindmatters GmbH & Co. KG

Dienstag, 26. Mai 2009

mailto:[email protected]

mailto:[email protected]

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


(disclaimer)


HAML


(X)HTML Abstraction Markup Language


Just another template language?


Nothing really.


Powerful.


Flexible.


Reasonably fast.


But!


1) Security


lam3 cøD3rZ, stupid bastards, black hatters


<% `rm -rf /` %>


2) Style/ Design


Too much logic in the view!


Separation of concerns violated!!


Millions of cute kitties die !!!1!

image via http://cuteoverload.comDienstag, 26. Mai 2009

http://cuteoverload.com

http://cuteoverload.com

3) „Designers don‘t understand code“


(Subtitle: WYSIWYG-Editors don‘t understand code)


Let‘s fix it.


<b> {{ liquid }} </b>


Security!


Very limited functionality and access to data!


(Yeah, that's good)


OK, got that.


I don't care.


1) I am in full control of my template code


2) I am a very disciplined coder


3) I write all of my HTML by myself


Different view


(x)HTML =XML


Text

Tagsoup


HTML-Tags = Redundant


<div>

</div>Redundant!


ERB = Too forgiving


(Too agnostic)


<%= render :partial => 'head' %>...<%= render :partial => 'foot' %>

<body>

</body>

index.erb

_head.erb

_foot.erb


found via google search, source unknownDienstag, 26. Mai 2009

"There must bea better way"™


Let's abstract.


HAML


Compact


No redundancies


Keeps the documentstructure


Outputs beautiful code


installation as gem& rails plugin


> gem install haml> cd rails_app> haml --rails .


(Library/commandline tool)


Tags!


%table %tr %td Hey there



Magic!

<table> <tr> <td>Hey there</td> </tr></table>



Magic!<table> <tr> <td> Hey there </td> </tr></table>


Self-closing tags


%foo/

<foo/>

Magic!


automagically for:

•meta

•img

•link

•script

•br

•hr


Whitespace control


(for those stoopid browser boogs)


%blockquote< %div Foo!

Magic!

<blockquote><div> Foo!</div></blockquote>


%img%img>%img

Magic!

<img /><img /><img />


Attributes!


%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!


Attribute helpers


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


http://www.w3.org/1999/xhtml

http://www.w3.org/1999/xhtml

Magic!

<html lang='de-DE' xml:lang='de-DE' xmlns='http://www.w3.org/1999/xhtml'></html>

%html{html_attrs(lang = 'de-DE')}


http://www.w3.org/1999/xhtml'

http://www.w3.org/1999/xhtml'

Special case:


IDs & classes


Magic!

<div id='aye_dee'> <div class='klazz'> Aha! </div></div>

#aye_dee .klazz Aha!


Ruby!


Magic!

<p>yay</p>

%p= "Yay".downcase


Magic!

<p><b>yay</b></p>

%p&= "<b>Yay</b>".downcase


Magic!

<p><b>yay</b></p>

%p!= "<b>Yay</b>".downcase


Magic!

<p><b>yay</b></p>

%p= "<b>Yay</b>".downcase


Magic!

%p= "<b>Yay</b>".downcase

<p><b>yay</b></p>


:escape_html


Magic!

<p>120231373274987476 Followers</p>

%p== #{followers} Followers


(same rules apply)


Magic!

<pre>yay
hey</pre>

%pre~ "Yay\nHey".downcase


Magic!

<p>one</p><p>two</p><p>three</p>

%ul - %w{one two three}.each do |word| %li= word


Auto ID‘s and classes


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


Filters


Magic!

<h1>Header</h1>

<p>Hello <em>world</em></p>

:textile h1. Header Hello _world_


Available Filters

‣ plain

‣ javascript

‣ escaped

‣ ruby

‣ preserve

‣ erb

‣ sass‣ textile‣markdown‣maruku‣ roll yer own


Comments


Magic!

/ This is a comment

Magic!

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


http://www.getfirefox.com

http://www.getfirefox.com

http://www.mozilla.com/en-US/firefox/'

http://www.mozilla.com/en-US/firefox/'

-# A silent comment


Magic!

-# A silent comment


But wait, there's more!


http://haml.hamptoncatlin.com/docs/rdoc/classes/Haml.html





















F.A.Q.


Performance


Usage without rails


require 'rubygems'require 'haml'template = open('simple.haml').readengine = Haml::Engine.new(template)puts engine.render


template = <<END%h1= fooENDobj = Object.newengine = Haml::Engine.new(template).def_method(obj, :render, :foo)puts obj.render(:foo => 'bar')


Migration


SASS


Syntactically Awesome StyleSheets


Why?


found via google search, source unknownDienstag, 26. Mai 2009

Why?


No Variables/ Constants


No abstractions


No „real“ cascading


a few superfluous characters


installation


(comes with haml)


stylesheets/sass/screen.sass

stylesheets/screen.css

Magic!


The basics


Magic!

#main { color: #0f0; width: 300px; } #main p { color: #030; }

#main :color #0f0 :width 300px p :color #030


#main { color: #0f0; width: 300px; } #main p { color: #030; }

Magic!

alternative syntax

#main color: #0f0 width: 300px p color: #030


(might be useful in migrational situations)


Referenceson parent


a { color: #0f0; } a:hover { color: #0ff; }

Magic!

a color: #0f0 &:hover color: #0ff


#sidebar { float: left; margin-left: 20%; } .ie6 #sidebar { margin-left: 40%; }

Magic!

#sidebar :float left :margin-left 20% .ie6 & :margin-left 40%


Compoundstyles


.black-border { border-color: #000; border-width: 2px; border-style: solid; }

Magic!

.black-border :border :color #000 :width 2px :style solid


Constants


!bg_color = #002244body :color = !bg_color

body { background-color: #002244; }

Magic!


!bg_color = #002244body :color = !bg_color


Magic!

Achtung!


Calculations



Magic!

!bg_color = #002244body :color = !bg_color + #020202


Mixins


Magic!#main { border: 1px solid black; padding: 5px; }

=standard-border :border 1px solid black#main +standard-border :padding 5px


@import


Output Styles


: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}


A look at SASS Edge


Mixin arguments


=border(!color = #000) :border 1px solid :color = !color#foo +border(#fea)


Control structures


@for !n from 1 through 6 h#{!n} :padding 0 :margin 0


!shall_we = false

@if !shall_we body :background-color yellow@else body :display none


F.A.Q.


Performance


File caching


Reload behaviour


Usage without rails


require 'rubygems'require 'sass'

template = open('simple.sass').readsass_engine = Sass::Engine.new(template)output = sass_engine.renderputs output


COMPASS


CSS meta framework


CSS frameworks

•Blueprint

•YUI-Grids

•960.gs

•YAML


COMPASS-Module

•Reset

•Utilities

•Layout


Installation


COMPASS requires HAML/SASS edge


> 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


Rails-Integration


> compass --rails .


app/stylesheets/foo.sass

public/stylesheets/compiled/foo.css

Magic!


Example (Blueprint)


artist_header logo_header

bodybody

footerfooter

header


!!! 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


!!! 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


@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)


Flexible grid definitions


(try that, blueprint!)


@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)


F.A.Q.


Duplication in generated code


Short answer: Yes


Compatibility between frameworks


work in progress


questions?


SUM()


Me likes.


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

-


(Not HTML4dummies compliant)

-


You‘ll miss a few tricks

-


(Like CSSEdit)-Dienstag, 26. Mai 2009

You‘ll get new tricks+Dienstag, 26. Mai 2009

Like having a css framework essentially „for free“

+


discuss.


http://twitter.com/halfbyte

http://github.com/halfbyte

http://www.flickr.com/photos/jankrutisch/

thanks.








show the frontend some love - haml, sass and compass

Technology