matryo.scss

/*!*
*
* matryosass -- @quagliero
* Infinitely nestable grids with as many fractional widths as you like
* Licensed with the 'do whatever you want with it' one.
*/

/*
* $VARIABLES
*/

/*
*  [1] $matryo-gutter      -- the gap between each column, e.g. 48px, 2em
*  [2] $matryo-fractions   -- the fractional widths available for you to use,
*      pass in a single whole number, e.g 12; or a list: 2,3,4,8,12
*  [3] $matryo-border-box  -- used to initialise the border-box model on columns,
you should set this to false if you've already defined it globally *{...}
*  [4] $matryo-grid-class  -- the class name for the grid
*  [5] $matryo-col-class   -- the class name for a column
*/

$matryo-gutter      : 24px !default;        /* [1] */
$matryo-fractions   : 12 !default;          /* [2] */
$matryo-border-box  : true !default;        /* [3] */
$matryo-grid-class  : 'grid' !default;      /* [4] */
$matryo-col-class   : 'grid__col' !default; /* [5] */


/*
* Define your breakpoints
*
*  [1] $matryo-bp-{n}          -- enable/disable specific breakpoint
*  [2] $matryo-bp-{n}-width    -- define a width for a breakpoint. Default uses
*      ems with 'target / context = result', assuming 16px is the base font size
*  [3] $matryo-bp-{n}-name     -- give that breakpoint a namespace. Defaults to
*      bootstrap naming conventions, but these should be whatever works for you,
*      as suggested in http://css-tricks.com/naming-media-queries/
*/

$matryo-bp-xs          : true !default; /* [1] */
$matryo-bp-xs-width    : 30em !default; /* [2] ~480px (480/16) */
$matryo-bp-xs-name     : 'xs' !default; /* [3] */

$matryo-bp-sm          : true !default; /* [1] */
$matryo-bp-sm-width    : 40em !default; /* [2] ~640px (640/16) */
$matryo-bp-sm-name     : 'sm' !default; /* [3] */

$matryo-bp-md          : true !default; /* [1] */
$matryo-bp-md-width    : 50em !default; /* [2] ~800px (800/16) */
$matryo-bp-md-name     : 'md' !default; /* [3] */

$matryo-bp-lg          : true !default; /* [1] */
$matryo-bp-lg-width    : 64em !default; /* [2] ~1024px (1024/16) */
$matryo-bp-lg-name     : 'lg' !default; /* [3] */

/*
*  [4] This last one is used as a MIN-width media query to target
*      things greater than your 'large' breakpoint. Defaults to 1px bigger than
*      the 'large' width. Increase as required.
*/

$matryo-bp-xl         : false !default; /* [1] */
$matryo-bp-xl-width   : $matryo-bp-lg-width + .01 !default; /* [4]  */
$matryo-bp-xl-name    : 'xl' !default; /* [3] */


/*
* END $VARIABLES
* You're all done! The whizzbangery happens below...
*/




/*
* Build our grid with columns and (optional) breakpoints
*/
@mixin _grid() {
    /*
    * Define the grid to wrap our items in and offset the gutter with a
    * negative margin so we don't need to use .last or :last-of-type shenanigans
    */
    .#{$matryo-grid-class},
    %#{$matryo-grid-class} {
        margin-left: -$matryo-gutter;

        /* clear column floats */
        &:after {
            content: "";
            display: table;
            clear: both;
        }
        /* Not commonly used, but covering the case when you
        might want to nest a grid within a grid (instead of within a column) */
        > .#{$matryo-grid-class},
        > .#{$matryo-grid-class}--rev {
            margin-left: 0;
        }

    }

    /* No gutters, just a whole lot of grid */
    .#{$matryo-grid-class}--flush {
        @extend %#{$matryo-grid-class};
        margin-left: 0;

        > .#{$matryo-col-class} {
            padding-left: 0;
        }
    }

    /* Reverse the flow, useful for content ordering */
    .#{$matryo-grid-class}--rev {
        @extend %#{$matryo-grid-class};

        > .#{$matryo-col-class} {
            float: right;
        }
    }

    /*
    * Columns always have one base class e.g. .grid__col
    * so give them a base style
    */
    .#{$matryo-col-class},
    %#{$matryo-col-class} {
        float: left;
        min-height: 1px; /* prevent collapsing columns */
        width: 100%;
        padding-left: $matryo-gutter;
        @if $matryo-border-box {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            -o-box-sizing: border-box;
            box-sizing: border-box;
        }
    }



    /*
    * Go get our column widths
    * and build our base grid fraction classes with no prefix
    */

    @include _cols(null);

    /*
    * Let's get busy break-pointin' and create
    * some suepr awsum namespaced responsive grid widths
    */
    @if $matryo-bp-xl {
        @media (min-width: #{$matryo-bp-xl-width}) {
            @include _cols($matryo-bp-xl-name);
        }
    }
    @if $matryo-bp-lg {
        @media (max-width: #{$matryo-bp-lg-width}) {
            @include _cols($matryo-bp-lg-name);
        }
    }
    @if $matryo-bp-md {
        @media (max-width: #{$matryo-bp-md-width}) {
            @include _cols($matryo-bp-md-name);
        }
    }
    @if $matryo-bp-sm {
        @media (max-width: #{$matryo-bp-sm-width}) {
            @include _cols($matryo-bp-sm-name);
        }
    }
    @if $matryo-bp-xs {
        @media (max-width: #{$matryo-bp-xs-width}) {
            @include _cols($matryo-bp-xs-name);
        }
    }

}


/*
* Function to handle the building of columns
* defined in $matryo-fractions.
*  via a defined number, e.g. 12 OR
*  a collection of cols, e.g. 1,2,4,8
*
*/
@mixin _cols($namespace) {

    @if $namespace {
        $namespace : $namespace + '-';
    }

    // Check for a list of cols
    @if type-of($matryo-fractions) == list {
        @each $i in $matryo-fractions {
            @for $j from 1 through $i {
                @include _col-classes($namespace, $j, $i);
            }
        }
    }
    // Otherwise treat is as number
    @elseif unitless($matryo-fractions) {
        @for $i from 1 through $matryo-fractions {
            @for $j from 1 through $i {
                @include _col-classes($namespace, $j, $i);
            }
        }
    }
    @else {
        @warn "$mg-fractions needs to be a unitless number or a list";
    }

    /* a helpful class to hide items
    * e.g, .hide, .xl-hide, .md-hide
    */
    .#{$namespace}hide {
        display: none !important;
    }

    /* a helpful class to show items (requires .hide)
    * e.g, <div class="hide sm-show">
    */
    .#{$namespace}show {
        display: block !important;
    }

    .#{$namespace}show-inline {
        display: inline-block !important;
    }

}


/*
* Set fractional based classes for namespaced columns
* [class~='1/2'], .xs-3/8, .md-1, .lg-4/5
*
*/
@mixin _col-classes($namespace, $j, $i) {

    @if $i != $j {
        [class~='#{$namespace}#{$j}/#{$i}'] {
            width: percentage($j / $i);
        }
    }

    @if $i == 1 and $namespace  {
        .#{$namespace}#{$j} {
            width: 100%;
        }
    }
}

/*
* Build our grid, yo
*/
@include _grid();



/* PUBLIC Matryosass mixin(s) */

/*
* Let us use our breakpoints for all content...
* @if/@else if -- Try and match the media-query namespace and assign relevant widths
* @else        -- so you can use it for custom queries if you wish
*/

@mixin media($namespace) {

    // above your 'xl' width
    @if $namespace == $matryo-bp-xl-name {
        @media (min-width: #{$matryo-bp-xl-width}) {
            @content;
        }
    }
    // between your 'lg' and 'xl' widths
    @else if $namespace == '#{$matryo-bp-lg-name}-to-#{$matryo-bp-xl-name}' {
        @media (max-width: #{$matryo-bp-xl-width}) and (min-width: #{$matryo-bp-lg-width}) {
            @content;
        }
    }
    // between your 'md' and 'xl' widths
    @else if $namespace == '#{$matryo-bp-md-name}-to-#{$matryo-bp-xl-name}' {
        @media (max-width: #{$matryo-bp-xl-width}) and (min-width: #{$matryo-bp-md-width}) {
            @content;
        }
    }
    // between your 'sm' and 'xl' widths
    @else if $namespace == '#{$matryo-bp-sm-name}-to-#{$matryo-bp-xl-name}' {
        @media (max-width: #{$matryo-bp-xl-width}) and (min-width: #{$matryo-bp-sm-width}) {
            @content;
        }
    }
    // between your 'xs' and 'xl' widths
    @else if $namespace == '#{$matryo-bp-xs-name}-to-#{$matryo-bp-xl-name}' {
        @media (max-width: #{$matryo-bp-xl-width}) and (min-width: #{$matryo-bp-xs-width}) {
            @content;
        }
    }
    // Up to your 'lg' width
    @else if $namespace == $matryo-bp-lg-name {
        @media (max-width: #{$matryo-bp-lg-width}) {
            @content;
        }
    }
    // between your 'md' and 'lg' widths
    @else if $namespace == '#{$matryo-bp-md-name}-to-#{$matryo-bp-lg-name}' {
        @media (max-width: #{$matryo-bp-lg-width}) and (min-width: #{$matryo-bp-md-width}) {
            @content;
        }
    }
    // between your 'sm' and 'lg' widths
    @else if $namespace == '#{$matryo-bp-sm-name}-to-#{$matryo-bp-lg-name}' {
        @media (max-width: #{$matryo-bp-lg-width}) and (min-width: #{$matryo-bp-sm-width}) {
            @content;
        }
    }
    // between your 'xs' and 'lg' widths
    @else if $namespace == '#{$matryo-bp-xs-name}-to-#{$matryo-bp-lg-name}' {
        @media (max-width: #{$matryo-bp-lg-width}) and (min-width: #{$matryo-bp-xs-width}) {
            @content;
        }
    }
    // Up to your 'md' width
    @else if $namespace == $matryo-bp-md-name {
        @media (max-width: #{$matryo-bp-md-width}) {
            @content;
        }
    }
    // between your 'sm' and 'md' widths
    @else if $namespace == '#{$matryo-bp-sm-name}-to-#{$matryo-bp-md-name}' {
        @media (max-width: #{$matryo-bp-md-width}) and (min-width: #{$matryo-bp-sm-width}) {
            @content;
        }
    }
    // between your 'xs' and 'md' widths
    @else if $namespace == '#{$matryo-bp-xs-name}-to-#{$matryo-bp-md-name}' {
        @media (max-width: #{$matryo-bp-md-width}) and (min-width: #{$matryo-bp-xs-width}) {
            @content;
        }
    }
    // Up to your 'sm' width
    @else if $namespace == $matryo-bp-sm-name {
        @media (max-width: #{$matryo-bp-sm-width}) {
            @content;
        }
    }
    // between your 'xs' and 'sm' widths
    @else if $namespace == '#{$matryo-bp-xs-name}-to-#{$matryo-bp-md-name}' {
        @media (max-width: #{$matryo-bp-sm-width}) and (min-width: #{$matryo-bp-xs-width}) {
            @content;
        }
    }
    // Up to your 'xs' width
    @else if $namespace == $matryo-bp-xs-name {
        @media (max-width: #{$matryo-bp-xs-width}) {
            @content;
        }
    }
    // Whatever else you may want, it's custom!
    @else {
        @media #{$namespace} {
            @content;
        }
    }
}

/* Fin. */