An SCSS port of the Deco Grid System (deco.gs)

_core.scss

/*  This is an **unofficial** [SCSS](http://sass-lang.com/) port of preview 2 
    of the [Deco Grid System](http://deco.gs/).  The Deco Grid System was 
    originally written by [Alexander Limi](http://limi.net/) and released under 
    a [public domain/BSD](http://twitter.com/limi/status/10865858377154560)
    license.
    
    This port was created by [Jonathan Wilde](http://www.speedbreeze.com/).
    Jonathan doesn't deserve much credit, though, since Alexander Limi did all
    of the hard work.  ;)  This file is licensed under the same terms as the
    original Deco Grid System CSS.
    
    This is **version 1.5 (beta)** of the port of preview 2.
    
    Note that this document merely provides mixins to apply to elements of
    your document's grid.  It does not provide operational CSS like that in the
    official Deco Grid System zip file.  For actual CSS classes, look at
    `defaults.scss`.
    
    === Defaults ===

    The overall grid that defines the layout of the page contains a series of
    blocks.  These blocks each contain a cell (with content) surrounded by a
    margin.  Two abstract measurements of this layout are set by globals:
    
    `$deco-cols`
    :   The number of columns that in the grid.
    `$deco-fraction`
    :   The total fraction of the block that will be margin space.
    
    The more specific percentages for sizing the various elements are determined
    on by the `deco-width` and `deco-position` mixins.  This makes it possible
    for the mixins to allow callers to override the sizing defaults, making
    extremely complex layouts possible.
    */

$deco-cols: 16;
$deco-fraction: 1 / 3;

/*  === `deco-row` ===
    
    Blocks in a single row of a grid must be grouped by a container
    element that ensures the next row's elements don't overlap this one.  This
    mixin contains all of the required styles for that container element.
    
    This mixin does not take any parameters.
    */
    
@mixin deco-row {
    float: left;
    width: 100%;
    display: block;
    position: relative;
}

/*  === `deco-block` ===

    All blocks in the grid must all have a few specific base styles to make it
    possible to arrange them in the grid.  This mixin contains those base
    styles.
    
    Blocks must also have the `deco-width` and `deco-position` mixins applied
    to them to define their exact location and size in the grid.
    
    This mixin does not take any parameters.
    */
    
@mixin deco-block {
    position: relative;
    float: left;
    left: 100%;
}
    
/*  === `deco-width` ===
    
    This mixin specifies the relative size of a block.  There are a couple of
    parameters that this mixin takes:
    
    `$n`
    :   **Required**.  This is the number of block-widths that this block
    :   should take up.  This number must be less than or equal to `$cols` and
    :   greater than 0.
    `$cols`
    :   Defaults to `$deco-cols`.  Overrides the number of columns in the grid 
    :   for this block only.
    `$fraction`
    :   Defaults to `$deco-fraction`. Overrides the fraction of the width of
    :   this block that margin area takes up.
    */

@mixin deco-width ($n, $cols: $deco-cols, $fraction: $deco-fraction) {
    $block: 100% / $cols;
    $margin: $block * $fraction;
    width: ($block * $n) - $margin;
}

/*  === `deco-position` ===
    
    This mixin specifies the relative position of the block.  There are a couple
    of parameters that this mixin takes:
    
    `$n`
    :   **Required**.  This is the number of block-widths that this block should
    :   be pushed over from the left by.  This number must be less than `$cols`
    :   and no lower than 0.
    `$cols`
    :   Defaults to `$deco-cols`.  Overrides the number of columns in the grid 
    :   for this block only.
    */

@mixin deco-position ($n, $cols: $deco-cols) {
    $block: 100% / $cols;
    margin-left: -100 + ($block * $n);
}

defaults.scss

/*  This document uses the `_core.scss` file to generate a CSS file that is
    pretty much rule-for-rule identical to the CSS included in the official
    Deco Grid System preview 2 zip file.
    
    If you notice differences between this and the CSS in the official zip
    file, it's because:
    
        * `$deco-cols` is not set to 12 or 16.
        * `$deco-fraction` is not set to 1/3.
        * Ruby's/Sass's rounding rules aren't the same as those for the
          calculator used create the official Deco Grids CSS.
        
    Using this file in your Compass project is optional.  If you prefer the
    standard markup that Deco Grids uses, using this file is an option.
    However, if you prefer the Compass way of doing things (where you apply
    mixins to semantic CSS selectors), you can omit this file from your build
    and stick to using just `_core.scss`.
    
    Again, remember that this is an **unofficial** port of work done by
    Alexander Limi.  It is released under Deco Grids' [public domain/BSD 
    license](http://twitter.com/limi/status/10865858377154560).
    */

@import "_core.scss";

div.row {
    @include deco-row;
}
    
div.cell {
    @include deco-block;
}

@for $i from 1 through $deco-cols {
    div.width-#{$i} {
        @include deco-width($i);
    }
}

@for $i from 0 through ($deco-cols - 1) {
    div.position-#{$i} {
        @include deco-position($i);
    }
}

div.width-1\3a 2 {
    @include deco-width($deco-cols * (1 / 2));
}

div.width-1\3a 4 {
    @include deco-width($deco-cols * (1 / 4));
}

div.width-3\3a 4 {
    @include deco-width($deco-cols * (3 / 4));
}

div.position-1\3a 4 {
    @include deco-position($deco-cols * (1 / 4))
}

div.position-1\3a 2 {
    @include deco-position($deco-cols * (1 / 2))
}

div.position-3\3a 4 {
    @include deco-position($deco-cols * (3 / 4))
}

div.width-1\3a 3 {
    @include deco-width($deco-cols * (1 / 3))
}

div.width-2\3a 3 {
    @include deco-width($deco-cols * (2 / 3))
}

div.position-1\3a 3 {
    @include deco-position($deco-cols * (1 / 3))
}

div.position-2\3a 3 {
    @include deco-position($deco-cols * (2 / 3))
}

div.position-leftmost {
    @include deco-position(0);
}

div.width-full {
    @include deco-width($deco-cols);
}