Uses a map to store breakpoint values for screen, component and anything else you can think of.
Has a layout indicator to show you the type of breakpoint (screen, component, etc.), the name (s, m, l, etc.) and the pixel value of the break.
This demo uses Bourbon Neat for generating media queries, but of course, use whatever you want.
Usage:
.foo {
| // For JavaScript | |
| @if $has-media-query == true { | |
| head { | |
| font-family: 'xxsmall'; | |
| @include breakpoint(xsmall) { font-family: 'xsmall'; } | |
| @include breakpoint(small) { font-family: 'small'; } | |
| @include breakpoint-custom('(min-width: #{ems(686px, $breakpoint-context)})') { font-family: 'small_custom'; } | |
| @include breakpoint(medium) { font-family: 'medium'; } |
| 'use strict'; | |
| define([], function() | |
| { | |
| /** | |
| * Loops through each event type, attaches the listener, and creates a | |
| * fallback with `attachEvent`. | |
| * @param {object} el The element on which to attach the listener. | |
| * @param {array} type A array containing the event type(s) to | |
| * listen for. |
| <?php | |
| /** | |
| * Database Configuration | |
| * | |
| * All of your system's database configuration settings go in here. | |
| * You can see a list of the default settings in craft/app/etc/config/defaults/db.php | |
| */ | |
| return array( |
| <div{if embed:id} id="{embed:id}"{/if} class="message message-{embed:type}{if embed:hidden == 'TRUE'} hidden{/if}"> | |
| {if embed:message}{embed:message}{/if} | |
| </div><!-- .message --> | |
| {!-- | |
| =================================== | |
| Required Parameters: | |
| hidden: TRUE|FALSE | |
| message: text string | |
| type: alert|error|success |
| self.changeWindowLocationWithSelect = function() | |
| { | |
| $('.' + classes.selectControllerClass).change(function() | |
| { | |
| if (this.value) | |
| window.location.href = this.value; | |
| else | |
| return false; | |
| }); | |
| }; |
| <option value="">–</option> | |
| <option value="AL">Alabama</option> | |
| <option value="AK">Alaska</option> | |
| <option value="AZ">Arizona</option> | |
| <option value="AR">Arkansas</option> | |
| <option value="CA">California</option> | |
| <option value="CO">Colorado</option> | |
| <option value="CT">Connecticut</option> | |
| <option value="DE">Delaware</option> | |
| <option value="DC">District of Columbia</option> |
| <p> | |
| Your search for <strong>{exp:search:keywords}</strong> | |
| returned <strong>{exp:search:total_results}{total_results}{/exp:search:total_results} result{if "{exp:search:total_results}" != 1}s{/if}</strong>. | |
| </p> |
| window.onerror = function(message, url, lineNumber) { | |
| console.log('Error: ' + message + ' in ' + url + ' at line ' + lineNumber); | |
| } |