Menjelaskan Grid pada Foundation dan Mengetahui Skrip Grid untuk Memasangnya
Grid merupakan susunan garis horisontal dan vertikal yang mnembagi ruang menjadi beberapa kolom dan baris. Desain yang menggunakan sistem grid dalam pembuatanya akan membuat desain menjadi lebih rapi dan konsisten, termasuk dalam pembuatan desain website.
Membuat desain website yang menerapkan sistem grid menggunakan HTML dan CSS sangat mudah, karena sekarang sudah tersedia banyak CSS framework yang dapat menghasilkan layout yang menerapkan sistem grid salah satunya yaitu Foundation.
Grid pada Foundation
Kelebihan sistem grid pada Foundation, disamping penggunaanya yang cukup mudah, lebar grid dapat menyesuaikan ukuran layar device yang berbeda seperti pada komputer, tablet dan handphone atau dalam istilah kerennya responsive.
Foundation menggunakan nama class .row untuk menghasilkan baris dan .column untuk menghasilkan kolom grid. Lebar default class .column yaitu 12 grid atau memenuhi lebar layout.
Skrip grid basic.html
<!doctype html>
<html>
<head>
<title> Zurb Foundation </title>
<meta name="viewport" content="width=device-width,
initial-scale=l.0">
<link rel="stylesheet"
href=". ./ foundation/css/foundation.css"
</head>
<body>
<br>
<div class="row">
<div class="columns">
<div class="panel"> grid standar </div>
</div>
<div class="columns">
<div class="panel"> grid standar </div>
</div>
</div>
</body>
</html>
Mengubah Ukuran Kolom
Dalam menerapkan grid sistem, foundation membagi ukuran layar menjadi 3 jenis ukuran sehingga cara mengatur lebar kolom pun ada 3 cara, menyesuaikan dengan ukuran layar. Pembagian ukuran layar oleh foundation yaitu sebagai berikut:
large, yaitu ukuran layar dengan lebar minimal 64,063 em atau 1025 px, biasanya digunakan pada ukuran layar komputer. Cara mengatur lebar kolom pada ukuran layar ini menggunakan class .large-x, dimana x mewakili angka 1 sampai 12. Misalnya, class large-6 menunjukkan lebar kolom6 grid.
medium, yaitu ukuran layar dengan lebar 40,063 em atau 641 px sampai 64 em atau 1024px, biasanya digunakan pada ukuran layar tablet. Cara mengatur lebar kolom pada ukuran layar ini menggunakan class.medium-x, dimana nilai x mewakili angka 1 sampai 12. Misalnya, class .medium-4 menunjukkan lebar kolom 4 gridpada layar medium.
small, yaitu ukuran layar dengan lebar maksimal 40em atau 640 em, biasanya digunakan pada ukuran layar handphone.
kolom pada ukuran layar ini menggunakan class .Small-x, dimana nililai x mewakili angka 1 sampai 12. Misalnya, class .small-8 menunjukkan lebar kolom 8 grid pada layar handphone. Jika lebar kolom pada ukuran layar ini tidak ditentukan, maka lebarnya memenuhi layout atau 12 grid.
Skrip berikut memberikan contoh pengaturan lebar kolom pada berbagai jenis ukuran layar.
Skrip grid size.html
<div class="row">
<div class="columns large-8 small-4">
<div class="panel"> large-8 small-4</div>
</div>
<div class="columns large-4 small-8">
<div class="panel"> large-4 small-8</div>
</div>
</div>
<div class="row">
<div class="columns large-8 medium-6">
<div class="panel"> lerge-8 medium-6</div>
</div>
<div class="columns large-4 medium-6">
<div class="panel"> large-4 medium-6</div>
</div>
</div>
<div class="row">
<div class="columns medium-4 small-8">
<div class="panel"> medium-4 small-8</div>
</div>
<div class="columns medium-8 small-4">
<div class="panel"> medium-8 small-4</div>
</div>
</div>
Post a Comment for "Menjelaskan Grid pada Foundation dan Mengetahui Skrip Grid untuk Memasangnya "