Your SlideShare is downloading. ×
HAML / SASS and COMPASS
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

HAML / SASS and COMPASS

3,247
views

Published on

HAML / SASS and COMPASS …

HAML / SASS and COMPASS

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


0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,247
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
61
Comments
0
Likes
7
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HAML und SASS (und COMPASS) markup haiku vs. syntactically awesome stylesheets Tobias Adam, Jan Krutisch mindmatters GmbH & Co. KG Donnerstag, 12. März 2009
  • 2. HAML Donnerstag, 12. März 2009
  • 3. (X)HTML Abstraction Markup Language Donnerstag, 12. März 2009
  • 4. ?! (X)HTML Abstraction Markup Language Donnerstag, 12. März 2009
  • 5. Why oh why? Donnerstag, 12. März 2009
  • 6. ERB = HTML = Tag-Suppe Donnerstag, 12. März 2009
  • 7. Donnerstag, 12. März 2009
  • 8. HTML-Tags = Redundant Donnerstag, 12. März 2009
  • 9. <div> </div> Donnerstag, 12. März 2009
  • 10. <div> Re d und </div>a n t ! Donnerstag, 12. März 2009
  • 11. ERB = Zu Nachsichtig Donnerstag, 12. März 2009
  • 12. .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
  • 13. Donnerstag, 12. März 2009
  • 14. installation als rails plugin Donnerstag, 12. März 2009
  • 15. > gem install haml > cd rails_app > haml --rails . Donnerstag, 12. März 2009
  • 16. Butter bei die Fische! Donnerstag, 12. März 2009
  • 17. Einfache Tags Donnerstag, 12. März 2009
  • 18. %table %tr %td Hey there Donnerstag, 12. März 2009
  • 19. %table %tr %td Hey there Magic! <table> <tr> <td>Hey there</td> </tr> </table> Donnerstag, 12. März 2009
  • 20. Selbstschließende Tags Donnerstag, 12. März 2009
  • 21. %foo/ Magic! <foo/> Donnerstag, 12. März 2009
  • 22. Automatisch für: ‣ meta ‣ img ‣ link ‣ script ‣ br ‣ hr Donnerstag, 12. März 2009
  • 23. Whitespace-Kontrolle Donnerstag, 12. März 2009
  • 24. %blockquote< %div Foo! Magic! <blockquote><div> Foo! </div></blockquote> Donnerstag, 12. März 2009
  • 25. %img %img> %img Magic! <img /><img /><img /> Donnerstag, 12. März 2009
  • 26. Tag-Attribute Donnerstag, 12. März 2009
  • 27. %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
  • 28. Attribut-Helper Donnerstag, 12. März 2009
  • 29. 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
  • 30. %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
  • 31. IDs und Classes Donnerstag, 12. März 2009
  • 32. #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
  • 33. Auto-ID's und Klassen Donnerstag, 12. März 2009
  • 34. %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
  • 35. Ruby FTW! Donnerstag, 12. März 2009
  • 36. %p= quot;Yayquot;.downcase Magic! <p>yay</p> Donnerstag, 12. März 2009
  • 37. %p&= quot;<b>Yay</b>quot;.downcase Magic! <p>&lt;b&gt;yay&lt;/b&gt;</p> Donnerstag, 12. März 2009
  • 38. %p== #{n} Followers Magic! <p>120231373274987476 Followers</p> Donnerstag, 12. März 2009
  • 39. - [1,2,3].each do |i| %p= i Magic! <p>1</p> <p>2</p> <p>3</p> Donnerstag, 12. März 2009
  • 40. Filter Donnerstag, 12. März 2009
  • 41. :markdown Header ====== Hallo, *Welt* Magic! <h1>Header</h1> <p>Hallo, <em>Welt</em> Donnerstag, 12. März 2009
  • 42. Filter ‣ plain ‣ sass ‣ javascript ‣ textile ‣ escaped ‣ markdown ‣ ruby ‣ maruku ‣ preserve ‣ roll yer own ‣ erb Donnerstag, 12. März 2009
  • 43. Kommentare Donnerstag, 12. März 2009
  • 44. / this is a comment Magic! <!-- This is a comment --> Donnerstag, 12. März 2009
  • 45. /[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
  • 46. -# this is a comment Donnerstag, 12. März 2009
  • 47. -# this is a comment Magic! Donnerstag, 12. März 2009
  • 48. But wait, there's more! Donnerstag, 12. März 2009
  • 49. classes/Haml.html atlin.com/docs/rdoc/ http://haml.hamptonc Donnerstag, 12. März 2009
  • 50. SASS Donnerstag, 12. März 2009
  • 51. Syntactically Awesome StyleSheets Donnerstag, 12. März 2009
  • 52. Warum? Donnerstag, 12. März 2009
  • 53. Donnerstag, 12. März 2009
  • 54. Keine Variablen Donnerstag, 12. März 2009
  • 55. Keine Abstraktionen Donnerstag, 12. März 2009
  • 56. Keine echten Kaskadierungen Donnerstag, 12. März 2009
  • 57. installation als rails- plugin Donnerstag, 12. März 2009
  • 58. > gem install haml > cd rails_app > haml --rails . Donnerstag, 12. März 2009
  • 59. stylesheets/sass/screen.sass Magic! stylesheets/screen.css Donnerstag, 12. März 2009
  • 60. Die Basics Donnerstag, 12. März 2009
  • 61. Die Basics, Die! Donnerstag, 12. März 2009
  • 62. #main :color #0f0 :width 300px p :color #030 Magic! #main { color: #0f0; width: 300px; } #main p { color: #030; } Donnerstag, 12. März 2009
  • 63. 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
  • 64. ( eventuell besser in situationen mit migrationshintergrund ) Donnerstag, 12. März 2009
  • 65. Elternreferenz Donnerstag, 12. März 2009
  • 66. quot;Elternreferenzquot; Donnerstag, 12. März 2009
  • 67. link color: #0f0 &:hover color: #0ff Magic! a{ color: #0f0; } a:hover { color: #0ff; } Donnerstag, 12. März 2009
  • 68. Zusammengesetzte Styles Donnerstag, 12. März 2009
  • 69. .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
  • 70. Konstanten Donnerstag, 12. März 2009
  • 71. !bg_color = #002244 body :background-color = !bg_color Magic! body { background-color: #002244; } Donnerstag, 12. März 2009
  • 72. ng! htu Ac !bg_color = #002244 body :background-color = !bg_color Magic! body { background-color: #002244; } Donnerstag, 12. März 2009
  • 73. Arithmetik Donnerstag, 12. März 2009
  • 74. !bg_color = #002244 body :background-color = !bg_color + #020202 Magic! body { background-color: #022446; } Donnerstag, 12. März 2009
  • 75. Mixins Donnerstag, 12. März 2009
  • 76. =standard-border :border 1px solid black :padding 5px #main +standard-border Magic! #main { border: 1px solid black; padding: 5px; } Donnerstag, 12. März 2009
  • 77. @import Donnerstag, 12. März 2009
  • 78. Output Styles Donnerstag, 12. März 2009
  • 79. .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
  • 80. Ausblick (HAML Edge) Donnerstag, 12. März 2009
  • 81. Mixin-Argumente Donnerstag, 12. März 2009
  • 82. =grid-unit-base(!gutter_width = 50px) Donnerstag, 12. März 2009
  • 83. Kontrollstrukturen Donnerstag, 12. März 2009
  • 84. @for !n from 1 through 15 .grid_#{!n} +grid-width(!n, 15, 200px) Donnerstag, 12. März 2009
  • 85. !last = true @if !last +last @else :margin-right = 20px Donnerstag, 12. März 2009
  • 86. COMPASS Donnerstag, 12. März 2009
  • 87. CSS Meta Framework Donnerstag, 12. März 2009
  • 88. CSS-Frameworks ‣ Blueprint ‣ YUI-Grids ‣ 960.gs (als Plugin) ‣ YAML (geplant?) Donnerstag, 12. März 2009
  • 89. COMPASS-Module ‣ Reset ‣ Utilities ‣ Layout Donnerstag, 12. März 2009
  • 90. Installation Donnerstag, 12. März 2009
  • 91. > 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
  • 92. Rails-Integration Donnerstag, 12. März 2009
  • 93. > compass --rails . Donnerstag, 12. März 2009
  • 94. app/stylesheets/foo.sass Magic! public/stylesheets/compiled/foo.css Donnerstag, 12. März 2009
  • 95. Beispiel (Blueprint) Donnerstag, 12. März 2009
  • 96. header artist_header logo_header body footer Donnerstag, 12. März 2009
  • 97. !!! 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
  • 98. !!! 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
  • 99. @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
  • 100. Flexible Grid-Definition Donnerstag, 12. März 2009
  • 101. @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
  • 102. Wegweiser --> Donnerstag, 12. März 2009
  • 103. // 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
  • 104. // 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
  • 105. Diskussion Donnerstag, 12. März 2009
  • 106. Meta-Framework sinnvoll? Donnerstag, 12. März 2009
  • 107. COMPASS = Work in Progress Donnerstag, 12. März 2009
  • 108. Wird debugging im Browser schwieriger? (Ist der Output zu un-dry?) Donnerstag, 12. März 2009
  • 109. Nicht für jedes Umfeld geeignet? Donnerstag, 12. März 2009