Tutorial CSS Framework 960 Grid System

CSS framework adalah sebuah pustaka yang telah dipersiapkan sebelumnya bertujuan untuk memudahkan, memenuhi persyaratan standar styling dari sebuah halaman web menggunakan Cascading Style Sheets. Seperti halnya pustaka pemrograman dan scripting, CSS frameworks (biasanya sebuah paket .css sheet eksternal yang disisipkan kedalam header) memaketkan sejumlah pilihan yang sudah ada untuk merancang dan outlaying halaman web
Beberapa contoh CSS Framework:
• Blueprintcss
• 960.gs
• Baseline css
• Elasti css
• Mollio
• Yaml
• Compass
• Less css
• Bluetrip
• 1 kb grid
• Wedoui
• Elements css
• YUI
• Marker css
• Tripoli
• Content with style framework
• Sen css
• Wym style
• Css caffold
• Boilerplate
• Floatz
• The golden grid
• Malo
• Emastic
• Logicss
• Sen css
• Typogridphy
• Clevercss
• 52framework
• X Css
12 of the best CSS Frameworks
1.Elements CSS Frameworks (Source: Project Designs)
2.WYMstyle: a CSS framework (Source: Daniel Reszka)
3.YAML CSS Framework (Source: High Resolution)
4.YUI Grids CSS (Source: Yahoo)
5.Boilerplate CSS Framework
6.Blueprint CSS
7.Schema Web Design Framework
(Source: David Golding Design)
8.CleverCSS
9.Tripoli Beta CSS Framework
(Source: Monc)
10.ESWAT Web Project Framework
(Source: Philip Karpiak)
11.CwS CSS Framework
(Source: Content with Style)
12.My (not really mine) CSS Framework
(Source: That Standards Guy)
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.
Lalu bagaimana cara menggunakannya ?
Download dulu 960 grid system. 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.
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. Untuk lebih jelasnya lihat code di bawah

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://id.firmanw.com/apa-css-framework-pilihan-anda
http://speckyboy.com/2008/03/28/top-12-css-frameworks-and-how-to-understand-them/
http://prakasa.me/