0
0
0
share
#css#sass#css-grid
0 Komentar
Panduan membuat CSS Grid sederhana dengan SASS
Irfan Maulana • 7 April 2017
CSS Grid merupakan layout kumpulan class CSS yang digunakan untuk mengatur layout sebuah halaman website. Pada framework-framework CSS populer di luar sana, hampir semuanya mengakomodir kebutuhan CSS Grid dengan pendekatannya masing-masing.
CSS Grid biasanya membagi layout ke dalam konsep row
dan column
. Dimana row
akan berfungsi seperti tr
pada table HTML, sedangkan column
akan berfungsi layaknya td
pada table HTML.
Pada tutorial kali ini kita akan coba membuat CSS Grid sendiri dengan sedikit mencontoh pada apa yang dilakukan oleh beberapa framework populer diluar sana dengan bantuan CSS Pre-Processor SASS agar mempermudah kita dalam membuatnya, bila Anda belum familiar dengan SASS mungkin Anda perlu membaca artikel ini terlebih dahulu.
Pertama kita akan buat class .row
kita, namun sebelumnya kita akan men-define mixing clearfix
yang akan kita pakai di class .row
kita, sebagai berikut :
@mixin clearfix()
{
*zoom: 1;
&:before,
&:after
{
display: table;
content: ' ';
}
&:after
{
clear: both;
}
}
mixin clearfix
ini digunakan agar antar class row
tidak terjadi tumpang tindih karena di dalamnya biasanya akan banyak menggunakan rule float: something
.
Setelah membuat mixin tersebut, kita akan membuat class .row
-nya sedikit mengikuti dengan apa yang dibuat oleh framework foundation dalam menetapkan max-width nya agar ketika ditampilkan dilayar yang terlalu lebar tidak sampai fullscreen , berikut kodenya:
.row()
{
@include clearfix();
margin: 0 auto;
max-width: 92.308em;
}
Setelah berhasil membuat row, kita akan membuat class .column
kita, dan mengikuti dari beberapa framework populer yang membagi column mereka kedalam 12 bagian maka kita juga akan membaginya kedalam 12 bagian, dimana kita akan memberikan nama class sesuai dengan urutan angka dari column-1
sampai column-12
yang masing-masing memiliki lebar yang jika dijumlahkan akan menjadi 100% width.
Untuk implementasi kodenya, kurang lebih seperti berikut :
$columnCount: 12;
@for $i from 1 through $columnCount
{
.column-#{$i}
{
float: left;
width: ((100/$columnCount)*$i)*1%;
}
}
Dan kebutuhan dasar CSS Grid kita telah selesai dibuat dengan cepat, sederhana namun tetap memenuhi kaidah Grid Layout. Anda bisa memodifikasi, menambahkan ataupun mengurangi sesuai dengan kebutuhan masing-masing karena artikel ini memang dibuat untuk kebutuhan belajar dasar-dasarnya saja.
Untuk full source code pembuatan Grid CSS Anda bisa coba lihat di github repo saya disini, disitu sudah terdapat cara saya membuat Grid CSS beserta beberapa tambahan kebutuhan lainnya seperti offset
dan lain-lain.
Anda bisa juga melihat artikel saya mengenai CSS, SASS dan teknologi terkait lainnya disini.
Terima kasih dan semoga bermanfaat.
Ditulis oleh Irfan Maulana di sore hari yang mendung kala itu. :-)
Salam.
0
0
0
share