Who is this guy? Nick Cooley Principal Front-End Architect, TandemSeven: http://www.tandemseven.com @nickcooley
Why Use a CSS Framework?• Instead of repetitively implementing patterns and values, you can modularize your CSS.• CSS is limited and difficult to extend by itself.• When prototyping, shouldn’t you focus more on the, you know, prototyping?
DRY• “Don’t Repeat Yourself”• Fundamental best practice of CSS frameworks
Sass• What is Sass?• Nesting• Vars• Mixins
Compass• Save Time!• X-Browser CSS3 mixins• Provides Common CSS development Patterns in an easy-to-use-format
Let’s Talk About Sass
What is Sass?• Stands for “Syntactically Awesome StyleSheets”• “Sass both provides a simpler, more elegant syntax for CSS and implements various features that are useful for creating manageable stylesheets.”• Ruby Based
Sass: Nesting• CSS: in order to contextually apply selectors, you might need to repeat selectors.• This can be Repetitive, potentially messy and confusing
Sass: Nesting•Sass: Allows you to nest selectors within a parent selector.•This provides an approach that’s clean, concise, unique and DRY
Sass: Variables• Allow you to quickly parameterize your CSS• Create diverse variations in seconds!• Helps you create design standards for your CSS.• Using a main color in a number of
Sass: Variables• Imagine you are using a color as a theme throughout your CSS.• Imagine the $color1 variable spread all over your CSS? How easy to
Sass: Mixins• Imagine the following case: You have a standard button theme you use across your site. It has: • Rounded Corners • Gradients • Drop Shadows (multiple)• What would the CSS for such a button look like?
What is Compass?• “...open-source CSS authoring framework which uses the Sass stylesheet language to make writing stylesheets powerful and easy.”• Provides a number of community- created mixins and modules to help integrate some of the most popular design patterns on the web.
Compass• X-Browser CSS3 mixins • Rounded Corners • Box Shadow • Gradients • Text Shadow• Common CSS development Patterns • Reset.css • Sprites • Clearﬁx • Web Fonts • CSS3 Pie • More!