introducing compass
DESCRIPTION
By: Gerald Fry. introducing Compass. 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. - PowerPoint PPT PresentationTRANSCRIPT
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.