Tutorial ini akan membahas Cara Membuat Grid Layout Sederhana Menggunakan LESS, pada dasarnya LESS itu extensi pada css yang sangat dinamis dilakukan, biasa disebut css preprocessor, LESS juga bisa membuat sebuah variable, mixins, operasi dan fungsi seperti halnya ekstensi lainnya seperti Sass. Kelebihan dari LESS dibandigkan Sass, di LESS kita hanya perlu memakai less.js saja yang disisipkan dihalaman website, dan sedangkan Sass harus menginstall dulu terlebih dahulu dikomputer.
Membuat Grid Pada LESS :
- Pertama kita harus mendownload less.js di http://lesscss.org/
- Kedua kita membuat folder htdocs atau www contoh:GridLess
- Memindahkan file less.js yang sudah kita download, pindah ke folder GridLess.
- Membuat file grid.less pada folder GridLess.
- Kita buka file grid.less dan isinya berikut ini :
Pertama: Kita Buat Variable
[css]/*membuat variable*/
@colom:12;[/css]
Kedua membuat mixing clearfix, kita bisa melihat di website ini http://nicolasgallagher.com/micro-clearfix-hack/
[css]/*membuat fungsi clearfix*/
.clearfix(){
*zoom: 1;
&:before,
&:after{
content: " ";
display: table;
}
&:after{
clear: both;
}
}[/css]
Ketiga kita mengatur box-sizing
Lebih lanjut tentang box-sizing baca disini http://www.paulirish.com/2012/box-sizing-border-box-ftw/:
/*membuat Box-sizing*/
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Keempat: Mambuat container dan row:
/*membuat Container dan Row*/
.container{
.clearfix();/*Pemanggilan fungsi clearfix*/
margin-right: auto;
margin-left: auto;
}
.row {
.clearfix();/*Pemanggilan fungsi clearfix*/
margin-left: -10px;
margin-right: -10px;
}
Kelima: Membuat Kolom
/*membuat Grid*/
[class*="colom-"],
[class^="colom-"]{
float:left;
padding:5px;
}
.colom-1{
width:percentage((1/@colom)); /*width:8.333333333333332%;*/
}
.colom-2{
width:percentage((2/@colom)); /*width:16.666666666666664%;*/
}
.colom-3{
width:percentage((3/@colom)); /*width:25%;*/
}
.colom-4{
width:percentage((4/@colom)); /*width:33.33333333333333%;*/
}
.colom-5{
width:percentage((5/@colom)); /*width:41.66666666666667%;*/
}
.colom-6{
width:percentage((6/@colom)); /*width:50%;*/
}
.colom-7{
width:percentage((7/@colom)); /*width:58.333333333333336%;*/
}
.colom-8{
width:percentage((8/@colom)); /*width:66.66666666666666%;*/
}
.colom-9{
width:percentage((9/@colom)); /*width:75%;*/
}
.colom-10{
width:percentage((10/@colom)); /*width:83.33333333333334%;*/
}
.colom-11{
width:percentage((11/@colom)); /*width:91.66666666666666%;*/
}
.colom-12{
width:percentage((12/@colom)); /*width:100%;*/
}
- Kita buat file HTML index.html pada folder GridLess dengan struktur berikut di
<body> dan </body>
<div class="container">
<div class="row">
<div class="colom-12">Colom 12</div>
<div class="colom-1">Colom 1</div>
<div class="colom-11">Colom 11</div>
<div class="colom-2">Colom 2</div>
<div class="colom-10">Colom 10</div>
<div class="colom-3">Colom 3</div>
<div class="colom-9">Colom 9</div>
<div class="colom-4">Colom 4</div>
<div class="colom-8">Colom 8</div>
<div class="colom-5">Colom 5</div>
<div class="colom-7">Colom 7</div>
<div class="colom-6">Colom 6</div>
<div class="colom-6">Colom 6</div>
</div>
</div>
Dan bagian <head> dan </head> dan sertakan link grid.less dan less.js yang sudah ada
<link href="grid.less" rel="stylesheet/less" type="text/css" />
<script type="text/javascript" src="less.js"></script>
Wala Kita sudah membuat grid sederhana , dan hasilnya seperti ini:
Demo | Download Source
Semoga bermanfaat
Selamat malam,
Fungis grid ini untuk apa ya, ko saya nga ngerti!!
dan biasa di pakai untuk apa !! mohon pencerahaannya.
terimakasih
Sebagai dasar pembuatan layout, misal layout 1 kolom, layout 2 kolom, sampai 12 kolom seperti yang di contohkan di situ.
1/@colom dst itu fungsi matematika ya ??
fungsi matematika tapi pada fungsi less yang sudah di sediakan … precentage(1/@colom) sama dengan 1 / 12 = 0.8333333333333332 * 100 … dan hasilnya 8.333333333333332% kenapa jadi persen karena ada fungsi dari less ada lah percentage()
Less Reference
[…] Membuat Grid Layout HTML dengan Less […]
[…] Membuat Grid Layout HTML Dengan LESS […]