DTE :]: Framework CSS · Utamakan Konsistensi Tampilan Artikel Sebelum Layout

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

Labels: CSS, Desain, HTML, Lanjutan

20 Comments:

At Thursday, May 23, 2013 at 11:50:00 PM GMT+7, Damar Zaky said...: waduh mas, sayang saya belum terlalu ngerti hehe, nanti baca ulang ahh :D
At Friday, May 24, 2013 at 8:16:00 AM GMT+7, Putra said...: komplit temen, cocok untuk orang yang mau buat template nih =p*
At Friday, May 24, 2013 at 10:10:00 AM GMT+7, Beben Koben said...: super sekali :Q
At Friday, May 24, 2013 at 5:38:00 PM GMT+7, Unknown said...: wah ini bahan pembelajaran yang sangat bermanfaat, cocok buat saya yang hobi ngacak" template, thanks kang infonya.. :)
At Thursday, May 30, 2013 at 5:56:00 PM GMT+7, RJ said...: inih blog buat bimbel aja.,.,
soalnya artikelnya lekam san cetar membahana \o/ :-bd
At Saturday, June 1, 2013 at 2:58:00 PM GMT+7, Unknown said...: hhay,, sngat bermanfaat.. thx mas.. :)
At Monday, June 3, 2013 at 9:53:00 PM GMT+7, Unknown said...: 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,, :'(
At Friday, June 7, 2013 at 1:16:00 AM GMT+7, Unknown said...: Wah saya baru sadar ternyata memperhatikan tampilan artikel itu juga cukup krusial 'nilai' nya. B)
At Tuesday, June 11, 2013 at 6:05:00 AM GMT+7, Unknown said...: 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.....
At Tuesday, June 25, 2013 at 1:51:00 AM GMT+7, Unknown said...: Mas divisi untuk halaman depan dan halaman posting gimana buatnya..??
At Tuesday, June 25, 2013 at 11:35:00 PM GMT+7, Taufik Nurrohman said...: Itu bawaan kan?
At Tuesday, July 2, 2013 at 12:17:00 PM GMT+7, Unknown said...: 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..
At Tuesday, July 2, 2013 at 5:13:00 PM GMT+7, Taufik Nurrohman said...: 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'>© 2013 <a expr:href='data:blog.homepageUrl'><data:blog.title/></a></footer>
<script src='bootstrap.min.js'></script>
</body>
</html>
At Wednesday, October 23, 2013 at 4:40:00 PM GMT+7, Unknown said...: 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
At Wednesday, October 23, 2013 at 8:53:00 PM GMT+7, Unknown said...: Maaf mas, sudah bisa....ternyata saya lumayan teledor juga....hehehe
At Thursday, December 12, 2013 at 9:31:00 PM GMT+7, Anonymous said...: Kebetulan saya lagi belajar bikin template dari nol
At Sunday, March 30, 2014 at 3:15:00 PM GMT+7, Penggemar Rahasia said...: ilmu yang sangat bermanfaat..

terima kasih
At Friday, July 28, 2017 at 2:36:00 PM GMT+7, Giri Diwa Adam said...: gan Itu Lanjutanya Gimana , Masih Bingung Nih ane , Tolong Lanjutanya
At Thursday, November 2, 2017 at 2:21:00 PM GMT+7, Unknown said...: Tapi Jika framework yang mirip kita contoh atau sekedar mengambil beberapa yang perlu,,apakah itu di perbolehkan gan ??
At Wednesday, January 10, 2018 at 12:28:00 PM GMT+7, Taufik Nurrohman said...: 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> */

DTE :]

Thursday, May 23, 2013

Framework CSS · Utamakan Konsistensi Tampilan Artikel Sebelum Layout

Contoh Buruk

Merancang Framework CSS

CSS Reset

Elemen `<BODY>`

Huruf Tebal, Huruf Miring dan Elemen-Elemen Kecil Lainnya

Margin Paragraf

Elemen Heading

Elemen Daftar

Elemen Formulir

Blok Kode dan Kuota

Tabel

Hasil Akhir

Beralih ke Framework Buatan Sendiri

20 Comments:

Post a Comment

About Me

Previous Posts

DTE :]

Thursday, May 23, 2013

Framework CSS · Utamakan Konsistensi Tampilan Artikel Sebelum Layout

Contoh Buruk

Merancang Framework CSS

CSS Reset

Elemen <BODY>

Huruf Tebal, Huruf Miring dan Elemen-Elemen Kecil Lainnya

Margin Paragraf

Elemen Heading

Elemen Daftar

Elemen Formulir

Blok Kode dan Kuota

Tabel

Hasil Akhir

Beralih ke Framework Buatan Sendiri

20 Comments:

Post a Comment

About Me

Previous Posts

Elemen `<BODY>`