PanduanZF

Panduan Zurb Foundation 3

Didistribusikan oleh : Fluider Team

versi 1.1
Update : Maret 2013

Panduan Zurb Foundation

1.2 Zurb Foundation 3
A. Pengenalan

Zurb Foundation 3 adalah responsive front-end framework yang memudahkan untuk
membangun web aplikasi secara cepat.

Framework CSS ini dapat diunduh di http://foundation.zurb.com/, Ekstrak folder Zurb yang telah
diunduh dan framework siap digunakan.

B. Persiapan

Kelebihan menggunakan Zurb adalah, pengguna diberi kemudahan dengan penambahan file
contoh HTML yang terinclude dengan file CSS dan Javascript.

Untuk memulai dari awal, berikut cara untuk menggunakan Zurb Foundation di HTML :

1. Memanggil CSS Zurb Foundation dengan menambahkan baris berikut sebelum
</head>
<link rel="stylesheet" href="stylesheets/foundation.css">

Javacript dan CSS dalam zurb merupakan satu kesatuan untuk membuat sebuah
desain web yang indah, untuk memanggil Javascript Zurb Foundation dapat
menambahkan baris dibawah ini.
<script src="javascripts/modernizr.foundation.js"></script>
<script src="javascripts/foundation.min.js"></script>

C. Start
C.1 Berbasis Grid
Default dari Grid System Zurb Foundation adalah lebar 940px dan 12 kolom. Grid
System ini digunakan untuk pembagian resolusi layar ke dalam 4 responsive variasi untuk

Distributed by Fluider Team 2

phone, tablet portrait and tablet landscape, small desktop, dan large wide screen desktop.

Pertama, buat sebuah file HTML dengan standar di bawah ini ditambah dengan CSS dan
Javascript dari Bootstrap.

<!DOCTYPE html>
<html lang="en">

 <html class="no-js" lang="en"> 
<head>
<meta charset="utf-8" />


<meta name="viewport" content="width=device-width" />

<title>Fluider - Zurb Foundation Tutorial</title>

<link rel="stylesheet" href="stylesheets/foundation.css">

<script
src="javascripts/modernizr.foundation.js"></script>
<script src="javascripts/foundation.min.js"></script>

</head>

<body>

</body>

</html>

Untuk membuat sebuah grid system pada zurb foundation, dibutuhkan beberapa class seperti
: row dan columns, untuk contoh penggunaan dapat meilhat contohnya di bawah ini.

<div class="row">
<div class="twelve columns">
</div>
</div>

untuk mengetahui fungsi grid system pada zurb, terapkan baris di bawah ini pada HTML,
untuk membuat struktur dari grid.

<div class="row">
</div>
</div>
<div class="row">
<div class="six columns">
</div>
</div>
</div>
<div class="row">


</div>
</div>
<div class="row">
<div class="one columns">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>


Dengan contoh di atas, tidak dapat menampilkan grid system secara kasat mata, untuk
menampilkan warna dari tiap-tiap span, buat sebuah class CSS pada HTML dengan baris
berikut. Letakkan sebelum </head>

<style>
.green {background-color: #CBF93E; }
.blue {background-color: #4282D3; }
.orange {background-color: #FFB640; }
.red {background-color: #FF6140; }
.purple {background-color: #906CD7; }
.yellow {background-color: #FFE640; }
</style>

Setelah selesai, terapkan warna yang berbeda dari tiap span, seperti contoh di bawah ini.

<div class="row">
</div>
</div>

untuk mengetahui fungsi grid system pada zurb, terapkan baris di bawah ini pada HTML,
untuk membuat struktur dari grid.

<div class="row">
<div class="green panel">
</div>
</div>
</div>


</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="purple panel">
</div>
</div>
</div>
</div>
</div>
</div>
</div>


</div>
<div class="two columns”>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="yellow panel">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>


</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>


</div>
</div>

Maka akan tampak struktur grid memenuhi 12 kolom tiap barisnya seperti tampilan HTML di
bawah ini.

C.2 Layout

Untuk permulaan mendesain responsive web, harus mempunyai sebuah kerangka /
layout, untuk mempermudah membuat layout dapat menggunakan grid system yang telah
dipelajari sebelumnya. Kerangka terbagi menjadi 3 bagian, yaitu header, content, dan footer.
Buatlah layout seperti langkah-langkah di bawah ini.

Header
Pertama, gunakan struktur HTML default dengan tambahan Zurb Foundation CSS +
Javascript ke dalam HTML baru.
Kemudian di dalam <body>, berikan code di bawah ini.

<header class="green panel">
<div class="row">


<div class="twelve columns">Header / Navigasi</div>
</div>
</header>

Content
Kedua, yang diperlukan sebuah content untuk menampilkan isi atau artikel dari blog,
tambahkan code untuk content di bawah ini di bawah </header>.

<div class="row">
<div class="twelve columns yellow panel">
Content Header
</div>
</div>
<div class="row">
<div class="four columns orange panel">
Content Pertama
</div>
Content Kedua
</div>
Content Ketiga
</div>
</div>

Footer
Ketiga, Footer berfungsi menampilkan si pembuat website, pemilik website, atau pembuat
desain, untuk menambahkan footer gunakan code di bawah ini.


<footer class="blue panel">
<div class="row">
<div class="twelve columns">Footer</div>
</div>
</footer>

Maka hasil struktur HTMLnya akan seperti ini.

C.3 Typography
Typography pada dasarnya digunakan untuk memperindah tampilan atau susunan text.
Untuk langkah selanjutnya gunakan typography untuk memasukkan content / artikel ke dalam
HTML.

Ubah header sebelumnya menjadi seperti di bawah ini.

<header class="green" style="margin-bottom: 10px;">
<div class="row">
<div class="twelve columns"><h3>Header /
Navigasi</h3></div>
</div>
</header>

Setelah itu pada content, tambahkan no image dengan menambahkan baris berikut:


<div class="row">
<div class="twelve columns panel">
<img src="http://dummyimage.com/1200x300/ddd/fff" />
</div>
</div>

Ubah juga pada Content Header dengan baris di bawah ini, untuk menampilkan typography
h1, h2, h3, h4, h5, h6, paragraf, penggunaan strong, dan addr.

<div class="row">
<div class="twelve columns yellow panel">
<h1>Ini adalah header h1</h1>
<p>
Ini merupakan paragraf. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<p>Ini menggunakan <strong>Strong</strong> di dalam
paragraf.</p>
<p>Ini penggunaan abbr pada singkatan <abbr
title="Indonesia">INA</abbr>.
</p>
</div>


</div>

Pada bagian Content Pertama, berikan contoh typography untuk penggunaan address,
berikut codenya.

<div class="four columns orange panel" style="height:250px;">
<h4>Penggunaan Address</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat.</p>
<address>
<strong>Fluider</strong><br/>
Swadaya 2<br/>
Cempaka Baru, Jakarta Pusat.
</address>
</div>

Sedangkan untuk Content Kedua Berikan Typography penggunaan Blockquote dengan code
di bawah ini.

<h4>Penggunaan Blockquote</h4>
<blockquote>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat.
</blockquote>


</div>

Untuk yang Content yang terakhir yaitu Content ketiga, berikan code untuk menampilkan
penggunaan Unordered List sama Ordered List.

<h4>Penggunaan Unordered List dan Ordered List</h4>
<ol>
<li>Penggunaan Ordered List(ol)</li>
</ol>
<ul>
<li>Penggunaan Unordered List(ul)</li>
</ul>
</div>

Yang terakhir, pada footer ubah baris footer dengan baris di bawah ini, untuk merubah warna
font dan ukuran.

<footer class="blue">
<div class="row">
<h5 style="color: #ffffff;">© 2013 Fluider.org
</h5>
</div>


</div>
</footer>

Setelah semuanya selesai, maka tampilannya akan berubah menjadi seperti gambar di
bawah ini.


C.4 Tabel
Tabel sering digunakan untuk menampilkan data yang bersifat sama dan
dikelompokkan menurut kolom dan baris.
Untuk membuatnya sebuah tabel pada Zurb Foundation, diperlukan class thead, tbody,
tr, td dan th, dengan tambahan class responsive, berikut penggunaannya.

Buat sebuah html baru, kemudian isi bagian content dengan baris berikut :

<div class="row">
<table class="responsive">
<thead>
<tr>
<th>No</th>
<th>Nama Depan</th>
<th>Nama Belakang</th>
<th>Sekolah</th>
<th>Kelas</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.</td>
<td>Rika</td>
<td>Vikawati</td>
<td>SDN Sumberjo 03</td>
<td>3</td>
</tr>
<tr>
<td>2.</td>


<td>Budi</td>
<td>Prasetyo</td>
<td>SDN Sumbelimo 10</td>
<td>5</td>
</tr>
<tr>
<td>3.</td>
<td>Nori</td>
<td>Manae</td>
<td>SDN Karangraja 05</td>
<td>5</td>
</tr>
</tbody>
</table>
</div>
</div>

Hasilnya akan tampak seperti di bawah ini.


C.5 Form
Pada panduan selanjutnya akan membahas tentang membuat form dengan zurb
foundation, form lebih sering digunakan untuk hal-hal yang bersifat membutuhkan inputan
dari pengguna. Seperti form pendaftaran, form login, form kebutuhan dan lain-lain.

Berikut contoh kode untuk membuat sebuah form :

Membuat Form Row Layout
Buatlah sebuah HTML baru yang lain, kemudian pada baris awal bagian content, tambahkan
baris di bawah ini.

<div class="row">
<h3>Form Row Layout</h3>
<div class="six columns panel">
<form>
<label>Full Name</label>
<input type="text" placeholder="Standard Input" />
<label>Address</label>
<input type="text" class="twelve"
placeholder="Street" />
<div class="row">
<label>City</label>
<input type="text" placeholder="City"
/>
</div>
<label>State</label>
<input type="text"


placeholder="State" />
</div>
<label>ZIP</label>
<input type="text"
placeholder="ZIP" />
</div>
</div>
</form>
</div>
</div>

Maka Hasilnya akan seperti di bawah ini.

Membuat Input dengan Prefix, Postfix, dan Actionable Character
Gunakan class prefix, postfix dan postfix button untuk membuat inputan prefix, postfix dan
tombol postfix. Untuk contoh kode dapat melihat kodenya di bawah ini.


<div class="row">
<h3>Input dengan Prefix character,Postfix label dan Postfix
button</h3>
<label>Input dengan prefix character</label>
<div class="row">
<div class="row collapse">
<div class="two mobile-one columns">
<span
class="prefix">#</span>
</div>
<div class="ten mobile-three
columns">
<input type="text" />
</div>
</div>
</div>
</div>
<label>Input dengan Postfix label</label>
<div class="row">
<div class="five columns">
<div class="nine mobile-three
columns">
<input type="text">
</div>
<div class="three mobile-one
columns">


<span
class="postfix">.com</span>
</div>
</div>
</div>
</div>
<label>Input dengan postfix Button</label>
<div class="row">
<div class="eight mobile-three
columns">
<input type="text" />
</div>
<div class="four mobile-one columns">
<a href="#" class="postfix
button">Pencarian</a>
</div>
</div>
</div>
</div>
</div>
</div>

Maka hasilnya akan seperti ini.


Membuat Inline Form Layout
Gunakan contoh kode di bawah ini untuk membuat inline form layout.

<form>
<div class="row">
<h3>Inline Form Layout</h3>
<label class="right
inline">Address:</label>
</div>
<div class="ten mobile-three columns">
<input type="text" placeholder="e.g.
Street" class="eight">
</div>
</div>
<div class="row">
<label class="right inline">City:</label>
</div>


<input type="text" class="eight">
</div>
</div>
<div class="row">
<label class="right inline">ZIP:</label>
</div>
<input type="text" class="three">
</div>
</div>
</form>

Hasilnya akan seperti di bawah ini.

Membuat Fieldset Layout
Gunakan fieldset dan legend untuk membuat fieldset layout, seperti pada contoh kode di
bawah ini.

<div class="row">
<h3>Fieldset Layout</h3>


<form class="custom">
<fieldset>
<legend>Name & Address</legend>
<label>Full Name</label>
<input type="text" placeholder="Full
name">
<label>Address</label>
<input type="text"
placeholder="Street">
<input type="text" class="six"
placeholder="State">
<input type="text" class="six"
placeholder="ZIP">
</fieldset>
</form>
</div>
</div>

Jika berhasil, maka akan tampilannya seperti ini.


Membuat Radio Button dan Checkbox
Pilihan radio button dan checkbox harus ada di setiap form, entah untuk digunakan untuk
mengetahui hasil terbanyak dari polling atau voting. Untuk membuatnya di Zurb, dapat
melihat contoh kode di bawah ini.

<div class="row">
<h3>Radio Button dan Checkbox</h3>
<form class="custom panel">
<label for="radio1">
<input name="radio1" type="radio" id="radio1">
Radio Button 1
</label>
<label for="radio2">


<input name="radio1" type="radio" id="radio2"
disabled> Radio Button 2
</label>
<label for="checkbox1">
<input type="checkbox" id="checkbox1"
style="display: none;">
<span class="custom checkbox"></span> Label for
Checkbox
</label>
<label for="checkbox2">
<input type="checkbox" id="checkbox2"
style="display: none;">
<span class="custom checkbox"></span> Label for
Checkbox
</label>
</form>
</div>

Hasilnya akan tampak seperti gambar berikut :

Dropdown / Select Element
Selain radio button dan checkbox, zurb foundation juga menyediakan fitur drop down dan
select element, untuk contoh kodenya dapat melihat kodenya di bawah ini.


<div class="row">
<h3>Form dropdown / select element</h3>
<form class="custom panel">
<label for="customDropdown">Pilih bahasa pemrogaman yang
paling disukai</label>
<select style="display:none;" id="customDropdown">
<option SELECTED>PHP</option>
<option>Java</option>
<option>C++</option>
<option>Python</option>
</select>
</form>
</div>

Untuk Zurb Foundation, select atau drop down tidak akan muncul secara otomatis seperti
pada HTML dan Bootstrap, perlu tambahan javascript jquery dan jquery.customform,
tambahkan baris di bawah ini sebelum </html>.

<script src="javascripts/jquery.js"></script>
<script src="javascripts/jquery.customforms.js"></script>

Maka Hasilnya akan seperti gambar berikut :


C.6 Top Bar

Pada bagian struktur HTML yang telah dibuat, ada bagian bernama header. Dalam
panduan ini akan dibahas bagaimana cara mengganti header menjadi bar.

Bar pada umumnya berguna untuk mempermudah pembagian artikel, data, atau
spesifikasi, untuk menambahkan bar pada header, ubah baris <header>...</header> dengan
baris di bawah ini.

<header style="margin-bottom: 70px">
<div class="row">
<div class="contain-to-grid fixed">
<nav class="top-bar">
<ul>

<li class="name">
<h1>
<a href="#">
Fluider
</a>
</h1>
</li>
<li class="toggle-topbar"><a
href="#"></a></li>
</ul>
<section>

<ul class="left">
<li class="divider"></li>

<li class="has-dropdown">
<a class="active"
href="#">Responsive</a>
<ul class="dropdown">
<li><label>Section
Name</label></li>
<li class="has-
dropdown">
<a href="#"
class="">Level 1, Has Dropdown</a>
<ul
class="dropdown">
<li><a
href="#">Level 2</a></li>
<li><a
<li
class="has-dropdown"><a href="#">Level 2, Has Dropdown</a>
<ul
class="dropdown">

<li><label>Section</label></li>
<li><a
<li><a href="#">Level 3</a></li>
<li
class="divider"></li>
<li><a


</ul>
</li>
<li><a
<li><a
</ul>
</li>
<li><a
<li><a
<li
<li><label>Section
Name</label></li>
<li><a
<li><a
<li><a
<li
<li><a
href="#">See all →</a></li>
</ul>
</li>
<li class="divider hide-for-


small"></li>
</ul>


<ul class="right">
<li class="divider show-for-
medium-and-up"></li>
<li class="has-dropdown">
<a href="#">Zurb
Foundation</a>
<ul class="dropdown">
<li><label>Section
Name</label></li>
<li><a href="#"
class="">Level 1</a></li>
<li><a
href="#">Dropdown Option</a></li>
<li><a
<li
<li><label>Section
Name</label></li>
<li><a
<li><a
<li><a

<li
<li><a
href="#">See all →</a></li>
</ul>
</li>
</ul>
</section>
</nav>
</div>
</div>
</div>
</header>

Maka tampilannya akan seperti berikut :


Untuk fungsi drop down dapat langsung aktif dan dapat mencobanya dengan mengklik
salah satu tab.


C.7 Icon
Pada Pembahasan selanjutnya, yaitu menambahkan icon, dengan menggunakan font
awesome yang dapat di download di http://fortawesome.github.com/Font-Awesome/.
Sebelum menggunakannya, tambahkan baris berikut ke bagian atas </head>.

<link rel="stylesheet" href="stylesheets/font-awesome.css">

Syntax yang digunakan untuk memanggil icon adalah :

<i class=”class nama_icon”></i>

Menambahkan Icon di Navigasi
Setelah pada pembahasan sebelumnya menambahkan navigasi di header, selanjutnya dapat
dicoba menambahkan icon di navigasi, ubah baris navigasi Responsive dan Zurb Foundation
dengan baris di bawah ini.


<a class="active" href="#"><i class="icon-book"></i>
Responsive</a>
<a href="#"><i class="icon-cog"></i> Zurb Foundation</a>

Maka hasilnya akan seperti gambar di bawah ini.

C.8 Navigation Bar dan Vertical Navigation
Untuk pembelajaran selanjutnya yaitu pengenalan navigasi dari zurb foundation, untuk
memanggil navigasi dapat menggunakan class .nav-bar. Berikut contoh kode untuk navigasi.

Membuat Navigasi Bar

<ul class="tabs-content">
<li class="active" id="navbarExTab">
<ul class="nav-bar">
<li class="active"><a href="#">Nav Item
1</a></li>
<li class="has-flyout">
<a href="#">Nav Item 2</a>
<a href="#" class="flyout-
toggle"><span> </span></a>
<ul class="flyout">
<li><a href="#">Sub Nav
Item 1</a></li>
Item 2</a></li>


3</a></li>
4</a></li>
Item 5</a></li>
</ul>
</li>
<div class="flyout">
<h5>Regular Dropdown</h5>
<div class="row">
<p>This is example
text. This is example text. This is example text. This is example
text. This is example text.</p>
</div>
<p>This is example
</div>
</div>
</div>
</li>


<div class="flyout large right">
<h5>Large Dropdown</h5>
<div class="row">
<p>This is example
<p>This is example
</div>
<p>This is example
<p>This is example
</div>
<img


src="http://placehold.it/200x250" />
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>

Membuat Vertical Navigation
Dalam tahap ini, HTML yang telah dibuat akan ditambahkan sidebar, ubah baris content
header menjadi seperti di bawah ini.

<div class="row">


<div class="three columns green panel">
Sidebar
</div>
<div class="nine columns yellow panel">
<li class="active" id="navbarExTab">
<ul class="nav-bar">
<li class="active"><a
href="#">Nav Item 1</a></li>
<ul class="flyout">
<li><a href="#">Sub
Nav Item 1</a></li>
<li><a href="#">Sub
Nav Item 2</a></li>
<li><a href="#">Sub
Nav 3</a></li>
<li><a href="#">Sub
Nav 4</a></li>
<li><a href="#">Sub
Nav Item 5</a></li>
</ul>
</li>


<h5>Regular
Dropdown</h5>
<div class="row">
<p>This is example
</div>
<p>This is example
</div>
</div>
</div>
</li>
<div class="flyout large
right">
<h5>Large Dropdown</h5>
<div class="row">


<p>This is example
<p>This is example
</div>
<p>This is example
<p>This is example
</div>
<img
src="http://placehold.it/200x250" />
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>


<h3>Apa itu Fluider ?</h3>
<p>
<strong>Fluider</strong> adalah inisiatif dari meruvian
yang membahas tentang aspek Desain dan lain-lain. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat.<br />
Fluider menyediakan beberapa konten untuk mendesain,
antara lain:
<ul>
<li>Programming</li>
<li>Responsive</li>
<li>Metro Style</li>
<li>Map GIS</li>
</ul>
</p>
</div>
</div>

Maka hasilnya akan seperti gambar di bawah ini.


Syntax yang digunakan untuk membuat vertical navigation adalah .nav-bar vertical , untuk
membuat sebuah navigasi vertikal, dibutuhkan bagian sidebar, ubah bagian sidebar pada
HTML yang telah dibuat menjadi seperti baris berikut :

<ul class="nav-bar vertical">
<li class="active"><a href="#">Nav Item 1</a></li>


<a href="#" class="flyout-toggle"><span>
</span></a>
<ul class="flyout">
<li><a href="#">Sub Nav Item
1</a></li>
2</a></li>
<li><a href="#">Sub Nav 3</a></li>
<li><a href="#">Sub Nav 4</a></li>
5</a></li>
</ul>
</li>
<a href="#" class="flyout-toggle"><span>
</span></a>
<h5>Regular Dropdown</h5>
<div class="row">
<p>This is example
</div>
<p>This is example


</div>
</div>
</div>
</li>
<li>
</li>
</ul>


Membuat Side Navigasi
Syntax yang digunakan adalah side-nav, ubah baris di sidebar menjadi baris berikut :

<li class="active" id="sidenavExTab">
<ul class="four side-nav">
<li class="active"><a href="#">Link
1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</li>
</ul>


C.9 Navigation Tabs dan Pills
Membuat Navigation Tabs
Untuk membuat navigation tabs pada HTML dapat menggunakan contoh kode di bawah ini,
class yang digunakan adalah tabs.

<ul class="tabs">
<li class="active"><a href="#simple1">Tab Pertama</a></li>
<li><a href="#simple2">Tab Kedua</a></li>
<li><a href="#simple3">Tab Ketiga</a></li>
</ul>
<li class="active" id="simple1Tab">Ini adalah contoh tab
pertama.</li>
<li id="simple2Tab">Ini adalah contoh tab
kedua.</li>
<li id="simple3Tab">Ini adalah contoh tab ketiga.</li>
</ul>

Membuat Navigation Pills
Penggunaannya hampir sama dengan kode di atas hanya menambah class pill disamping
tabs.

<ul class="tabs pill">


<li class="active"><a href="#simple1">Tab Pertama</a></li>
</ul>
<li class="active" id="simple1Tab">Ini adalah contoh tab
pertama.</li>
<li id="simple2Tab">Ini adalah contoh tab
kedua.</li>
</ul>

Mengubah Ukuran Tab
Kelebihan dari toolkit zurb foundation adalah dapat mengubah ukuran tab, untuk
menyesuaikan tab dengan layout dapat menggunakan class two-up, three-up, four-up dan
five-up ke dalam HTML.

<ul class="tabs five-up">
<li class="active"><a href="#simple1">Tab
Pertama</a></li>
<li><a href="#simple4">Tab Keempat</a></li>


<li><a href="#simple5">Tab Kelima</a></li>
</ul>
<li class="active" id="simple1Tab">Ini adalah contoh
tab pertama.</li>
<li id="simple2Tab">Ini adalah contoh tab kedua.</li>
<li id="simple4Tab">Ini adalah contoh tab keempat.</li>
<li id="simple5Tab">Ini adalah contoh tab kelima.</li>
</ul>

Membuat Contained pada Tabs
Agar tabs menarik, tambahkan fungsi containerd pada tabs, class yang digunakan adalah
tabs dan contained, berikut contoh codenya.

<dl class="tabs contained">
<dt>Judul</dt>
<dd class="active"><a href="#simpleContained1">Tab
Pertama</a></dd>
<dd class="hide-for-small"><a
href="#simpleContained2">Tab Kedua</a></dd>
<dt class="hide-for-small">Judul</dt>
<dd class="hide-for-small"><a
href="#simpleContained3">Tab Ketiga</a></dd>
</dl>


<ul class="tabs-content contained">
<li class="active" id="simpleContained1Tab">Ini
contoh tab menggunakan contained pertama.</li>
<li id="simpleContained2Tab">Ini contoh tab
menggunakan contained kedua.</li>
<li id="simpleContained3Tab">Ini contoh tab
menggunakan contained ketiga.</li>
</ul>

Membuat Vertical Tabs
Penggunaannya hampir sama dengan vertical navigation, hanya mengubah kode yang ada di
sidebar menjadi seperti di bawah ini.

<li class="active" id="vertTabsExTab">
<dl class="vertical tabs">
<dd class="active"><a
href="#vertical1">Vertical Tab 1</a></dd>
<dd><a href="#vertical2">Vertical Tab
2</a></dd>
<dd><a href="#vertical3">Vertical Tab
3</a></dd>
</dl>
</li>
</ul>


Hasilnya akan seperti gambar berikut :

C.10 Button
Pada panduan kali ini akan dijelaskan bagaimana membuat tombol, untuk class yang
digunakan adalah button.
Untuk kode button di bagi menjadi 4 ukuran yaitu :
Tiny Button → class=”tiny button”
Small Button → class=”small button”
Regular Button → class=”button”
Large Button → class=”large button”

Sedangkan dalam bentuk, class button di bagi menjadi 4 tipe, yaitu :
Primary Button → class=”button”
Secondary Button → class=”secondary button”
Success Button → class=”success button”
Alert Button → class=”alert button”

Untuk styles, button dibagi menjadi 3, yaitu :
Square → class=”button”
Radius → class=”radius button”
Round → class=”round button”


Berikut contoh kode, tambahkan di HTML yang telah dibuat.

<div class="row">
<p><a href="#" class="tiny button">Tiny Button »</a></p>
<p><a href="#" class="small button">Small Button
»</a></p>
<p><a href="#" class="button">Regular Button »</a></p>
<p><a href="#" class="large button">Large Button
»</a></p>
</div>
<p><a href="#" class="tiny secondary button">Tiny
Secondary Button »</a></p>
<p><a href="#" class="small secondary button">Small
<p><a href="#" class="secondary button">Regular Secondary
Button »</a></p>
<p><a href="#" class="large secondary button">Large
</div>
<p><a href="#" class="tiny success button">Tiny Success
Button »</a></p>
<p><a href="#" class="small success button">Small Success
Button »</a></p>
<p><a href="#" class="success button">Regular Success
Button »</a></p>
<p><a href="#" class="large success button">Large Success
Button »</a></p>


</div>
<p><a href="#" class="tiny alert button">Tiny Alert
Button »</a></p>
<p><a href="#" class="small alert button">Small Alert
Button »</a></p>
<p><a href="#" class="alert button">Regular Alert Button
»</a></p>
<p><a href="#" class="large alert button">Large Alert
Button »</a></p>
</div>
</div>

Untuk contoh kode button style.

<div class="row">


<h5>Styles</h5>
<a class="button"
href="#">Square</a><br><br>
<a class="radius button"
href="#">Radius</a><br><br>
<a class="round button" href="#">Round</a>
</div>
</div>

Button juga dapat dibagi menjadi 3 bagian, yaitu button group, dropdown button, dan split
button.

Membuat Button Group
Untuk membuat button group, class yang dibutuhkan adalah button-group. Berikut contoh
kodenya.

<h5>Button Group</h5>
<ul class="button-group radius">
<li><a href="#" class="button radius">Button
1</a></li>


2</a></li>
3</a></li>
</ul>
</div>

Membuat Dropdown Button
Untuk membuat dropdown button, class yang dibutuhkan adalah dropdown. Berikut contoh
kodenya.

<div href="#" class="large button dropdown">
Dropdown Button
<ul>
<li><a href="#">Dropdown Item</a></li>
<li><a href="#">Another Dropdown
Item</a></li>
<li><a href="#">Last Item</a></li>
</ul>
</div>


Membuat Split Button
Untuk membuat split button, class yang dibutuhkan adalah split. Berikut contoh kodenya.

<h5>Split Button</h5>
<div href="#" class="large alert button split dropdown">
<a href="#">Split Button</a>
<span></span>
<ul>
<li><a href="#">Dropdown Item</a></li>
<li><a href="#">Another Dropdown
Item</a></li>
<li><a href="#">Last Item</a></li>
</ul>
</div>


C.11 Breadcrumbs
Breadcrumbs adalah bantuan navigasi yang menginformasikan kepada pengguna
mengenai posisi atau letak sebuah artikel itu berada. Untuk menambahkan breadcrumbs
pada zurb foundation adalah dengan menggunakan class breadcrumbs.

Tambahkan kode contoh breadcrumbs di bawah ini setelah header.

<div class="row">
<ul class="breadcrumbs">
<li><a href="#">Home</a></li>
<li><a href="#">Responsive</a></li>
<li class="unavailable"><a href="#">Zurb
Foundation</a></li>
<li class="current"><a
href="#">Breadcrumbs</a></li>
</ul>
</div>
</div>

Tampilannya akan seperti gambar di bawah ini.

C.12 Pagination
Pada langkah selanjutnya adalah membuat pagination untuk halaman HTML yang
sedang dibuat, pagination pada zurb foundation berfungsi membagi artikel menjadi beberapa
halaman untuk menghindari artikel yang panjang dalam satu halaman HTML.

untuk menggunakan pagination pada HTML, gunakan class pagination.


<ul class="pagination" style="margin-top:10px;">
<li class="arrow unavailable"><a
href="">«</a></li>
<li class="current"><a href="">1</a></li>
<li><a href="">2</a></li>
<li class="unavailable"><a href="">…</a></li>
<li><a href="">12</a></li>
<li><a href="">13</a></li>
<li class="arrow"><a href="">»</a></li>
</ul>

C.13 Modal atau Popup Windows dengan Reveal
Untuk tampilan modalnya menggunakan class reveal-modal, sedangkan untuk tombol close
pada modal menggunakan class close-reveal-modal.

Untuk kodenya dapat melihat contohnya di bawah ini.


<div class="row">
<h3>Ini adalah contoh modal Zurb Foundation.</h3>
<p><a href="#" data-reveal-id="exampleModal"
class="radius button">Contoh Fitur Modal</a></p>
</div>
</div>
<div id="exampleModal" class="reveal-modal">
<h2>Ini adalah panduan dari Fluider.</h2>
<p class="lead">Ini panduan tentang Zurb.</p>
<p>Panduan secara menyeluruh tentang Toolkit Zurb
Foundation.</p>
<a class="close-reveal-modal">×</a>
</div>


C.14 Orbit
Zurb Foundation juga memiliki fitur image slider bernama orbit. Dengan fitur ini, dapat
menampilkan gambar dalam bentuk slide. Untuk fitur Orbit pada Zurb, tidak memerlukan css
untuk menampilkannya, cukup menggunakan id dan img src.

Di Tampilan HTML sebelumnya, di bagian bawah header terdapat bagian untuk meletakkan
bagian gambar, ubah letak tersebut dengan kode di bawah ini.

<div class="row">
<div id="slider">
<img src="images/1.png" alt="slide image">
</div>
</div>
</div>


Untuk saat ini, slider tidak dapat berjalan atau menampilkan semua gambar, dikarenakan
belum adanya fungsi javascript yang menjalankan slider tersebut, tambahkan script di bawah
ini di atas </body>.

<script>
$(window).load(function(){
$("#slider").orbit();
});
</script>

Maka hasilnya akan tampak seperti di bawah ini.


C.15 Accordion
Accordion pada Zurb kegunaannya hampir sama dengan collapse pada bootstrap.
Untuk mengetahui lebih lanjut apa itu Accordion, silahkan lihat kode di bawah ini.

<ul class="accordion">
<li class="active">
<div class="title">
<h5>Accordion Panel 1</h5>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.</p>


</div>
</li>
<li>
<div class="title">
</div>


</div>
</li>
<li>
<div class="title">
</div>
</div>
</li>
</ul>


C.16 Alert
Di pembahasan ini akan membahas fungsi zurb foundation lain yaitu fungsi untuk
menampilkan pesan pemberitahuan. Untuk kode dapat melihat contohnya di bawah ini.

<div class="alert-box">
Ini adalah standar peringatan.
<a href="" class="close">×</a>
</div>
<div class="alert-box success">
Ini adalah peringatan sukses.
</div>
<div class="alert-box alert">
Ini adalah peringatan bahaya.


</div>
<div class="alert-box secondary">
Ini adalah peringatan yang kedua.
</div>

C.17 Label
Pada panduan kali ini akan dijelaskan bagaimana membuat label. Untuk syntax yang
digunakan adalah label. Untuk kode label di bagi menjadi 4 tipe yaitu :

Default → class=”label”
Secondary → class=”label secondary”
Success → class=”label success”
Alert → class=”label alert”

Sedangkan untuk style dibagi menjadi 3, yaitu :
Regular → class=”label”
Radius → class=”radius label”
Round → class=”round label”


Berikut contoh kode, tambahkan di HTML yang telah dibuat.

<div class="row">
<div class="three columns phone-two">
<h5>Types</h5>
<span class="label">Normal
Label</span><br>
<span class="secondary label">Secondary
Label</span><br>
<span class="success label">Success
Label</span><br>
<span class="alert label">Alert
Label</span>
</div>
<div class="three columns end phone-two">
<h5>Styles</h5>
<span class="label">Regular
Label</span><br>
<span class="radius label">Radius
Label</span><br>
<span class="round label">Round
Label</span>
</div>
</div>


C.18 Tooltip

Dalam pembahasan ini akan dilanjutkan dengan fitur zurb foundation yaitu tooltip,
fungsi dari tootip adalah menjelaskan suatu kata dengan penjelasan yang muncul secara
popup. Sedangkan pada zurb, tooltip dibagi menjadi 4 posisi tooltip :

Default / Bawah → class=”has-tip”
Atas → class=”has-tip tip-top noradius”
Kiri → class=”has-tip tip-left”
Kanan → class=”has-tip tip-right”
Berikut contoh kodenya :

<h5>Contoh Tooltip pada paragraf di bawah ini.</h5>
<p>Fungsi Tooltip dapat digunakan pada posisi <span
class="has-tip" data-width="210" title="Tooltip ada di bawah dan
merupakan default.">"tip-bottom"</span>, yang merupakan default
posisi, <span class="has-tip tip-top noradius" data-width="210"
title="Tooltip ada di atas">"tip-top"</span>, <span class="has-
tip tip-left" data-width="90" title="Tooltip ada di kiri">"tip-
left"</span>, atau <span class="has-tip tip-right" data-
width="120" title="Tooltip ada di kanan">"tip-right"</span>.</p>

C.19 Progress Bar
Progress Bar sering digunakan untuk mendeskripsikan proses atau jumlah, untuk
menggunakannya class progress. Class progress pada zurb foundation di bagi menjadi 4
yaitu: progress, progress radius, progress secondary dan progress alert.

Untuk contoh kode dapat menggunakan kode di bawah ini.


<h5>Contoh Progress Bar.</h5>
<div class="progress six"><span class="meter"></span></div>
<div class="radius progress success eight"><span
class="meter"></span></div>
<div class="nice round progress alert ten"><span
<div class="nice secondary progress"><span

C.20 Thumbnail
Pada panduan ini akan membahas bagaimana cara membuat thumbnail, class yang
digunakan adalah class “th”.

Untuk percobaan, ganti kode pada content pertama, content kedua dan content ketiga
dengan kode di bawah ini.

<h4>Penggunaan Thumbnail</h4>
<a href="#" class="th"><img
src="http://placehold.it/350x200"></a>
</div>


</div>
</div>

C.21 Panel dan Tabel Harga

Pada Toolkit Zurb Foundation ada tambahan fitur untuk HTML yaitu panel dan Tabel
Harga, untuk panel dapat menggunakan class radius sedangkan untuk tabel harga dapat
menggunakan class pricing-table. Berikut contoh kode untuk keduanya.

Panel

<h3>Panel</h3>
<div class="row">
<div class="panel">


<h5>Ini adalah Panel
Regular.</h5>
labore et dolore magna aliqua.</p>
</div>
</div>
<div class="panel callout radius">
<h5>Ini adalah Callout
Panel.</h5>
labore et dolore magna aliqua.</p>
</div>
</div>
</div>

Tabel Harga

<h3>Tabel Harga</h3>
<div class="row">


<ul class="pricing-table">
<li class="title">Standar</li>
<li class="price">Rp 100.000</li>
<li
class="description">Content...</li>
<li class="bullet-item">1
Database</li>
<li class="bullet-item">5GB
Storage</li>
<li class="bullet-item">20 User</li>
<li class="cta-button"><a
class="button" href="#">Beli Sekarang »</a></li>
</ul>
</div>
<ul class="pricing-table">
<li class="title">Standar</li>
<li class="price">Rp 100.000</li>
<li
class="description">Content...</li>
<li class="bullet-item">1
Database</li>
<li class="bullet-item">5GB
Storage</li>
<li class="bullet-item">20 User</li>
<li class="cta-button"><a
class="button" href="#">Beli Sekarang »</a></li>
</ul>
</div>


</div>

C.22 Video
Selain menampilkan gambar dan tulisan, zurb foundation juga menyediakan fitur untuk
menampilkan video, untuk class yang digunakan adalah flex-video. Berikut contoh kodenya
dapat melihat contohnya di bawah ini.

<ul class="tabs-content contained">
<li class="active" id="video1Tab">
<div class="flex-video">
<iframe width="420" height="315"
src="link_youtube" frameborder="0" allowfullscreen></iframe>
</div>
</li>
<li id="video2Tab">
<div class="flex-video widescreen">
<iframe width="560" height="315"


src="link_youtube" frameborder="0" allowfullscreen></iframe>
</div>
</li>
<li id="video3Tab">
<div class="flex-video widescreen vimeo">
<iframe src="link_player_vimeo"
width="400" height="225" frameborder="0" webkitAllowFullScreen
mozallowfullscreen allowFullScreen></iframe>
</div>
</li>
</ul>


C.23 Responsive
Pada pembahasan yang terakhir, yaitu mengubah desain HTML yang ada menjadi
dapat di tampilkan pada layout mobile, layout tablet dan layout desktop dalam sekaligus.
Kelebihan dari toolkit zurb foundation, css dan javascript yang digunakan dapat langsung
terinclude semua fitur dan fungsi beserta fungsi responsive juga.

Ketika HTML yang telah dibuat, digeser menjadi ukuran tablet, tampilannya akan seperti di
bawah ini.


~ Selamat Mencoba ~


PanduanZF

Recommandé

Recommandé

Contenu connexe

Plus de The World Bank

Plus de The World Bank (20)

PanduanZF