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. 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. What is an Unobtrusive Stylesheet?
Makes no requirements on content
Only affects targeted content
Thursday, March 19, 2009
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
32. More Sass Syntax
Other Benefits of Compilation:
Environment-dependent output SassScript
formats
Partials & imports
Silent comments
Thursday, March 19, 2009
33. There’s No
Excuse Now
Go forth and scope to
your heart’s content
Thursday, March 19, 2009
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
50. Add Compass to your Rails
Application
Sass has Merb/Rails integration that
automatically recompiles stylesheets.
Thursday, March 19, 2009
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. 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
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
59. Real World Rails Example
http://compass-style.org/
Code at:
http://github.com/chriseppstein/compass-style.org
Thursday, March 19, 2009
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. 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
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.