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


(disclaimer)


(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.com

3) „Designers don‘t
understand code“


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


Let‘s ﬁx 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


Tagsoup

Text


HTML-Tags =
Redundant


<div>
Re d
und
</div> an t
!


ERB = Too forgiving


(Too agnostic)


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>


found via google search, source unknown

quot;There must be
a better wayquot;™


Let's abstract.


HAML


Compact


No redundancies


Keeps the document
structure


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


%table
%tr
%td Hey there

Magic!

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


%table
%tr
%td
Hey there

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


Self-closing tags


%foo/
Magic!

<foo/>


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


Attribute helpers


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


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

Magic!

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


Special case:


IDs & classes


#aye_dee
.klazz
Aha!

Magic!

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


Ruby!


%p= quot;Yayquot;.downcase

Magic!

<p>yay</p>


%p&= quot;<b>Yay</b>quot;.downcase

Magic!

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


%p!= quot;<b>Yay</b>quot;.downcase

Magic!

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


%p= quot;<b>Yay</b>quot;.downcase

Magic!

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


:escape_html


%p== #{followers} Followers

Magic!

<p>120231373274987476 Followers</p>


(same rules apply)


%pre~ quot;YaynHeyquot;.downcase

Magic!

<pre>yay
hey</pre>


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

Magic!

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


Auto ID‘s and classes


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


Filters


:textile
h1. Header

Hello _world_

Magic!
<h1>Header</h1>

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


Available Filters
‣ plain
‣ javascript
‣ sass
‣ textile
‣ escaped
‣ markdown
‣ ruby
‣ maruku
‣ preserve ‣ roll yer own
‣ erb


Comments


/ This is a comment

Magic!

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

Magic!

-# A silent comment


-# A silent comment

Magic!


But wait, there's
more!


atlin.com/docs/rdoc/ classes/Haml.html
http://haml.hamptonc

F.A.Q.


Performance


Usage without rails


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


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


Migration


Syntactically
Awesome StyleSheets


Why?


No Variables/
Constants


No abstractions


No „real“ cascading


a few superﬂuous
characters


installation


(comes with haml)


stylesheets/sass/screen.sass
Magic!

stylesheets/screen.css


The basics


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

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


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


(
might be useful in migrational
situations
)


References
on parent


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

Magic!

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


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

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


Compound
styles


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

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


Constants


!bg_color = #002244
body
:color = !bg_color

Magic!
body {
background-color: #002244; }


Ach t u
!bg_color = #002244 ng!
body
:color = !bg_color

Magic!
body {


Calculations


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

Magic!
body {


Mixins


=standard-border
:border 1px solid black
#main
+standard-border
:padding 5px
Magic!
#main {
border: 1px solid black;
padding: 5px; }


@import


Output Styles


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


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


File caching


Reload behaviour


require 'rubygems'
require 'sass'

template = open('simple.sass').read
sass_engine = Sass::Engine.new(template)
output = sass_engine.render
puts 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

Magic!

public/stylesheets/compiled/foo.css


Example (Blueprint)


header

artist_header logo_header

body

footer


!!! 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
deﬁnitions


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


Duplication in
generated code


Short answer: Yes


Compatibility between
frameworks


work in progress


questions?


Me likes.


Very DRY.+

+
Very readable.


Faster. +
(to develop)


+
Catches structural
errors early.


Needs a willing
environment
-

-
(Not HTML4dummies
compliant)


-
You‘ll miss a few
tricks


-
(Like CSSEdit)


+
You‘ll get new tricks


+
Like having a css
framework essentially
„for free“


discuss.


http://twitter.com/halfbyte
http://github.com/halfbyte
http://www.ﬂickr.com/photos/jankrutisch/

thanks.


Show the frontend some love - HAML, SASS and COMPASS

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Mehr von jan_mindmatters

Mehr von jan_mindmatters (13)

Show the frontend some love - HAML, SASS and COMPASS