Capture CSS MQ's in Javascript

[getdave]

Add the functionality required to capture MQs from the CSS and into the JS.

Required CSS:

// None
html {
    font-family: none;
}

// Tiny
@include respond-to($break-tiny) {
    html {
        font-family: tiny;
    }
}

// Small
@include respond-to($break-small) {
    html {
        font-family: small;
    }
}

// Medium
@include respond-to($break-medium) {
    html {
        font-family: medium;
    }
}

// Large
@include respond-to($break-large) {
    html {
        font-family: large;
    }
}

// Extra Large
@include respond-to($break-xlarge) {
    html {
        font-family: xlarge;
    }
}

Required JS:

/**
 * Get Active Media Query
 * get currently acitve MQ from CSS on html 
 * element's font-family. return as an integar 
 * for Math based comparison
 * http://adactio.com/journal/5429/
 */
SITE.utils.activeMQ = (function($) {

    $(document).ready(function(){

        var breakPoints = new SITE.utils.Dictionary({
            none: 1,
            tiny: 2,
            small: 3,
            medium: 4,
            large: 5,
            xlarge: 6
        });

        var mqString = $(":root").css("font-family");

        return breakPoints.lookup(mqString);
    });
}(jQuery));

Note that the JS above depends on the presence of the Dictionary object (see https://github.com/getdave/Tanlinell/issues/277)

[getdave]

Also update any boilerplate code in plugins.js or main.js to use the SITE.utils.activeMQ function to conditionalise loading based on breakpoint rather than a hardcoded breakpoint.

[getdave]

Note that the Dictionary util must be defined before the activeMQ function.

[getdave]

Fixed in feature branch. Will close via commit.

[getdave]

Forgot to close via commit. Closing manually.