RSS Feed

CSS Framework: 960 Grid System

Posted on

960 grid system merupakan alat untuk membuat lay-out website. 960 artinya lebar halaman web sebesar 960 pixels. Lebar tersebut di zaman sekarang sudah bagus mengingat minimal, display sekarang menggunakan resousi lebar sebesar 1024 pixels. Bahkan kini sudah banyak monitor yang menggunakan resolusi lebih luas lagi yakni 1280 pixels. Kalau dulu mungkin maximal lebar akan di bawah 800 pixels karena banyak monitor yang menggunakan resolusi 600×800 pixels. Namun kini rasanya sudah jarang ya yang menggunakan resolusi itu kecuali untuk kepentingan tertentu. Jadi ukuran lebar 960 pixels kemungkinan besar akan muat di monitor pengguna komputer zaman sekarang.

Di  halaman demo-nya, 960gs memberikan tampilan grid 12 kolom dan 16 kolom. Grid 12 kolom maksudnya adalah lebar tampilan 940px yang berarti ada 10px ruang kosong masing-masing di kiri dan di kanan tampilan. 1 grid sama dengan 60 pixels. Jarak antar grid adalah 20 pixels. Dari patokan “halaman demo” ini, kita bisa membuat lay out mau lebar berapa grid.

Cara menggunakan 960gs adalah dengan menambahkan class=”container_12″ untuk tampilan grid 12 kolom dan class=”grid_X” di tiap elemen <div> di mana X adalah grid.

<div id=”container” class=“container_12”>

<div id=”main” class=”grid_3″>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

</div>

</div>

Script tersebut akan menghasilkan lebar elemen div main sebesar 3 grid dalam tampilan grid 12, artinya lebar div main adalah 220 pixels. Begitulah cara pakenya. Untuk lebih mengerti bagaimana aplikasinya, silakan ke sini atau tonton video ini: Nettuts Video for 960 grid system

About mangkum

Models maker and fans: building view-controller-models, financial models, statistical models and a fan of super models.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: