Show the frontend some love - HAML, SASS and COMPASS

2,253 views

Published on

Rails made Web application development substantially more enjoyable. Surprisingly, even in Rails 2.3, there are some areas that still suck: Erb-Templates are the typical HTML/XML tag soup mess, CSS-Files are, well, CSS files. HAML and SASS are two technologies to fix this: HAML templates are concise and powerful, SASS makes writing CSS almost a fun experience. Be there or be width:20px height:20px.

Published in: Technology, Business
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,253
On SlideShare
0
From Embeds
0
Number of Embeds
94
Actions
Shares
0
Downloads
39
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Show the frontend some love - HAML, SASS and COMPASS

  1. 1. 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
  2. 2. 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 Dienstag, 26. Mai 2009
  3. 3. (disclaimer) Dienstag, 26. Mai 2009
  4. 4. HAML Dienstag, 26. Mai 2009
  5. 5. (X)HTML Abstraction Markup Language Dienstag, 26. Mai 2009
  6. 6. Just another template language? Dienstag, 26. Mai 2009
  7. 7. <em> <% quot;what's wrong with erb or erubis?quot; %> </em> Dienstag, 26. Mai 2009
  8. 8. Nothing really. Dienstag, 26. Mai 2009
  9. 9. Powerful. Dienstag, 26. Mai 2009
  10. 10. Flexible. Dienstag, 26. Mai 2009
  11. 11. Reasonably fast. Dienstag, 26. Mai 2009
  12. 12. But! Dienstag, 26. Mai 2009
  13. 13. 1) Security Dienstag, 26. Mai 2009
  14. 14. lam3 cøD3rZ, stupid bastards, black hatters Dienstag, 26. Mai 2009
  15. 15. <% `rm -rf /` %> Dienstag, 26. Mai 2009
  16. 16. 2) Style/ Design Dienstag, 26. Mai 2009
  17. 17. Too much logic in the view! Dienstag, 26. Mai 2009
  18. 18. Separation of concerns violated!! Dienstag, 26. Mai 2009
  19. 19. Millions of cute kitties die !!!1! image via http://cuteoverload.com Dienstag, 26. Mai 2009
  20. 20. 3) „Designers don‘t understand code“ Dienstag, 26. Mai 2009
  21. 21. (Subtitle: WYSIWYG-Editors don‘t understand code) Dienstag, 26. Mai 2009
  22. 22. Let‘s fix it. Dienstag, 26. Mai 2009
  23. 23. <b> {{ liquid }} </b> Dienstag, 26. Mai 2009
  24. 24. Security! Dienstag, 26. Mai 2009
  25. 25. Very limited functionality and access to data! Dienstag, 26. Mai 2009
  26. 26. (Yeah, that's good) Dienstag, 26. Mai 2009
  27. 27. OK, got that. Dienstag, 26. Mai 2009
  28. 28. I don't care. Dienstag, 26. Mai 2009
  29. 29. 1) I am in full control of my template code Dienstag, 26. Mai 2009
  30. 30. 2) I am a very disciplined coder Dienstag, 26. Mai 2009
  31. 31. 3) I write all of my HTML by myself Dienstag, 26. Mai 2009
  32. 32. Different view Dienstag, 26. Mai 2009
  33. 33. (x)HTML = XML Dienstag, 26. Mai 2009
  34. 34. Tagsoup Text Dienstag, 26. Mai 2009
  35. 35. HTML-Tags = Redundant Dienstag, 26. Mai 2009
  36. 36. <div> </div> Dienstag, 26. Mai 2009
  37. 37. <div> Re d und </div> an t ! Dienstag, 26. Mai 2009
  38. 38. ERB = Too forgiving Dienstag, 26. Mai 2009
  39. 39. (Too agnostic) Dienstag, 26. Mai 2009
  40. 40. 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> Dienstag, 26. Mai 2009
  41. 41. found via google search, source unknown Dienstag, 26. Mai 2009
  42. 42. quot;There must be a better wayquot;™ Dienstag, 26. Mai 2009
  43. 43. Let's abstract. Dienstag, 26. Mai 2009
  44. 44. HAML Dienstag, 26. Mai 2009
  45. 45. Compact Dienstag, 26. Mai 2009
  46. 46. No redundancies Dienstag, 26. Mai 2009
  47. 47. Keeps the document structure Dienstag, 26. Mai 2009
  48. 48. Outputs beautiful code Dienstag, 26. Mai 2009
  49. 49. installation as gem & rails plugin Dienstag, 26. Mai 2009
  50. 50. > gem install haml > cd rails_app > haml --rails . Dienstag, 26. Mai 2009
  51. 51. (Library/ commandline tool) Dienstag, 26. Mai 2009
  52. 52. Tags! Dienstag, 26. Mai 2009
  53. 53. %table %tr %td Hey there Dienstag, 26. Mai 2009
  54. 54. %table %tr %td Hey there Magic! <table> <tr> <td>Hey there</td> </tr> </table> Dienstag, 26. Mai 2009
  55. 55. %table %tr %td Hey there Magic! <table> <tr> <td> Hey there </td> </tr> </table> Dienstag, 26. Mai 2009
  56. 56. Self-closing tags Dienstag, 26. Mai 2009
  57. 57. %foo/ Magic! <foo/> Dienstag, 26. Mai 2009
  58. 58. automagically for: •meta •img •link •script •br •hr Dienstag, 26. Mai 2009
  59. 59. Whitespace control Dienstag, 26. Mai 2009
  60. 60. (for those stoopid browser boogs) Dienstag, 26. Mai 2009
  61. 61. %blockquote< %div Foo! Magic! <blockquote><div> Foo! </div></blockquote> Dienstag, 26. Mai 2009
  62. 62. %img %img> %img Magic! <img /><img /><img /> Dienstag, 26. Mai 2009
  63. 63. Attributes! Dienstag, 26. Mai 2009
  64. 64. %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> Dienstag, 26. Mai 2009
  65. 65. Attribute helpers Dienstag, 26. Mai 2009
  66. 66. def html_attrs(lang = 'en-US') { :xmlns => quot;http://www.w3.org/1999/xhtmlquot;, 'xml:lang' => lang, :lang => lang } end Dienstag, 26. Mai 2009
  67. 67. %html{html_attrs(lang = 'de-DE')} Magic! <html lang='de-DE' xml:lang='de-DE' xmlns='http://www.w3.org/1999/xhtml'> </html> Dienstag, 26. Mai 2009
  68. 68. Special case: Dienstag, 26. Mai 2009
  69. 69. IDs & classes Dienstag, 26. Mai 2009
  70. 70. #aye_dee .klazz Aha! Magic! <div id='aye_dee'> <div class='klazz'> Aha! </div> </div> Dienstag, 26. Mai 2009
  71. 71. Ruby! Dienstag, 26. Mai 2009
  72. 72. %p= quot;Yayquot;.downcase Magic! <p>yay</p> Dienstag, 26. Mai 2009
  73. 73. %p&= quot;<b>Yay</b>quot;.downcase Magic! <p>&lt;b&gt;yay&lt;/b&gt;</p> Dienstag, 26. Mai 2009
  74. 74. %p!= quot;<b>Yay</b>quot;.downcase Magic! <p><b>yay</b></p> Dienstag, 26. Mai 2009
  75. 75. %p= quot;<b>Yay</b>quot;.downcase Magic! <p><b>yay</b></p> Dienstag, 26. Mai 2009
  76. 76. %p= quot;<b>Yay</b>quot;.downcase Magic! <p>&lt;b&gt;yay&lt;/b&gt;</p> Dienstag, 26. Mai 2009
  77. 77. :escape_html Dienstag, 26. Mai 2009
  78. 78. %p== #{followers} Followers Magic! <p>120231373274987476 Followers</p> Dienstag, 26. Mai 2009
  79. 79. (same rules apply) Dienstag, 26. Mai 2009
  80. 80. %pre~ quot;YaynHeyquot;.downcase Magic! <pre>yay hey</pre> Dienstag, 26. Mai 2009
  81. 81. %ul - %w{one two three}.each do |word| %li= word Magic! <p>one</p> <p>two</p> <p>three</p> Dienstag, 26. Mai 2009
  82. 82. Auto ID‘s and classes Dienstag, 26. Mai 2009
  83. 83. %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> Dienstag, 26. Mai 2009
  84. 84. Filters Dienstag, 26. Mai 2009
  85. 85. :textile h1. Header Hello _world_ Magic! <h1>Header</h1> <p>Hello <em>world</em></p> Dienstag, 26. Mai 2009
  86. 86. Available Filters ‣ plain ‣ javascript ‣ sass ‣ textile ‣ escaped ‣ markdown ‣ ruby ‣ maruku ‣ preserve ‣ roll yer own ‣ erb Dienstag, 26. Mai 2009
  87. 87. Comments Dienstag, 26. Mai 2009
  88. 88. / This is a comment Magic! <!-- This is a comment --> Dienstag, 26. Mai 2009
  89. 89. /[if IE] %a{ :href => 'http://www.mozilla.com/en-US/firefox/' } %h1 Get Firefox! Magic! <!--[if IE]> <a href=quot;http://www.getfirefox.com/quot;> Get Firefox! </a> <![endif]--> Dienstag, 26. Mai 2009
  90. 90. -# A silent comment Dienstag, 26. Mai 2009
  91. 91. -# A silent comment Magic! Dienstag, 26. Mai 2009
  92. 92. But wait, there's more! Dienstag, 26. Mai 2009
  93. 93. atlin.com/docs/rdoc/ classes/Haml.html http://haml.hamptonc Dienstag, 26. Mai 2009
  94. 94. F.A.Q. Dienstag, 26. Mai 2009
  95. 95. Performance Dienstag, 26. Mai 2009
  96. 96. Usage without rails Dienstag, 26. Mai 2009
  97. 97. require 'rubygems' require 'haml' template = open('simple.haml').read engine = Haml::Engine.new(template) puts engine.render Dienstag, 26. Mai 2009
  98. 98. template = <<END %h1= foo END obj = Object.new engine = Haml::Engine.new(template).def_method(obj, :render, :foo) puts obj.render(:foo => 'bar') Dienstag, 26. Mai 2009
  99. 99. Migration Dienstag, 26. Mai 2009
  100. 100. SASS Dienstag, 26. Mai 2009
  101. 101. Syntactically Awesome StyleSheets Dienstag, 26. Mai 2009
  102. 102. Why? Dienstag, 26. Mai 2009
  103. 103. found via google search, source unknown Dienstag, 26. Mai 2009
  104. 104. Why? Dienstag, 26. Mai 2009
  105. 105. No Variables/ Constants Dienstag, 26. Mai 2009
  106. 106. No abstractions Dienstag, 26. Mai 2009
  107. 107. No „real“ cascading Dienstag, 26. Mai 2009
  108. 108. a few superfluous characters Dienstag, 26. Mai 2009
  109. 109. installation Dienstag, 26. Mai 2009
  110. 110. (comes with haml) Dienstag, 26. Mai 2009
  111. 111. stylesheets/sass/screen.sass Magic! stylesheets/screen.css Dienstag, 26. Mai 2009
  112. 112. The basics Dienstag, 26. Mai 2009
  113. 113. #main :color #0f0 :width 300px p :color #030 Magic! #main { color: #0f0; width: 300px; } #main p { color: #030; } Dienstag, 26. Mai 2009
  114. 114. 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; } Dienstag, 26. Mai 2009
  115. 115. ( might be useful in migrational situations ) Dienstag, 26. Mai 2009
  116. 116. References on parent Dienstag, 26. Mai 2009
  117. 117. a color: #0f0 &:hover color: #0ff Magic! a { color: #0f0; } a:hover { color: #0ff; } Dienstag, 26. Mai 2009
  118. 118. #sidebar :float left :margin-left 20% .ie6 & :margin-left 40% Magic! #sidebar { float: left; margin-left: 20%; } .ie6 #sidebar { margin-left: 40%; } Dienstag, 26. Mai 2009
  119. 119. Compound styles Dienstag, 26. Mai 2009
  120. 120. .black-border :border :color #000 :width 2px :style solid Magic! .black-border { border-color: #000; border-width: 2px; border-style: solid; } Dienstag, 26. Mai 2009
  121. 121. Constants Dienstag, 26. Mai 2009
  122. 122. !bg_color = #002244 body :color = !bg_color Magic! body { background-color: #002244; } Dienstag, 26. Mai 2009
  123. 123. Ach t u !bg_color = #002244 ng! body :color = !bg_color Magic! body { background-color: #002244; } Dienstag, 26. Mai 2009
  124. 124. Calculations Dienstag, 26. Mai 2009
  125. 125. !bg_color = #002244 body :color = !bg_color + #020202 Magic! body { background-color: #022446; } Dienstag, 26. Mai 2009
  126. 126. Mixins Dienstag, 26. Mai 2009
  127. 127. =standard-border :border 1px solid black #main +standard-border :padding 5px Magic! #main { border: 1px solid black; padding: 5px; } Dienstag, 26. Mai 2009
  128. 128. @import Dienstag, 26. Mai 2009
  129. 129. Output Styles Dienstag, 26. Mai 2009
  130. 130. .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 : Dienstag, 26. Mai 2009
  131. 131. A look at SASS Edge Dienstag, 26. Mai 2009
  132. 132. Mixin arguments Dienstag, 26. Mai 2009
  133. 133. =border(!color = #000) :border 1px solid :color = !color #foo +border(#fea) Dienstag, 26. Mai 2009
  134. 134. Control structures Dienstag, 26. Mai 2009
  135. 135. @for !n from 1 through 6 h#{!n} :padding 0 :margin 0 Dienstag, 26. Mai 2009
  136. 136. !shall_we = false @if !shall_we body :background-color yellow @else body :display none Dienstag, 26. Mai 2009
  137. 137. F.A.Q. Dienstag, 26. Mai 2009
  138. 138. Performance Dienstag, 26. Mai 2009
  139. 139. File caching Dienstag, 26. Mai 2009
  140. 140. Reload behaviour Dienstag, 26. Mai 2009
  141. 141. Usage without rails Dienstag, 26. Mai 2009
  142. 142. require 'rubygems' require 'sass' template = open('simple.sass').read sass_engine = Sass::Engine.new(template) output = sass_engine.render puts output Dienstag, 26. Mai 2009
  143. 143. COMPASS Dienstag, 26. Mai 2009
  144. 144. CSS meta framework Dienstag, 26. Mai 2009
  145. 145. CSS frameworks •Blueprint •YUI-Grids •960.gs •YAML Dienstag, 26. Mai 2009
  146. 146. COMPASS-Module •Reset •Utilities •Layout Dienstag, 26. Mai 2009
  147. 147. Installation Dienstag, 26. Mai 2009
  148. 148. COMPASS requires HAML/SASS edge Dienstag, 26. Mai 2009
  149. 149. > 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 Dienstag, 26. Mai 2009
  150. 150. Rails-Integration Dienstag, 26. Mai 2009
  151. 151. > compass --rails . Dienstag, 26. Mai 2009
  152. 152. app/stylesheets/foo.sass Magic! public/stylesheets/compiled/foo.css Dienstag, 26. Mai 2009
  153. 153. Example (Blueprint) Dienstag, 26. Mai 2009
  154. 154. header artist_header logo_header body footer Dienstag, 26. Mai 2009
  155. 155. !!! 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 Dienstag, 26. Mai 2009
  156. 156. !!! 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 Dienstag, 26. Mai 2009
  157. 157. @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) Dienstag, 26. Mai 2009
  158. 158. Flexible grid definitions Dienstag, 26. Mai 2009
  159. 159. (try that, blueprint!) Dienstag, 26. Mai 2009
  160. 160. @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) Dienstag, 26. Mai 2009
  161. 161. F.A.Q. Dienstag, 26. Mai 2009
  162. 162. Duplication in generated code Dienstag, 26. Mai 2009
  163. 163. Short answer: Yes Dienstag, 26. Mai 2009
  164. 164. Compatibility between frameworks Dienstag, 26. Mai 2009
  165. 165. work in progress Dienstag, 26. Mai 2009
  166. 166. questions? Dienstag, 26. Mai 2009
  167. 167. SUM() Dienstag, 26. Mai 2009
  168. 168. Me likes. Dienstag, 26. Mai 2009
  169. 169. Very DRY.+ Dienstag, 26. Mai 2009
  170. 170. + Very readable. Dienstag, 26. Mai 2009
  171. 171. Faster. + (to develop) Dienstag, 26. Mai 2009
  172. 172. + Catches structural errors early. Dienstag, 26. Mai 2009
  173. 173. Needs a willing environment - Dienstag, 26. Mai 2009
  174. 174. - (Not HTML4dummies compliant) Dienstag, 26. Mai 2009
  175. 175. - You‘ll miss a few tricks Dienstag, 26. Mai 2009
  176. 176. - (Like CSSEdit) Dienstag, 26. Mai 2009
  177. 177. + You‘ll get new tricks Dienstag, 26. Mai 2009
  178. 178. + Like having a css framework essentially „for free“ Dienstag, 26. Mai 2009
  179. 179. discuss. Dienstag, 26. Mai 2009
  180. 180. http://twitter.com/halfbyte http://github.com/halfbyte http://www.flickr.com/photos/jankrutisch/ thanks. Dienstag, 26. Mai 2009

×