0
Thursday, March 19, 2009
Building Unobtrusive Stylesheets
          with Sass & Compass
          For faster development and easier maintenance



...
Chris Eppstein
               Web UI Architect for 7 years
               Software Architect for Caring.com for the last 2...
Assumptions

               You know HTML
               You know CSS
               You don’t look forward to the design ...
What is an Unobtrusive Stylesheet?



               Makes no requirements on content
               Only affects targeted...
Why build Unobtrusive Stylesheets?

               Initial implementation is faster
               Changing design is fast...
Being Unobtrusive with CSS is Hard
         You need better tools




Thursday, March 19, 2009
Unobtrusive
         Footer
         without
         Sass &
         Compass

Thursday, March 19, 2009
Unobtrusive
         Footer
         with
         Sass &
         Compass

Thursday, March 19, 2009
Unobtrusive
         Homepage
         without
         Sass &
         Compass

Thursday, March 19, 2009
Unobtrusive
         Homepage
         with
         Sass &
         Compass

Thursday, March 19, 2009
Case Study: Caring.com
         Entire UI Redesign took the team two weeks
         Front-end development times down by ~4...
What Makes Unobtrusive Hard?

                           Repetitive Selectors
                                  – AND –

 ...
What Makes Unobtrusive Hard?

                           Repetitive Selectors
                                  – AND –

 ...
What Makes Unobtrusive Hard?

                           Repetitive Selectors
                                  – AND –

 ...
Sass Makes Unobtrusive Easy
                           Simple Descendant
                               Selectors
        ...
Sass Makes Unobtrusive Easy
                           Simple Descendant
                               Selectors
        ...
Sass Makes Unobtrusive Easy
                           Simple Descendant
                               Selectors
        ...
Sass Is Whitespace Aware
         Indented selectors are descendant selectors




                                       N...
Sass is Good at Permutation




                           DRY

                                 Not DRY



Thursday, Marc...
More Sass Syntax




Thursday, March 19, 2009
More Sass Syntax
                           Variables




Thursday, March 19, 2009
More Sass Syntax
                           Variables




Thursday, March 19, 2009
More Sass Syntax
                           Attribute Namespaces




Thursday, March 19, 2009
More Sass Syntax
                           Attribute Namespaces




Thursday, March 19, 2009
More Sass Syntax

                           Mixins




Thursday, March 19, 2009
More Sass Syntax

                           Mixins




Thursday, March 19, 2009
More Sass Syntax

                           Parent References




Thursday, March 19, 2009
More Sass Syntax

                           Parent References




Thursday, March 19, 2009
More Sass Syntax


                           Expressions




Thursday, March 19, 2009
More Sass Syntax


                           Expressions




Thursday, March 19, 2009
More Sass Syntax




        Other Benefits of Compilation:
             Environment-dependent output   SassScript
        ...
There’s No
         Excuse Now
           Go forth and scope to
           your heart’s content




Thursday, March 19, 20...
A Cute Little Trick
    Ever notice how Haml looks like CSS?




                                           Selectors
    ...
CSS Lacks Abstraction
         Classes are not for Style Reuse




Thursday, March 19, 2009
You’ve been picking the
         lesser of two evils, right?
               Copy & Paste
               Presentational Cla...
Sass Mixins are Abstract Classes




                           +




Thursday, March 19, 2009
Sass Mixins are Abstract Classes




                           +




Thursday, March 19, 2009
Sass Mixins are Abstract Classes




                           +




Thursday, March 19, 2009
Sass Mixins are Abstract Classes




                           +




Thursday, March 19, 2009
Sass Mixins are Abstract Classes




                           +




Thursday, March 19, 2009
Sass Mixins are CSS Macros




                           When you need to apply the
                            same styl...
Sass Script is Turing Complete




                               Credit: Nathan Weizenbaum


Thursday, March 19, 2009
Sass Script is Turing Complete




                               Credit: Nathan Weizenbaum


Thursday, March 19, 2009
The Only Limitation is Your
                      Imagination




                                     and CSS...
Thursday...
Sass is a Language
       Compass is an Ecosystem




Thursday, March 19, 2009
Compass Makes Frameworks Work




Thursday, March 19, 2009
Building Web UIs Can Be Fun Again!




Thursday, March 19, 2009
Compass Provides
               Built-in framework ports: Blueprint, YUI
               Installable plugins: 960.gs
      ...
Add Compass to your Rails
         Application



         Sass has Merb/Rails integration that
         automatically rec...
Where’s the Sass?

               Compass stores its sass files in its gem
               Easy upgrades
               rake...
Compass’s Blueprint Port
         contains a Layout DSL
                         Configuration Parameters
         +contain...
Thursday, March 19, 2009
Compass’s YUI Port is
         Configurable & Semantic
               YUI uses class descendants to layout grid blocks -- t...
Thursday, March 19, 2009
Compass Makes
         Frameworks à la Carte


               At Caring.com we use Blueprint’s grids, Compass’s
          ...
Compass Core Library
               CSS Reset               Link styling
               Sticky Footer           List Styli...
Thursday, March 19, 2009
Real World Rails Example

                           http://compass-style.org/


                            Code at:
    ...
The Future of Compass & Sass
               Haml & Sass 2.2,                       Compass:
               Compass 1.0 sta...
Open Sourced
                On Github

                    • This slide deck and related code:
                          ...
?
                           Q&A



Thursday, March 19, 2009
Upcoming SlideShare
Loading in...5
×

Unobtrusive Stylesheets

2,218

Published on

How to use Sass and the Compass stylesheet framework to build unobtrusive stylesheets for your website.

Published in: Technology, News & Politics
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,218
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
66
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide




  • Compass has been under active development for 9 months now and has an active following.
  • CSS Features that you should know: Especially Descendent, Tag, Class, & ID Selectors



    You want Re-use, Abstraction, Libraries, Computation, etc. for your stylesheets.


  • A designer should be able to style a well thought out page with little to no changes to the markup



    New markup should have only base styles applied to it until the designer begins work.
  • *Initial implementation is faster because it is faster to build than debug.
    *Changing design is faster becase you don’t have to worry about what your change will affect, you can read your stylesheet and know because there’s no dependency inversion.












  • CSS3: Variables, Better layout, Smarter Selectors
    HTML5: Scoped Stylesheets




































































  • Repeat: Classes are not for style reuse
















  • Sass has all the necessary prerequisites to enable sharing styles/design.












  • Transcript of "Unobtrusive Stylesheets"

    1. 1. Thursday, March 19, 2009
    2. 2. Building Unobtrusive Stylesheets with Sass & Compass For faster development and easier maintenance Thursday, March 19, 2009
    3. 3. Chris Eppstein Web UI Architect for 7 years Software Architect for Caring.com for the last 2 years Member of the Sass core team Creator of Compass, the first Sass framework Thursday, March 19, 2009
    4. 4. Assumptions You know HTML You know CSS You don’t look forward to the design phase You’re tired of reinventing the wheel when you design Thursday, March 19, 2009
    5. 5. What is an Unobtrusive Stylesheet? Makes no requirements on content Only affects targeted content Thursday, March 19, 2009
    6. 6. Why build Unobtrusive Stylesheets? Initial implementation is faster Changing design is faster More flexibility for theming and alternate stylesheets Redesigns made easier Better SEO Thursday, March 19, 2009
    7. 7. Being Unobtrusive with CSS is Hard You need better tools Thursday, March 19, 2009
    8. 8. Unobtrusive Footer without Sass & Compass Thursday, March 19, 2009
    9. 9. Unobtrusive Footer with Sass & Compass Thursday, March 19, 2009
    10. 10. Unobtrusive Homepage without Sass & Compass Thursday, March 19, 2009
    11. 11. Unobtrusive Homepage with Sass & Compass Thursday, March 19, 2009
    12. 12. Case Study: Caring.com Entire UI Redesign took the team two weeks Front-end development times down by ~40% Thursday, March 19, 2009
    13. 13. What Makes Unobtrusive Hard? Repetitive Selectors – AND – Copy & Paste Styling Thursday, March 19, 2009
    14. 14. What Makes Unobtrusive Hard? Repetitive Selectors – AND – Copy & Paste Styling Thursday, March 19, 2009
    15. 15. What Makes Unobtrusive Hard? Repetitive Selectors – AND – Copy & Paste Styling Thursday, March 19, 2009
    16. 16. Sass Makes Unobtrusive Easy Simple Descendant Selectors – AND – Abstraction Thursday, March 19, 2009
    17. 17. Sass Makes Unobtrusive Easy Simple Descendant Selectors – AND – Abstraction Thursday, March 19, 2009
    18. 18. Sass Makes Unobtrusive Easy Simple Descendant Selectors – AND – Abstraction Thursday, March 19, 2009
    19. 19. Sass Is Whitespace Aware Indented selectors are descendant selectors Not DRY DRY Thursday, March 19, 2009
    20. 20. Sass is Good at Permutation DRY Not DRY Thursday, March 19, 2009
    21. 21. More Sass Syntax Thursday, March 19, 2009
    22. 22. More Sass Syntax Variables Thursday, March 19, 2009
    23. 23. More Sass Syntax Variables Thursday, March 19, 2009
    24. 24. More Sass Syntax Attribute Namespaces Thursday, March 19, 2009
    25. 25. More Sass Syntax Attribute Namespaces Thursday, March 19, 2009
    26. 26. More Sass Syntax Mixins Thursday, March 19, 2009
    27. 27. More Sass Syntax Mixins Thursday, March 19, 2009
    28. 28. More Sass Syntax Parent References Thursday, March 19, 2009
    29. 29. More Sass Syntax Parent References Thursday, March 19, 2009
    30. 30. More Sass Syntax Expressions Thursday, March 19, 2009
    31. 31. More Sass Syntax Expressions Thursday, March 19, 2009
    32. 32. More Sass Syntax Other Benefits of Compilation: Environment-dependent output SassScript formats Partials & imports Silent comments Thursday, March 19, 2009
    33. 33. There’s No Excuse Now Go forth and scope to your heart’s content Thursday, March 19, 2009
    34. 34. A Cute Little Trick Ever notice how Haml looks like CSS? Selectors Delete Write Haml ready to some stuff style Via: Lachlan Hardy Thursday, March 19, 2009
    35. 35. CSS Lacks Abstraction Classes are not for Style Reuse Thursday, March 19, 2009
    36. 36. You’ve been picking the lesser of two evils, right? Copy & Paste Presentational Class Names Thursday, March 19, 2009
    37. 37. Sass Mixins are Abstract Classes + Thursday, March 19, 2009
    38. 38. Sass Mixins are Abstract Classes + Thursday, March 19, 2009
    39. 39. Sass Mixins are Abstract Classes + Thursday, March 19, 2009
    40. 40. Sass Mixins are Abstract Classes + Thursday, March 19, 2009
    41. 41. Sass Mixins are Abstract Classes + Thursday, March 19, 2009
    42. 42. Sass Mixins are CSS Macros When you need to apply the same styles to different selectors Thursday, March 19, 2009
    43. 43. Sass Script is Turing Complete Credit: Nathan Weizenbaum Thursday, March 19, 2009
    44. 44. Sass Script is Turing Complete Credit: Nathan Weizenbaum Thursday, March 19, 2009
    45. 45. The Only Limitation is Your Imagination and CSS... Thursday, March 19, 2009
    46. 46. Sass is a Language Compass is an Ecosystem Thursday, March 19, 2009
    47. 47. Compass Makes Frameworks Work Thursday, March 19, 2009
    48. 48. Building Web UIs Can Be Fun Again! Thursday, March 19, 2009
    49. 49. Compass Provides Built-in framework ports: Blueprint, YUI Installable plugins: 960.gs Core library Reset Sass compilation for stand-alone projects Application framework integration Thursday, March 19, 2009
    50. 50. Add Compass to your Rails Application Sass has Merb/Rails integration that automatically recompiles stylesheets. Thursday, March 19, 2009
    51. 51. Where’s the Sass? Compass stores its sass files in its gem Easy upgrades rake gems:unpack GEM=chriseppstein-compass Thursday, March 19, 2009
    52. 52. Compass’s Blueprint Port contains a Layout DSL Configuration Parameters +container +column(n,last) !blueprint_grid_columns +last !blueprint_grid_width +append(n) !blueprint_grid_margin +prepend(n) Oh and it does some basic +push(n) styling for you if you want that. +pull(n) +blueprint-typography +blueprint-form Thursday, March 19, 2009
    53. 53. Thursday, March 19, 2009
    54. 54. Compass’s YUI Port is Configurable & Semantic YUI uses class descendants to layout grid blocks -- this makes it more complex to abstract and use than Blueprint Compass lets you configure the sizes, class names, selectors, and IDs Sophisticated Font System (%-based specified in px) Source-order independent, Zoom friendly grids +font-size(size, base_size) +yui-base +yui-document(width) And much, much more... Thursday, March 19, 2009
    55. 55. Thursday, March 19, 2009
    56. 56. Compass Makes Frameworks à la Carte At Caring.com we use Blueprint’s grids, Compass’s reset, YUI’s Base and Font system Thursday, March 19, 2009
    57. 57. Compass Core Library CSS Reset Link styling Sticky Footer List Styling (bullets, orientation) Clearfix Table styling Tag Cloud (background colors, borders) Cross-browser inline- block Text Replacement Thursday, March 19, 2009
    58. 58. Thursday, March 19, 2009
    59. 59. Real World Rails Example http://compass-style.org/ Code at: http://github.com/chriseppstein/compass-style.org Thursday, March 19, 2009
    60. 60. The Future of Compass & Sass Haml & Sass 2.2, Compass: Compass 1.0 stable Page Scaffolds (script/generate releases are imminent scaffold should be pretty!) Design Sharing Sass: Cultivate Plugin Ecosystem Stylesheet Optimizer Registry Multiple styles rules per line Installer New output formats Other CSS Frameworks Localized Imports Thursday, March 19, 2009
    61. 61. Open Sourced On Github • This slide deck and related code: http://github.com/chriseppstein/presentations • Sass is part of Haml: http://github.com/nex3/haml • Compass: http://github.com/chriseppstein/compass Thursday, March 19, 2009
    62. 62. ? Q&A Thursday, March 19, 2009
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×