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 ļ¬rst 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 ļ¬exibility for theming and alternate stylesheets
Redesigns made easier
Better SEO
Thursday, March 19, 2009
32. More Sass Syntax
Other Beneļ¬ts 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 ļ¬les in its gem
Easy upgrades
rake gems:unpack GEM=chriseppstein-compass
Thursday, March 19, 2009
52. Compassās Blueprint Port
contains a Layout DSL
Conļ¬guration 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
Conļ¬gurable & Semantic
YUI uses class descendants to layout grid blocks -- this
makes it more complex to abstract and use than
Blueprint
Compass lets you conļ¬gure the sizes, class names,
selectors, and IDs
Sophisticated Font System (%-based speciļ¬ed 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
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. Compass Core Library
CSS Reset Link styling
Sticky Footer List Styling (bullets,
orientation)
Clearļ¬x
Table styling
Tag Cloud
(background colors,
borders)
Cross-browser inline-
block
Text Replacement
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.
