BB Skeleton

by kyllle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.2/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>

SCSS

* {
  -webkit-font-smoothing: antialiased;
}

body {
    padding: 5%;
}

///*------------------------------------*\
//    #SETTINGS-RESPONSIVE
//\*------------------------------------*/

// Hold our breakpoint aliases and conditions in a list.
//
// These can be invoked later on via the `media-query()` mixin found in
// `_tools.responsive`.

$breakpoints: (
    "palm"                                  "screen and (max-width: 47.938em)",
    "palm--landscape"                       "screen and (max-width: 47.938em) and (orientation: landscape)",
    "palm-restricted-height--portrait"      "screen and (max-height: 25em) and (orientation: portrait)",
    "palm-restricted-height--landscape"     "screen and (max-width: 25em) and (orientation: landscape)",
    "palm-and-up"                           "screen and (min-width: 48em)",
    "lap"                                   "screen and (min-width: 48em) and (max-width: 74.938em)",
    "lap-and-up"                            "screen and (min-width: 48em)",
    "portable"                              "screen and (max-width: 74.938em)",
    "desk"                                  "screen and (min-width: 75em)",
    "retina"                                "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)"
);

@mixin media-query($mq) {
  $breakpoint-found: false;
  // Loop through the list of breakpoints we’ve provided in our settings file.
  @each $breakpoint in $breakpoints {
    // Grab the alias and the condition from their respective locations in
    // the list.
    $alias: nth($breakpoint, 1);
    $condition: nth($breakpoint, 2);
    // If the media query we’ve specified has an alias and a condition...
    @if $mq == $alias and $condition {
      // ...tell the mixin that we’ve found it...
      $breakpoint-found: true;
      // ...and spit it out here.
      @media #{$condition} {
        @content;
      }
    }
  }
  // If the user specifies a non-exitent alias, send them a...

JavaScript

console.clear();

/**
 *	Todos
 *	1) Check if JS is supported and set html class to be either js or no-js depending.
 *	2) Initialize the is touch listener.
 *	3) Set the user agent on html if one exists.
 *	4) Set the current media query type as a class on html
 *	5) Set up a resize listener to update the media query when required.
 *	6) Check if user is on an actual mobile device.
 */

var config = {};
var utils = {};

function EnvDetect() {
	// Cache some selectors
	this.selectors = {};
    this.selectors.html = document.querySelector('html');
    
	// Get the current breakpoint content string value
    this.currentBreakpoint = this.getBreakpointValue();
    this.breakpointHandler(this.currentBreakpoint);
	
    // Initialiase the is-touch listener
	this.isTouch();
    
    // Immediately set the user agent
    this.setUserAgent();
    
    // Initialize listeners
    this.init();
};

EnvDetect.prototype.init = function() {
	$(window).on('resize orientationchange', this, this.breakpointHandler.bind(this));
};

EnvDetect.prototype.isMobile = function() {
	// Check for UA
};

/**
 *	match() requires a parameter which is the regex command you want to match for in the text.
 */
EnvDetect.prototype.setUserAgent = function() {
	var userAgent = window.navigator.userAgent;
    
    if (userAgent.match(/iPhone/i)){
        userAgent = 'cme-iphone';
    } else if (userAgent.match(/iPad/i)){
        userAgent = 'cme-ipad';
    } else if (userAgent.match(/Android/i)){
        userAgent = 'cme-android';
    } else {
    	return;
	}
        
    this.selectors.html.classList.add(userAgent);
};

/**
 *	If getComputedStyle is supported then get the body after psuedo element content
 *	@return {string}  Body element after pseudo content without surrounding quotes.
 */
EnvDetect.prototype.getBreakpointValue = function() {
	this.afterElement = window.getComputedStyle ? window.getComputedStyle(document.body, ':after') : false;
	return...