b4z81

%visuallyhidden {
  margin: -1px;
  padding: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip: rect(0, 0, 0, 0);
  position: absolute;
}

b4z81

var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery || navigator.msBattery;
if (battery) {
  // battery API supported 
}

b4z81

// enable vibration support
navigator.vibrate = navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate;
 
if (navigator.vibrate) {
    // vibration API supported
    	// vibrate for one second
	navigator.vibrate(1000);
}

b4z81

/*
1- Horizontally and vertically

Dynamic sized elements

*/

.parent { position: relative; }
 
.child {

b4z81

@mixin linkTextOffscreen() {
    text-indent: -9999px;
    overflow: hidden;
    text-decoration: none;
    display: block;
    font-size: 0;
    text-align: start;
}

b4z81

@mixin clear() {
    &:before, &:after {
        content: "\0020";
        display: block;
        height: 0;
        overflow: hidden;
    }
    &:after {
        clear: both;
    }

b4z81

@mixin vendorize($property, $value) {
	-webkit-#{$property}: $value;
	-moz-#{$property}: $value;
	-ms-#{$property}: $value;
	-o-#{$property}: $value;
	#{$property}: $value;
}

b4z81

Libraries

• jQuery - The de-facto library for the modern age. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
• Backbone - Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
• AngularJS - Conventions based MVC framework for HTML5 apps.
• Underscore - Underscore is a utility-belt library for JavaScript that provides a lot of the functional programming support that you would expect in Prototype.js (or Ruby), but without extending any of the built-in JavaScript objects.
• lawnchair - Key/value store adapter for indexdb, localStorage

b4z81

Libraries

• 960 Grid System - An effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.
• Compass - Open source CSS Authoring Framework.
• Bootstrap - Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.
• Font Awesome - The iconic font designed for Bootstrap.
• Zurb Foundation - Framework for writing responsive web sites.
• SASS - CSS extension language which allows variables, mixins and rules nesting.
• Skeleton - Boilerplate for responsive, mobile-friendly development.

Guides

b4z81

<video width="640" height="360" controls>  
    <source src="__VIDEO__.MP4"  type="video/mp4" />  
    <source src="__VIDEO__.OGV"  type="video/ogg" />  
    <object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF">   
        <param name="movie" value="__FLASH__.SWF" />   
        <param name="flashvars" value="controlbar=over&amp;image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" />   
        <img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"        title="No video playback capabilities, please download the video below" />  
    </object> 
</video>