Responsive zurb fondation v.1.1

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

http://foundation.zurb.com/

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 class="four columns">

</div>


</div>


</div>

</div>

<div class="row">

<div class="three columns">

</div>


</div>


</div>


</div>

</div>

<div class="row">

<div class="two columns">

</div>


</div>


</div>


</div>


</div>



</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 class="row">

<div class="six columns”>

<div class="blue panel">

</div>

</div>


<div class="blue panel">

</div>

</div>

</div>

<div class="row">


<div class="orange panel">

</div>

</div>



</div>

</div>



</div>

</div>

</div>

<div class="row">


<div class="red panel">

</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.


http://fortawesome.github.com/Font-Awesome/

<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>



http://placehold.it/350x200




</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">


http://placehold.it/350x200

<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 ~

Documents

Responsive zurb fondation v.1.1