Show the frontend some love

                         haml & sass & compass
                         26.05.2009
          ...
Jan Krutisch

                    ‣ Rails since 2005
                    ‣ Founder of rubyonrails-ug.de
                  ...
(disclaimer)




Dienstag, 26. Mai 2009
HAML

Dienstag, 26. Mai 2009
(X)HTML Abstraction
                Markup Language


Dienstag, 26. Mai 2009
Just another template
                language?


Dienstag, 26. Mai 2009
<em>
                <% quot;what's wrong
                with erb or erubis?quot;
                %>
                </em...
Nothing really.

Dienstag, 26. Mai 2009
Powerful.
Dienstag, 26. Mai 2009
Flexible.




Dienstag, 26. Mai 2009
Reasonably fast.




Dienstag, 26. Mai 2009
But!



Dienstag, 26. Mai 2009
1) Security




Dienstag, 26. Mai 2009
lam3 cøD3rZ, stupid
                bastards, black
                hatters


Dienstag, 26. Mai 2009
<% `rm -rf /` %>



Dienstag, 26. Mai 2009
2) Style/ Design

Dienstag, 26. Mai 2009
Too much logic in the
                view!


Dienstag, 26. Mai 2009
Separation of
                concerns violated!!


Dienstag, 26. Mai 2009
Millions of cute
           kitties die !!!1!




                               image via http://cuteoverload.com
Diensta...
3) „Designers don‘t
                understand code“


Dienstag, 26. Mai 2009
(Subtitle: WYSIWYG-Editors don‘t
                understand code)




Dienstag, 26. Mai 2009
Let‘s fix it.




Dienstag, 26. Mai 2009
<b> {{ liquid }} </b>



Dienstag, 26. Mai 2009
Security!



Dienstag, 26. Mai 2009
Very limited
                functionality and
                access to data!


Dienstag, 26. Mai 2009
(Yeah, that's good)



Dienstag, 26. Mai 2009
OK, got that.



Dienstag, 26. Mai 2009
I don't care.

Dienstag, 26. Mai 2009
1) I am in full control
                of my template code


Dienstag, 26. Mai 2009
2) I am a very
                disciplined coder


Dienstag, 26. Mai 2009
3) I write all of my
                HTML by myself


Dienstag, 26. Mai 2009
Different view




Dienstag, 26. Mai 2009
(x)HTML
                =
                XML


Dienstag, 26. Mai 2009
Tagsoup


                         Text




Dienstag, 26. Mai 2009
HTML-Tags =
                         Redundant




Dienstag, 26. Mai 2009
<div>

                </div>


Dienstag, 26. Mai 2009
<div>
                         Re d
                    und
                </div>          an t
                         ...
ERB = Too forgiving



Dienstag, 26. Mai 2009
(Too agnostic)



Dienstag, 26. Mai 2009
de x .e r b
          in     <%= render :partial => 'head' %>
                 ...
                 <%= render :partial =>...
found via google search, source unknown
Dienstag, 26. Mai 2009
quot;There must be
    a better wayquot;™




Dienstag, 26. Mai 2009
Let's abstract.




Dienstag, 26. Mai 2009
HAML



Dienstag, 26. Mai 2009
Compact



Dienstag, 26. Mai 2009
No redundancies



Dienstag, 26. Mai 2009
Keeps the document
                structure


Dienstag, 26. Mai 2009
Outputs beautiful code



Dienstag, 26. Mai 2009
installation as gem
                &
                rails plugin


Dienstag, 26. Mai 2009
> gem install haml
                > cd rails_app
                > haml --rails .


Dienstag, 26. Mai 2009
(Library/
                commandline tool)


Dienstag, 26. Mai 2009
Tags!



Dienstag, 26. Mai 2009
%table
                   %tr
                     %td Hey there




Dienstag, 26. Mai 2009
%table
                   %tr
                     %td Hey there

                                 Magic!

               ...
%table
                   %tr
                     %td
                        Hey there

                                ...
Self-closing tags



Dienstag, 26. Mai 2009
%foo/
                         Magic!

                <foo/>




Dienstag, 26. Mai 2009
automagically for:
                    •meta
                    •img
                    •link
                    •scrip...
Whitespace control



Dienstag, 26. Mai 2009
(for those stoopid
                browser boogs)


Dienstag, 26. Mai 2009
%blockquote<
                   %div
                     Foo!

                                 Magic!

                <...
%img
                 %img>
                 %img
                                 Magic!

                <img /><img /><...
Attributes!



Dienstag, 26. Mai 2009
%head{ :name => quot;doc_headquot; }
                   %script{ 'type' => quot;text/quot; + quot;javascriptquot;,
       ...
Attribute helpers



Dienstag, 26. Mai 2009
def html_attrs(lang = 'en-US')
                  {
                    :xmlns => quot;http://www.w3.org/1999/xhtmlquot;,
 ...
%html{html_attrs(lang = 'de-DE')}



                                 Magic!

                <html lang='de-DE' xml:lang=...
Special case:



Dienstag, 26. Mai 2009
IDs & classes



Dienstag, 26. Mai 2009
#aye_dee
                  .klazz
                    Aha!

                                 Magic!

                <div ...
Ruby!



Dienstag, 26. Mai 2009
%p= quot;Yayquot;.downcase

                             Magic!

                <p>yay</p>




Dienstag, 26. Mai 2009
%p&= quot;<b>Yay</b>quot;.downcase

                            Magic!

                <p>&lt;b&gt;yay&lt;/b&gt;</p>




...
%p!= quot;<b>Yay</b>quot;.downcase

                            Magic!

                <p><b>yay</b></p>




Dienstag, 26...
%p= quot;<b>Yay</b>quot;.downcase

                            Magic!

                <p><b>yay</b></p>




Dienstag, 26....
%p= quot;<b>Yay</b>quot;.downcase

                            Magic!

                <p>&lt;b&gt;yay&lt;/b&gt;</p>




D...
:escape_html



Dienstag, 26. Mai 2009
%p== #{followers} Followers


                              Magic!

                <p>120231373274987476 Followers</p>


...
(same rules apply)



Dienstag, 26. Mai 2009
%pre~ quot;YaynHeyquot;.downcase


                              Magic!

                <pre>yay
hey</pre>




Dienstag, ...
%ul
                  - %w{one two three}.each do |word|
                    %li= word


                                 ...
Auto ID‘s and classes



Dienstag, 26. Mai 2009
%ul
                  - ['foo', 'bar'].each do |el|
                    %li[el]= el

                                    M...
Filters



Dienstag, 26. Mai 2009
:textile
                  h1. Header

                         Hello _world_


                                         M...
Available Filters
                    ‣ plain
                    ‣ javascript
                                   ‣ sass
 ...
Comments



Dienstag, 26. Mai 2009
/ This is a comment


                             Magic!


                <!-- This is a comment -->




Dienstag, 26. M...
/[if IE]
                  %a{ :href => 'http://www.mozilla.com/en-US/firefox/' }
                    %h1 Get Firefox!



...
-# A silent comment




Dienstag, 26. Mai 2009
-# A silent comment

                             Magic!




Dienstag, 26. Mai 2009
But wait, there's
                more!


Dienstag, 26. Mai 2009
atlin.com/docs/rdoc/ classes/Haml.html
   http://haml.hamptonc
Dienstag, 26. Mai 2009
F.A.Q.



Dienstag, 26. Mai 2009
Performance



Dienstag, 26. Mai 2009
Usage without rails



Dienstag, 26. Mai 2009
require 'rubygems'
                require 'haml'
                template = open('simple.haml').read
                engi...
template = <<END
             %h1= foo
             END
             obj = Object.new
             engine =
              ...
Migration



Dienstag, 26. Mai 2009
SASS
Dienstag, 26. Mai 2009
Syntactically
                Awesome StyleSheets


Dienstag, 26. Mai 2009
Why?



Dienstag, 26. Mai 2009
found via google search, source unknown
Dienstag, 26. Mai 2009
Why?



Dienstag, 26. Mai 2009
No Variables/
                Constants


Dienstag, 26. Mai 2009
No abstractions



Dienstag, 26. Mai 2009
No „real“ cascading



Dienstag, 26. Mai 2009
a few superfluous
                characters


Dienstag, 26. Mai 2009
installation



Dienstag, 26. Mai 2009
(comes with haml)



Dienstag, 26. Mai 2009
stylesheets/sass/screen.sass
                          Magic!

                stylesheets/screen.css



Dienstag, 26. Mai...
The basics




Dienstag, 26. Mai 2009
#main
                  :color #0f0
                  :width 300px
                  p
                    :color #030
   ...
a l te
              #main               rna
                color: #0f0             t i ve
                              ...
(
                might be useful in migrational
                situations
                )




Dienstag, 26. Mai 2009
References
                         on parent




Dienstag, 26. Mai 2009
a
                         color: #0f0
                         &:hover
                           color: #0ff

          ...
#sidebar
                  :float left
                  :margin-left 20%
                  .ie6 &
                    :ma...
Compound
                            styles




Dienstag, 26. Mai 2009
.black-border
                  :border
                    :color #000
                    :width 2px
                   ...
Constants




Dienstag, 26. Mai 2009
!bg_color = #002244
              body
                :color = !bg_color

                               Magic!
         ...
Ach t u
              !bg_color = #002244                 ng!
              body
                :color = !bg_color

     ...
Calculations




Dienstag, 26. Mai 2009
!bg_color = #002244
                body
                  :color = !bg_color + #020202

                               Ma...
Mixins


Dienstag, 26. Mai 2009
=standard-border
                  :border 1px solid black
                #main
                  +standard-border
      ...
@import




Dienstag, 26. Mai 2009
Output Styles




Dienstag, 26. Mai 2009
.box{border-top:1px solid black;border-bottom:5px
                solid black}body{background-
                color:#0022...
A look at SASS Edge




Dienstag, 26. Mai 2009
Mixin arguments



Dienstag, 26. Mai 2009
=border(!color = #000)
                  :border 1px solid
                     :color = !color
                #foo
     ...
Control structures



Dienstag, 26. Mai 2009
@for !n from 1 through 6
                  h#{!n}
                    :padding 0
                    :margin 0




Diensta...
!shall_we = false

                @if !shall_we
                  body
                    :background-color yellow
     ...
F.A.Q.



Dienstag, 26. Mai 2009
Performance



Dienstag, 26. Mai 2009
File caching



Dienstag, 26. Mai 2009
Reload behaviour



Dienstag, 26. Mai 2009
Usage without rails



Dienstag, 26. Mai 2009
require 'rubygems'
                require 'sass'

                template = open('simple.sass').read
                sas...
COMPASS

Dienstag, 26. Mai 2009
CSS meta framework



Dienstag, 26. Mai 2009
CSS frameworks

                    •Blueprint
                    •YUI-Grids
                    •960.gs
                ...
COMPASS-Module


                    •Reset
                    •Utilities
                    •Layout


Dienstag, 26. Mai...
Installation



Dienstag, 26. Mai 2009
COMPASS requires
                HAML/SASS edge


Dienstag, 26. Mai 2009
> git clone git://github.com/nex3/haml.git
                > cd haml
                > sudo rake install

                ...
Rails-Integration



Dienstag, 26. Mai 2009
> compass --rails .



Dienstag, 26. Mai 2009
app/stylesheets/foo.sass

                              Magic!

                public/stylesheets/compiled/foo.css




Di...
Example (Blueprint)



Dienstag, 26. Mai 2009
header


                         artist_header          logo_header




                                         body



...
!!! Strict
                %html{html_attrs('de-de')}
                  %head
                    = stylesheet_link_tag 'c...
!!! Strict
                %html{html_attrs('de-de')}
                  %head
                    = stylesheet_link_tag 'c...
@import compass/reset.sass
                @import blueprint/modules/grid.sass

                #container
               ...
Flexible grid
                definitions


Dienstag, 26. Mai 2009
(try that, blueprint!)



Dienstag, 26. Mai 2009
@import compass/reset.sass
                @import blueprint/modules/grid.sass

                !blueprint_grid_columns = ...
F.A.Q.



Dienstag, 26. Mai 2009
Duplication in
                generated code


Dienstag, 26. Mai 2009
Short answer: Yes



Dienstag, 26. Mai 2009
Compatibility between
                frameworks


Dienstag, 26. Mai 2009
work in progress



Dienstag, 26. Mai 2009
questions?



Dienstag, 26. Mai 2009
SUM()

Dienstag, 26. Mai 2009
Me likes.



Dienstag, 26. Mai 2009
Very DRY.+
Dienstag, 26. Mai 2009
+
                Very readable.



Dienstag, 26. Mai 2009
Faster.  +
                (to develop)


Dienstag, 26. Mai 2009
+
                Catches structural
                errors early.


Dienstag, 26. Mai 2009
Needs a willing
                environment
                                  -
Dienstag, 26. Mai 2009
-
                (Not HTML4dummies
                compliant)


Dienstag, 26. Mai 2009
-
                You‘ll miss a few
                tricks


Dienstag, 26. Mai 2009
-
                (Like CSSEdit)



Dienstag, 26. Mai 2009
+
                You‘ll get new tricks



Dienstag, 26. Mai 2009
+
                Like having a css
                framework essentially
                „for free“


Dienstag, 26. Mai 2...
discuss.



Dienstag, 26. Mai 2009
http://twitter.com/halfbyte
                                http://github.com/halfbyte
                         http://www...
Upcoming SlideShare
Loading in …5
×

Show the frontend some love - HAML, SASS and COMPASS

2,114 views
1,937 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,114
On SlideShare
0
From Embeds
0
Number of Embeds
94
Actions
Shares
0
Downloads
38
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

×