Menggunakan 960gs untuk konversi PSD ke XHTML/CSS

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.

Perkenalan saya dengan CSS Framework ini awalnya bingung tapi sangat tertarik, saya berfikir bagaimana menerapkan css grid ini ke html/css saya, beberapa hari saya mendalami ini (mungkin karena daya tangkap otak saya yang sangat lemah) sehingga agak lama dalam memahami css grid tersebut 😀

[related_posts]

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.

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

<head>
    <title>Menggunakan 960gs untuk konversi PSD ke XHTML/CSS</title>
    
    <!-- 960gs -->
    <link href="960gs/reset.css" rel="stylesheet" type="text/css" />
    <link href="960gs/text.css" rel="stylesheet" type="text/css" />
    <link href="960gs/960.css" rel="stylesheet" type="text/css" />
    
    <!-- style umum -->
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>

Kode diatas adalah cara memanggil grid 960gs dan style.css.

kamudian kita masuk ke area body dan isikan dengan kode berikut :

<body>
    <div class="container_16">
        <h2>Belajar 960 grid system</h2>
        <div class="grid_16 kotak">
            <h2>Header</h2>
        </div>
        <div class="clear"></div>
        <div class="grid_4 kotak">
            <h2>Grid 4 ke-1</h2>
        </div>
        <div class="grid_4 kotak">
            <h2>Grid 4 ke-2</h2>
        </div>
        <div class="grid_4 kotak">
            <h2>Grid 4 ke-3</h2>
        </div>
        <div class="grid_4 kotak">
            <h2>Grid 4 ke-4</h2>
        </div>
        <div class="clear"></div>
        <div class="grid_8 kotak">
            <h2>Grid 8 ke-1</h2>
        </div>
        <div class="grid_8 kotak">
            <h2>Grid 8 ke-2</h2>
        </div>
    </div>
</body>

Selanjutnya kita masukkan konten (terserah mau diisi apa) 😀

<body>
    <div class="container_16">
        <h2>Belajar 960 grid system</h2>
        <div class="grid_16 kotak">
            <h2>Header</h2>
            <p>Diam augue et nunc turpis, magna porttitor ac parturient pellentesque,
            augue tempor! Lorem sociis turpis lectus magnis lacus! Nunc eu! Massa etiam
            urna nisi massa turpis magnis, ultrices sociis urna. Porta dapibus elit.
            Turpis et sed. Pulvinar! Dolor sit, penatibus, turpis sed dolor turpis
            etiam mattis sagittis vut egestas pellentesque vel ac urna, adipiscing
            nec a integer rhoncus est risus, nisi et placerat mus aenean auctor, magna
            massa enim augue non integer nec! Lacus mid cras in risus tristique tempor
            tortor, enim parturient magna mattis, pulvinar, nisi porta ultrices nec.
            Tincidunt nunc et magnis augue, et dignissim rhoncus turpis! Purus.</p>
        </div>
        <div class="clear"></div>
        <div class="grid_4 kotak">
            <h2>Grid 4 ke-1</h2>
            <p>Diam augue et nunc turpis, magna porttitor ac parturient pellentesque,
            augue tempor! Loremtis, pulvinar, nisi porta ultrices nec.
            Tincidunt nunc et magnis augue, et dignissim rhoncus turpis! Purus.</p>
        </div>
        <div class="grid_4 kotak">
            <h2>Grid 4 ke-2</h2>
            <p>Diam augue et nunc turpis, magna porttitor ac parturient pellentesque,
            augue tempor! Lorem sociis turpis lectus magnis lacus! Nunc eu! Massa etiam
            urna nisi massa turpis magnis, 
            Tincidunt nunc et magnis augue, et dignissim rhoncus turpis! Purus.</p>
        </div>
        <div class="grid_4 kotak">
            <h2>Grid 4 ke-3</h2>
            <p>Diam augue et nunc turpis, magna porttitor ac parturient pellentesque,
            augue tempor! Lorem sociis turpis lectus magnis lacus! Nunc eu! Massa etiam
            urna nisi massa turpis magnis, ultrices sociis urna. Porta dapibus elit.
            Turpis et sed. Pulvinar! porta ultrices nec.
            Tincidunt nunc et magnis augue, et dignissim rhoncus turpis! Purus.</p>
        </div>
        <div class="grid_4 kotak">
            <h2>Grid 4 ke-4</h2>
            <p>ultrices sociis urna. Porta dapibus elit.
            Turpis et sed. Pulvinar! Dolor sit, penatibus, turpis sed dolor turpis
            etiam mattis sagittis vut egestas pellentesque vel ac urna, adipiscing
            nec a integer rhoncus est risus, nisi et placerat mus aenean auctor, magna
            massa enim augue non integer nec! Lacus mid cras in risus tristique tempor
            tortor, enim parturient magna mattis, pulvinar, nisi porta ultrices nec.
            Tincidunt nunc et magnis augue, et dignissim rhoncus turpis! Purus.</p>
        </div>
        <div class="clear"></div>
        <div class="grid_8 kotak">
            <h2>Grid 8 ke-1</h2>
            <p>nisi et placerat mus aenean auctor, magna
            massa enim augue non integer nec! Lacus mid cras in risus tristique tempor
            tortor, enim parturient magna mattis, pulvinar, nisi porta ultrices nec.
            Tincidunt nunc et magnis augue, et dignissim rhoncus turpis! Purus.</p>
        </div>
        <div class="grid_8 kotak">
            <h2>Grid 8 ke-2</h2>
            <p>Diam augue et nunc turpis, magna porttitor ac parturient pellentesque,
            augue tempor! Lorem sociis turpis lectus magnis lacus! Nunc eu! Massa etiam
            urna nisi massa turpis magnis, </p>
        </div>
    </div>
</body>

Dibagian CSS kita tambahkan :

body {
    text-align: center;
}
.kotak {
    text-align: left;
    background: #eee;
    margin-bottom: 20px;
}

Didalam kode html diatas saya menambahkan class kotak yang diberikan warna dasar yang berbeda biar terlihat perbedaannya.

Baca Juga:  Adobe Edge Web Font : Layanan Web-Font Dari Adobe

Dengan layout sederhana seperti diatas pasti bisa menyelesaikan hanya dengan +-5 menit 🙂 Dalam desain skala besar mungkin kita akan menghemat sekitar 40% energi kita 😉

Demo Tutorial

Untuk contoh-contoh penerapan kode-kode 960gs yang lainnya bisa di cek di sini

Apabila ada yang ditanyakan silahkan ngacung

Komentar

comments

zulsdesign

Seorang Web Designer, Web Developer, Wordpress Development dan independen Blogger. Spesialisasi Personal Branding. Selalu haus akan ilmu tentang perkembangan dunia Web Design, Social Media, Online Marketing. Kadang-kadang juga berprofesi sebagai konsultan Website dadakan :)

grain storage instagram türk takipçi satın al