Kerangka Template Responsive 2014

saya akan share kerangka template responsive dari dte.web.id agar sobat bloggerjateng bisa membuat dan desain template sendiri secara responsive.

Demo 3 Kolom
Download
Demo 2 Kolom

Fitur

Kerangka dasar HTML5. Ya, begitulah kira-kira:

<div id='outer-wrapper'>

     <header id='header-wrapper'>
          <h1>Lorem Ipsum</h1>
     </header>

     <nav id='nav'>
          <ul>
               <li><a href='#'>Home</a></li>
               <li><a href='#'>About</a></li>
               <li><a href='#'>Archive</a></li>
               <li><a href='#'>Comments</a></li>
          </ul>
     </nav>

     <div id='main-wrapper'>
          <article class='post hentry'>
               ...
          </article>
     </div>

     <aside id='sidebar-wrapper'>
          ...
     </aside>

     <footer id='footer-wrapper'>
          ...
     </footer>

</div>

Media queries sederhana untuk ukuran layar 740px dan 570px:

@media screen and (max-width:1024px) {
    #outer-wrapper {width:100%;}
}

@media screen and (max-width:740px) {
    #main-wrapper,
    #sidebar-wrapper {
      float:none;
      display:block;
      width:auto;
      padding:5%;
    }

    #sidebar-wrapper .widget-content {margin:0 0 10px;padding:0;}
}

@media screen and (max-width:570px) {
    #header h1 {font-size:170%;}
}

Internet Explorer dan Firefox akan menampilkan lebar elemen dengan sangat tepat (mungkin semacam pembulatan). Namun Chrome dan Opera

sepertinya memiliki peraturan yang cukup ketat mengenai persentase.

Saya sengaja memberi warna yang berbeda-beda pada setiap blok elemen

untuk melihat penyimpangan yang terjadi. Coba buka blog-blog tersebut

pada browser yang berbeda dan perhatikan celah-celah yang muncul pada

sisi-sisi sidebar dan artikel.

Cara termudah untuk mengatasi itu adalah dengan menyamakan semua warna kolom sehingga celah tidak akan tampak menggaris.

  source : dte.web.id