MikeMcChillin

// Set listeners for click events on elements that have [data-gtm-category] on them
$('[data-gtm-category]').on('click', function() {
  var category = $(this).data('gtm-category');
  var action = $(this).data('gtm-action');
  var label = $(this).data('gtm-label');
  gtmClickTrack(category, action, label);
});

// Send the info to Google Analytics
var gtmClickTrack = function(category, action, label) {

MikeMcChillin

gaVxzW

A Pen by Michael McMillan on CodePen.

License.

MikeMcChillin

isMobile = ->
        return (/Android|iPhone|iPad|iPod|BlackBerry|Windows Phone/i).test(navigator.userAgent || navigator.vendor || window.opera)
        
if isMobile() is true
    alert "We're on mobile!"

MikeMcChillin

Set inline width & height.
Video, img alternative natural width & height: 1920 x 1080

21mb video O_O
http://codepen.io/MikeMcChillin/pen/wKGFz

MikeMcChillin

// requestAnimationFrame() shim by Paul Irish
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
window.requestAnimFrame = (function() {
	return  window.requestAnimationFrame       || 
			window.webkitRequestAnimationFrame || 
			window.mozRequestAnimationFrame    || 
			window.oRequestAnimationFrame      || 
			window.msRequestAnimationFrame     || 
			function(/* function */ callback, /* DOMElement */ element){
				window.setTimeout(callback, 1000 / 60);

MikeMcChillin

@mixin font-face ( $name, $font-files, $eot: false, $weight: false, $style: false)
    $iefont: unquote("#{$eot}?#iefix")
    @font-face
        font-family: quote($name)
        @if $eot
            src: font-url($eot)
            $font-files: font-url($iefont) unquote("format('embedded-opentype')"), $font-files
        src: $font-files
        @if $weight
            font-weight: $weight

MikeMcChillin

<ul class="clearfix">

    <li><a href="http://twitter.com/share" class="twitter-share-button" data-text="<?php the_title(); ?>" data-count="horizontal" data-via="YOUR-TWITTER-NAME-HERE">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></li>

    <li><iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink() ?>&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=20" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:90px; height:20px;" allowTransparency="true"></iframe></li>
    
<li><div class="g-plusone" data-size="medium"></div><script type="text/javascript">(function(){var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;po.src = 'https://apis.google.com/js/plusone.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);})();</script></li>

</ul>

MikeMcChillin

#######################
# HTML5 Placeholder fallback
#######################
# http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text
unless Modernizr.input.placeholder
    $("[placeholder]").focus(->
        input = $(this)
        if input.val() is input.attr("placeholder")
            input.val ""
            input.removeClass "placeholder"

MikeMcChillin

if (document.documentElement.clientWidth > 640)

MikeMcChillin

.already-visible
    +opacity(1)
img
    +opacity(0)
    @include animated(1s, .3s)