HAML / SASS and COMPASS

HAML / SASS and COMPASS
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
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><b>yay</b></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!  Donnerstag, 12. März 2009
/[if IE] a {:href => 'http://www.getfirefox.com/' } Get Firefox! Magic!  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
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-Deﬁnition 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

HAML / SASS and COMPASS

Check these out next

HAML / SASS and COMPASS

Recommended

More Related Content

More from jan_mindmatters(8)

HAML / SASS and COMPASS