scratch-www/src/_frameless.scss

/*
    Frameless           <http://framelessgrid.com/>
    by Joni Korpi       <http://jonikorpi.com/>
    licensed under CC0  <http://creativecommons.org/publicdomain/zero/1.0/>
*/


//
// Configuration
//

$font-size: 16px;       // Your base font-size in pixels
$em: $font-size / 1em;  // Shorthand for outputting ems

$column: 60px;  // The column-width of your grid in pixels
$gutter: 20px;  // The gutter-width of your grid in pixels



//
// Column-widths in variables, in ems
//

$cols1: ( 1 * ($column + $gutter) - $gutter) / $em;
$cols2: ( 2 * ($column + $gutter) - $gutter) / $em;
$cols3: ( 3 * ($column + $gutter) - $gutter) / $em;
$cols4: ( 4 * ($column + $gutter) - $gutter) / $em;
$cols5: ( 5 * ($column + $gutter) - $gutter) / $em;
$cols6: ( 6 * ($column + $gutter) - $gutter) / $em;
$cols7: ( 7 * ($column + $gutter) - $gutter) / $em;
$cols8: ( 8 * ($column + $gutter) - $gutter) / $em;
$cols9: ( 9 * ($column + $gutter) - $gutter) / $em;
$cols10: (10 * ($column + $gutter) - $gutter) / $em;
$cols11: (11 * ($column + $gutter) - $gutter) / $em;
$cols12: (12 * ($column + $gutter) - $gutter) / $em;

$desktop: 942px;
$tablet: 640px;
$mobile: 480px;

//
// Column-widths in a function, in ems
//

@mixin width ($cols: 1) {
    width: ($cols * ($column + $gutter) - $gutter) / $em;
}

//4 columns
@mixin submobile ($parent-selector, $child-selector) {
    @media only screen and (max-width: $mobile - 1) {
        #{$parent-selector} {
            text-align: center;
        }

        #{$child-selector} {
            margin: 0 auto;
            width: 100%;
        }

        @content;
    }
}

//6 columns
@mixin mobile ($parent-selector, $child-selector) {
    @media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
        #{$parent-selector} {
            text-align: center;
        }

        #{$child-selector} {
            margin: 0 auto;
            width: $mobile;
        }

        @content;
    }
}

//8 columns
@mixin tablet ($parent-selector, $child-selector) {
    @media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
        #{$parent-selector} {
            text-align: center;
        }

        #{$child-selector} {
            margin: 0 auto;
            width: $tablet;
        }
    }
}

//12 columns
@mixin desktop ($parent-selector, $child-selector) {
    @media only screen and (min-width: $desktop) {
        #{$child-selector} {
            margin: 0 auto;
            width: $desktop;
        }
    }
}

@mixin responsive-layout ($parent-selector, $child-selector) {
    @include submobile($parent-selector, $child-selector);
    @include mobile($parent-selector, $child-selector);
    @include tablet($parent-selector, $child-selector);
    @include desktop($parent-selector, $child-selector);
}

@include responsive-layout("#view", ".inner");