Skip to content

Simple, flexible Compass / SASS Grid. Infinitely nestible, consistent gutter width, no alphas, omegas or nth-childs needed. All mixin based.

Notifications You must be signed in to change notification settings

kemch/nestable-fluid-grid

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Nestable Fluid Grid

Compass / SASS set of mixins for an infinitely nestable fluid grid.

  • Assign column width, gutter width, and number of columns.
  • Mixins included for container, row, and column span.
  • Infinitely nestable.
  • Gutter width stays visually consistent when nested.
  • No alpha, omega, or nth-child needed on end columns.
  • Columns flow naturally to the next row when the number of column spans exceed the width of the row.
  • Mixin based, so class names are flexible.

Installation

The only file needed for the grid is sass/partials/_grid.scss. Everything else is just for the demonstration. Compass is not required. Simply include the _grid.scss file anywhere within an existing Compass or SASS project.

@include "partials/grid.scss";

Configure Grid Settings

Configure the grid by setting the 4 variables.

// Configure grid variables in _grid.scss

$totalColumns:      12;
$gutterWidth:       1em;
$columnWidth:       6em;
$containerPadding:  1em;

// Apply mixins to any class

@include container;     // Applies container max-width and padding
@include row(12)        // Defines a row that spans 12 columns
@include spans(2,12)    // Defines a column that spans 2 columns
                        // widths within a 12 column row.

Nesting

To nest a grid, create another row within a span. The parameter given to the nested row should its parent span's assigned width. Example:

@include row(12);       // Row spanning 12 columns.
@include spans(4,12);   // Column spanning 4 columns.
@include row(4);        // Nested row inside our span(4,12)
@include spans(2,4);    // Nested columns spanning 2 of 4 columns.

Markup Structure

Markup structure should follow a row > span structure. Example:

div.container
    div.row
        div.span
        div.span
        div.span
            div.row
                div.span
                div.span
                div.span
        div.span
        div.span

About

Simple, flexible Compass / SASS Grid. Infinitely nestible, consistent gutter width, no alphas, omegas or nth-childs needed. All mixin based.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages