Show the frontend some love - HAML, SASS and COMPASS
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Show the frontend some love - HAML, SASS and COMPASS

on

  • 3,064 views

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, ...

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.

Statistics

Views

Total Views
3,064
Views on SlideShare
2,971
Embed Views
93

Actions

Likes
3
Downloads
36
Comments
0

5 Embeds 93

http://coderwall.com 60
http://localhost3000.de 22
http://www.slideshare.net 7
http://jan.krutisch.de 2
http://www.slideee.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Show the frontend some love - HAML, SASS and COMPASS Presentation Transcript

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