Sigit Purnomo

Membangun Layout Website dengan Mudah dan Cepat menggunakan CSS Framework Bagian #1

Posted: April 7th 2009

Salah satu tahap yang memakan waktu lama pada saat membangun sebuah website adalah ketika membuat desain visual website (mockup) dan mengkonversi desain visual tersebut ke dalam CSS dan XHTML. Seringkali ketika seorang desainer web melakukan proses pembuatan desain visual website menggunakan perangkat lunak pengolahan gambar seperti PhotoShop, Firework maupun lainnya, terkadang konsep grid dilupakan. Hal ini akan membuat proses konversi desain visual tersebut ke dalam CSS dan XHTML menjadi lama dan merepotkan.

Alternatif solusi dari permasalahan di atas, salah satunya adalah dengan menggunakan CSS framework. CSS framework mampu mempercepat proses pembuatan desain visual website dan juga konversi desain visual website tersebut ke dalam CSS dan XHTML. Hal ini dikarenakan sudah ada panduan yang disediakan oleh CSS framework, baik ketika melakukan proses pembuatan desain visual maupun ketika mengkonversi desain visual tersebut ke dalam CSS dan XHTML. Beberapa contoh dari CSS framework misalnya 960 Grid System dan Blueprint CSS.

960 Grid System

960 Grid System adalah CSS framework yang dikembangkan oleh Nathan Smith dan menggunakan lebar kolom 960 piksel. CSS framework ini memiliki 2 varian yaitu varian 12 kolom dengan lebar masing-masing kolom 60 piksel dan varian 16 kolom dengan lebar masing-masing kolom 40 piksel, dimana setiap kolomnya memiliki lebar 10 piksel. Berikut ini adalah grid system untuk varian 12 kolom.

960 Grid System dapat digunakan dengan menambahkan tags berikut ini ke dalam bagian head dari dokumen XHTML:

<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/text.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/960.css" />

Layout dapat dibuat dengan terlebih dahulu memanggil class selector CSS container dengan format container_XX di mana XX menyatakan varian yang dipakai. Jika varian yang dipakai adalah 12 kolom maka container_12 dan jika varian yang dipakai adalah 16 kolom maka container_16. Setelah itu kita tinggal memanggil class selector CSS grid dengan format grid_XX untuk membuat kolom-kolomnya. Jika ingin menghilangkan margin kiri dari suatu kolom, dapat dilakukan dengan menambahkan alpha (grid_XX alpha). Sedangkan untuk menghilangkan margin kanan dapat dilakukan dengan menambahkan omega (grid_XX omega). Berikut ini adalah contoh code/tags untuk membuat sebuah layout yang memiliki 3 kolom dengan menggunakan varian 12 kolom. Kolom pertama memiliki lebar 180 piksel, kolom kedua memiliki lebar 360 piksel, dan kolom ketiga memiliki lebar 180 piksel.

<div class="container_12">
    <div class="grid_3">
		...
    </div>
    <div class="grid_6">
        ...
    </div>
    <div class="grid_3">
        ...
    </div>
</div>

Contoh hasil tutorial ini dapat Anda lihat di sini.

Bersambung ke bagian 2: Blueprint CSS Framework


5 responses to “Membangun Layout Website dengan Mudah dan Cepat menggunakan CSS Framework Bagian #1”

  1. Great post pak Sigit.
    Saya lebih senang memakai blueprint css.
    ini link nya http://www.blueprintcss.org , menurut saya salah satu framework css yang bagus untuk di pelajari 🙂
    Viva TF UAJY!

  2. fauzi says:

    so nice 960..

  3. Salam kenal Pak Sigit, wah senang berkenalan dengan Anda Pak. Kebetulan saya sedang belajar membuat website untuk WordPress menggunakan PSD ke XHTML+CSS. Terima kasih untuk ilmunya…

  4. Investasi says:

    wah sepertinya tulisan anda di blog ini bermanfaat semua thanks ya

  5. Toko Online says:

    Thx infonya Pak. Kayaknya frameworks patut dicoba nih.

Leave a Reply

Your email address will not be published. Required fields are marked *

© 2019 Universitas Atma Jaya Yogyakarta
css.php