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:
