Show the frontend some love - HAML, SASS and COMPASS

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 ﬁx 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><b>yay</b></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><b>yay</b></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 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!  Dienstag, 26. Mai 2009

89. /[if IE] %a{ :href => 'http://www.mozilla.com/en-US/firefox/' } %h1 Get Firefox! Magic!  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 superﬂuous 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

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 deﬁnitions 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

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.ﬂickr.com/photos/jankrutisch/ thanks. Dienstag, 26. Mai 2009

Show the frontend some love - HAML, SASS and COMPASS

jan_mindmatters

Show the frontend some love - HAML, SASS and COMPASS