Javascript
Delay image loading
JavaScript method to delay the load of images and make the page respond faster especially on slow connections.
Idea is kindly borrowed from Christian Heilmann.
<ul class="list-unstyled">
<li><img src="http://placehold.it/400x100/f1f1f1/cfcfcf" /></li>
<li><img src="http://placehold.it/400x100/f1f1f1/cfcfcf" /></li>
<template data-delay-image-loading>
<li><img src="http://placehold.it/400x100/f1f1f1/cfcfcf?text=delayed" /></li>
<li><img src="http://placehold.it/400x100/f1f1f1/cfcfcf?text=delayed" /></li>
</template>
</ul>
Disable hover
A disable hover (.disable-hover) class is added to the body. This class prevents pointer events so there won't be any hover effect repaints, just the repaints for scrolling. This results in a better scrolling performance.
Fastclick
Polyfill to remove click delays on browsers with touch UIs
Fitvids
A lightweight, easy-to-use jQuery plugin for fluid width video embeds. Use the class fitvids as a container for your video and the plugin will take care of the rest.
Group checkable
<input name="checkbox" type="checkbox" id="checkbox" data-group-checkable="checkable-example" /><label for="checkbox">Check all</label>
<ul class="form__input-list list-unstyled">
<li><input name="checkbox" type="checkbox" id="checkbox1" data-group-checkable-target="checkable-example" /><label for="checkbox1">Checkbox</label></li>
<li><input name="checkbox" type="checkbox" id="checkbox2" data-group-checkable-target="checkable-example" /><label for="checkbox2">Checkbox</label></li>
<li><input name="checkbox" type="checkbox" id="checkbox3" data-group-checkable-target="checkable-example" /><label for="checkbox3">Checkbox</label></li>
</ul>
Jump
<a href="#background" data-jumpto>Jump to background id</a>
Leave
Show a message when leaving the page and form elements are edited.
Seperate input
<input type="text" data-leave-target />
Entire form
<form data-leave-target />
<input type="text" />
<input type="text" />
</form>