Kali ini saya mengulik teknik layouting dengan Grid System, 960Gs bisa dikatakan framework css untuk layouting website. Bagi beberapa developer webiste (termasuk saya) kadang suka agak kerepotan dengan ukuran-ukuran yang harus dibuat ketika kita pertama kali akan membuat tampilan untuk website. Dan parahnya lagi setelah kita bersusah payah membuat css untuk website ternyata tidak kompatible den...

Ngulik Layouting web dengan 960Gs

Kali ini saya mengulik teknik layouting dengan Grid System, 960Gs bisa dikatakan framework css untuk layouting website. Bagi beberapa developer webiste (termasuk saya) kadang suka agak kerepotan dengan ukuran-ukuran yang harus dibuat ketika kita pertama kali akan membuat tampilan untuk website. Dan parahnya lagi setelah kita bersusah payah membuat css untuk website ternyata tidak kompatible dengan beberapa browser terutama biasanya (internet explorer).

Grid system menggunakan teknik grid dalam frameworknya, ada beberapa tipe dan ukuran grid; grid 12, grid 16; grid 24.  Salah satu kelebihan lagi dalam menggunakan 960gs, telah disediakannya template untuk skecth menggunakan hand made dan template untuk berbagai tipe aplikasi desain seperti (photoshop, firework, adobe ilustrator, corel, dll) sehingga memudahkan dan mensinkronkan ukuran website ntarnya antara developer dengan desainer (jika suatu proyek dikerjakan oleh 2 orang).

Untuk membuat layout menggunakan framework 960gs adalah sebagai berikut :

  1. desain website kita sesuai dengan template yang telah disediakan oleh 960gs, semua desain template termasuk 960gs dapat di download di sini, tentukan juga grid yang kita pakai berapa 12,16 atau 24.
  2. Untuk ukuran grid system menggunakan ukuran default 960px dengan fix css, jika kita membutuhkan ukuran yang customize dan tipe css kita fluid, kita bisa mendownload kembali 960gs hasil generator,di sini
  3. Setelah kita membuat desain untuk website kita, kemudian melakukan templating dengan guide dari grid yang kita tentukan di awal, guide bisa kita lihat di demo , tentukan class grid yang kita gunakan dan costum class sesuai dengan desain kita.
  4. berikut contoh layouting dengan grid 12
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>960 Grid System &mdash; Demo</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/text.css" />
<link rel="stylesheet" href="css/960_fluid.css" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="toolbar" style="background:#000">
	toolbar
</div>
<div class="container_12">
  <div class="header grid_12">
	Header
  </div>
  <div class="grid_4 content1">
	content 1
  </div>
  <div class="grid_4 content2">
	content 2
  </div>
  <div class="grid_4 content3">
	content 3
  </div>
   <div class="grid_12 footer">
	footer
  </div>

</div>
</body>
</html>
dan contoh style costum untuk grid12, style.css
body {
  background: #123;
  color: #333;
  font-size: 11px;
  height: auto;
  padding-bottom: 20px;
}

a {
  color: #fff;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1 {
  font-family: Georgia, serif;
  font-weight: normal;
  padding-top: 20px;
  text-align: center;
}

h2 {
  padding-top: 20px;
  text-align: center;
}

p {
  border: 1px solid #666;
  overflow: hidden;
  padding: 10px 0;
  text-align: center;
}

.container_12,
.container_16,
.container_24 {
  background-color: #fff;
  background-repeat: repeat-y;
  margin-bottom: 20px;
}

.container_12 {
  background:#000;
  background-image: url(../img/12_col.gif);
}

.container_16 {
  background-image: url(../img/16_col.gif);
}

.container_24 {
  background-image: url(../img/24_col.gif);
}
.header{
	height: 100px;
	background:#FF7F00;
}
.content1{
	min-height:300px;
	background:#00AAFF;
}
.content2{
	min-height:300px;
	background:#93DB42;
}
.content3{
	min-height:300px;
	background:#EF6655;
}
.footer{
	background:#AA2AFF;
	height:50px;
}
referensi : 960gs


About Author

titan

Hi, saya senang dengan dunia Komputer, more information visit http://blackinkstudio.co


Comment & Discussions

  • Freddy Sidauruk
    hem seharusnya ada link demon dan download nya gan ? akan lebih membantu jika ada itu , btw thanks for sharing it even not try it, LOL

  • swa (Guest)
    makasih gan sangat bermanfaat

    yuk mampir ke toko jam tangan keren
    http://merpatistore.com

  • Please LOGIN before if you want to give the comment.