Cacher is the code snippet organizer for pro developers

body{
  margin:0;
  padding:0;
  background:#fff;
}
a{
  color: #80C5FC;
  text-decoration: none;
}
#twitter{
  display:block;
  padding:0;
  margin:0;
  transform:scale(0);
  column-count:3;
  column-gap:5px;
}
.tweet_item{
  display: inline-block;
  margin:10px auto;
  background: #FFF;
  border-radius: 4px;
  border: 1px solid #eee;
  box-shadow: 0 1px 2px #eee;
  font-family: 'Lato', sans-serif;
  font-weight: 400;
}

.user{
  background: #F5F5F5;
  min-height: 66px;
  display: block;
  width: 100%;
  position: relative;
  border-bottom: 1px solid #E0E0E0;
}
.user a img {
  position: absolute;
  left: 22px;
  top: 5px;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  border: 4px solid #eee;
}
.user > a > span{
  position: absolute;
  top: 15px;
  left: 105px;
  margin: auto;
  overflow: hidden;
  color: #1ABC9C;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
}
.user > a > span + span{
  position: absolute;
  top: 35px;
  left: 105px;
  margin: auto;
  overflow: hidden;
  color: #95A5A6;
}
.tweet{
  text-align: center;
  color: #888;
  margin: 5px auto;
  padding: 5px;
  word-wrap: break-word;
  word-break: break-all;
}
.interact {
  border-top: 1px solid #eee;
  margin: 0;
  margin-top: 10px;
  padding: 0;
  width: 100%;
}
.interact a {
  display: inline-block;
  padding: 5px 10px;
  background: #FFF;
  margin-left: 2px;
  color: #eee;
  border-left: 1px solid #eee;
  transition:color 0.5s ease;
}
.interact a:hover{
  color:#1ABC9C;
  transition:color 0.5s ease;
}

@media (max-width: 1200px) {
  #twitter {
    column-count:         4;
  }
}
@media (max-width: 1000px) {
  #twitter {
    column-count:         3;
  }
}
@media (max-width: 800px) {
  #twitter {
    column-count:         2;
  }
}
@media (max-width: 400px) {
  #twitter {
    column-count:         1;
  }
}

<script src="https://dl.dropboxusercontent.com/u/23834858/api/twitterFetcher.min.js"></script>

var last_tweets = (function(){
  'use-strict';
  return{
    config: {
      "id": '247775695206490113',
      "maxTweets":12,
      "enableLinks": true,
      "showUser": true,
      "showTime": false,
      "dateFunction": '',
      "showRetweet": true,
      "customCallback": tmpl,
      "showInteraction": true
    },
    run:function(){
      // http://www.jasonmayes.com/projects/twitterApi/
      twitterFetcher.fetch(this.config); 
    }
  };
})();

// run 
last_tweets.run();



function tmpl(t){
  var x = t.length,n = 0,
      tag = _('#twitter'),
      html = '';
  while(n < x) {
    html += '<div class="tweet_item">'+ t[n] +'</div>';
    n++;}
  tag.innerHTML = html;
  scale(tag,'1','0.8s');  
}





// reusable functions

// transform array
var transform = [
  "transform","msTransform","webkitTransform",
  "mozTransform","oTransform"],

    transition = [
      "transition","msTransition","webkitTransition",
      "mozTransition","oTransition"],

    transformProp = prefix(transform),
    transitionProp = prefix(transition);



// short querySelector
function  _(el){
  return document.querySelector(el);
}

// scale
function scale(el,to,time){
  el.style[transformProp] ='scale('+to+')';
  el.style[transitionProp] = 'all '+time+' ease';
}

// prefix transform
function prefix(prop) {
  // loop property
  for (var i = 0; i < prop.length; i++) {
    // if not undefined
    if (typeof document.body.style[prop[i]] != "undefined") {
      return prop[i];
    }
  }
  return null;
}

  <div id="twitter"></div>