Unobtrusive Stylesheets
Upcoming SlideShare
Loading in...5
×
 

Unobtrusive Stylesheets

on

  • 3,623 views

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

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

Statistics

Views

Total Views
3,623
Views on SlideShare
3,618
Embed Views
5

Actions

Likes
8
Downloads
64
Comments
0

2 Embeds 5

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

Accessibility

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br /> <br />
  • <br /> <br />
  • Compass has been under active development for 9 months now and has an active following. <br />
  • CSS Features that you should know: Especially Descendent, Tag, Class, & ID Selectors <br /> <br /> <br /> <br /> You want Re-use, Abstraction, Libraries, Computation, etc. for your stylesheets. <br /> <br /> <br />
  • A designer should be able to style a well thought out page with little to no changes to the markup <br /> <br /> <br /> <br /> New markup should have only base styles applied to it until the designer begins work. <br />
  • *Initial implementation is faster because it is faster to build than debug. <br /> *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. <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • CSS3: Variables, Better layout, Smarter Selectors <br /> HTML5: Scoped Stylesheets <br /> <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • Repeat: Classes are not for style reuse <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • Sass has all the necessary prerequisites to enable sharing styles/design. <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />

Unobtrusive Stylesheets Unobtrusive Stylesheets Presentation Transcript

  • 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 first 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 flexibility 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
  • What Makes Unobtrusive Hard? Repetitive Selectors – AND – Copy & Paste Styling 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 Makes Unobtrusive Easy Simple Descendant Selectors – AND – Abstraction 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 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 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 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 styles to different selectors Thursday, March 19, 2009
  • 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, 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 files in its gem Easy upgrades rake gems:unpack GEM=chriseppstein-compass Thursday, March 19, 2009
  • 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
  • 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
  • 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) Clearfix Table styling Tag Cloud (background colors, borders) Cross-browser inline- block Text Replacement Thursday, March 19, 2009
  • 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