Skip to content
Plugin to bring the Elastic CSS framework to Compass.
JavaScript Ruby
Find file
Fetching latest commit…
Cannot retrieve the latest commit at this time.
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
Something went wrong with that request. Please try again.