Belajar Grid Lagi dengan PureCSS.io

Belajar GRID dengan Pure CSS
Belajar GRID dengan Pure CSS

Iseng belajar Grid lagi, sebelumnya saya pasrah bongkoan dengan Bootstrap nya Twitter yang terkenal sudah komplit (dan memang iya) tapi karena terlalu komplit saya perlu yang lebih sederhana.

Dulu sebelum mengenal Bootstrap suka bermain-main dengan 960.gs nggak tau nasibnya sekarang.

Nah karena pingin Grid yang simple dan mudah EXE nya saya akhirnya cari-cari lagi dan nemu purecss.ios.

Sebenarnya PURECSS.io ini nggak hanya GRID sih, seperti halnya Bootstrap ini juga lumayan kemana-mana. Tapi saya mau fokus ke GRID nya saja. Intinya sih kenapa sekarang tertarik dengan PURECSS.io ini karena kecilnya kebutuhan dan juga kesimpelannya (walaupun nggak simpel2 amat).

Tapi menimang berbagai hal saya sampai sekarang fokus saja make PURECSS.io ini. Saya akan berikan sample pembuatan GRID dengan PURECSS ini.

Pure CSS sepengetahuan saya ada dua grid utama, 5 dan juga 24. Dan penggunaanya super enaak. Kebutuhan utama adalah pondasi grid. Nah Pure CSS ini hanya menggunakan .pure-g sedangan elemen-elemen grid dengan pure-u-* dan pure-u-sm-* pure-u-md-* pure-u-lg-* pure-u-xl-*

Biar nggak bingung mari praktek saja. Oiya sebelum praktek PURECSS ini juga responsif kok. Mari… saya kasih sampel PURE CSS GRID yang sudah Responsif.

<div class="pure-g"> <!-- pondasi grid -->
<div class="pure-u-12-24">
</div>
<div class="pure-u-6-24">
</div>
<div class="pure-u-6-24">
</div>
</div><!-- / pondasi grid -->

Dari sample Grid diatas saya membuat GRID sederhana dengan 3 Kolom dimana kolom pertama lebar separonya, sedangkan 2 kolom berikutnya adalah separo dari separonya tadi.

Simpel kan? Nah gimana cara biar responsif? Caranya cukup simple. Untuk Responsif tinggal menambahkan elemen lanjutannya.

<div class="pure-g"> <!-- pondasi grid -->
<div class="pure-u-12-24 pure-u-md-8-24">
</div>
<div class="pure-u-6-24 pure-u-md-8-24">
</div>
<div class="pure-u-6-24 pure-u-md-8-24">
</div>
</div><!-- / pondasi grid -->

Selesai. Kode diatas akan memodifikasi hasil tampilan dimana ketika browser yang digunakan menggunakan resolusi md (medium) keatas maka desain akan dirubah menjadi 3 kolom dengan lebar yang sama. Berbeda dengan yang sebelumnya.

Bingung? Lain waktu disambung kalau bingung.. :)

Catatan:
Ukuran2 yang digunakan PURE CSS adalah sebagai berikut

Key CSS Media Query Applies Classname
None None Always .pure-u-*
sm @media screen and (min-width: 35.5em) 568px .pure-u-sm-*
md @media screen and (min-width: 48em) 768px .pure-u-md-*
lg @media screen and (min-width: 64em) 1024px .pure-u-lg-*
xl @media screen and (min-width: 80em) 1280px .pure-u-xl-*

Mengenal lebih jauh tentang Pure CSS bisa menuju ke http://purecss.io/

Leave a Reply

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