By: Gerald Fry

introducingCompass

What is Compass?

Work Smart and Efficiently

• 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

CSS3 Mixins – Box-ShadowFirst 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 libraryImport the imagesInclude 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.

http://compass-style.org/reference/compass/layout/sticky_footer/

Example

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

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.

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.