Plugin to bring the Elastic CSS framework to Compass.
JavaScript Ruby
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
elastic-source
lib
sass
templates/project
.gitignore
Manifest
README.mkdn
Rakefile
VERSION
compass-elastic-plugin.gemspec

README.mkdn

Elastic CSS Framework - Compass Plugin

  • Port of Version 1.2.4
  • 2008-03-24

Plugin created by Marnen Laibow-Koser, based on Elastic framework by Fernando Trasviña, Sergio de la Garza, et al. See http://elasticss.com and http://github.com/azendal/elastic/tree/master .


This plugin adds the Elastic CSS framework to Compass.

Install

sudo gem install chriseppstein-compass
sudo gem install chriseppstein-compass-960-plugin

Create a 960-based Compass Project

compass -r elastic -f elastic <project name>

Then edit your grid.sass and text.sass files accordingly. A reset is added into grid.sass automatically.

Customizing your Grid System

To create a grid system with other number of columns use the +grid-system mixin to generate the corresponding classes.

Example:

#wrap
  +grid-system(24)

Making Semantic Grids

  • Use the +grid-container mixin to declare your container element.
  • Use the +grid mixin to declare a grid element.
  • Use the +alpha and +omega mixins to declare the first and last grid elements for a row.
  • User the +grid-prefix and +grid-suffix mixins to add grid columns before or after a grid element.

Example:

#wrap
  +grid-container
  #left-nav
    +alpha
    +grid(5,16)
  #main-content
    +grid-prefix(1,16)
    +grid(10, 16)
    +omega