Skip to content

Instantly share code, notes, and snippets.

@jhyqt5
Last active August 29, 2015 14:02
Show Gist options
  • Save jhyqt5/df1a5fdcb1d54d22232e to your computer and use it in GitHub Desktop.
Save jhyqt5/df1a5fdcb1d54d22232e to your computer and use it in GitHub Desktop.
gem research

Compass

What is it?

Compass core framework is a design-agnostic framework that provides common code that would otherwise be dublicated across other framworks and extensions.

files can be imported using @import "compass"

Setting up the Environment

Compass runs on any computer that has ruby installed.

gem update --system
gem install compass

Compass allows the user to:

  1. Set up a new compass project with start stylesheets.
  2. Select CSS (SCSS) or Indent Based (Sass) syntax.
  3. Select compass's directory structure or customize it.
gem install compass
compass create  project_name

Compass Utilities

The compass typography module provides some basic mixins for common styling patterns. These files can be imported using @import "compass/utilties"

Imports

  1. LINKS
    • Hover - Underline a link when you hover over it.
    • Link Colors - Easy assignment of colors to link states.
    • Unstyled Link - Make a link appear like regular text.
  2. LISTS - Bullets - Mixins for managing list bullets. - Horizontal List - Float a list os it appears horizontally. - Inline-Block List - set list-elements to inline-block so they appear horizontally while retaining their structure. - Inline List - Style a list as inline text.
  3. TEXT - Ellipsis - Text truncation with ellipsis. - Force Wrap - Wrap URLS and long lines of text. - No Wrap - Remembering whether or not there is a hypeh in white-space is too hard. - Text Replacement - Replace text with images.
  4. COLOR - Color Contrast - Contrast foreground with background colors.
  5. GENERAL - Clearfix - Mixins for clearfixing. - Float - Mixins for cross browser floats. - Hacks - Mixins for hacking specific browsers. - Minimums - Mixins for cross-browser min height and min width. - Reset - Mixins for resetting elements (old import). - Tag Cloud - Mixin for styling tag clouds.
  6. SPRITES - Base - Image
  7. TABLES - Table Striping - Add striping to a table. - Table Borders - Add borders to a table. - Table Scaffolding - Basic styling of tables to get you started.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment