advertisement

HAML / SASS and COMPASS

60 %
40 %
advertisement
Information about HAML / SASS and COMPASS

Published on March 12, 2009

Author: jan_mindmatters

Source: slideshare.net

Description

HAML / SASS and COMPASS

A presentation held at the rails usergroup hamburg meetup march 2009.
advertisement

HAML und SASS (und COMPASS) markup haiku vs. syntactically awesome stylesheets Tobias Adam, Jan Krutisch mindmatters GmbH & Co. KG Donnerstag, 12. März 2009

HAML Donnerstag, 12. März 2009

(X)HTML Abstraction Markup Language Donnerstag, 12. März 2009

?! (X)HTML Abstraction Markup Language Donnerstag, 12. März 2009

Why oh why? Donnerstag, 12. März 2009

ERB = HTML = Tag-Suppe Donnerstag, 12. März 2009

Donnerstag, 12. März 2009

HTML-Tags = Redundant Donnerstag, 12. März 2009

<div> </div> Donnerstag, 12. März 2009

<div> Re d und </div>a n t ! Donnerstag, 12. März 2009

ERB = Zu Nachsichtig Donnerstag, 12. März 2009

.e r b de x in <%= render :partial => 'head' %> ... <%= render :partial => 'foot' %> .e r b e ad _h <body> .e r b foo t _ </body> Donnerstag, 12. März 2009

Donnerstag, 12. März 2009

installation als rails plugin Donnerstag, 12. März 2009

> gem install haml > cd rails_app > haml --rails . Donnerstag, 12. März 2009

Butter bei die Fische! Donnerstag, 12. März 2009

Einfache Tags Donnerstag, 12. März 2009

%table %tr %td Hey there Donnerstag, 12. März 2009

%table %tr %td Hey there Magic! <table> <tr> <td>Hey there</td> </tr> </table> Donnerstag, 12. März 2009

Selbstschließende Tags Donnerstag, 12. März 2009

%foo/ Magic! <foo/> Donnerstag, 12. März 2009

Automatisch für: ‣ meta ‣ img ‣ link ‣ script ‣ br ‣ hr Donnerstag, 12. März 2009

Whitespace-Kontrolle Donnerstag, 12. März 2009

%blockquote< %div Foo! Magic! <blockquote><div> Foo! </div></blockquote> Donnerstag, 12. März 2009

%img %img> %img Magic! <img /><img /><img /> Donnerstag, 12. März 2009

Tag-Attribute Donnerstag, 12. März 2009

%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> Donnerstag, 12. März 2009

Attribut-Helper Donnerstag, 12. März 2009

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

%html{html_attrs('de-de')} Magic! <html lang='de-de' xml:lang='de-de' xmlns='http://www.w3.org/1999/xhtml'> </html> Donnerstag, 12. März 2009

IDs und Classes Donnerstag, 12. März 2009

#eins .zwei #drei.vier Hallo! Magic! <div id=quot;einsquot;> <div class=quot;zweiquot;> <div id=quot;dreiquot; class=quot;vierquot;>Hallo!</div> </div> </div> Donnerstag, 12. März 2009

Auto-ID's und Klassen Donnerstag, 12. März 2009

%ul %li[@book, :foo] Book Magic! <ul> <li class=quot;foo_bookquot; id=quot;foo_book_1quot;> Book </li> </ul> Donnerstag, 12. März 2009

Ruby FTW! Donnerstag, 12. März 2009

%p= quot;Yayquot;.downcase Magic! <p>yay</p> Donnerstag, 12. März 2009

%p&= quot;<b>Yay</b>quot;.downcase Magic! <p>&lt;b&gt;yay&lt;/b&gt;</p> Donnerstag, 12. März 2009

%p== #{n} Followers Magic! <p>120231373274987476 Followers</p> Donnerstag, 12. März 2009

- [1,2,3].each do |i| %p= i Magic! <p>1</p> <p>2</p> <p>3</p> Donnerstag, 12. März 2009

Filter Donnerstag, 12. März 2009

:markdown Header ====== Hallo, *Welt* Magic! <h1>Header</h1> <p>Hallo, <em>Welt</em> Donnerstag, 12. März 2009

Filter ‣ plain ‣ sass ‣ javascript ‣ textile ‣ escaped ‣ markdown ‣ ruby ‣ maruku ‣ preserve ‣ roll yer own ‣ erb Donnerstag, 12. März 2009

Kommentare Donnerstag, 12. März 2009

/ this is a comment Magic! <!-- This is a comment --> Donnerstag, 12. März 2009

/[if IE] a {:href => 'http://www.getfirefox.com/' } Get Firefox! Magic! <!--[if IE]> <a href=quot;http://www.getfirefox.com/quot;> Get Firefox! </a> <![endif]--> Donnerstag, 12. März 2009

-# this is a comment Donnerstag, 12. März 2009

-# this is a comment Magic! Donnerstag, 12. März 2009

But wait, there's more! Donnerstag, 12. März 2009

classes/Haml.html atlin.com/docs/rdoc/ http://haml.hamptonc Donnerstag, 12. März 2009

SASS Donnerstag, 12. März 2009

Syntactically Awesome StyleSheets Donnerstag, 12. März 2009

Warum? Donnerstag, 12. März 2009

Donnerstag, 12. März 2009

Keine Variablen Donnerstag, 12. März 2009

Keine Abstraktionen Donnerstag, 12. März 2009

Keine echten Kaskadierungen Donnerstag, 12. März 2009

installation als rails- plugin Donnerstag, 12. März 2009

> gem install haml > cd rails_app > haml --rails . Donnerstag, 12. März 2009

stylesheets/sass/screen.sass Magic! stylesheets/screen.css Donnerstag, 12. März 2009

Die Basics Donnerstag, 12. März 2009

Die Basics, Die! Donnerstag, 12. März 2009

#main :color #0f0 :width 300px p :color #030 Magic! #main { color: #0f0; width: 300px; } #main p { color: #030; } Donnerstag, 12. März 2009

a l te rna #main t i ve color: #0f0 syn width: 300px tax p color: #030 Magic! #main { color: #0f0; width: 300px; } #main p { color: #030; } Donnerstag, 12. März 2009

( eventuell besser in situationen mit migrationshintergrund ) Donnerstag, 12. März 2009

Elternreferenz Donnerstag, 12. März 2009

quot;Elternreferenzquot; Donnerstag, 12. März 2009

link color: #0f0 &:hover color: #0ff Magic! a{ color: #0f0; } a:hover { color: #0ff; } Donnerstag, 12. März 2009

Zusammengesetzte Styles Donnerstag, 12. März 2009

.box :border :top 1px solid black :bottom 5px solid black Magic! .box { border-top: 1px solid black; border-bottom: 5px solid black; } Donnerstag, 12. März 2009

Konstanten Donnerstag, 12. März 2009

!bg_color = #002244 body :background-color = !bg_color Magic! body { background-color: #002244; } Donnerstag, 12. März 2009

ng! htu Ac !bg_color = #002244 body :background-color = !bg_color Magic! body { background-color: #002244; } Donnerstag, 12. März 2009

Arithmetik Donnerstag, 12. März 2009

!bg_color = #002244 body :background-color = !bg_color + #020202 Magic! body { background-color: #022446; } Donnerstag, 12. März 2009

Mixins Donnerstag, 12. März 2009

=standard-border :border 1px solid black :padding 5px #main +standard-border Magic! #main { border: 1px solid black; padding: 5px; } Donnerstag, 12. März 2009

@import Donnerstag, 12. März 2009

Output Styles Donnerstag, 12. März 2009

.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 d s se solid black;padding:5px} p re om :c Donnerstag, 12. März 2009

Ausblick (HAML Edge) Donnerstag, 12. März 2009

Mixin-Argumente Donnerstag, 12. März 2009

=grid-unit-base(!gutter_width = 50px) Donnerstag, 12. März 2009

Kontrollstrukturen Donnerstag, 12. März 2009

@for !n from 1 through 15 .grid_#{!n} +grid-width(!n, 15, 200px) Donnerstag, 12. März 2009

!last = true @if !last +last @else :margin-right = 20px Donnerstag, 12. März 2009

COMPASS Donnerstag, 12. März 2009

CSS Meta Framework Donnerstag, 12. März 2009

CSS-Frameworks ‣ Blueprint ‣ YUI-Grids ‣ 960.gs (als Plugin) ‣ YAML (geplant?) Donnerstag, 12. März 2009

COMPASS-Module ‣ Reset ‣ Utilities ‣ Layout Donnerstag, 12. März 2009

Installation Donnerstag, 12. März 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, 12. März 2009

Rails-Integration Donnerstag, 12. März 2009

> compass --rails . Donnerstag, 12. März 2009

app/stylesheets/foo.sass Magic! public/stylesheets/compiled/foo.css Donnerstag, 12. März 2009

Beispiel (Blueprint) Donnerstag, 12. März 2009

header artist_header logo_header body footer Donnerstag, 12. März 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, 12. März 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, 12. März 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, 12. März 2009

Flexible Grid-Definition Donnerstag, 12. März 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, 12. März 2009

Wegweiser --> Donnerstag, 12. März 2009

// Clearing floats without extra markup // Simple Clearing of Floats // [...] =clearfix :overflow auto :overflow -moz-scrollbars-none // This makes ie6 get layout :display inline-block // and this puts it back to block & :display block discuss. Donnerstag, 12. März 2009

// Hides html text and replaces it with an image. // If you use this on an inline element, you will // need to change the display to block or inline-block. =replace-text( !img, !x = 50%, !y = 50% ) :text-indent -9999em :overflow hidden :background :image= url(!img) :repeat no-repeat :position= !x !y Donnerstag, 12. März 2009

Diskussion Donnerstag, 12. März 2009

Meta-Framework sinnvoll? Donnerstag, 12. März 2009

COMPASS = Work in Progress Donnerstag, 12. März 2009

Wird debugging im Browser schwieriger? (Ist der Output zu un-dry?) Donnerstag, 12. März 2009

Nicht für jedes Umfeld geeignet? Donnerstag, 12. März 2009

#0f0 presentations

Add a comment

Related pages

Haml – Wikipedia

Heute werden aber Sass und Haml getrennt entwickelt, ... Interview mit Nathan Weizenbaum und Chris Eppstein, den Haml, Sass und Compass Maintainern, ...
Read more

The Changelog #1: Haml, Sass, and Compass with Nathan ...

Nathan Weizenbaum and Chris Eppstein joined the show today to discuss Haml, Sass, and Compass.
Read more

SliceCraft: PSD to Haml, Sass, Compass & CoffeeScript for ...

SliceCraft: PSD to Haml, Sass, Compass & CoffeeScript for Rails We build PSD to modular and search engine friendly Haml, Sass, Compass & CoffeeScript
Read more

App-Tipp: Fire.app (HAML, Sass, Compass & more) | PSD ...

Hi allerseits, ich setzte mich schon seit einigen Wochen intensiv mit LESS, Sass und HAML auseinander. Bisher meinen Arbeiten meist direkt über meine...
Read more

Application Integration | Compass Documentation

Application Integration; Best practices; Contributing; ... Sinatra Bootstrap - a base Sinatra project with support for Haml, Sass, Compass, jQuery and more.
Read more

Prepros :: Compile Less, Sass, CoffeeScript and much more ...

Prepros is a tool to compile LESS, Sass, Compass, Stylus, Jade and much more with automatic CSS prefixing, It comes with built in server for cross browser ...
Read more

Haml

Unspace Interactive and several other professional Rails shops use Haml exclusively for their projects, valuing its focus on cleanliness, readability, ...
Read more