Cacher is the code snippet organizer for pro developers

/* #Demo
========================*/
body{
  font-family: 'Macondo';
  background:#34495e;
  overflow-x:hidden;
}
.main{text-align:center;}
h1{font-size: 4em;}
.box-ribbons{
  position: relative;
  width: 20%;
  display: inline-block;
  margin: 0 3em 0 3em;
  animation: move 0.5s infinite ease-in;
}
.divider{
  display:block;
  padding:0.5em;
  margin:2em;
}
.center{
  text-align:center;
}
@keyframes move{
  30%{transform:rotate(1deg)}
  70%{transform:rotate(-1deg)}
}
@-moz-keyframes move{
  30%{transform:rotate(1deg)}
  70%{transform:rotate(-1deg)}
}
@-webkit-keyframes move{
  30%{transform:rotate(1deg)}
  70%{transform:rotate(-1deg)}
}




/* #Global Colors
========================*/

/* Backgrounds */
.b_turquoise {background-color: #1abc9c;}
.b_green-sea {background-color: #16a085;}
.b_sun-flower {background-color: #f1c40f;}
.b_orange {background-color: #f39c12;}
.b_emerald {background-color: #2ecc71;}
.b_nephritis {background-color: #27ae60;}
.b_carrot {background-color: #e67e22;}
.b_pumkin {background-color: #d35400;}
.b_peter-river {background-color: #3498db;}
.b_belize-hole {background-color: #2980b9;}
.b_alizarin {background-color: #e74c3c;}
.b_pomegranate {background-color: #c0392b;}
.b_amethyst {background-color: #9b59b6;}
.b_wisteria {background-color: #8e44ad;}
.b_clouds {background-color: #ecf0f1;}
.b_silver {background-color: #bdc3c7;}
.b_wet-asphalt {background-color: #34495e;}
.b_midnight-blue {background-color: #2c3e50;}
.b_concrete {background-color: #95a5a6;}
.b_asbestos {background-color: #7f8c8d;}

/* Color */
.c_turquoise {color: #1abc9c;}
.c_green-sea {color: #16a085;}
.c_sun-flower {color: #f1c40f;}
.c_orange {color: #f39c12;}
.c_emerald {color: #2ecc71;}
.c_nephritis {color: #27ae60;}
.c_carrot {color: #e67e22;}
.c_pumkin {color: #d35400;}
.c_peter-river {color: #3498db;}
.c_belize-hole {color: #2980b9;}
.c_alizarin {color: #e74c3c;}
.c_pomegranate {color: #c0392b;}
.c_amethyst {color: #9b59b6;}
.c_wisteria {color: #8e44ad;}
.c_clouds {color: #ecf0f1;}
.c_silver {color: #bdc3c7;}
.c_wet-asphalt {color: #34495e;}
.c_midnight-blue {color: #2c3e50;}
.c_concrete {color: #95a5a6;}
.c_asbestos {color: #7f8c8d;}

/* Border color */
.br_turquoise,
.br_turquoise:before,
.br_turquoise:after{  border-color: #1abc9c;}
.br_green-sea,
.br_green-sea:before,
.br_green-sea:after{  border-color: #16a085;}
.br_sun-flower,
.br_sun-flower:before,
.br_sun-flower:after{  border-color: #f1c40f;}
.br_orange,
.br_orange:before,
.br_orange:after{  border-color: #f39c12;}
.br_emerald,
.br_emerald:before,
.br_emerald:after{  border-color: #2ecc71;}
.br_nephritis,
.br_nephritis:before,
.br_nephritis:after{  border-color: #27ae60;}
.br_carrot,
.br_carrot:before,
.br_carrot:after{  border-color: #e67e22;}
.br_pumkin,
.br_pumkin:before,
.br_pumkin:after{  border-color: #d35400;}
.br_peter-river,
.br_peter-river:before,
.br_peter-river:after{  border-color: #3498db;}
.br_belize-hole,
.br_belize-hole:before,
.br_belize-hole:after{  border-color: #2980b9;}
.br_alizarin,
.br_alizarin:before,
.br_alizarin:after{  border-color: #e74c3c;}
.br_pomegranate,
.br_pomegranate:before,
.br_pomegranate:after{  border-color: #c0392b;}
.br_amethyst,
.br_amethyst:before,
.br_amethyst:after{  border-color: #9b59b6;}
.br_wisteria,
.br_wisteria:before,
.br_wisteria:after{  border-color: #8e44ad;}
.br_clouds,
.br_clouds:before,
.br_clouds:after{  border-color: #ecf0f1;}
.br_silver,
.br_silver:before,
.br_silver:after{  border-color: #bdc3c7;}
.br_wet-asphalt,
.br_wet-asphalt:before,
.br_wet-asphalt:after{  border-color: #34495e;}
.br_midnight-blue,
.br_midnight-blue:before,
.br_midnight-blue:after{  border-color: #2c3e50;}
.br_concrete,
.br_concrete:before,
.br_concrete:after{  border-color: #95a5a6;}
.br_asbestos,
.br_asbestos:before,
.br_asbestos:after{  border-color: #7f8c8d;}


/* #Ribbon structure
========================*/
.ribbon {
  width: 100%;
  text-align: center;
  font-size: 17px;
}
.ribbon-title {
  font-size: 25px;
  margin:0;
  padding: 15px 10px;
}
.ribbon:before, 
.ribbon:after {
  content: "";
  position: absolute;
  display: block;
  bottom: -1em;
  border-width: 1.5em;
  border-style: solid;
  z-index: -1;
}
.ribbon:before {
  left: -2em;
  border-right-width: 1.5em;
  border-left-color: transparent;
}
.ribbon:after {
  right: -2em;
  border-left-width: 1.5em;
  border-right-color: transparent;
}
.ribbon .ribbon-content:before, 
.ribbon .ribbon-content:after {
  border-color: 
    #ffffff  transparent 
    transparent  transparent;
  position: absolute;
  display: block;
  border-style: solid;
  bottom: -1em;
  content:"";
}
.ribbon .ribbon-content:before {
  left: 0;
  border-width: 1em 0 0 1em;
}
.ribbon .ribbon-content:after {
  right: 0;
  border-width: 1em 1em 0 0;
}
.ribbon-stitches-top {
  margin-top:2px;
}
.ribbon-stitches-bottom {
  margin-bottom:2px;
}

.extra{
  width: 80%;
  margin: 0 auto;
}
.extra:before,
.extra:after{
  border-style: double;
  font-size: 1.3em;
  bottom:1em;
}
.ribbon .extra-content:before, 
.ribbon .extra-content:after {
border-color: transparent;
border-style: none;
}

$('.ribbon').on('click',function(){
  $(this).toggleClass('extra');
});

$('.ribbon-content').on('click',function(){
  $(this).toggleClass('extra-content');
});

<div class="main">
  <h1 class="c_concrete center">Flat Ribbons.</h1>
  <small class="c_concrete center">
    Click in Ribbons.
  </small>
  <div class="divider"></div>
  <div class="gallery">
    <div class="box-ribbons">
      
      <!-- turquoise -->
      <div class="ribbon b_turquoise br_turquoise">
        <div class="ribbon-stitches-top"></div>
        <strong class="ribbon-content c_clouds">
          <h1 class="ribbon-title">Turquoise</h1>
        </strong>
        <div class="ribbon-stitches-bottom"></div>
      </div>
      
    </div>
    
    
    <div class="box-ribbons">
      
      <!-- green-sea -->
      <div class="ribbon b_green-sea br_green-sea">
        <div class="ribbon-stitches-top"></div>
        <strong class="ribbon-content c_clouds">
          <h1 class="ribbon-title">Green sea</h1>
        </strong>
        <div class="ribbon-stitches-bottom"></div>
      </div>
      
    </div>
    
    
    
    <div class="box-ribbons">
      
      <!-- sun-flower -->
      <div class="ribbon b_sun-flower br_sun-flower">
        <div class="ribbon-stitches-top"></div>
        <strong class="ribbon-content c_clouds">
          <h1 class="ribbon-title">Sun flower</h1>
        </strong>
        <div class="ribbon-stitches-bottom"></div>
      </div>
      
    </div>
    
  </div>
  
  <div class="divider"></div>
  
  <div class="gallery">
    <div class="box-ribbons">
      
      <!-- orange -->
      <div class="ribbon b_orange br_orange">
        <div class="ribbon-stitches-top"></div>
        <strong class="ribbon-content c_clouds">
          <h1 class="ribbon-title">Orange</h1>
        </strong>
        <div class="ribbon-stitches-bottom"></div>
      </div>
      
    </div>
    
    
    <div class="box-ribbons">
      
      <!-- emerald -->
      <div class="ribbon b_emerald br_emerald">
        <div class="ribbon-stitches-top"></div>
        <strong class="ribbon-content c_clouds">
          <h1 class="ribbon-title">Emerald</h1>
        </strong>
        <div class="ribbon-stitches-bottom"></div>
      </div>
      
    </div>
    
    
    
    <div class="box-ribbons">
      
      <!-- nephritis -->
      <div class="ribbon b_nephritis br_nephritis">
        <div class="ribbon-stitches-top"></div>
        <strong class="ribbon-content c_clouds">
          <h1 class="ribbon-title">Nephritis</h1>
        </strong>
        <div class="ribbon-stitches-bottom"></div>
      </div>
      
    </div>
  </div>
  
  <div class="divider"></div>
  
  <div class="gallery">
    <div class="box-ribbons">
      
      <!-- carrot -->
      <div class="ribbon b_carrot br_carrot">
        <div class="ribbon-stitches-top"></div>
        <strong class="ribbon-content c_clouds">
          <h1 class="ribbon-title">Carrot</h1>
        </strong>
        <div class="ribbon-stitches-bottom"></div>
      </div>
      
    </div>
    
    
    <div class="box-ribbons">
      
      <!-- carrot -->
      <div class="ribbon b_pumkin br_pumkin">
        <div class="ribbon-stitches-top"></div>
        <strong class="ribbon-content c_clouds">
          <h1 class="ribbon-title">Pumkin</h1>
        </strong>
        <div class="ribbon-stitches-bottom"></div>
      </div>
      
    </div>
    
    
    <div class="box-ribbons">
      
      <!-- peter-river -->
      <div class="ribbon b_peter-river br_peter-river">
        <div class="ribbon-stitches-top"></div>
        <strong class="ribbon-content c_clouds">
          <h1 class="ribbon-title">Peter river</h1>
        </strong>
        <div class="ribbon-stitches-bottom"></div>
      </div>
      
    </div>
  </div>
  
  <div class="divider"></div>
  
  <div class="gallery">
    <div class="box-ribbons">
      
      <!-- belize-hole -->
      <div class="ribbon b_belize-hole br_belize-hole">
        <div class="ribbon-stitches-top"></div>
        <strong class="ribbon-content c_clouds">
          <h1 class="ribbon-title">Belize hole</h1>
        </strong>
        <div class="ribbon-stitches-bottom"></div>
      </div>
      
    </div>
    
    
    
    <div class="box-ribbons">
      
      <!-- alizarin -->
      <div class="ribbon b_alizarin br_alizarin">
        <div class="ribbon-stitches-top"></div>
        <strong class="ribbon-content c_clouds">
          <h1 class="ribbon-title">Alizarin</h1>
        </strong>
        <div class="ribbon-stitches-bottom"></div>
      </div>
      
    </div>
    
    
    
    <div class="box-ribbons">
      
      <!-- Pomegranate -->
      <div class="ribbon b_pomegranate br_pomegranate">
        <div class="ribbon-stitches-top"></div>
        <strong class="ribbon-content c_clouds">
          <h1 class="ribbon-title">Pomegranate</h1>
        </strong>
        <div class="ribbon-stitches-bottom"></div>
      </div>
      
    </div>
  </div>
  
  <div class="divider"></div>
  
  <div class="gallery">
    
    <div class="box-ribbons">
      
      <!-- Amethyst -->
      <div class="ribbon b_amethyst br_amethyst">
        <div class="ribbon-stitches-top"></div>
        <strong class="ribbon-content c_clouds">
          <h1 class="ribbon-title">Amethyst</h1>
        </strong>
        <div class="ribbon-stitches-bottom"></div>
      </div>
      
    </div>
    
    <div class="box-ribbons">
      
      <!-- wisteria -->
      <div class="ribbon b_wisteria br_wisteria">
        <div class="ribbon-stitches-top"></div>
        <strong class="ribbon-content c_clouds">
          <h1 class="ribbon-title">Wisteria</h1>
        </strong>
        <div class="ribbon-stitches-bottom"></div>
      </div>
      
    </div>
    
    
    <div class="box-ribbons">
      
      <!-- clouds -->
      <div class="ribbon b_clouds br_clouds">
        <div class="ribbon-stitches-top"></div>
        <strong class="ribbon-content c_midnight-blue">
          <h1 class="ribbon-title">Clouds</h1>
        </strong>
        <div class="ribbon-stitches-bottom"></div>
      </div>
      
    </div>
  </div>
  
  <div class="divider"></div>
  
  <div class="gallery">
    <div class="box-ribbons">
      
      <!-- silver -->
      <div class="ribbon b_silver br_silver">
        <div class="ribbon-stitches-top"></div>
        <strong class="ribbon-content c_midnight-blue">
          <h1 class="ribbon-title">Silver</h1>
        </strong>
        <div class="ribbon-stitches-bottom"></div>
      </div>
      
    </div>
    
    
    <div class="box-ribbons">
      
      <!-- concrete -->
      <div class="ribbon b_concrete br_concrete">
        <div class="ribbon-stitches-top"></div>
        <strong class="ribbon-content c_midnight-blue">
          <h1 class="ribbon-title">Concrete</h1>
        </strong>
        <div class="ribbon-stitches-bottom"></div>
      </div>
      
    </div>
    
    
    <div class="box-ribbons">
      
      <!-- asbestos -->
      <div class="ribbon b_asbestos br_asbestos">
        <div class="ribbon-stitches-top"></div>
        <strong class="ribbon-content c_midnight-blue">
          <h1 class="ribbon-title">Asbestos</h1>
        </strong>
        <div class="ribbon-stitches-bottom"></div>
      </div>
      
    </div>
  </div>
</div>

<div class="divider"></div>
<br />

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Macondo" />