Weblog Kus

Blueprint CSS

Blueprint dan CSS framework lainnya

3 Agustus lalu , Olav Bjørkøy meluncurkan sebuah CSS Framework yang diberi nama BluePrint CSS.

Mirip dengan YUI Grids, BluePrint memberikan kemudahan kepada desainer untuk membuat lay out sebuah situs. Bedanya YUI datang dengan kelengkapan yang lebih banyak dibandingkan dengan BluePrint. Diantaranya adalah komponen javascript dan DOM serta CSS Grid yang terintegrasi. BluePrint dalam sisi yang lain hanya menyertakan fitur untuk membangun desain sebuah situs dengan grid saja.

Kalau di ukur dari besar berkas yang disertakan, YUI memiliki ± 11 MB1 berkas yang harus di unduh dan puluhan berkas didalamnya. Sedangkan BluePrint hanya sebesar ± 19KB. Dari perbandingan ukuran ini saja bisa di perkirakan bahwa YUI akan membuat sistem bekerja lebih lambat di bandingkan BluePrint. Itu pasti.

Fitur BluePrint

Dengan ukuran yang kecil dan hanya berorientasi kepada pembangun desain situs lewat grid CSS, BluePrint hanya menyertakan fitur untuk itu, diantaranya :

BluePrint Versi 0.3

  • Kemudahan dalam meng-kostumisasi grid CSS.
  • Menyertakan beberapa tipograpi standar2.
  • Penggunaan jenis huruf dan besarnya dengan mudah, yang bisa diletakkan dimana saja.
  • CSS reset untuk beberapa perambah yang mendukung penuh W3C3.
  • Print CSS. Style Sheet untuk tampilan halaman situs jika dicetak.
  • Dan tentu saja kecepatan akses :)

BluePrint Versi 0.4

Bagaimana cara mempergunakan BluePrint?

Pertama kali tentu unduh terlebih dahulu berkas BluePrint framework nya.

Untuk mempergunakannya, letakkan kode dibawah ini di antara tag HEAD di dalam template HTML desain situs.


  <link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection">
  <link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print">

Dengan artian bahwa css/blueprint/ adalah jalur tempat peletakkan berkas BluePrint.

Dan BluePrint siap untuk di jalankan.

bersambung ....

UPD : 26 Agustus 2007

Pembangunan Grid

Standarnya di BP lebar grid yang sudah di standarkan adalah sebesar 960 px, dengan 14 kolom, rentang 50px dan 20 px jarak antara kolom.

Seseorang bernama Kematzy, membuat sebuah aplikasi web untuk membangun kode CSS berdasarkan BP. Di aplikasi web ini kita bisa memasukkan jumlah kolom sesuai keinginan dan generator akan membuatkan BP Grid CSS yang sudah di kostumisasi berdasarkan jumlah kolom. Jika dibutuhkan untuk mengurangi atau menambah jumlah kolom, bisa mempergunakan perhitungan sebagai berikut :

Total Lebar = (jumlahkolom * 70) - 20

Setelah selesai menentukan jumlah kolom ( dalam hal ini ada baiknya memakai kolom standar saja, sudah cukup baik, dan mencukupi kebutuhan ), maka sekarang bisa membangun lay out dengan mempergunakan kode – kode HTML.

<div class="container"> <p>Halo Dunia!</p> </div>

Kemudian di dalam area class container, gunakan tag div dengan selector class “column“ .

Contohnya :


<div class="container">
        <div class="column span-14">
                Header.
        </div>
        <div class="column span-3 first">
               Sidebar kiri , karena pake first maka akan tampil lebih dulu , dikiri.
        </div>
        <div class="column span-8">
                Utama, bagian tengah.
        </div>
        <div class="column span-3 last">
                Sidebar kanan, pakai last.
        </div>  
        <div class="column span-14">
              Kaki
        </div>       
</div>

Apa artinya ? , jawaban yang paling jelas mungkin harus dengan membaca kode CSS dari berkas grid.css.

Class column digunakan untuk membangun kolom. Jumlahnya tentu sudah di sebutkan diatas, bisa dikostumisasi sesuai keinginan. Jika membuat dengan jumlah 10, maka rentang nya ( span akan berakhir pada angka 10 ) span-10. Standarnya ada 14.

Jadi kode HTML pertama setelah tag HTML div class container berarti :

Memerintahkan kepada BP untuk membuat halaman dengan jumlah kolom 14. Di ikuti dengan kolom dengan span-3 artinya memerintahkan BP untuk membuat kolom dengan lebar yang sudah di tentukan di CSS class span-3 yaitu : 190px.

Untuk lebih jelasnya bisa dilihat di table berikut:

BluePrint CSS Kolom dan Span
Template Class Lebar dalam px
span-1 50 px
span-2 120 px
span-3 190 px
span-4 260 px
span-5 330 px
span-6 400 px
span-7; 470 px
span-8 540 px
span-9 610 px
span-10 680 px
span-11 750 px
span-12 820px
span-13 890 px
span-14 960 px, dan dengan margin 0 px
Jika jumlah kolom melebihi standar, misalkan 20 kolom, maka tinggal menambahkan class span-(jumlah kolom), dengan lebar antar sebesar 70 px.

Bersambung lagi …


Catatan kaki

1 1 MB = 1024 kb. 11 MB berkas di kompres dengan format zip. ↩

2 Berdasarkan pada typogrify. ↩

3 Mempergunakan CSS reset buatan Eric Meyer. ↩

tags: , , ,