Mixins for clean and readable RWD @ media includes.

breakpoint-groups.md

Note: Don't just copy & paste this. ADAPT THE WIDTHS TO SUIT THE CONTENT.

TODO notes to self:

• Decide and articulate where you stand with most appropriate unit. em, px, or something else?
• Naming system – is mobile, tablet, desktop really the best method for naming the main horizontal divisions?
• Add sets of -up and -only suffixed mixins.

breakpoint-groups.scss

//******************************************************************************
// @media Mixins.
//
// Defines variables and mixins that use those variables into brain-friendly 
// groupings. 
//
//******************************************************************************


//==============================================================================
// Variables.
//
// Used like an H2 heading for components and large related chunks of css.
//==============================================================================
$mobile-wide-width:  500px;
$tablet-width:       768px;
$desktop-width:      1024px;
$desktop-wide-width: 1400px;

//------------------------------------------------------------------------------
// Media Query Mixins.
//
// Used like an H3 heading for sub-components within a section.
//-----

@mixin mobile-wide {
    @media (min-width: #{$mobile-wide-width}) {
        @content;
    }
}

@mixin tablet {
    @media (min-width: #{$tablet-width}) {
        @content;
    }
}

@mixin desktop {
    @media (min-width: #{$desktop-width}) {
        @content;
    }
}

@mixin desktop-wide {
    @media (min-width: #{$desktop-wide-width}) {
        @content;
    }
}