1 / 14

introducing Compass

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.

xander
Download Presentation

introducing Compass

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. By: Gerald Fry introducingCompass

  2. 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

  3. 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/

  4. 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/

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

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

  7. 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/

  8. 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/

  9. 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

  10. 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

  11. Any Questions?

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

  13. 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.

  14. 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.

More Related