By: Gerald Fry introducingCompass

What is Compass? Open-source CSS Authoring Framework Built for use with SASS Ruby Gem Features: CSS3 Mixins Automatic Sprite Creation Comes with a CSS Reset to import Sticky Footer More advanced features Work Smart and Efficiently

CSS3 Mixins – Box-Shadow First import the compass CSS3 mixin file to have access to all CSS3 mixins Use the + symbol to use a mixin then provide the name CSS output http://compass-style.org/reference/compass/css3/

Automatic Image Spriting Imagine you have 4 icons you want to sprite The simplest way to use these icon sprites is to let compass give you a class for each sprite: Import the library Import the images Include the created sprite classes http://compass-style.org/help/tutorials/spriting/

Automatic Image Spriting When the file is saved, you will get the following CSS output: http://compass-style.org/help/tutorials/spriting/

CSS3 Reset Based on Eric Meyer’s reset 2.0 Simply import the reset utility file http://compass-style.org/reference/compass/reset/

Sticky Footer This module provides tools needed to lay out your footer such that it sticks to the bottom of the page. Example http://compass-style.org/reference/compass/layout/sticky_footer/

Compass Typography module The Compass Typography module provides some basic mixins for common text styling patterns. Imports Links – Tools for styling anchor links Lists – Tools for styling lists Text – Style helpers for your text Vertical Rhythm – Create and maintain a vertical rhythm for your type. http://compass-style.org/reference/compass/layout/sticky_footer/

Extra Utilities and Software CodeKit for MAC – Compiling software that refreshes the browser upon compile. http://incident57.com/codekit/ Prepros for Windows – Same as CodeKit. http://alphapixels.com/prepros/ Getting Started with Sass and Compass. http://thesassway.com/beginner/getting-started- with-sass-and-compass

So, why should I use Compass? Comes packed with CSS3 mixins that allow you to quickly create those vendor prefixes with one line. Spriting is easy and powerful for large projects Work smarter not harder Community driven

Any Questions?

Resources http://sass-lang.com/guide http://compass-style.org/ http://www.designzillas.com/blog/useful- sass-mixin-wizardry

Q1: When should I use compass? What language does Compass extend? Exam Questions Q1: When should I use compass? What language does Compass extend? Developers should use compass on large team projects to save time when doing css markup. Compass extends the SASS framework and is a Ruby gem. Q2: What are the main functions that compass provides? Compass provides various CSS3 mixins as well as helper classes to quickly create styles. It allows the developer to keep consistent and easy to change styles.

Q3: What is a CSS Authoring Framework? Name 3 of them. Exam Questions Q3: What is a CSS Authoring Framework? Name 3 of them. CSS Authoring Frameworks are languages that allow developers to organize, repeat, and create code using variables, mixins, functions, and other functions provided by the framework. SASS, LESS, and Compass are all examples of CSS Authoring Frameworks.