Selamat Datang

Membuat Grid Layout HTML Dengan LESS

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.

Grid

Image By: Ollesvensson

Membuat Grid Pada LESS :

  1. Pertama kita harus mendownload less.js di http://lesscss.org/
  2. Kedua kita membuat folder htdocs atau www contoh:GridLess
  3. Memindahkan file less.js yang sudah kita download, pindah ke folder GridLess.
  4. Membuat file grid.less pada folder GridLess.
  5. 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%;*/
    }
  6. 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:

grid

Demo | Download Source

Semoga bermanfaat





Penulis :

Nama Saya Fikri Handa Herriansyah dan lahir di Surabaya, 10 Oktober 1993. dan sekarang tinggal di semarang. Disini saya kuliah dan mendapat kan ilmu. dan saya ingin membagi pengalaman saya ... kepada semua orang :D View all posts by Fikri Handa Herriansyah

Comments

6 thoughts on “Membuat Grid Layout HTML Dengan LESS

  1. rama says:

    Selamat malam,

    Fungis grid ini untuk apa ya, ko saya nga ngerti!!
    dan biasa di pakai untuk apa !! mohon pencerahaannya.

    terimakasih

  2. ricky says:

    1/@colom dst itu fungsi matematika ya ??

    • Fikri Handa says:

      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

  3. […] Membuat Grid Layout HTML dengan Less […]

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development