Cacher is the code snippet organizer for pro developers

body{
  margin:0;
  padding:0;
  background:#3498DB;
}
#box{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 300px;
  height: 200px;
  background: #FFF;
  overflow: hidden;
  border-radius: 4px;
  border: 3px solid #EBEBEB;
  box-shadow: 0 1px 2px #1F4DA2;
}
#cover {
  position: absolute;
  top: 0;
  left: 0;
  background: url(https://dl.dropboxusercontent.com/u/23834858/fotos/loader.gif) no-repeat center center #FFF;
  width: 300px;
  height: 200px;
  z-index: 999;
}
#tumb img {
  position: absolute;
  left: 20px;
  top: 12px;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  border: 4px solid #3498DB;
}
#title{
  position: absolute;
  top: 30px;
  left: 142px;
  margin: auto;
  overflow: hidden;
  color: #3498DB;
}
#description{
  position: absolute;
  top: 60px;
  left: 162px;
  margin: auto;
  overflow: hidden;
  color: #1ABC9C;
}
#content{
  position: absolute;
  top: 115px;
  left: 5px;
  width: 290px;
  text-align: center;
  color: #7F8C8D;
}

/*
* Micro framework templating
* example mk.tpl('body',{title:'title'},callback);
* call with $(title)
*/
var mk=(function(){'use strict';return{tpl:function(element,args,callback){var el=document.querySelector(element);if(!el) return;var b = el.innerHTML,c = this.df(b,args);el.innerHTML= c;if(typeof callback !== 'undefined'){callback(el);}},df: function(b, d){var re = /\$\(|\)/,u = b.split(re),c = u.length;for (var i = 1; i < c; i++){if (d.hasOwnProperty(u[i])){u[i] = d[u[i]];}}var s = u.join('');return s;}};})();



mk.tpl('#box',{
  img : '<img src="https://dl.dropboxusercontent.com/u/23834858/fotos/alice.jpg"/>',
  title: '<h3>Call Me Now</h3>',
  description: "<h4>It's Free !</h4>",
  content: '<p>Great new pay as you go rates to mobiles and landlines</p>'
},init);


function init(e){
  var p = document.getElementById('cover'),
      t = document.getElementById('title'),
      i = document.getElementById('tumb'),
      c = document.getElementById('content'),
      d = document.getElementById('description');
  
  TweenLite.from(e, 0.5, {scale:0.1,opacity:0});
  TweenLite.to(p, 1, {opacity:0}).delay(0.5);
  TweenLite.from(i, 1, {opacity:0.2}).delay(1);
  TweenLite.from(t, 1, {top:'-500px'}).delay(1.2);
  TweenLite.from(d, 1, {top:'500px'}).delay(1.5);
  TweenLite.from(c, 1, {left:'500px'}).delay(2);
}

<div id="box">
  <div id="cover"></div>
    <div id="tumb">$(img)</div>
    <div id="title">$(title)</div>
    <div id="description">$(description)</div>
    <div id="content">$(content)</div>
</div>