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

    6 Favorites

    HAML / SASS and COMPASS - Presentation 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 => \"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> Donnerstag, 12. März 2009
    28. Attribut-Helper Donnerstag, 12. März 2009
    29. def html_attrs(lang = 'en-US') { :xmlns => \"http://www.w3.org/1999/xhtml\", '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=\"eins\"> <div class=\"zwei\"> <div id=\"drei\" class=\"vier\">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=\"foo_book\" id=\"foo_book_1\"> Book </li> </ul> Donnerstag, 12. März 2009
    35. Ruby FTW! Donnerstag, 12. März 2009
    36. %p= \"Yay\".downcase Magic! <p>yay</p> Donnerstag, 12. März 2009
    37. %p&= \"<b>Yay</b>\".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=\"http://www.getfirefox.com/\"> 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. \"Elternreferenz\" 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
    SlideShare Zeitgeist 2009

    + jan_mindmattersjan_mindmatters Nominate

    custom

    1020 views, 6 favs, 2 embeds more stats

    HAML / SASS and COMPASS

    A presentation held at the more

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 1020
      • 979 on SlideShare
      • 41 from embeds
    • Comments 0
    • Favorites 6
    • Downloads 15
    Most viewed embeds
    • 37 views on http://www.mindmatters.de
    • 4 views on http://mindmatters.de

    more

    All embeds
    • 37 views on http://www.mindmatters.de
    • 4 views on http://mindmatters.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?

    Tags

    -->
    What's New

    © 2009 SlideShare Inc. All rights reserved.