Cacher is the code snippet organizer for pro developers

img{
  display:block;
  width:100%;
}
.box, .thumbnail {
  display: block;
  padding: 1em;
  margin-top:15%;
}
.box div{
  margin-bottom:3em;
}
a.button.icon.download,
a.button.icon.mail,
a.button.icon.phone{
  line-height: 1.8;
}
@media (max-width:768px){
  .box, .thumbnail {
    display: block;
    padding: 1em;
    margin-top:0%;
  }
}

$.ui.ready(
  function(){
    // overflow in descktop
    $("#home").css("overflow", "auto");
    // Use themes 
    $.ui.useOSThemes=true;
    // url
    var link = 'http://codepen.io/nakome/pen/waDyI.js',
        menus = '',
        container = '';
    // get Json
    $.getJSON(link,function(data){
      $.each(data.gallery,function(i,e){
        
        // Template for menu
        menus += '<li><a href="#id_'+e.id+'" class="icon picture big">'+
          e.author+'</a></li>';
        
       // Template for pages
        container +='<div class="panel" id="id_'+e.id+'"'+
        'data-footer="none">'+
         '<header>'+
        '<a id="backButton" class="button backButton">Back</a>'+
          '<h1>'+e.author+'</h1></header>'+
          '<div class="grid">'+
            '<div class="col2">'+
                '<span class="thumbnail">'+
                 '<img src="'+e.photo+'" alt="'+e.author+'"/>'+
                '</span>'+
            '</div>'+
            '<div class="col2">'+
              '<span class="box">'+
                 '<h2>'+e.title+'</h2>'+
                 '<div>'+e.content+'</div>'+
                  '<div class="button-grouped flex">'+
                      '<a class="button icon download black">Download</a>'+
                      '<a class="button icon phone black">Phone</a>'+
                      '<a class="button icon mail black">Mail</a>'+
                  '</div>'+
              '</span>'+
            '</div>'+
          '</div>'+
          '</div>';
        
      });
      // render menu
      $.ui.updatePanel("menu",menus);
      // render pages
      $.ui.updateContentDiv("#pages",container); 
    });
  }
);

<!-- PAGE -->
<div id="afui" class="ios7">
  
  <!-- LOADING -->
  <div id="splashscreen" class="ui-loader">
    <h1>Best Photos</h1><br />
    <span class="ui-icon ui-icon-loading spin margin"></span><br />
    <h1>Of the Web</h1>
  </div>

  <!-- CONTENT -->
  <div id="content">
    
    <!-- HOME -->
    <div class="panel" id="home" selected="true">
      
      <!-- HEADER -->
      <header>
        <h1>Best Photos of the Web</h1>
      </header>
      
      <!-- CONTAINER -->
      <ul class="list" id="menu"></ul>
      
      <!-- FOOTER -->
      <footer>
        <a class="icon settings" href="#settings">Settings</a>
        <a class="icon bug" href="#bugs">Bugs</a>
        <a class="icon info" href="#info">Info</a>
      </footer>

    </div><!-- / HOME -->

    
    <!-- REST OF PAGES -->
   <div id="pages"></div>   
    

    <!-- SETTINGS -->
    <div class="panel" id="settings" modal="true"> COMING SOON </div>
    <!-- BUGS -->
    <div class="panel" id="bugs" modal="true"> COMING SOON </div>
    <!-- INFO -->
    <div class="panel" id="info" modal="true"> COMING SOON </div>

  </div>
  <!-- LEFT ASIDE -->
  <div id="navbar"></div>
</div>