Show the frontend some love

haml & sass & compass26.05.2009RailsWayConJan 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.

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

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

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.

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)

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

Magic!

automagically for:

•meta

•img

•link

•script

Whitespace control

(for those stoopid browser boogs)

%blockquote< %div Foo!

Magic!

%img%img>%img

Magic!

Attributes!

%head{ :name => "doc_head" } %script{ 'type' => "text/" + "javascript", :src => "javascripts/script_#{2 + 7}" }

Magic!

Attribute helpers

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

Magic!

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

Special case:

IDs & classes

Magic!

#aye_dee .klazz Aha!

Magic!

%p= "Yay".downcase

Magic!

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

Magic!

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

Magic!

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

Magic!

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

:escape_html

Magic!

<p>120231373274987476 Followers</p>

%p== #{followers} Followers

(same rules apply)

Magic!

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

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

Syntactically Awesome StyleSheets

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

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?

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

Ускорение frontend-разработки с помощью Haml, Sass, Compass

What's New in Haml/Sass 3

Haml And Sass: Put your markup on a diet

OpenCode beta : Haml & Sass

Hows Haml?

Haml Presentation

Haml & sass

HAML/SASS and tenplate building clean semantic sites for less

SINATRA + HAML + TWITTER

SASS inherited files - SASS Meetup in Denver, CO

LESS, SASS, HAML: 4 буквы, изменившие frontend development

THE MOST ADVANCED RUBY AND RAILS IDE with full … completion Enjoy smart and language-aware autocompletion for Ruby and Rails, JavaScript and CoffeeScript, ERB and HAML, CSS, Sass

FUNDAMENTOS DE SASS - Guede...INTRODUCCIÓN A SASS FUNDAMENTOS DE SASS INTRODUCCIÓN A SASS SASS (Syntactically Awesome StyleSheets) es un lenguaje extendido de CSS que añade un nuevo

M01 HAML REA 03GLB 3948 U01 - Venturesbooks.sk

ускорение Front end разработки с помощью haml, sass и compass. андрей ситник. зал 4

Haml and Sass: Solution for you who get tired of ugly markup

Introduction To Haml

Beneath the Surface - Geonetric...Haml. SASS. LESS. JPEG. Handlebars. Jasmine. Git. Bower. Avoiding spaghetti code. Symptoms that things have gone wrong • Fear of making changes

Haml, Sass & Compass

FRONTEND ENTWICKLUNG IN MAGENTO: LESS/SASS · PDF fileMAGENTO ALS FE-FRAMEWORK . 11 | netz98 new media GmbH info@netz98.de . HERAUSFORDERUNG: WIEDERVERWENDBARKEIT! Module auch