Unobtrusive Stylesheets

Thursday, March 19, 2009

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

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

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

What is an Unobtrusive Stylesheet? Makes no requirements on content Only affects targeted content Thursday, March 19, 2009

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

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 ~40% Thursday, March 19, 2009

What Makes Unobtrusive Hard? Repetitive Selectors – AND – Copy & Paste Styling Thursday, March 19, 2009

Sass Makes Unobtrusive Easy Simple Descendant Selectors – AND – Abstraction Thursday, March 19, 2009

Sass Is Whitespace Aware Indented selectors are descendant selectors Not DRY DRY Thursday, March 19, 2009

Sass is Good at Permutation DRY Not DRY Thursday, March 19, 2009

More Sass Syntax Thursday, March 19, 2009

More Sass Syntax Variables Thursday, March 19, 2009

More Sass Syntax Attribute Namespaces Thursday, March 19, 2009

More Sass Syntax Mixins Thursday, March 19, 2009

More Sass Syntax Parent References Thursday, March 19, 2009

More Sass Syntax Expressions Thursday, March 19, 2009

More Sass Syntax Other Beneﬁts of Compilation: Environment-dependent output SassScript formats Partials & imports Silent comments Thursday, March 19, 2009

There’s No Excuse Now Go forth and scope to your heart’s content Thursday, March 19, 2009

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

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 Class Names 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 styles to different selectors 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, March 19, 2009

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 Core library Reset Sass compilation for stand-alone projects Application framework integration Thursday, March 19, 2009

Add Compass to your Rails Application Sass has Merb/Rails integration that automatically recompiles stylesheets. Thursday, March 19, 2009

Where’s the Sass? Compass stores its sass ﬁles in its gem Easy upgrades rake gems:unpack GEM=chriseppstein-compass Thursday, March 19, 2009

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

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

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

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

Real World Rails Example http://compass-style.org/ Code at: http://github.com/chriseppstein/compass-style.org Thursday, March 19, 2009

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

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

? Q&A Thursday, March 19, 2009

Unobtrusive Stylesheets

by chriseppstein on Mar 14, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 5

Statistics

Unobtrusive Stylesheets — Presentation Transcript

http://www.slideshare.net	3
http://webcache.googleusercontent.com	2