Blueprint Css adalah sebuah framework CSS. Herankan kenapa css pun memiliki framework. “CSS Framework” sebenarnya di targetkan untuk developer yang merasa bosan melakukan hal-hal yang sama berkaitan dengan perancangan UI (User Interface). Keuntungan dari penggunaan ini adalah mempercepat proses desain User Interface. Biasanya kita akan ribet dengan masalah cross browser, tipografi dll.. serahkan semuanya kepada blueprint. Blueprint telah menyediakan kelas-kelas yang dapat mempercepat proses desain. adapun fitur-fitur blueprint adalah sebagai berikut
- Memiliki CSS reset yang menghilangkan perbedaan pada browser.
- Support untuk desain layout yang komplek
- Typography based
- Memiliki Form styles yang menarik untuk user interfaces.
- Udah include Print styles supaya webpage gampang di print.
- Plugins untuk buttons, tabs dan sprites.
Jika pertama kali menggunakan blueprint anda harus mengerti konsep “grid desain”. Grid desain dapat adalah desain yang mirip table, tetapi kita tidak menggunakan tag table disini (saya rasa anda sudah tau alasanya). Sebuah grid pada blueprint mempunyai lebar 950 pixel yang dibagi dalam 24 kolom, dengan 10 pixel untuk spasi perkolom. Adapun kelas-kelas yang harus diketahui pada pembuatan Grid adala
Berikut ini langkah langkah penggunaan bluprint
Langkah 1 : Download Blueprint CSS
Anda dapat mendownload di http://www.blueprintcss.org/. Setelah didownload silakan extract blueprint lalu copy folder blueprint ke folder tempat anda bekerja
Langkah 2 : Linkkan Blueprint CSS
Load syle yang ada di blueprint
1 2 3 | <link rel="stylesheet" href="/blueprint/screen.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="/blueprint/print.css" type="text/css" media="print"> <!--[if IE]><link rel="stylesheet" href="/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]--> |
Langkah 3 : Buat container grid dan bagi kolom-kolomnya
Pada desain ini akan dibuat header, footer, content dan right navigation
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Blueprint: A CSS Framework | Spend your time innovating, not replicating</title> <link rel="stylesheet" href="/blueprint/screen.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="/blueprint/print.css" type="text/css" media="print"> <!--[if IE]><link rel="stylesheet" href="/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]--> </head> <body> <div class="container"> <div id="header" class="column span-24">Header</div> <div id="content" class="column span-16">Content</div> <div id="navigation" class="column span-8 last">Navigation</div> <div id="footer" class="column span-24">Footer</div> </div> </body> </html> |
Untuk memberi desain tambahan anda perlu menambah kan Id. Perhatikan div Content dan navigation jumlah spannya adalah 24. itu berati menandakan kedua div tersebut berada pada satu baris yang sama 2 kolom. sedangkan footer dan header 1 baris sendiri.
Untuk jadi intinya hanyalah penghitungan jumlah kolom yang harus berjumlah 24. anda bisa membagi menjadi 3/4 kolom. untuk contoh lebih lanjut anda bisa melihat di sample blueprint.
About ibnoe
Tunjukin cara makainya dunks
Melu sinau ah… nubie nubie…
weleh contohnya gmn yah bro… w masie newbie nech btw thanks yah mau dicoba dulu ok ???
@eko
perhatikan class column span-24 span-X, itu cara menggunakannnya
maksudnya span itu kyk colspan di table y bro. 24 itu maksudnya colspan 24 kolom kan? keknya enak jg pake framework. maklum ane slama ini bener2 css dari awal
. btw makasih y atas infonya
yup bener bro.. jadi ga perlu susah2 lagi