#Foundation

Foundation Part 3 : Grid System Framework Foundation

Foundation Part 3 : Grid System Framework Foundation – Setelah sebelumnya pada tutorial framework foundation part 1 dan part 2 kita belajar pengertian dan cara menggunakan framework foundation, pada tutorial foundation part 3 ini kita akan belajar tentang grid system framework foundation.

Foundation Part 3 : Grid System Framework Foundation

Grid di buat untuk membagi-bagi bagian halaman menjadi beberapa bagian. cara mudah memahaminya, misalnya bisa di bilang di buat untuk mengelompokkan bagian website menjadi beberapa bagian. jika teman-teman perhatikan pada template-template website, ada website yang menggunakan 2 kollumn, 3 kolum dan ada juga yang 4 kolum. nah hal ini bisa kita buat dengan mudah dengan bantuan grid system pada framework-framework seperti bootstrap atau foundation (banyak lagi framework css lainnya).

Grid system sangat perlu untuk di pahami jika ingin membuat halaman website yang responsive.

Langsung saja kita masuk ke contoh dan cara-cara penggunaan grid system pada framework foundation. agar lebih mudah di pahami.

Foundation Part 3 : Grid System Framework Foundation

Grid system pada framework foundation terbagi menjadi 12 kolum (sama seperti bootstrap). dan terbagi menjadi 3 ukuran device. yaitu :

Small = Ukuran smartphone ( <640px )
Medium = Ukuran tablet ( >=640px )
Large = Ukuran laptop atau PC ( >=1200px )

sedikit penjelasan mengenai ukuran-ukuran device di atas, grid small di gunakan untuk menentukan layout jika di buka dari smartphone atau ukuran sebesar kurang dari 640px.

Grid medium adalah untuk ukuran tablet. yaitu seukuran sebesar 640px atau lebih.

Dan grid large seukuran layar laptop atau PC. yaitu sebesar 1200px atau lebih.

Cara menggunakan grid system pada framework foundation

Untuk menggunakan grid system pada foundation, maka di wajibkan untuk menggunakan class .row terlebih dulu pada element sebelumnya. kemudian tambahkan class .columns pada bagian tag yang kita beri class grid.

Teman-teman pasti tidak akan bingung jika sudah sering menggunakan bootstrap. karena bootstrap juga menggunakan grid system untuk membuat halaman web yang responsive.

Foundation Part 3 : Grid System Framework Foundation

yuk kita buat contohnya langsung. buat sebuah file html baru. di contoh ini saya membuat sebuah file HTML baru dengan nama grid.html.

grid.html

<!doctype html>

<head>

<title>Tutorial GRID SYSTEM Foundation - www.malasngoding.com</title>

</head>

<body>

<center><h1>TUTORIAL FOUNDATION <br/> WWW.MALASNGODING.COM</h1></center>

<div class="small-2 medium-5 large-1 columns" style="background: #1abc9c">Kotak 1</div>

<div class="small-6 medium-5 large-5 columns" style="background: #2ecc71">Kotak 2</div>

<div class="small-4 medium-2 large-6 columns" style="background: #3498db">Kotak 3</div>

</div>

<div class="small-12 medium-3 large-2 columns" style="background: #f1c40f">Kotak 4</div>

<div class="small-12 medium-4 large-4 columns" style="background: #e67e22">Kotak 5</div>

<div class="small-12 medium-3 large-4 columns" style="background: #e74c3c">Kotak 6</div>

<div class="small-12 medium-2 large-2 columns" style="background: #7f8c8d">kotak 7</div>

</div>

$(document).foundation();

</script>

</body>

</html>

Jika teman-teman belum membaca tutorial foundation part 2 tentang cara menggunakan framework foundation, maka sangat di sarankan untuk membaca Foundation Part 2 : Cara Menggunakan Framework Foundation terlebih dulu.

Perhatikan pada contoh syntax di atas. kita telah membuat contoh grid system pada foundation framework.

<div class="small-2 medium-5 large-1 columns" style="background: #1abc9c">Kotak 1</div>

<div class="small-6 medium-5 large-5 columns" style="background: #2ecc71">Kotak 2</div>

<div class="small-4 medium-2 large-6 columns" style="background: #3498db">Kotak 3</div>

</div>

<div class="small-12 medium-3 large-2 columns" style="background: #f1c40f">Kotak 4</div>

<div class="small-12 medium-4 large-4 columns" style="background: #e67e22">Kotak 5</div>

<div class="small-12 medium-3 large-4 columns" style="background: #e74c3c">Kotak 6</div>

<div class="small-12 medium-2 large-2 columns" style="background: #7f8c8d">kotak 7</div>

</div>

di saya saya sudah memberi nama masing-masing kolum dengan kotak 1 sampai kotak 7. untuk lebih mudah teman-teman bedakan antara kolum 1 dengan kolum yang lainnya.

perhatikan pada kotak 1.

1	<div class="small-2 medium-5 large-1 columns" style="background: #1abc9c">Kotak 1</div>

kotak 1 akan di tampilkan sebesar 2 kolum jika di akses dari layar ukuran small(smartphone). dan kotak 1 akan di tampilkan sebesar 5 kolum jika di akses dari layar berukuran medium(tablet). dan kotak 1 akan di tampilkan sebesar1 kolum jika di akses dari layar berukuran besar, yaitu large (laptop atau pc).

Foundation Part 3 : Grid System Framework Foundation

begitu juga seterusnya dengan kotak-kotak yang lain.

sekarang coba kita akses dulu untuk melihat hasilnya. jika maximize browser kita untuk melihat bagaimana tampilannya jika di akses dari layar berukuran large ( >=1200px ).

grid system ukuran large

jika di akses dari layar tablet (>=640px).

grid system ukuran medium

dan jika di akses dari layar seukuran smartphone (<640px)

grid system ukuran small

Nah selesai. sangat mudah kan. mungkin hanya sekian dulu tutorial Foundation Part 3 : Grid System Framework Foundation. semoga bermanfaat. dan akan kita lanjutkan pada tutorial framework foundation selanjutnya di www.malasngoding.com.

Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.