MEMBUAT LAYOUT WEBSITE DENGAN 960 GRID CSS FRAMEWORK

Membuat layout website dengan css memang pekerjaan yang cukup sulit bagi pemula (seperti saya). Kadang css yang saya buat tidak tampil dengan baik di browser lain, untuk mengatasi hal semacam itu dapat dilakukan dengan cara hacking css, reset css, atau dengan CSS Framework. Cara yang paling mudah (menurut saya) adalah dengan menggunakan CSS Framework. Beberapa contoh dari css framework misalnya, YAML, Blueprint, YUI, dan 960 grid system. Nah kali ini saya akan memberitahu bagaimana cara menggunakan 960 grid system.

960 menyediakan 2 macam grid: 12 dan 16 kolom grid. 960 memiliki lebar 960px ( oleh karena itu dinamakan 960) baik untuk yang 12 kolom maupun yang 16 kolom lebarnya sama. Setiap kolom memiliki right-margin: 10px, sehingga jarak antar kolom sebesar 20px. Untuk lebih jelasnya dapat dilihat pada halaman demo 960.

Demo

Lalu bagaimana cara menggunakannya ?

Download dulu 960 grid system di sini. Lalu copy file yang ada di direktori 960_download/code/css/ , di dalam direktori itu ada dua macam code 960 yaitu yang uncompressed dan compressed.

Download

Berikut daftar grid dengan 12 kolom :

1. 60px

2. 140px

3. 220px

4. 300px

5. 380px

6. 460px

7. 540px

8. 620px

9. 700px

10. 780px

11. 860px

12. 940px

Lebar kolom pada 960 memiliki class masing - masing. Untuk menggunakannya tinggal panggil (kaya tukang baso aja) class kolom yang ingin digunakan. Format class-nya, grid_x, x adalah angka dari tabel di atas ,jadi jika ingin menggunakan kolom dengan lebar 940px tinggal panggil saja class grid_12.

Sebelum memasukkan kolom tentukan dulu akan menggunakan 12 kolom atau 16 kolom dan perlu diingat jika membuat grid pastikan semua grid berjumlah 12, misalnya grid_4, grid_5, dan grid_3. Masukkan class clear untuk setiap baris yang telah dibuat.

CSS framework saya gunakan hanya untuk memastikan bahwa website dapat dibuka oleh semua browser, setelah layout di buat oleh framework tinggal tiru deh css-nya.

Menggunakan framework tidak sepenuhnya menguntungkan, jika ingin membuat layout dengan lebar lebih dari 960px harus merombak seluruh isi 960 grid system karena 960 hanya menyediakan kolom dengan lebar 960px. 960 juga tidak bisa membuat website dengan lebar liquid. Jadi gunakan framework hanya sebagai percobaan saja agar website dapat tampil saman pada semua browser.

Sumber: http://gadaguna.freevar.com/index.php/css/9-membuat-layout-website-dengan-960-grid-css-framework