Standar Arsitektur Blog Terakhir
Aku beralih dari menulis blog biasa menjadi menulis blog dengan aliran Blogazine setelah terlempar ke dalam sebuah grup di Facebook. Meskipun pada akhirnya Aku sadar bahwa Aku sama sekali tidak memiliki ketertarikan terhadap hal-hal yang berbau majalah, sehingga kini kuputuskan untuk membuat desain posting tanpa terikat apapun. Semuanya tergantung dari isi posting.
Bukan Blogazine
Oleh karena itulah Aku harus tegas memutuskan bahwa blog ini sama sekali bukan Blogazine. Melainkan lebih luas lagi dan bisa dibilang sudah tidak standar. Aku lebih suka menyebutnya sebagai blog art direction yang tidak memiliki aliran khusus. Selama desain yang Aku buat cocok dengan isi tulisannya, maka Aku akan melanjutkannya.
Walaupun begitu, hal ini bukanlah alasan utama yang membuatku menulis jurnal khusus yang aneh ini, yang bisa dibilang sangat keluar jalur dari tujuanku membangun jurnal pribadi ini sejak awal. Tidak semua hal harus sesuai dengan rencana, terlebih jika waktu telah berlalu dan membuat beberapa hal menjadi lebih baik. Selama ada hal penting yang harus disertakan, maka kenapa tidak disertakan? Yang penting jangan terlalu mencolok sehingga akan mengalahkan konten-konten yang lain. Itu sih menurutku.
Aku menulis ini untuk mendokumentasikan keputusan akhir yang tegas mengenai standar arsitektur blog ini untuk memastikan agar desain-desain posting di hari-hari berikutnya tetap stabil mengikuti standar yang Aku buat sendiri supaya Aku tidak plin-plan lagi dalam memodifikasi framework blog ini.
Penulisan Nilai Atribut HTML dan Selektor CSS
Kunyatakan bahwa standarisasi layout blog sudah mencapai hampir 100%. Setiap atribut kelas dan ID pada masing-masing elemen di dalam blog ini dinyatakan dengan nama yang logis dan berbahasa Inggris. Jika nama tersebut terdiri lebih dari satu kata, maka setiap kata akan dipisahkan dengan simbol hyphen dan bukan uderscores atau CamelCase. Bukan #outerwrapper
, bukan #outerWrapper
maupun #outer_wrapper
melainkan #outer-wrapper
Berikut ini adalah daftar elemen utama dengan ID dan kelas yang sudah standar:
Elemen | ID | Kelas |
---|---|---|
Pembungkus Luar | #outer-wrapper | .outer-wrapper.home-page .outer-wrapper.archive-page .outer-wrapper.static-page |
Header | #header | .header |
Header Lokasi | #page-location | .sub-header |
Navigasi Utama | #nav | .nav |
Kotak Pencarian | #search-form | .search-form |
Kolom Arsip | #blog-archive | .blog-archive |
Area Navigasi Utama + Posting + Navigasi Halaman | #wrap | .inner-wrapper |
Berikut ini adalah beberapa elemen yang paling sering ditimpa CSS baru untuk menciptakan desain posting tunggal:
Elemen | ID | Kelas |
---|---|---|
Pembungkus Luar | #outer-wrapper | .outer-wrapper.single-post |
Area Navigasi Utama + Posting + Navigasi Halaman | #wrap | .inner-wrapper |
Navigasi Utama | #nav | .nav |
Item Navigasi Utama (Beranda) | - | .home |
Item Navigasi Utama (Tentang) | - | .about |
Item Navigasi Utama (Arsip Buku) | - | .archive |
Item Navigasi Utama (Komentar) | - | .cm (.comment dan .comments sudah dipakai oleh #comments) |
Tanggal Posting | - | .date-header |
Pembungkus Posting | - | .post-outer |
Posting | #post-XXX | .post |
Badan Posting | - | .post-body |
Footer Posting | - | .post-footer |
Navigasi Halaman | #blog-pager | .blog-pager.clear |
Navigasi Posting Lama | #blog-pager-older-link | .right |
Navigasi Posting Lebih Baru | #blog-pager-newer-link | .left |
Area Komentar | #comments | .comments |
Avatar Komentar | - | .avatar-image-container |
Kontainer Komentar Balasan | - | .comment-replies |
Area Widget | #widget-area | .widget-area.clear |
Pembungkus Kolom Widget | - | .widgets-wrap |
Kolom Widget | - | .foot |
Kolom Widget 1 | #widget-box-1 | .foot.widget-box-1 |
Kolom Widget 2 | #widget-box-2 | .foot.widget-box-2 |
Kolom Widget 3 | #widget-box-3 | .foot.widget-box-3 |
Kolom Widget 4 | #widget-box-4 | .foot.widget-box-4 |
Footer | #footer | .footer |
Teks Footer Kiri | - | .left |
Teks Footer Kanan | - | .right |
Tombol Kembali ke Atas | #gotop | .gotop |
Berikut ini adalah nama kelas elemen baru yang akan ditambahkan saat JavaScript aktif dan saat panel komentar sedang terbuka:
Elemen | Kelas Baru | Keterangan |
---|---|---|
.js-enabled | Akan ditambahkan saat JavaScript aktif. | |
.comment-block-is-expanded | Akan ditambahkan saat panel komentar sedang terbuka. |
Pengecualian
Tidak ada standar penulisan kelas dan ID pada selektor CSS jika itu merupakan bawaan dari plugin atau framework tertentu. Misalnya .nivoSlider
atau .mCSB_horizontal
. Aku tidak mungkin memodifikasi setiap nama kelas dan merombak seluruh plugin hanya untuk memenuhi obsesiku dalam menuliskan nama-nama kelas dan ID elemen dengan hyphen. Gila!
Selain itu, jika kasusnya berhubungan dengan pengurutan kelas atau ID yang saling terkait atau memiliki pola yang standar dalam kasus yang spesifik, mungkin Aku akan menuliskannya seperti ini:
#foo-bar_1 { /* baz */ }
#foo-bar_2 { /* baz */ }
#foo-bar_3 { /* baz */ }
#foo-bar_4 { /* baz */ }
#foo-bar_5 { /* baz */ }
Selalu usahakan untuk tidak memakai huruf besar, kecuali jika huruf tersebut bukan berupa kata yang memiliki makna dan datangnya setelah angka:
.foo-bar_a-10 { /* baz */ }
.foo-bar_a-11 { /* baz */ }
.foo-bar_a-12 { /* baz */ }
.foo-bar_a-13 { /* baz */ }
.foo-bar_a-14 { /* baz */ }
.foo-bar_1AB {}
.foo-bar_1AC {}
.foo-bar_1AD {}
Perfeksionis setengah mampus!
Skala dan Ukuran
Ukuran font global adalah 100%
. Turun ke body
menjadi .875em
atau sekitar 14px
. Sudah sepakat dengan skala elemen heading seperti ini:
h1 {font-size:315%}
h2 {font-size:270%}
h3 {font-size:200%}
h4 {font-size:180%}
h5 {font-size:150%}
h6 {font-size:120%}
line-height
font global adalah 1.375em
dan akan normal kembali pada elemen heading. Ukuran heading kolom arsip halaman muka, heading komentar dan heading widget menyesuaikan. Tidak ada standar khusus.
Jarak masing-masing paragraf adalah 1.5em
, termasuk juga tabel, tag <pre>
, elemen daftar dan description list.
Pematian Ukuran
Terjadi pematian ukuran navigasi utama, bulan terbit, navigasi halaman dan footer yang untuk alasan tertentu Aku harus membuat ukurannya dalam satuan piksel sehingga ukuran elemen tersebut tidak akan terpengaruh jika Aku mengubah ukuran huruf pada elemen.
- Ukuran font navigasi adalah
10px
denganline-height
sebesar30px
.padding
masing-masing item navigasi adalah0 12px
. - Ukuran dan tipe font waktu penerbitan posting disamakan dengan ukuran dan tipe font pada navigasi utama, karena posisi waktu penerbitan berada menyatu dengan navigasi utama. Posisi
right
bukan12px
melainkan15px
. - Ukuran font navigasi halaman dan footer adalah
10px
denganline-heigt
sebesar16px
. Ukuranpadding
dimatikan ke11px 18px
.
Font Standar
Font Utama: Palatino Linotype sampai mati!
Font Heading: Georgia sampai mati!
body {
font-family:Palatino,"Palatino Linotype","Palatino LT STD","Book Antiqua",Georgia,"URW Bookman L",Serif;
}
h1,h2,h3,h4,h5,h6 {
font-family:Georgia,"URW Bookman L",Serif;
}
Tidak boleh menggunakan @font-face
!!!
Selamat Tinggal Google Web Fonts!
Setelah kupikir-pikir, font yang dimuat secara langsung dari direktori Google Web Fonts ternyata tidak bagus. Kebanyakan ukurannya tidak sesuai dengan font fallback yang Aku tentukan di belakangnya sehingga akan membuat tampilan huruf menjadi terlalu kecil atau terlalu besar ketika font gagal dimuat atau belum sempat termuat. Aku tidak bilang kalau font-font yang ada di sana itu jelek, hanya saja kualitas font yang tersimpan di Google terasa tidak sesuai dengan yang Aku inginkan. Aku lebih suka mengunduh font secara langsung dari direktori font Google di sini, kemudian mengunggah ulang font-font tersebut dengan skala font yang sudah disesuaikan melalui generator @font-face
. Ternyata, kualitasnya jadi lebih bagus dan lebih cepat termuat, dibandingkan dengan font yang ditransfer secara langsung dari Google Web Fonts
JQuery 1.7.2 Sampai Mati!
Ini kasus! Setelah beberapa waktu yang lalu Aku sempat mengganti versi JQuery menuju ke versi terbaru, ternyata beberapa bagian fungsi menjadi tidak bekerja. Setelah diteliti ternyata blog JQuery mengumumkan bahwa beberapa fitur yang sudah usang benar-benar telah disingkirkan. Itu artinya, mengubah versi JQuery akan memicu risiko yang sangat besar terhadap posting-posting lama di blog ini. Mengapa? Karena sekali saja Aku mengganti versi JQuery, maka Aku juga harus mengetes ulang beberapa plugin terkait dengan JQuery pada masing-masing posting. Mengetes ulang apakah mereka masih bekerja dengan versi JQuery yang sekarang atau tidak.
Kabar buruknya adalah, memutuskan untuk memiliki blog dengan desain yang unik pada setiap posting tunggal telah memaksaku untuk membuka ulang semua posting lama yang sudah terbit hanya untuk mengetes kerja plugin-plugin dan deklarasi JQuery yang kutuliskan pada masing-masing posting. Dan lebih buruknya lagi, itu baru satu peramban saja. Untuk memenuhi standar web yang baik, setidaknya Aku harus mengetesnya pada lima peramban sekaligus! Dan itu baru desktop. Bagaimana dengan seluler??!! WAAARRRGGGHHHH!!!!
Kesimpulan
Aku akan tetap menggunakan JQuery versi 1.7.2 meskipun terdapat pembaharuan-pembaharuan baru dari dokumentasi. Tapi… di satu sisi Aku juga tidak boleh ketinggalan info.
Jadwal Pencegahan
Pertama, Aku harus mengunduh framework JQuery versi 1.7.2, baik yang sudah dikompres maupun yang masih asli dari CDN Google, untuk berjaga-jaga kalau sampai CDN Google hancur karena kebanjiran atau tenggelam dikarenakan lumpur Lapindo, setidaknya Aku masih punya duplikatnya di komputer. Setelah itu Aku akan tetap mengikuti dokumentasinya di API JQuery. Selalu mengetes plugin-plugin yang diunduh dengan JQuery 1.7.2, selalu memodifikasi plugin yang diunduh dan bukan hanya sekedar pasang tempel saja.
Mencoba untuk menambahkan fitur-fitur yang ada pada JQuery versi terbaru sebagai plugin terpisah jika memang diperlukan. JQuery 1.7.2 sudah bagus dan stabil. Lagipula, ada angka tujuh di tengahnya. Itu angka favoritku. Jangan diambil!
Pola Penulisan CSS-ku Saat Ini
Setelah cukup lama mempelajari CSS secara mandiri, sepertinya sekarang Aku lebih terfokus ke pola penulisan dibandingkan dengan CSS itu sendiri. Dan berikut ini adalah pola-pola yang masih bisa kuingat:
Dua spasi untuk indentasi dan hilangnya spasi setelah simbol :
dan ,
#foo {
property:value;
property:value;
&:hover {
property:value;
property:value;
}
property:value;
property:value;
}
#bar {
color:rgba(0,0,0,0);
background-image:linear-gradient(top,#ffa500,#992363);
}
Membuang satuan pada nilai berupa 0
dan juga menghapus angka 0
di depan angka bertipe desimal:
#foo {
color:rgba(0,0,0,.5);
margin:0 auto 10px;
}
Mewajibkan tanda petik pada nama font yang memiliki spasi atau nama font dengan angka dan titik. Tetap menggunakan huruf awal kapital pada nama font fallback:
body {
font-family:"Lobster 1.3","Bebas Neue",Bebas,Sans-Serif;
}
Mewajibkan tanda petik pada nilai url()
dan nilai selektor atribut:
.site-logo:before {
content:url("/favicon.ico");
}
abbr[title="212"] {}
Langsung menuliskan resolusi tanpa keyword screen
pada Media Queries:
@media (max-width:800px) {}
Meluruskan selektor CSS yang hanya memiliki satu deklarasi dan membuang semicolon di bagian akhir. Menciptakan jarak pada masing-masing selektor dengan dua baris dan menjadikannya satu baris jika dua buah selektor yang berdampingan merupakan selektor dengan deklarasi tunggal. Memisahkan setiap selektor dengan satu baris jika sedang berada di dalam @rule
:
#foo {
property:value;
property:value;
}
#bar {
property:value;
property:value;
}
.baz-1 {property:value}
.baz-2 {property:value}
.baz-3 {property:value}
@media (max-width:800px) {
#foo {
property:value;
property:value;
}
#bar {
property:value;
property:value;
}
.baz-3 {property:value}
}
Memindahkan selektor-selektor yang panjang ke baris baru pada kasus penggabungan deklarasi:
#fooooooooo,
#baaaaarrrrr,
#brooooottttt {
property:value;
property:value;
}
Apa lagi ya? Lupa.
Kotak Ingkar Janji
Di sini nantinya akan Aku tuliskan pelanggaran-pelanggaran standarisasi yang mungkin akan kulakukan di masa depan karena sesuatu hal yang tidak mungkin bisa dihindari. Semoga tidak jauh-jauh dari perubahan ukuran jarak dan bukannya perubahan atribut-atribut HTML, tipe font ataupun warna elemen yang bisa merusak desain-desain posting tunggal.
Orang asing biasa menyebut area seperti ini sebagai area Change Log. Bodo amat. Pokoknya namanya Kotak Ingkar Janji. Titik!
- : Aku menambahkan beberapa kelas pada setiap elemen yang hanya memiliki atribut ID tanpa mengubah ID elemen tersebut. Beberapa ID halaman muka berubah untuk alasan keseragaman dan kestabilan (elemen-elemen halaman muka seperti header dan arsip blog tidak akan mempengaruhi posting unik yang telah dibuat). Untuk ke depannya, mungkin Aku tidak akan menggunakan ID lagi sebagai selektor CSS, melainkan akan menggunakan kelas.
- : Terjadi sebuah tragedi besar terhadap jurnal ini. Sekarang pos ini sudah tidak terlalu standar lagi, terutama mengenai tampilan dan markup halaman depan.
klo udah pakek warna abu2 item udah deh, jati dirinya keluarrr... mantebb
BalasHapuswkwkkw aku masih setia sm jquery 1.7.1
BalasHapus