Contents

@import "layout";

// Calculate the gutter spacing as a percentage.
// Use the max width of the grid to calculate against.
@function grid-gutter($width, $gutter) {
    @return if($gutter, ((to-pixel($gutter) / to-pixel($width)) * 100 * 1%), 0%);
}

// Calculate the width of an individual grid column.
// Take into account max widths and gutters.
@function grid-span($n, $columns, $width: $grid-width, $gutter: $grid-gutter) {
    $row-width: 100%;
    $gutter-width: 0%;

    // If a gutter is set, remove width based on the sum of the gutter columns
    @if $gutter {
        $gutter-width: grid-gutter($width, $gutter);
        $row-width: $row-width - ($gutter-width * ($columns - 1));
    }

    // The column width should span a division of the total width
    $span-width: ($row-width / $columns) * $n;

    // If a gutter is set, increase the column width to fill in the missing gaps
    @if $gutter and $n > 1 {
        $span-width: $span-width + (($n - 1) * $gutter-width);
    }

    @return $span-width;
}

// Styles for the grid row containing the columns.
@mixin grid-row($width: $grid-width) {
    width: $width;
    max-width: $width;

    @include clear-fix;
}

// Styles for the individual grid column.
@mixin grid-column($width: $grid-width, $gutter: $grid-gutter) {
    position: relative;
    min-height: 1px;
    float: left;

    @if $gutter {
        margin-right: grid-gutter($width, $gutter);

        &:last-child { margin-right: 0; }
    }
}

// Placeholder styles to extend from
%row { @include grid-row; }
%col { @include grid-column; }

Version data entries

3 entries across 3 versions & 1 rubygems

Version	Path
titon-toolkit-2.0.0	scss/toolkit/mixins/_grid.scss
titon-toolkit-2.0.0.pre.rc.2	scss/toolkit/mixins/_grid.scss
titon-toolkit-2.0.0.pre.rc.1	scss/toolkit/mixins/_grid.scss