csswizardry-grids.scss

/*------------------------------------*\
    $CSSWIZARDRY-GRIDS
\*------------------------------------*/
/**
 * CONTENTS
 * VARIABLES............Your settings.
 * GRID SETUP...........Build the grid structure.
 * WIDTHS...............Build our responsive widths around our breakpoints.
 */





/*------------------------------------*\
    $VARIABLES
\*------------------------------------*/
/**
 * If you are building a non-responsive site but would still like to use
 * csswizardry-grids, set this to false:
 */
$responsive:            true;


/**
 * Is this build mobile first? Setting to true means that all grids will be 100%
 * width if you do not apply a more specific class to them.
 */
$mobile-first:          true;


/**
 * Set the spacing between your grid items.
 */
$gutter:                24px;


/**
 * Would you like Sass’s silent classes, or regular CSS classes?
 */
$use-silent-classes:    false;


/**
 * At which point should lap and desk breakpoints kick in?
 */
$lap-start:             481px;
$desk-start:            1024px;


/**
 * Do not edit the following variables.
 */
$class-type:            unquote(".");

@if $use-silent-classes == true{
    $class-type: unquote("%");
}





/*------------------------------------*\
    $GRID SETUP
\*------------------------------------*/
/**
 * 1. Allow the grid system to be used on lists.
 * 2. Remove any margins and paddings that might affect the grid system.
 * 3. Apply a negative `margin-left` to negate the columns’ gutters.
 */
#{$class-type}grid{
    list-style:none;                /* [1] */
    margin:0;                       /* [2] */
    padding:0;                      /* [2] */
    margin-left:-$gutter;           /* [3] */
}


/**
 * 1. Cause columns to stack side-by-side.
 * 2. Space columns apart.
 * 3. Align columns to the tops of each other.
 * 4. Full-width unless told to behave otherwise.
 * 5. Required to combine fluid widths and fixed gutters.
 */
#{$class-type}grid__item{
    display:inline-block;           /* [1] */
    padding-left:$gutter;           /* [2] */
    vertical-align:top;             /* [3] */
    @if $mobile-first == true{
        width:100%;                 /* [4] */
    }
    -webkit-box-sizing:border-box;  /* [5] */
       -moz-box-sizing:border-box;  /* [5] */
            box-sizing:border-box;  /* [5] */
}


/**
 * Reversed grids allow you to structure your source different to how your
 * rendered layout will appear.
 */
#{$class-type}grid--rev{
    @extend #{$class-type}grid;
    direction:rtl;
    text-align:right;
}

    #{$class-type}grid--rev > #{$class-type}grid__item{
        direction:ltr;
        text-align:left;
    }


/**
 * Gutterless grids have all the properties of regular grids, minus any spacing.
 */
#{$class-type}grid--full{
    @extend #{$class-type}grid;
    margin-left:0;
}

    #{$class-type}grid--full > #{$class-type}grid__item{
        padding-left:0;
    }






/*------------------------------------*\
    $WIDTHS
\*------------------------------------*/
/**
 * These next bits get worked out for you.
 */
$palm-end:              $lap-start - 1px;
$lap-end:               $desk-start - 1px;


/**
 * Create our widths, prefixed by the specified namespace.
 */
@mixin device-type($namespace:""){


    /**
     * Whole
     */
    #{$class-type}#{$namespace}one-whole         { width:100%; }


    /**
     * Halves
     */
    #{$class-type}#{$namespace}one-half          { width:50%; }


    /**
     * Thirds
     */
    #{$class-type}#{$namespace}one-third         { width:33.333%; }
    #{$class-type}#{$namespace}two-thirds        { width:66.666%; }


    /**
     * Quarters
     */
    #{$class-type}#{$namespace}one-quarter       { width:25%; }
    #{$class-type}#{$namespace}two-quarters      { @extend #{$class-type}#{$namespace}one-half; }
    #{$class-type}#{$namespace}three-quarters    { width:75%; }


    /**
     * Fifths
     */
    #{$class-type}#{$namespace}one-fifth         { width:20%; }
    #{$class-type}#{$namespace}two-fifths        { width:40%; }
    #{$class-type}#{$namespace}three-fifths      { width:60%; }
    #{$class-type}#{$namespace}four-fifths       { width:80%; }


    /**
     * Sixths
     */
    #{$class-type}#{$namespace}one-sixth         { width:16.666%; }
    #{$class-type}#{$namespace}two-sixths        { @extend #{$class-type}#{$namespace}one-third; }
    #{$class-type}#{$namespace}three-sixths      { @extend #{$class-type}#{$namespace}one-half; }
    #{$class-type}#{$namespace}four-sixths       { @extend #{$class-type}#{$namespace}two-thirds; }
    #{$class-type}#{$namespace}five-sixths       { width:83.333%; }


    /**
     * Eighths
     */
    #{$class-type}#{$namespace}one-eighth        { width:12.5%; }
    #{$class-type}#{$namespace}two-eighths       { @extend #{$class-type}#{$namespace}one-quarter; }
    #{$class-type}#{$namespace}three-eighths     { width:37.5%; }
    #{$class-type}#{$namespace}four-eighths      { @extend #{$class-type}#{$namespace}one-half; }
    #{$class-type}#{$namespace}five-eighths      { width:62.5%; }
    #{$class-type}#{$namespace}six-eighths       { @extend #{$class-type}#{$namespace}three-quarters; }
    #{$class-type}#{$namespace}seven-eighths     { width:87.5%; }


    /**
     * Tenths
     */
    #{$class-type}#{$namespace}one-tenth         { width:10%; }
    #{$class-type}#{$namespace}two-tenths        { @extend #{$class-type}#{$namespace}one-fifth; }
    #{$class-type}#{$namespace}three-tenths      { width:30%; }
    #{$class-type}#{$namespace}four-tenths       { @extend #{$class-type}#{$namespace}two-fifths; }
    #{$class-type}#{$namespace}five-tenths       { @extend #{$class-type}#{$namespace}one-half; }
    #{$class-type}#{$namespace}six-tenths        { @extend #{$class-type}#{$namespace}three-fifths; }
    #{$class-type}#{$namespace}seven-tenths      { width:70%; }
    #{$class-type}#{$namespace}eight-tenths      { @extend #{$class-type}#{$namespace}four-fifths; }
    #{$class-type}#{$namespace}nine-tenths       { width:90%; }


    /**
     * Twelfths
     */
    #{$class-type}#{$namespace}one-twelfth       { width:8.333%; }
    #{$class-type}#{$namespace}two-twelfths      { @extend #{$class-type}#{$namespace}one-sixth; }
    #{$class-type}#{$namespace}three-twelfths    { @extend #{$class-type}#{$namespace}one-quarter; }
    #{$class-type}#{$namespace}four-twelfths     { @extend #{$class-type}#{$namespace}one-third; }
    #{$class-type}#{$namespace}five-twelfths     { width:41.666% }
    #{$class-type}#{$namespace}six-twelfths      { @extend #{$class-type}#{$namespace}one-half; }
    #{$class-type}#{$namespace}seven-twelfths    { width:58.333%; }
    #{$class-type}#{$namespace}eight-twelfths    { @extend #{$class-type}#{$namespace}two-thirds; }
    #{$class-type}#{$namespace}nine-twelfths     { @extend #{$class-type}#{$namespace}three-quarters; }
    #{$class-type}#{$namespace}ten-twelfths      { @extend #{$class-type}#{$namespace}five-sixths; }
    #{$class-type}#{$namespace}eleven-twelfths   { width:91.666%; }


}


/**
 * Our regular, non-responsive width classes.
 */
@include device-type();


@if $responsive == true{


    /**
     * Our breakpoint specific widths classes.
     */
    @media only screen and (max-width:$palm-end){
        @include device-type("palm-");
    }

    @media only screen and (min-width:$lap-start) and (max-width:$lap-end){
        @include device-type("lap-");
    }

    @media only screen and (max-width:$lap-end){
        @include device-type("portable-");
    }

    @media only screen and (min-width:$desk-start){
        @include device-type("desk-");
    }


}