CodeHub

Decorative elements

For use on decorative elements – this is so accessibility is not spoiled by non-important content elements.

div class="foo" aria-hidden="true" role="presentation">

This …aria-hidden=”true” role=”presentation”… is important.

Favicons

All of the icons/tiles you will need – if you want to save some time, use this awesome generator here – iconogen.com

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">

<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">

<meta name="msapplication-square70x70logo" content="/smalltile.png" />
<meta name="msapplication-square150x150logo" content="/mediumtile.png" />
<meta name="msapplication-wide310x150logo" content="/widetile.png" />
<meta name="msapplication-square310x310logo" content="/largetile.png" />

Disables scrolling with the mouse wheel on Google map

Original article

Solved this putting a div with an .overlay exactly before each Google map iframe insertion. The div will cover the map, preventing pointer events from getting to it. But if you click on the div, it becomes transparent to pointer events, activating the map again!

The markup

<html>
  <div class="overlay" onClick="style.pointerEvents='none'"></div>
  <iframe src="https://mapsengine.google.com/map/embed?mid=some_map_id" width="640" height="480"></iframe>
</html>

The CSS

.overlay {
   background:transparent; 
   position:relative; 
   width:640px;
   height:480px; /* your iframe height */
   top:480px;  /* your iframe height */
   margin-top:-480px;  /* your iframe height */
}

Update:
There is a jQuery solution for this if you do not embed the map via iFrame.

$(function() {
    $('#map').click(function(e) {
        $(this).find('.gm-style').css('pointer-events', 'all');
    }).mouseleave(function(e) {
        $(this).find('.gm-style').css('pointer-events', 'none');
    });
})

And a little bit of CSS

.gm-style {
	pointer-events: none;
}

Responsive Google maps

The CSS

 .google-maps {
        position: relative;
        padding-bottom: 75%; // This is the aspect ratio
        height: 0;
        overflow: hidden;
    }
    .google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }

The HTML

<div class="google-maps">
    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d7098.94326104394!2d78.0430654485247!3d27.172909818538997!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1385710909804" width="600" height="450" frameborder="0" style="border:0"></iframe>
</div>

Clipping text using background-clip

Original article

The HTML

<h1 class="bgClip">Clip Text</h1>

The CSS

.bgClip {
    background:url('../images/clouds.jpg');
    background-repeat:repeat-x;
    background-position:0 0;
    font-size:200px;
    text-transform:uppercase;
    text-align:center;
    font-family:'Luckiest Guy';
    color:transparent;
    -webkit-font-smoothing:antialiased;
    -webkit-background-clip:text;
    -moz-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    margin:0;

If you want to animate it

-webkit-animation:BackgroundAnimated 15s linear infinite;
    -moz-animation:BackgroundAnimated 15s linear infinite;
    -ms-animation:BackgroundAnimated 15s linear infinite;
    -o-animation:BackgroundAnimated 15s linear infinite;
    animation:BackgroundAnimated 15s linear infinite;
}
    @keyframes BackgroundAnimated {
    from {
        background-position:0 0
    }
    to {
        background-position:100% 0
    }
}
    @-webkit-keyframes BackgroundAnimated {
    from {
        background-position:0 0
    }
    to {
        background-position:100% 0
    }
}
    @-ms-keyframes BackgroundAnimated {<     from {
        background-position:0 0
    }
    to {
        background-position:100% 0
    }
}
    @-moz-keyframes BackgroundAnimated {
    from {
        background-position:0 0
    }
    to {
        background-position:100% 0
    }
}

Viewport meta HTML

<meta name='viewport' content='width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no' />
<meta http-equiv='X-UA-Compatible' content='IE=edge' />