Bagi yang belum tahu apa itu 960gs mungkin perlu baca dulu tulisan Membuat Website Lebih Cepat Menggunakan CSS Framework. Banyak sekali CSS Framework yang kesemuanya sebenarnya mudah digunakan untuk proyek pembuatan website kita, selain ke-16 yang ada di link di atas sekarang sudah mulai banyak bermunculan css grid baru.
Setelah saya paham memang sangat-sangat-sangat membuat pekerjaan saya lebih cepat dari biasanya. Oke kita langsung saja. Persiapan
960gs ini bagusnya sudah menyediakan template PSD untuk memudahkan kita dalam mendesain di Photoshop yang nantinya menggunakan 960gs untuk html/css-nya, silahkan unduh templatenya disini Template 960gs Disitu sudah tersedia template untuk Photoshop, illustrator dll.
Persiapan
960gs ini bagusnya sudah menyediakan template PSD untuk memudahkan kita dalam mendesain di Photoshop yang nantinya menggunakan 960gs untuk html/css-nya, silahkan unduh templatenya disini Template 960gs Disitu sudah tersedia template untuk Photoshop, illustrator dll.
960gs
Contoh Kasus
Kita akan membuat tampilan website seperti gambar dibawah ini
layout yang sederhana sebagai awal pembelajaran kita 
Kita persiapkan dulu beberapa file yang diperlukan untuk membuat tampilan seperti diatas
Pada folder 960gs itu terdapat 3 file yaitu : reset.css, text,css, dan 960.css. Disini kita menggunakan yang 16 Grid, maksudnya adalah 960 dibagi kedalam 16 grid, lihat gambar (ada 16 garis disitu)
Pengenalan Kode 960gs
Perlu diketahui dulu kode-kode yang ada di 960gs tersebut :
container_12 atau container_16 atau container_24
ini dipakai sebagai batas dari konten, seperti yang saya bilang diatas bahwa container_12 artinya 960px dibagi kedalam 12 grid, dst.
grid_1, grid_2, … dst.
kode ini adalah kode untuk gridnya, misalkan kita mau buat 4 grid kita tinggal tulis grid_4 dst.
alpha & omega
alpha dimana kondisi margin-left dibuat 0, dan omega margin-right = 0, kenapa begitu? karena setiap grid_1 itu mengandung margin-right & margin-left sebesar 10px, gunanya untuk memberikan ruang de kiri-kanan agar ada space (longgar)
prefix_1, prefix_2, … dan suffix_1, suffix-2, …
prefix_1 adalah dimana dibagian kiri diberikan nilai padding (padding-left), prefix_1 artinya nilai paddingnya sama dengan grid 1. kalau suffix_1 adalah kebalikan dari prefix_1 dimana padding yang ditambahkan adalah untuk sebelah kanan (padding-right)
push_1, push_2, … dan pull_1, pull_2, ….
push_1 artinya memberikan dorongan untuk left dengan nilai positif, sedangkan pull_1 memberikan dorongan dengan nilai negatif.
clear
meng-clear-kan baris selanjutnya : clear : both
Implementasi
Sekarang kita akan masuk dalam tahap koding. Pada file index.html kita panggil dulu 960gs & style.css
0 komentar:
Posting Komentar