Membuat Sistem Grid Cerdas dengan Semantic.gs

Membuat Sistem Grid Cerdas dengan Semantic.gs

Sistem grid saat ini banyak digunakan karena dapat memberikan kemudahan dalam membuat layout halaman website. Dengan sistem grid, halaman pada web dibagi menjadi kolom-kolom….

Sistem grid saat ini banyak digunakan karena dapat memberikan kemudahan dalam membuat layout halaman website. Dengan sistem grid, halaman pada web dibagi menjadi kolom-kolom. Elemen-elemen dalam halaman tersebut nantinya dapat diatur berdasarkan kolom-kolom yang ada sehingga tidak perlu lagi mendefinisikan lebar tiap elemen secara manual.

Namun, bukan berarti sistem grid telah benar-benar sempurna. Dengan menggunakan sistem grid, kita harus menyertakan kelas .grid_(x) atau .span_(x) ke dalam elemen-elemen HTML yang kita bangun. Selain itu, kita juga harus sering menggunakan elemen yang secara struktur sebenarnya tidak dibutuhkan. Tentu saja hal tersebut membuat kode HTML penuh dengan kelas untuk menentukan lebar elemen dan elemen yang seharusnya tidak diperlukan. Selain itu, sistem grid yang ada saat ini masih membawa kesulitan dalam membuat struktur tampilan halaman bersifat fix(statis) maupun fluid(dinamis) karena membutuhkan perhitungan yang cukup kompleks. Belum lagi terkait desain website yang responsif, saat ini belum banyak sistem grid yang mampu mendukung web responsif dengan sempurna.

LESS

Munculnya teknologi LESS yang membawa pendekatan baru dalam membuat tampilan web menjadi titik cerah bagi persoalan sistem grid. LESS memiliki fitur variabel, operasi, dan mixin yang bisa membuat kode CSS dengan lebih dinamis. Untuk memahami tentang LESS, Anda bisa membaca artikel berikut.

Apa itu Semantic.gs?

Semantic.gs atau Semantic Grid System adalah bentuk pendekatan baru dalam membangun tampilan halaman website dengan bantuan teknologi LESS. Dengan Semantic.gs, grid yang kita bangun akan mendukung teknologi semantic web. Selain mendukung semantic, Semantic.gs memberikan kemudahan dalam penggunaan kolom fix maupun fluid, mendukung web responsif, serta membuat kolom mudah diatur lebarnya.

Bagaimana Cara Menggunakan Semantic.gs?

Untuk menggunakan Semantic.gs sebenarnya cukup mudah.

Persiapan

Pertama, siapkan file LESS yang digunakan sebagai tampilan dokumen. Kemudian sertakan Semantic.gs ke dalam fileLESS tersebut dengan memasukkan kode di bawah ini.

@import grid.less;

File “grid.less” dapat diunduh pada situs ini. Selanjutnya definisikan variabel-variabel untuk jumlah kolom, lebar kolom, serta jarak antar kolom yang akan diterjemahkan ke dalam sistem grid.

Penggunaan

Misalkan kita ingin membuat halaman sederhana berisi konten artikel dan sidebar di sebelah kiri dengan struktur seperti di bawah ini

<body>
   <section>Leftbar</section>
   <article>Content</article>
<body>

Sekarang kita buat halaman yang memiliki lebar 960px dan terdiri dari 12 kolom. Tiap kolomnya akan memiliki lebar 60px, sedangkan jarak antar kolom selebar 20px. Untuk bagian sidebar kita buat selebar 3 kolom, sedangkan untuk bagian konten selebar 9 kolom. Kode yang harus kita buat pada file LESS kita adalah sebagai berikut.

// Kode LESS
@import grid.less

@columns: 12;             // jumlah kolom
@columns-width: 60;     // lebar kolom
@columns-gutter: 20;    // jarak antar kolom

section{
   .column(3);
}
article{
   .column(9);
}

Setelah dikompilasi menjadi CSS, kode LESS di atas akan menjadi seperti di bawah.

/* Hasil Kompilasi CSS */
section{
   display: inline;
   float: left;
   margin: 0 10px;
   width: 220px;
}
article{
   display: inline;
   float: left;
   margin: 0 10px;
   width: 700px;
}

Contoh di atas menunjukkan bahwa dengan menggunakan Semantic.gs, kita dapat menghilangkan penggunaan .grid_(x) dari kode HTML kita karena bagian tampilan grid cukup dilakukan pada CSS saja.

Fluid

Semantic.gs bisa berjalan berdasarkan pixel maupun persentase. Pada default-nya semantic.gs menggunakan pixel sebagai ukuran elemen seperti pada contoh sebelumnya. Untuk mendapatkan elemen fluid, kita bisa menggunakan ukuran dalam persen bagi grid kita. Untuk melakukannya pun cukup mudah. Anda tinggal menambahkan sebaris kode pada file LESS seperti di bawah ini.

@total-width: 100%;

Jika kita menggunakan file yang sama pada contoh sebelumnya tanpa mengubah kode lain, kita akan mendapatkan hasil kompilasi CSS seperti di bawah ini.

/* Hasil Kompilasi CSS */
section{
   display: inline;
   float: left;
   margin: 0 1.04167%;
   width: 22.9167%;
}
article{
   display: inline;
   float: left;
   margin: 0 1.04167%;
   width: 72.9167%;
}

Teknik fluid pada Semantic.gs ini akan menghitung secara otomatis berapa persen lebar kolom. Perhitungan ini juga berlaku pada nested column.

Responsif

Dengan Semantic.gs yang memisahkan sisi HTML dan tampilan grid, sangatlah ideal untuk membuat tampilan website responsif menggunakan @media query. Lihatlah contoh penggunaan responsif pada kode di bawah ini.

// Kode LESS
section { .column(3); }
article  { .column(9); }

@media screen and (max-width: 720px){
   section { .column(12); }
   article   { .column(12); }
}

Dengan kode di atas, apabila lebar jendela browser kurang dari 720px, lebar tiap elemen akan menjadi 12 kolom.

Push & Pull

Dengan menggunakan mixin .push() dan .pull() Anda bisa memberikan indentisasi pada kolom. Anda bisa mendorong sebuah elemen sejauh x kolom ke arah kanan dengan .push(). Sedangkan dengan .pull(), Anda bisa menarik elemen sejauh x kolom ke arah kiri. Lihat contohnya pada kode di bawah ini.

// Kode LESS
article{
   .push(2);
}
section{
   .pull(2);
}

Kode di atas setelah dikompilasi menjadi CSS akan menjadi seperti di bawah ini.

/* Hasil Kompilasi CSS */
article{
   margin-left: 170px;
}
section{
   margin-right: 170px;
}

Kesimpulan

Membuat website yang mendukung teknologi semantic dan menerapkan sistem grid dapat dilakukan dengan Semantic.gs. Terlebih lagi Semantics.gs sudah mendukung sebagian besar browser, termasuk IE versi 6 ke atas. Untuk alasan kemudahan dalam proses pengembangan menggunakan LESS, kita bisa menggunakan SimpLESS. Apakah Semantics.gs adalah teknologi yang Anda cari? Selamat mencoba!

Tag: , , ,

1 Comment

Leave Comment
  1. raden papang says:

    om,, less ini beneran bisa dukung semantic web,,

Write Comment

Your email will not be published. The marked label is required.