st3phan

// HOWTO: load LABjs itself dynamically!
// inline this code in your page to load LABjs itself dynamically, if you're so inclined.

(function (global, oDOC, handler) {
    var head = oDOC.head || oDOC.getElementsByTagName("head");

    function LABjsLoaded() {
        // do cool stuff with $LAB here
    }

st3phan

/**
 * For a current project I need to wait to execute a code until some images have been loaded.
 * Beside, I also need to execute a callback (in my specific code I want to show the image 
 * with a fade-in effect) every time a single image has been loaded.
 *
 * So basically I used two deferred objects: the nested one which is resolved for a single 
 * image successfull load event (or when image has been discarded) and the outside one, 
 * which is resolved when all deferred objects on single images have been resolved or rejected.
 *
 * This snippet also takes care all frequent issues when trying to load an image (excessive 

st3phan

@media only screen and (min-device-width: 320px) and (max-device-width: 1024px)
     html
        -webkit-text-size-adjust: none

st3phan

window.onresize = function() {
    responsiveLoad();
}

window.onload = function() {
    responsiveLoad();
}

function responsiveLoad() {
    console.log('resized');

st3phan

/*
 * Author: http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/
 */

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

st3phan

/* Centered heading with rules */
h1 {
	position: relative;
	overflow: hidden;
	white-space: nowrap;
	text-align: center;
	text-overflow: ellipsis;

	font: 1.6em/1.1 Georgia;
	padding: .2em 0;

st3phan

// deferred obj callback
function loadImg(selector) {
  var dfd = $.Deferred();
  $(selector).load(function() { dfd.resolve(); });
  return dfd.promise();
}

// more elements
$.when(
  loadImg('#img1'),

st3phan

.test, .test2 {
	width: 200px;
	height: 200px;
	background: green;
	border-radius: 500px;
	position: relative;
	transition: all 2s linear;
}
.test2:hover {
	transform: translate(20px, 0);

st3phan

#!/usr/bin/env sh

##
# This is script with usefull tips taken from:
#   https://github.com/mathiasbynens/dotfiles/blob/master/.osx
#
# install it:
#   curl -sL https://raw.github.com/gist/2108403/hack.sh | sh
#

st3phan

// Using this structure, this file should be your canonical stylesheet where
// everything would be imported into, so that you can just `@import "shared";`
// in both your normal and IE stylesheets, only having to add libraries and
// such in one place.

// These styles are just a contrived example.
body {
  font-size: 18px;
  @include respond-to(desktops) {
    color: blue;