Generate variables for creating CSS column definition, the Sassy way.
CSS
Switch branches/tags
Nothing to show
Latest commit bf4ce64 Apr 12, 2016 @hail2u Remove files field
Permalink
Failed to load latest commit information.
examples
README.md
_sce.scss
bower.json
package.json

README.md

SCSS Column Equation

Generate variables for CSS column layout, the Sassy way.

INSTALLATION

Three options are available:

  1. Download package
  2. Clone with Git: $ git clone https://github.com/hail2u/scss-column-equation.git
  3. Install with Bower: $ bower install --save-dev scss-column-equation

USAGE

  1. Define basic variables: $sce_column and $sce_gutter
  2. Import _sce.scss via @import
  3. Create column definition with generated variables

Variables

  • $sce_column: column width (configurable)
  • $sce_gutter: space between columns (configurable)
  • $sce_gap: an half size of $gutter and very outer space of column
  • $sce_colspan1...$sce_colspan16: width of n columns
  • $sce_colspan: list contains $colspan1...$colspan16
  • $sce_colwrap1...$sce_colwrap16: wrapper width of n columns
  • $sce_colwrap: list contains $colwrap1...$colwrap16

Note: $sce_colspan and $sce_colwrap are lists. Their elements can be accessed with nth() function.

EXAMPLE

Preview these examples at once: http://hail2u.github.com/scss-column-equation/

Default

This example generates default 12-column with px (similar to 960.gs).

EM

This example generates fixed 12-column with em.

Percentage

This example generates completely fluid 16-column with %.

LICENSE

MIT: http://hail2u.mit-license.org/2012