Show the frontend some love - HAML, SASS and COMPASS

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    Notes on slide 1

    1 Favorite

    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> <% \"what's wrong with erb or erubis?\" %> </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. \"There must be a better way\"™ 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 => \"doc_head\" } %script{ 'type' => \"text/\" + \"javascript\", :src => \"javascripts/script_#{2 + 7}\" } 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 => \"http://www.w3.org/1999/xhtml\", '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= \"Yay\".downcase Magic! <p>yay</p> Dienstag, 26. Mai 2009
    73. %p&= \"<b>Yay</b>\".downcase Magic! <p>&lt;b&gt;yay&lt;/b&gt;</p> Dienstag, 26. Mai 2009
    74. %p!= \"<b>Yay</b>\".downcase Magic! <p><b>yay</b></p> Dienstag, 26. Mai 2009
    75. %p= \"<b>Yay</b>\".downcase Magic! <p><b>yay</b></p> Dienstag, 26. Mai 2009
    76. %p= \"<b>Yay</b>\".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~ \"Yay\\nHey\".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=\"http://www.getfirefox.com/\"> 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
    SlideShare Zeitgeist 2009

    + jan_mindmattersjan_mindmatters Nominate

    custom

    455 views, 1 favs, 2 embeds more stats

    Rails made Web application development substantiall more

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 455
      • 436 on SlideShare
      • 19 from embeds
    • Comments 0
    • Favorites 1
    • Downloads 12
    Most viewed embeds
    • 18 views on http://localhost3000.de
    • 1 views on http://jan.krutisch.de

    more

    All embeds
    • 18 views on http://localhost3000.de
    • 1 views on http://jan.krutisch.de

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories

    Tags

    -->
    What's New

    © 2009 SlideShare Inc. All rights reserved.