Yang Saya maksudkan di sini adalah, jadikan tampilan artikel sebagai prioritas utama sebelum memulai pondasi desain/rancangan tema/template. Mengingat kebiasaan jelek yang sering terjadi yaitu kita membentuk hasil jadinya terlebih dahulu kemudian gres merancang tampilan-tampilan paragraf, kuota dan blok kode. Padahal, dengan merancang elemen-elemen kecil dan umum tersebut terlebih dahulu, kita dapat memastikan bahwa tampilan simpulan 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 usang dan lebih rumit tanpa kita sadari. Sebagai contoh, ketika kita merancang tampilan posting, ketika itu kita juga akan memilih tampilan judulnya. Setelah itu kita akan merancang tampilan sidebar dan footer, kemudian juga akan memilih 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 dapat menjadi lebih singkat apabila kita merancang framework elemen-elemen artikel terlebih dahulu secara global. Sudah ada beberapa framework yang tersedia untuk mengatasi kebiasaan jelek ini, contohnya 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 sehabis 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 aksara 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 aksara 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 menyerupai semula:
/* aksara tebal */ strong,b { font-weight:bold; } /* citation & aksara 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; } /* aksara 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 menyerupai 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 aksara menjadi tebal. Tentukan juga margin heading secara global sebelum kemudian kita melanjutkannya dengan memilih 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 sebab pada umumnya itu hanya akan membuat mata kita menjadi merasa tidak nyaman dan tertekan. Posisikan elemen daftar menjadi sedikit menjorok ke depan untuk membuat 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 aksara sesuai dengan aksara pada elemen induknya. Mengenai tampilan selanjutnya menyerupai warna latar dan pengaruh :hover dapat ditentukan nanti sehabis 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 dilema pengguna yang sering kesulitan memilih lebar akurat pada elemen ini menjadi `100%` ketika menggunakan logika box-model yang usang */ 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 mendapat perlakuan khusus mengingat elemen ini biasa kita gunakan untuk menyatakan hal-hal yang penting. Blok arahan dipakai untuk menyatakan arahan yang perlu dicatat/dipahami dan kuota dipakai untuk menyatakan teks yang perlu diingat atau direnungkan:
pre, code { font-family:"Courier New",Courier,Monospace; color:inherit; } /* bila perlu tentukan juga warna latar dan aksara */ 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 memilih border dan padding pada tabel yang mempunyai 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 dapat melanjutkan untuk membuat kelas-kelas produktif menyerupai .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 gampang Anda temui pada framework HTML5 Boilerplate dan Twitter Bootstrap (Twitter Bootstrap juga menggunakan HTML5 Boilerplate). Anda akan mengetahui fungsi-fungsi kelas tersebut, mengapa kelas tersebut dibentuk dan mengapa kelas-kelas tersebut menjadi semacam “standar” ketika Anda mempelajarinya.
Beralih ke Framework Buatan Sendiri
Untuk mempercepat pekerjaan, yang terpenting bersama-sama yaitu framework. Namun bila Anda tidak mengerti apa dan bagaimana framework itu dibentuk dan digunakan, maka hasil hasilnya nanti akan sama saja. Memulai membuat framework sendiri Saya pikir jauh lebih baik dibandingkan hanya sekedar menyalin dan melekat arahan dari framework lain yang sudah ada. Mengikuti dan mempelajari bagaimana mereka membuat framework seharusnya lebih diutamakan dibandingkan hanya sekedar memakainya. Karena dengan mempelajari bagaimana sebuah framework terbentuk, maka dari situ Anda dapat lebih cerdas di dalam mencontoh dan menyaring apa-apa saja yang bersama-sama dibutuhkan dan apa saja yang bersama-sama tidak dibutuhkan berdasarkan kebutuhan Anda ketika itu untuk keperluan yang lebih spesifik dan efisien tentunya:
Sumber https://www.dte.web.id/