Framework CSS · Utamakan Konsistensi Tampilan Artikel Sebelum Layout

Tabel Konten
  1. Contoh Buruk 
  • Merancang Framework CSS 
    1. CSS Reset 
    2. Elemen <BODY> 
    3. Huruf Tebal, Huruf Miring dan Elemen-Elemen Kecil Lainnya 
    4. Margin Paragraf 
    5. Elemen Heading 
    6. Elemen Daftar 
    7. Elemen Formulir 
    8. Blok Kode dan Kuota 
    9. Tabel 
  • Hasil Akhir 
    1. Beralih ke Framework Buatan Sendiri 
  • CSS Framework

    Yang Saya maksudkan di sini adalah, jadikan tampilan artikel sebagai prioritas utama sebelum memulai pondasi desain/rancangan tema/template. Mengingat kebiasaan buruk yang sering terjadi adalah kita membentuk hasil jadinya terlebih dahulu kemudian baru merancang tampilan-tampilan paragraf, kuota dan blok kode. Padahal, dengan merancang elemen-elemen kecil dan umum tersebut terlebih dahulu, kita bisa memastikan bahwa tampilan akhir nantinya akan menjadi lebih konsisten.

    Merancang penampilan secara keseluruhan dan melanjutkannya dengan merancang tampilan elemen artikel hanya akan menambah waktu kerja kita menjadi dua kali lipat lebih lama dan lebih rumit tanpa kita sadari. Sebagai contoh, saat kita merancang tampilan posting, saat itu kita juga akan menentukan tampilan judulnya. Setelah itu kita akan merancang tampilan sidebar dan footer, kemudian juga akan menentukan tampilan judulnya dan seterusnya:

    Contoh Buruk 

    /* posting */
    .post {
      font-family:Arial,Sans-Serif;
      font-size:12px;
      color:#333;
    }
    
    .post h2 {
      font-size:30px;
      font-weight:bold;
      margin-bottom:15px;
      color:#3399ff;
    }
    
    /* sidebar */
    .sidebar {
      float:right;
      width:200px;
      overflow:hidden;
      word-wrap:break-word;
      font-family:Arial,Sans-Serif;
      color:#222;
    }
    
    .sidebar h2 {
      font-weight:normal;
      font-size:12px;
      text-transform:uppercase;
      margin-bottom:15px;
    }
    
    /* footer */
    .footer {
      background-color:#2f2f2f;
      font-family:Georgia,Serif;
      font-size:13px;
      color:#666;
    }
    
    .footer h2 {
      font-weight:normal;
      font-size:20px;
      color:#f5f5f5;
    }

    Terlalu banyak pekerjaan hanya untuk membuat beberapa blok area saja. Seharusnya pekerjaan ini bisa menjadi lebih singkat apabila kita merancang framework elemen-elemen artikel terlebih dahulu secara global. Sudah ada beberapa framework yang tersedia untuk mengatasi kebiasaan buruk ini, misalnya Normalize dan HTML5 Boilerplate. Tapi di sini kita akan mencoba untuk membuatnya sendiri. Dimulai dengan CSS reset.

    Merancang Framework CSS 

    CSS Reset 

    CSS ini akan menormalkan semua tampilan elemen HTML —kecuali elemen-elemen formulir— menjadi seragam/normal. Dimulai dari ukuran, warna, margin, padding, dimensi dan juga ketebalannya. Mengawali rancangan elemen artikel dengan CSS reset akan mempermudah kita dalam merancang tampilan elemen-elemen HTML setelah ini:

    /* http://meyerweb.com/eric/tools/css/reset/
       v2.0 | 20110126
       License: none (public domain)
    */
    html,body,div,span,
    applet,object,iframe,
    h1,h2,h3,h4,h5,h6,
    p,blockquote,pre,
    a,abbr,acronym,address,
    big,cite,code,del,dfn,
    em,img,ins,kbd,q,
    s,samp,small,strike,strong,
    sub,sup,tt,
    var,b,u,i,center,
    dl,dt,dd,
    ol,ul,li,
    fieldset,form,label,legend,
    table,caption,tbody,tfoot,thead,tr,th,td,
    article,aside,canvas,details,embed,
    figure,figcaption,
    footer,header,hgroup,menu,nav,
    output,ruby,
    section,summary,
    time,mark,audio,video {
      margin:0;
      padding:0;
      border:0;
      font-size:100%;
      font:inherit;
      vertical-align:baseline;
    }
    
    /* HTML5 display-role reset for older browsers */
    article,aside,details,
    figcaption,figure,footer,
    header,hgroup,menu,nav,section {
      display:block;
    }
    
    body {
      line-height:1;
    }
    
    ol,ul {
      list-style:none;
    }
    
    blockquote,q {
      quotes:none;
    }
    
    blockquote:before,
    blockquote:after,
    q:before,
    q:after {
      content:'';
      content:none;
    }
    
    table {
      border-collapse:collapse;
      border-spacing:0;
    }

    Elemen <BODY> 

    Berikutnya kita atur ukuran huruf, tipe huruf, line-height dan warna huruf secara global pada elemen <body>:

    body {
      /* `font-style:normal`,
         `font-weight:normal`,
         `font-size:13px`,
         `line-height:1.4em`,
         `font-family:Arial,Sans-Serif` */
      font:normal normal .8125em/1.4 Arial,Sans-Serif;
      background-color:white; /* warna latar secara global */
      color:#333; /* warna huruf secara global */
    }

    Huruf Tebal, Huruf Miring dan Elemen-Elemen Kecil Lainnya 

    Karena tampilan elemen HTML sudah diatur ulang oleh CSS reset, maka kita perlu mengatur beberapa tampilan elemen menjadi seperti semula:

    /* huruf tebal */
    strong,b {
      font-weight:bold;
    }
    
    /* citation & huruf miring (italic + emphasis) */
    cite,em,i {
      font-style:italic;
    }
    
    /* tautan */
    a {
      text-decoration:none;
    }
    
    a:hover {
      text-decoration:underline;
    }
    
    /* Internet Explorer akan menambahkan border pada gambar
       yang diliputi oleh tautan */
    a img {
      border:none;
    }
    
    /* abbreviation & acronym */
    abbr,
    acronym {
      border-bottom:1px dotted;
      cursor:help;
    }
    
    /* superscript & subscript */
    sup,
    sub {
      vertical-align:baseline;
      position:relative;
      top:-.4em;
      font-size:86%;
    }
    
    sub {
      top:.4em;
    }
    
    /* huruf kecil */
    small {
      font-size:86%;
    }
    
    /* tombol keyboard */
    kbd {
      font-size:80%;
      border:1px solid #999;
      padding:2px 5px;
      border-bottom-width:2px;
      border-radius:3px;
    }
    
    /* penanda teks */
    mark {
      background-color:#ffce00;
      color:black;
    }

    Margin Paragraf 

    Paragraf membutuhkan kerenggangan antara teks paragraf yang satu dengan yang lainnya. Begitu pula elemen-elemen lain yang biasa menyertainya seperti kuota, tabel, figur, formulir, daftar dan blok kode:

    p,blockquote,pre,
    table,figure,hr,form,
    ol,ul,dl {
      margin:1.5em 0;
    }

    Elemen Heading 

    Atur elemen heading dengan line-height menjadi normal dan huruf menjadi tebal. Tentukan juga margin heading secara global sebelum kemudian kita melanjutkannya dengan menentukan ukuran elemen heading sesuai dengan level/tingkatannya:

    h1,h2,h3,h4,h5,h6 {
      font-weight:bold;
      line-height:normal;
      margin:1.5em 0 0;
    }
    
    h1 {font-size:200%}
    h2 {font-size:180%}
    h3 {font-size:160%}
    h4 {font-size:140%}
    h5 {font-size:120%}
    h6 {font-size:100%}

    Elemen Daftar 

    Jangan biarkan elemen daftar menjadi terlalu sejajar dengan paragraf karena pada umumnya itu hanya akan membuat mata kita menjadi merasa tidak nyaman dan tertekan. Posisikan elemen daftar menjadi sedikit menjorok ke depan untuk menciptakan kesan istirahat/fokus:

    /* ordered, unordered list & description list */
    ol,ul,dl {margin-left:3em}
    
    ol {list-style:decimal outside} /* atur ulang `list-style` pada elemen `<ol>` */
    ul {list-style:disc outside} /* atur ulang `list-style` pada elemen `<ul>` */
    li {margin:.5em 0} /* beri sedikit jarak atas dan bawah pada elemen `<li>` untuk item daftar dengan konten yang panjang */
    
    dt {font-weight:bold}
    dd {margin:0 0 .5em 2em}

    Elemen Formulir 

    Biasanya ini tidak terlalu penting. Tetapi setidaknya samakanlah tipe dan ukuran huruf sesuai dengan huruf pada elemen induknya. Mengenai tampilan selanjutnya seperti warna latar dan efek :hover bisa ditentukan nanti setelah framework selesai dibuat:

    input,
    button,
    select,
    textarea {
      font:inherit;
      font-size:100%;
      line-height:normal;
      vertical-align:baseline;
    }
    
    /* mengeset `box-sizing` menjadi `border-box` pada `<textarea>` untuk mengatasi masalah
       pengguna yang sering kesulitan menentukan lebar akurat
       pada elemen ini menjadi `100%` ketika menggunakan logika box-model yang lama */
    textarea {
      display:block;
      -webkit-box-sizing:border-box;
      -moz-box-sizing:border-box;
      box-sizing:border-box;
    }

    Blok Kode dan Kuota 

    <pre> dan <blockquote> biasanya mendapatkan perlakuan khusus mengingat elemen ini biasa kita gunakan untuk menyatakan hal-hal yang penting. Blok kode digunakan untuk menyatakan kode yang perlu dicatat/dipahami dan kuota digunakan untuk menyatakan teks yang perlu diingat atau direnungkan:

    pre,
    code {
      font-family:"Courier New",Courier,Monospace;
      color:inherit;
    }
    
    /* jika perlu tentukan juga warna latar dan huruf */
    pre {
      white-space:pre;
      word-wrap:normal;
      overflow:auto;
    }
    
    blockquote {
      margin-left:2em;
      margin-right:2em;
      border-left:4px solid #ccc;
      padding-left:1em;
      font-style:italic;
    }

    Tabel 

    Seperti yang pernah Saya nyatakan pada tutorial pembuatan tabel dengan HTML, disarankan untuk menentukan border dan padding pada tabel yang memiliki atribut border=1 saja demi keamanan:

    table[border="1"] th,
    table[border="1"] td,
    table[border="1"] caption {
      border:1px solid;
      padding:.5em 1em;
      text-align:left;
      vertical-align:top;
    }
    
    th {
      font-weight:bold;
    }
    
    table[border="1"] caption {
      border:none;
      font-style:italic;
    }

    Hasil Akhir 

    /* http://meyerweb.com/eric/tools/css/reset/
       v2.0 | 20110126
       License: none (public domain)
    */
    html,body,div,span,
    applet,object,iframe,
    h1,h2,h3,h4,h5,h6,
    p,blockquote,pre,
    a,abbr,acronym,address,
    big,cite,code,del,dfn,
    em,img,ins,kbd,q,
    s,samp,small,strike,strong,
    sub,sup,tt,
    var,b,u,i,center,
    dl,dt,dd,
    ol,ul,li,
    fieldset,form,label,legend,
    table,caption,tbody,tfoot,thead,tr,th,td,
    article,aside,canvas,details,embed,
    figure,figcaption,
    footer,header,hgroup,menu,nav,
    output,ruby,
    section,summary,
    time,mark,audio,video {
      margin:0;
      padding:0;
      border:0;
      font-size:100%;
      font:inherit;
      vertical-align:baseline;
    }
    
    /* HTML5 display-role reset for older browsers */
    article,aside,details,
    figcaption,figure,footer,
    header,hgroup,menu,nav,section {
      display:block;
    }
    
    body {
      line-height:1;
    }
    
    ol,ul {
      list-style:none;
    }
    
    blockquote,q {
      quotes:none;
    }
    
    blockquote:before,
    blockquote:after,
    q:before,
    q:after {
      content:'';
      content:none;
    }
    
    table {
      border-collapse:collapse;
      border-spacing:0;
    }
    
    /* ===============
       FRAMEWORK START
       =============== */
    body {
      font:normal normal .8125em/1.4 Arial,Sans-Serif;
      background-color:white;
      color:#333;
    }
    
    strong,b {
      font-weight:bold;
    }
    
    cite,em,i {
      font-style:italic;
    }
    
    a {
      text-decoration:none;
    }
    
    a:hover {
      text-decoration:underline;
    }
    
    a img {
      border:none;
    }
    
    abbr,
    acronym {
      border-bottom:1px dotted;
      cursor:help;
    }
    
    sup,
    sub {
      vertical-align:baseline;
      position:relative;
      top:-.4em;
      font-size:86%;
    }
    
    sub {
      top:.4em;
    }
    
    small {
      font-size:86%;
    }
    
    kbd {
      font-size:80%;
      border:1px solid #999;
      padding:2px 5px;
      border-bottom-width:2px;
      border-radius:3px;
    }
    
    mark {
      background-color:#ffce00;
      color:black;
    }
    
    p,blockquote,pre,
    table,figure,hr,form,
    ol,ul,dl {
      margin:1.5em 0;
    }
    
    hr {
      height:1px;
      border:none;
      background-color:#666;
    }
    
    h1,h2,h3,h4,h5,h6 {
      font-weight:bold;
      line-height:normal;
      margin:1.5em 0 0;
    }
    
    h1 {font-size:200%}
    h2 {font-size:180%}
    h3 {font-size:160%}
    h4 {font-size:140%}
    h5 {font-size:120%}
    h6 {font-size:100%}
    
    ol,ul,dl {margin-left:3em}
    ol {list-style:decimal outside}
    ul {list-style:disc outside}
    li {margin:.5em 0}
    
    dt {font-weight:bold}
    dd {margin:0 0 .5em 2em}
    
    input,
    button,
    select,
    textarea {
      font:inherit;
      font-size:100%;
      line-height:normal;
      vertical-align:baseline;
    }
    
    textarea {
      display:block;
      -webkit-box-sizing:border-box;
      -moz-box-sizing:border-box;
      box-sizing:border-box;
    }
    
    pre,
    code {
      font-family:"Courier New",Courier,Monospace;
      color:inherit;
    }
    
    pre {
      white-space:pre;
      word-wrap:normal;
      overflow:auto;
    }
    
    blockquote {
      margin-left:2em;
      margin-right:2em;
      border-left:4px solid #ccc;
      padding-left:1em;
      font-style:italic;
    }
    
    table[border="1"] th,
    table[border="1"] td,
    table[border="1"] caption {
      border:1px solid;
      padding:.5em 1em;
      text-align:left;
      vertical-align:top;
    }
    
    th {
      font-weight:bold;
    }
    
    table[border="1"] caption {
      border:none;
      font-style:italic;
    }

    Sampai di sini Saya rasa sudah cukup untuk dijadikan sebagai dasar. Setelah ini Anda bisa melanjutkan untuk membuat kelas-kelas produktif seperti .hidden, .visually-hidden, .btn dan yang lainnya untuk keperluan rancangan tingkat lanjut:

    .hidden,[hidden] {
      display:none;
    }
    
    .invisible {
      visibility:hidden;
    }
    
    .visually-hidden {
      position:absolute !important;
      overflow:hidden;
      clip:rect(0px 0px 0px 0px);
      clip:rect(0px,0px,0px,0px);
      height:1px;
      width:1px;
      margin:-1px 0 0;
      padding:0;
      border:0;
    }
    
    .clear {
      display:block;
      clear:both;
    }
    
    .clearfix:before,
    .clearfix:after {
      content:"";
      display:table;
    }
    
    .clearfix:after {
      clear:both;
    }
    
    .clearfix {
      *zoom:1;
    }
    
    .pull-left {
      float:left;
    }
    
    .pull-right {
      float:right;
    }
    
    .centered {
      clear:both;
      display:block;
      text-align:center;
      margin-left:auto;
      margin-right:auto;
    }
    
    .text-center {
      text-align:center;
    }
    
    .text-left {
      text-align:left;
    }
    
    .text-right {
      text-align:right;
    }
    
    .text-justify {
      text-align:justify;
    }
    
    .btn {
      color:white;
      background-color:black;
      /* ... */
    }
    
    .btn:hover {
      /* ... */
    }
    
    .btn:active {
      /* ... */
    }

    Beberapa nama kelas di atas akan sangat mudah Anda temui pada framework HTML5 Boilerplate dan Twitter Bootstrap (Twitter Bootstrap juga memakai HTML5 Boilerplate). Anda akan mengetahui fungsi-fungsi kelas tersebut, mengapa kelas tersebut dibuat dan mengapa kelas-kelas tersebut menjadi semacam “standar” saat Anda mempelajarinya.

    Beralih ke Framework Buatan Sendiri 

    Untuk mempercepat pekerjaan, yang terpenting sebenarnya adalah framework. Namun jika Anda tidak mengerti apa dan bagaimana framework itu dibuat dan digunakan, maka hasil akhirnya nanti akan sama saja. Memulai membuat framework sendiri Saya pikir jauh lebih baik dibandingkan hanya sekedar menyalin dan menempel kode dari framework lain yang sudah ada. Mengikuti dan mempelajari bagaimana mereka menciptakan framework seharusnya lebih diutamakan dibandingkan hanya sekedar memakainya. Karena dengan mempelajari bagaimana sebuah framework terbentuk, maka dari situ Anda bisa lebih cerdas di dalam mencontoh dan menyaring apa-apa saja yang sebenarnya diperlukan dan apa saja yang sebenarnya tidak diperlukan menurut kebutuhan Anda saat itu untuk keperluan yang lebih spesifik dan efisien tentunya:

    Lihat Demo

    20 Komentar

    • Damar Zaky

      waduh mas, sayang saya belum terlalu ngerti hehe, nanti baca ulang ahh :D

    • Putra

      komplit temen, cocok untuk orang yang mau buat template nih =p*

    • Beben Koben

      super sekali :Q

    • Unknown

      wah ini bahan pembelajaran yang sangat bermanfaat, cocok buat saya yang hobi ngacak" template, thanks kang infonya.. :)

    • Unknown

      inih blog buat bimbel aja.,.,
      soalnya artikelnya lekam san cetar membahana \o/ :-bd

    • Unknown

      hhay,, sngat bermanfaat.. thx mas.. :)

    • Unknown

      Tanpa keseriusan dan pemahaman yang cukup ~x( ,, setiap code yang terlintas jadi kayak bencana bagi orang awam :Ozz ,, saya sih ngerti alasan dari konsistensi,,dan tau begitu penting dan berguna artikel ini,, tapi karena code adalah keajaiban 0:) , hmmm pasrah dan cari yg gampang2 aja dulu,, :'(

    • Unknown

      Wah saya baru sadar ternyata memperhatikan tampilan artikel itu juga cukup krusial 'nilai' nya. B)

    • Unknown

      Kereeen tapi masih belum mengerti cuma CSS-nya...
      Kerangka Dasarnya pengunaan Html tag-tag perlu dibuat lagi kayaknya Mas yach bisa di bilang sekalian nyuapin tutorial.....

    • Unknown

      Mas divisi untuk halaman depan dan halaman posting gimana buatnya..??

      • Taufik Nurrohman

        Itu bawaan kan?

        • Unknown

          bawaan apa bukan yach... binggung juga kerena saya pakai kerangka dasar templete Blogazine yang belum ada css global dan Devisi-nya...
          saya ingin coba pakai framework css tersebut dan sekalian ingin mencoba Twitter Bootstrap di blogcepot..

          • Taufik Nurrohman

            Bootstrap itu framework, jangan digabungkan dengan framework CSS yang lain... Tidak ada hubungannya. Organisasi/logika layoutnya berbeda. Kalau ingin membuat template blogspot dengan Bootstrap, tidak perlu repot-repot memakai template yang ada untuk dimodifikasi menjadi Bootstrap. Buat saja template mentah Bootstrap, lalu sisipkan kode widget Blogger di dalamnya. Contohnya begini:

            <!DOCTYPE html>
            <html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
            <head>
            <b:include data='blog' name='all-head-content'/>
            <title><data:blog.pageTitle/></title>
            <meta name='viewport' content='width=device-width, initial-scale=1.0'>
            <link href='bootstrap.css' rel='stylesheet'/>
            <link href='bootstrap-responsive.css' rel='stylesheet'/>
            <script src='jquery.js'></script>
            </head>
            <body>
            <header class='header'>
            <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
            <b:widget id='Header1' locked='true' title='Blog Tester (Header)' type='Header'/>
            </b:section>
            </header>
            <nav class='navbar navbar-inverse navbar-fixed-top'>
            <ul class='nav'>
            <li class='active'><a expr:href='data:blog.homepageUrl'>Home</a></li>
            <li><a href='#'>Menu 2</a></li>
            <li><a href='#'>Menu 3</a></li>
            </ul>
            </nav>
            <div class='container-fluid'>
            <b:section id='main' class='main' showaddelement='yes'>
            <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
            </b:section>
            </div>
            <footer class='footer'>&copy; 2013 <a expr:href='data:blog.homepageUrl'><data:blog.title/></a></footer>
            <script src='bootstrap.min.js'></script>
            </body>
            </html>
    • Unknown

      Mas, saya mencoba menerapkan framework ini. Tapi yang berubah hanya pada halaman post, di tampilan hompage artikelnya tetap menggunakan font Arial dan tidak ada efek dari frameworknya :-a

      • Unknown

        Maaf mas, sudah bisa....ternyata saya lumayan teledor juga....hehehe

    • Anonim

      Kebetulan saya lagi belajar bikin template dari nol

    • Unknown

      ilmu yang sangat bermanfaat..

      terima kasih

    • Giri Diwa Adam

      gan Itu Lanjutanya Gimana , Masih Bingung Nih ane , Tolong Lanjutanya

    • Unknown

      Tapi Jika framework yang mirip kita contoh atau sekedar mengambil beberapa yang perlu,,apakah itu di perbolehkan gan ??

      • Taufik Nurrohman

        Lebih enak tanya ke author-nya secara langsung. Paling aman adalah dengan mencantumkan komentar seperti ini pada bagian atas kode:

        /*! Berdasarkan {$nama_software} oleh {$nama_pembuat} <{$alamat_web}> */

        Contoh:

        /*! Berdasarkan Mecha oleh Taufik Nurrohman <http://mecha-cms.com> */

    Komentar telah ditutup.