JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.0.6-development-only.js"></script>
<div class="page-template">
<div class="cta home">
<a class="btn btn-large"><i>icon</i> This is a button</a>
</div>
</div>
<div class="no-page-template">
<div class="cta not-home">
<a class="btn btn-large"><i>icon</i> Don't style this button</a>
</div>
</div>
CSS
.btn {
display: block;
margin-bottom: 10px;
}
.btn-large {
font-size: 30px;
background: red;
}
.btn-medium {
font-size: 16px;
background: yellow;
}
JavaScript
$(function() {
// 1. Make sure Window Resize doesn't flake out with Paul Irish script: http://bit.ly/11qOAY
// -----------------------------------------------------------------------------------------
(function($,sr){
// debouncing function from John Hann
// http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
var debounce = function (func, threshold, execAsap) {
var timeout;
return function debounced () {
var obj = this, args = arguments;
function delayed () {
if (!execAsap)
func.apply(obj, args);
timeout = null;
};
if (timeout)
clearTimeout(timeout);
else if (execAsap)
func.apply(obj, args);
timeout = setTimeout(delayed, threshold || 100);
};
}
// smartresize
jQuery.fn[sr] = function(fn){ return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
})(jQuery,'smartresize');
// 2. Check if it's a page-template: http://bit.ly/14xlauk
// --------------------------------------------------------
if ( $('.page-template') ) {
// 3. Using if/else to check media query with Modernizr: http://bit.ly/piXyJb and http://bit.ly/10iyv8n
// ----------------------------------------------------------------------------------------------------
// Set up a variable for "home" to save traversing the DOM (cache)
// I think the idea is to add the "$" if it's a jQuery object (DOM search),
// otherwise use without for general variable: http://bit.ly/Zaauh3
var $home = $('.home');
// Run the if/else statements
if (Modernizr.mq('(max-width: 979px)')) {
$home.find('a').removeClass('btn-large').addClass('btn-medium')
.end()
.find('a > i').addClass('visuallyhidden');
// Check it worked out
console.log('Small buttons loaded!');
} else if(Modernizr.mq('(min-width: 768px)'))...