Mungkin bagi sebagian web programmer pemula, framework untuk CSS terasa aneh. Tidak seperti framework lainnya untuk PHP misalnya atau bahasa pemrograman lainnya. Saya pertama kali menggunakan CSS framework ini karena faktor malas :) Masalah yang paling umum dalam pemrograman CSS adalah kompabilitas antar web browser.
Seringkali layout CSS yang dibuat ketika ditampilkan di suatu web browser misalnya Mozilla Firefox terlihat rapi namun ketika ditampilkan di web browser lainnya misalkan Internet Explorer menjadi ancur ga karuan. Berawal dari faktor malas menyusun kode yang berbelit-belit untuk mendesain layout CSS dengan kompabilitas browser yang baik akhirnya saya mencari-cari wangsit di google dan kemudian bertemulah dengan salah satu framework CSS bernama blue print :)
Konsep yang diusung blue print ini adalah membuat anda sebagai web desainer fokus pada kreasi desain web ketimbang banyak menghabiskan waktu merancang kode CSS untuk layout web dan kompabilitas browser. Blue print menggunakan konsep layout web berbentuk grid dengan lebar 950 pixel. Konsep desain grid adalah keseimbangan antara sisi visual dan struktural website. Sederhananya pembuatan web dengan berbasis web ini mirip seperti anda mendesain web dengan penggunaan tabel, di mana sebuah halaman web diisi dengan banyak sel tabel. Sel tabel ini bisa disamakan dengan grid pada desain dengan konsep grid. Namun grid lebih fleksibel dibandingkan dengan tabel sehingga anda dapat mengubah tata letak layout desain anda tanpa harus merombak total seperti pada tabel karena desain web dengan menggunakan tabel bersifat kaku.
Akhirnya iseng saya coba mendesain web dengan menggunakan framework ini. Objek yang saya jadikan percobaan adalah situs halaman depan BNI. Kebetulan ketika download blue print CSS ini saya juga sedang membuka halaman depan bank BNI. Berikut adalah gambar halaman depan bank BNI ketika saya akses dan copy halaman webnya:
Saya lihat halaman kanan dari web tersebut ada spasi kosong yang lumayan lebar sehingga membuat tampilan web kurang enak dilihat. Berikut adalah hasil layout web yang saya buat ditambah sedikit modifikasi dengan menggunakan Blue print:
Saya sengaja mengubah sedikit supaya terlihat lebih enak dilihat (setidaknya menurut saya hehe). Pada layout web yang saya buat ini menggunakan konsep tableless CSS yang dibantu dengan Blue print sehingga fleksibel untuk diubah-ubah tata letaknya. Ketika saya coba jalankan di web browser lainnya yaitu Google Chrome dan Internet Explorer, layout web hampir tidak ada perubahan sama sekali.
Jika anda tertarik untuk mengetahui lebih lanjut mengenai blue print css anda dapat mengunjungi situsnya di http://www.blueprintcss.org . Sekian pengantar mengenai Blue print CSS, pada kesempatan berikutnya saya akan mencoba membahas lebih lanjut mengenai framework CSS ini :)
