Your SlideShare is downloading. ×
Responsive zurb fondation v.1.1
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Responsive zurb fondation v.1.1

445
views

Published on


0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
445
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
38
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Panduan Zurb Foundation 3Didistribusikan oleh : Fluider Team versi 1.1 Update : Maret 2013
  • 2. Panduan Zurb Foundation1.2 Zurb Foundation 3A. PengenalanZurb Foundation 3 adalah responsive front-end framework yang memudahkan untukmembangun web aplikasi secara cepat.Framework CSS ini dapat diunduh di http://foundation.zurb.com/, Ekstrak folder Zurb yang telahdiunduh dan framework siap digunakan.B. PersiapanKelebihan menggunakan Zurb adalah, pengguna diberi kemudahan dengan penambahan filecontoh 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. StartC.1 Berbasis Grid Default dari Grid System Zurb Foundation adalah lebar 940px dan 12 kolom. GridSystem ini digunakan untuk pembagian resolusi layar ke dalam 4 responsive variasi untukDistributed by Fluider Team 2
  • 3. 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 danJavascript dari Bootstrap. <!DOCTYPE html> <html lang="en"> <!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <! [endif]--> <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<! [endif]--> <head> <meta charset="utf-8" /> <!-- Set the viewport width to device width for mobile --> <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>Distributed by Fluider Team 3
  • 4. </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 class="twelve columns"> </div> </div> <div class="row"> <div class="six columns"> </div> <div class="six columns"> </div> </div> <div class="row">Distributed by Fluider Team 4
  • 5. <div class="four columns"> </div> <div class="four columns"> </div> <div class="four columns"> </div> </div> <div class="row"> <div class="three columns"> </div> <div class="three columns"> </div> <div class="three columns"> </div> <div class="three columns"> </div> </div> <div class="row"> <div class="two columns"> </div> <div class="two columns"> </div> <div class="two columns"> </div> <div class="two columns"> </div> <div class="two columns"> </div> <div class="two columns">Distributed by Fluider Team 5
  • 6. </div> </div> <div class="row"> <div class="one columns"> </div> <div class="one columns"> </div> <div class="one columns"> </div> <div class="one columns"> </div> <div class="one columns"> </div> <div class="one columns"> </div> <div class="one columns"> </div> <div class="one columns"> </div> <div class="one columns"> </div> <div class="one columns"> </div> <div class="one columns"> </div> <div class="one columns"> </div> </div>Distributed by Fluider Team 6
  • 7. Dengan contoh di atas, tidak dapat menampilkan grid system secara kasat mata, untukmenampilkan warna dari tiap-tiap span, buat sebuah class CSS pada HTML dengan barisberikut. 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 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 class="twelve columns"> <div class="green panel"> </div> </div> </div>Distributed by Fluider Team 7
  • 8. <div class="row"> <div class="six columns”> <div class="blue panel"> </div> </div> <div class="six columns"> <div class="blue panel"> </div> </div> </div> <div class="row"> <div class="four columns"> <div class="orange panel"> </div> </div> <div class="four columns"> <div class="orange panel"> </div> </div> <div class="four columns"> <div class="orange panel"> </div> </div> </div> <div class="row"> <div class="three columns"> <div class="red panel"> </div> </div>Distributed by Fluider Team 8
  • 9. <div class="three columns"> <div class="red panel"> </div> </div> <div class="three columns"> <div class="red panel"> </div> </div> <div class="three columns"> <div class="red panel"> </div> </div> </div> <div class="row"> <div class="two columns"> <div class="purple panel"> </div> </div> <div class="two columns"> <div class="purple panel"> </div> </div> <div class="two columns"> <div class="purple panel"> </div> </div> <div class="two columns"> <div class="purple panel"> </div>Distributed by Fluider Team 9
  • 10. </div> <div class="two columns”> <div class="purple panel"> </div> </div> <div class="two columns"> <div class="purple panel"> </div> </div> </div> <div class="row"> <div class="one columns"> <div class="yellow panel"> </div> </div> <div class="one columns"> <div class="yellow panel"> </div> </div> <div class="one columns"> <div class="yellow panel"> </div> </div> <div class="one columns"> <div class="yellow panel"> </div> </div> <div class="one columns"> <div class="yellow panel">Distributed by Fluider Team 10
  • 11. </div> </div> <div class="one columns"> <div class="yellow panel"> </div> </div> <div class="one columns"> <div class="yellow panel"> </div> </div> <div class="one columns"> <div class="yellow panel"> </div> </div> <div class="one columns"> <div class="yellow panel"> </div> </div> <div class="one columns"> <div class="yellow panel"> </div> </div> <div class="one columns"> <div class="yellow panel"> </div> </div> <div class="one columns"> <div class="yellow panel"> </div>Distributed by Fluider Team 11
  • 12. </div> </div>Maka akan tampak struktur grid memenuhi 12 kolom tiap barisnya seperti tampilan HTML dibawah ini.C.2 Layout Untuk permulaan mendesain responsive web, harus mempunyai sebuah kerangka /layout, untuk mempermudah membuat layout dapat menggunakan grid system yang telahdipelajari sebelumnya. Kerangka terbagi menjadi 3 bagian, yaitu header, content, dan footer.Buatlah layout seperti langkah-langkah di bawah ini.HeaderPertama, 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">Distributed by Fluider Team 12
  • 13. <div class="twelve columns">Header / Navigasi</div> </div> </header>ContentKedua, 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> <div class="four columns orange panel"> Content Kedua </div> <div class="four columns orange panel"> Content Ketiga </div> </div>FooterKetiga, Footer berfungsi menampilkan si pembuat website, pemilik website, atau pembuatdesain, untuk menambahkan footer gunakan code di bawah ini.Distributed by Fluider Team 13
  • 14. <footer class="blue panel"> <div class="row"> <div class="twelve columns">Footer</div> </div> </footer>Maka hasil struktur HTMLnya akan seperti ini.C.3 TypographyTypography pada dasarnya digunakan untuk memperindah tampilan atau susunan text.Untuk langkah selanjutnya gunakan typography untuk memasukkan content / artikel ke dalamHTML.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:Distributed by Fluider Team 14
  • 15. <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 typographyh1, 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> <h2>Ini adalah header h2</h2> <h3>Ini adalah header h3</h3> <h4>Ini adalah header h4</h4> <h5>Ini adalah header h5</h5> <h6>Ini adalah header h6</h6> <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>Distributed by Fluider Team 15
  • 16. </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 codedi bawah ini. <div class="four columns orange panel" style="height:250px;"> <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>Distributed by Fluider Team 16
  • 17. </div>Untuk yang Content yang terakhir yaitu Content ketiga, berikan code untuk menampilkanpenggunaan Unordered List sama Ordered List. <div class="four columns orange panel" style="height:250px;"> <h4>Penggunaan Unordered List dan Ordered List</h4> <ol> <li>Penggunaan Ordered List(ol)</li> <li>Penggunaan Ordered List(ol)</li> <li>Penggunaan Ordered List(ol)</li> </ol> <ul> <li>Penggunaan Unordered List(ul)</li> <li>Penggunaan Unordered List(ul)</li> <li>Penggunaan Unordered List(ul)</li> </ul> </div>Yang terakhir, pada footer ubah baris footer dengan baris di bawah ini, untuk merubah warnafont dan ukuran. <footer class="blue"> <div class="row"> <div class="twelve columns"> <h5 style="color: #ffffff;">&copy; 2013 Fluider.org </h5> </div>Distributed by Fluider Team 17
  • 18. </div> </footer>Setelah semuanya selesai, maka tampilannya akan berubah menjadi seperti gambar dibawah ini.Distributed by Fluider Team 18
  • 19. C.4 Tabel Tabel sering digunakan untuk menampilkan data yang bersifat sama dandikelompokkan 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"> <div class="twelve columns"> <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>Distributed by Fluider Team 19
  • 20. <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.Distributed by Fluider Team 20
  • 21. C.5 Form Pada panduan selanjutnya akan membahas tentang membuat form dengan zurbfoundation, form lebih sering digunakan untuk hal-hal yang bersifat membutuhkan inputandari pengguna. Seperti form pendaftaran, form login, form kebutuhan dan lain-lain.Berikut contoh kode untuk membuat sebuah form :Membuat Form Row LayoutBuatlah sebuah HTML baru yang lain, kemudian pada baris awal bagian content, tambahkanbaris 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"> <div class="six columns"> <label>City</label> <input type="text" placeholder="City" /> </div> <div class="three columns"> <label>State</label> <input type="text"Distributed by Fluider Team 21
  • 22. placeholder="State" /> </div> <div class="three columns"> <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 CharacterGunakan class prefix, postfix dan postfix button untuk membuat inputan prefix, postfix dantombol postfix. Untuk contoh kode dapat melihat kodenya di bawah ini.Distributed by Fluider Team 22
  • 23. <div class="row"> <h3>Input dengan Prefix character,Postfix label dan Postfix button</h3> <div class="six columns panel"> <label>Input dengan prefix character</label> <div class="row"> <div class="four columns"> <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="row collapse"> <div class="nine mobile-three columns"> <input type="text"> </div> <div class="three mobile-one columns">Distributed by Fluider Team 23
  • 24. <span class="postfix">.com</span> </div> </div> </div> </div> <label>Input dengan postfix Button</label> <div class="row"> <div class="five columns"> <div class="row collapse"> <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.Distributed by Fluider Team 24
  • 25. Membuat Inline Form LayoutGunakan contoh kode di bawah ini untuk membuat inline form layout. <form> <div class="row"> <h3>Inline Form Layout</h3> <div class="two mobile-one columns"> <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"> <div class="two mobile-one columns"> <label class="right inline">City:</label> </div> <div class="ten mobile-three columns">Distributed by Fluider Team 25
  • 26. <input type="text" class="eight"> </div> </div> <div class="row"> <div class="two mobile-one columns"> <label class="right inline">ZIP:</label> </div> <div class="ten mobile-three columns"> <input type="text" class="three"> </div> </div> </form>Hasilnya akan seperti di bawah ini.Membuat Fieldset LayoutGunakan fieldset dan legend untuk membuat fieldset layout, seperti pada contoh kode dibawah ini. <div class="row"> <h3>Fieldset Layout</h3>Distributed by Fluider Team 26
  • 27. <div class="six columns panel"> <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.Distributed by Fluider Team 27
  • 28. Membuat Radio Button dan CheckboxPilihan radio button dan checkbox harus ada di setiap form, entah untuk digunakan untukmengetahui hasil terbanyak dari polling atau voting. Untuk membuatnya di Zurb, dapatmelihat 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">Distributed by Fluider Team 28
  • 29. <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 ElementSelain radio button dan checkbox, zurb foundation juga menyediakan fitur drop down danselect element, untuk contoh kodenya dapat melihat kodenya di bawah ini.Distributed by Fluider Team 29
  • 30. <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 sepertipada 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 :Distributed by Fluider Team 30
  • 31. C.6 Top Bar Pada bagian struktur HTML yang telah dibuat, ada bagian bernama header. Dalampanduan ini akan dibahas bagaimana cara mengganti header menjadi bar. Bar pada umumnya berguna untuk mempermudah pembagian artikel, data, atauspesifikasi, untuk menambahkan bar pada header, ubah baris <header>...</header> denganbaris di bawah ini. <header style="margin-bottom: 70px"> <div class="row"> <div class="twelve columns"> <div class="contain-to-grid fixed"> <nav class="top-bar"> <ul> <!-- Title Area --> <li class="name"> <h1> <a href="#"> Fluider </a> </h1> </li> <li class="toggle-topbar"><a href="#"></a></li> </ul> <section> <!-- Left Nav Section --> <ul class="left"> <li class="divider"></li>Distributed by Fluider Team 31
  • 32. <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 href="#">Level 2</a></li> <li class="has-dropdown"><a href="#">Level 2, Has Dropdown</a> <ul class="dropdown"> <li><label>Section</label></li> <li><a href="#">Level 3</a></li> <li><a href="#">Level 3</a></li> <li class="divider"></li> <li><a href="#">Level 3</a></li>Distributed by Fluider Team 32
  • 33. </ul> </li> <li><a href="#">Level 2</a></li> <li><a href="#">Level 2</a></li> </ul> </li> <li><a href="#">Level 1</a></li> <li><a href="#">Level 1</a></li> <li class="divider"></li> <li><label>Section Name</label></li> <li><a href="#">Level 1</a></li> <li><a href="#">Level 1</a></li> <li><a href="#">Level 1</a></li> <li class="divider"></li> <li><a href="#">See all &rarr;</a></li> </ul> </li> <li class="divider hide-for-Distributed by Fluider Team 33
  • 34. small"></li> </ul> <!-- Right Nav Section --> <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 href="#">Dropdown Option</a></li> <li class="divider"></li> <li><label>Section Name</label></li> <li><a href="#">Dropdown Option</a></li> <li><a href="#">Dropdown Option</a></li> <li><a href="#">Dropdown Option</a></li>Distributed by Fluider Team 34
  • 35. <li class="divider"></li> <li><a href="#">See all &rarr;</a></li> </ul> </li> </ul> </section> </nav> </div> </div> </div> </header>Maka tampilannya akan seperti berikut :Distributed by Fluider Team 35
  • 36. Untuk fungsi drop down dapat langsung aktif dan dapat mencobanya dengan mengkliksalah satu tab.Distributed by Fluider Team 36
  • 37. C.7 Icon Pada Pembahasan selanjutnya, yaitu menambahkan icon, dengan menggunakan fontawesome 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 NavigasiSetelah pada pembahasan sebelumnya menambahkan navigasi di header, selanjutnya dapatdicoba menambahkan icon di navigasi, ubah baris navigasi Responsive dan Zurb Foundationdengan baris di bawah ini.Distributed by Fluider Team 37
  • 38. <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, untukmemanggil 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> <li><a href="#">Sub Nav Item 2</a></li> <li><a href="#">Sub NavDistributed by Fluider Team 38
  • 39. 3</a></li> <li><a href="#">Sub Nav 4</a></li> <li><a href="#">Sub Nav Item 5</a></li> </ul> </li> <li class="has-flyout"> <a href="#">Nav Item 3</a> <a href="#" class="flyout- toggle"><span> </span></a> <div class="flyout"> <h5>Regular Dropdown</h5> <div class="row"> <div class="six columns"> <p>This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.</p> </div> <div class="six columns"> <p>This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.</p> </div> </div> </div> </li>Distributed by Fluider Team 39
  • 40. <li class="has-flyout"> <a href="#">Nav Item 4</a> <a href="#" class="flyout- toggle"><span> </span></a> <div class="flyout large right"> <h5>Large Dropdown</h5> <div class="row"> <div class="four columns"> <p>This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.</p> <p>This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.</p> </div> <div class="four columns"> <p>This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.</p> <p>This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.</p> </div> <div class="four columns"> <imgDistributed by Fluider Team 40
  • 41. src="http://placehold.it/200x250" /> </div> </div> </div> </li> </ul> </li> </ul>Membuat Vertical NavigationDalam tahap ini, HTML yang telah dibuat akan ditambahkan sidebar, ubah baris contentheader menjadi seperti di bawah ini. <div class="row">Distributed by Fluider Team 41
  • 42. <div class="three columns green panel"> Sidebar </div> <div class="nine columns yellow panel"> <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> <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> <li class="has-flyout"> <a href="#">Nav Item 3</a> <a href="#" class="flyout-Distributed by Fluider Team 42
  • 43. toggle"><span> </span></a> <div class="flyout"> <h5>Regular Dropdown</h5> <div class="row"> <div class="six columns"> <p>This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.</p> </div> <div class="six columns"> <p>This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.</p> </div> </div> </div> </li> <li class="has-flyout"> <a href="#">Nav Item 4</a> <a href="#" class="flyout- toggle"><span> </span></a> <div class="flyout large right"> <h5>Large Dropdown</h5> <div class="row"> <div class="four columns">Distributed by Fluider Team 43
  • 44. <p>This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.</p> <p>This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.</p> </div> <div class="four columns"> <p>This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.</p> <p>This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.</p> </div> <div class="four columns"> <img src="http://placehold.it/200x250" /> </div> </div> </div> </li> </ul> </li> </ul>Distributed by Fluider Team 44
  • 45. <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.Distributed by Fluider Team 45
  • 46. Syntax yang digunakan untuk membuat vertical navigation adalah .nav-bar vertical , untukmembuat sebuah navigasi vertikal, dibutuhkan bagian sidebar, ubah bagian sidebar padaHTML yang telah dibuat menjadi seperti baris berikut : <ul class="nav-bar vertical"> <li class="active"><a href="#">Nav Item 1</a></li> <li class="has-flyout"> <a href="#">Nav Item 2</a>Distributed by Fluider Team 46
  • 47. <a href="#" class="flyout-toggle"><span> </span></a> <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> <li class="has-flyout"> <a href="#">Nav Item 3</a> <a href="#" class="flyout-toggle"><span> </span></a> <div class="flyout"> <h5>Regular Dropdown</h5> <div class="row"> <div class="six columns"> <p>This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.</p> </div> <div class="six columns"> <p>This is example text. This is example text. This is example text. This is exampleDistributed by Fluider Team 47
  • 48. text. This is example text. This is example text. This is example text. This is example text.</p> </div> </div> </div> </li> <li> <a href="#">Nav Item 4</a> </li> </ul>Distributed by Fluider Team 48
  • 49. Membuat Side NavigasiSyntax yang digunakan adalah side-nav, ubah baris di sidebar menjadi baris berikut : <ul class="tabs-content"> <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> <li class="divider"></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> </ul> </li> </ul>Distributed by Fluider Team 49
  • 50. C.9 Navigation Tabs dan PillsMembuat Navigation TabsUntuk 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> <ul class="tabs-content"> <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 PillsPenggunaannya hampir sama dengan kode di atas hanya menambah class pill disampingtabs. <ul class="tabs pill">Distributed by Fluider Team 50
  • 51. <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> <ul class="tabs-content"> <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>Mengubah Ukuran TabKelebihan dari toolkit zurb foundation adalah dapat mengubah ukuran tab, untukmenyesuaikan tab dengan layout dapat menggunakan class two-up, three-up, four-up danfive-up ke dalam HTML. <ul class="tabs five-up"> <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> <li><a href="#simple4">Tab Keempat</a></li>Distributed by Fluider Team 51
  • 52. <li><a href="#simple5">Tab Kelima</a></li> </ul> <ul class="tabs-content"> <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> <li id="simple4Tab">Ini adalah contoh tab keempat.</li> <li id="simple5Tab">Ini adalah contoh tab kelima.</li> </ul>Membuat Contained pada TabsAgar tabs menarik, tambahkan fungsi containerd pada tabs, class yang digunakan adalahtabs 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>Distributed by Fluider Team 52
  • 53. <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 TabsPenggunaannya hampir sama dengan vertical navigation, hanya mengubah kode yang ada disidebar menjadi seperti di bawah ini. <ul class="tabs-content"> <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>Distributed by Fluider Team 53
  • 54. Hasilnya akan seperti gambar berikut :C.10 Button Pada panduan kali ini akan dijelaskan bagaimana membuat tombol, untuk class yangdigunakan 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”Distributed by Fluider Team 54
  • 55. Berikut contoh kode, tambahkan di HTML yang telah dibuat. <div class="row"> <div class="three columns"> <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> <div class="three columns"> <p><a href="#" class="tiny secondary button">Tiny Secondary Button »</a></p> <p><a href="#" class="small secondary button">Small Secondary Button »</a></p> <p><a href="#" class="secondary button">Regular Secondary Button »</a></p> <p><a href="#" class="large secondary button">Large Secondary Button »</a></p> </div> <div class="three columns"> <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>Distributed by Fluider Team 55
  • 56. </div> <div class="three columns"> <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"> <div class="four columns">Distributed by Fluider Team 56
  • 57. <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 splitbutton.Membuat Button GroupUntuk membuat button group, class yang dibutuhkan adalah button-group. Berikut contohkodenya. <div class="five columns"> <h5>Button Group</h5> <ul class="button-group radius"> <li><a href="#" class="button radius">Button 1</a></li> <li><a href="#" class="button radius">ButtonDistributed by Fluider Team 57
  • 58. 2</a></li> <li><a href="#" class="button radius">Button 3</a></li> </ul> </div>Membuat Dropdown ButtonUntuk membuat dropdown button, class yang dibutuhkan adalah dropdown. Berikut contohkodenya. <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 class="divider"></li> <li><a href="#">Last Item</a></li> </ul> </div>Distributed by Fluider Team 58
  • 59. Membuat Split ButtonUntuk 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 class="divider"></li> <li><a href="#">Last Item</a></li> </ul> </div>Distributed by Fluider Team 59
  • 60. C.11 Breadcrumbs Breadcrumbs adalah bantuan navigasi yang menginformasikan kepada penggunamengenai posisi atau letak sebuah artikel itu berada. Untuk menambahkan breadcrumbspada zurb foundation adalah dengan menggunakan class breadcrumbs.Tambahkan kode contoh breadcrumbs di bawah ini setelah header. <div class="row"> <div class="twelve columns"> <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 yangsedang dibuat, pagination pada zurb foundation berfungsi membagi artikel menjadi beberapahalaman untuk menghindari artikel yang panjang dalam satu halaman HTML.untuk menggunakan pagination pada HTML, gunakan class pagination.Distributed by Fluider Team 60
  • 61. <ul class="pagination" style="margin-top:10px;"> <li class="arrow unavailable"><a href="">&laquo;</a></li> <li class="current"><a href="">1</a></li> <li><a href="">2</a></li> <li><a href="">3</a></li> <li><a href="">4</a></li> <li class="unavailable"><a href="">&hellip;</a></li> <li><a href="">12</a></li> <li><a href="">13</a></li> <li class="arrow"><a href="">&raquo;</a></li> </ul>C.13 Modal atau Popup Windows dengan RevealUntuk tampilan modalnya menggunakan class reveal-modal, sedangkan untuk tombol closepada modal menggunakan class close-reveal-modal.Untuk kodenya dapat melihat contohnya di bawah ini.Distributed by Fluider Team 61
  • 62. <div class="row"> <div class="six columns"> <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>Distributed by Fluider Team 62
  • 63. C.14 Orbit Zurb Foundation juga memiliki fitur image slider bernama orbit. Dengan fitur ini, dapatmenampilkan gambar dalam bentuk slide. Untuk fitur Orbit pada Zurb, tidak memerlukan cssuntuk menampilkannya, cukup menggunakan id dan img src.Di Tampilan HTML sebelumnya, di bagian bawah header terdapat bagian untuk meletakkanbagian gambar, ubah letak tersebut dengan kode di bawah ini. <div class="row"> <div class="twelve columns"> <div id="slider"> <img src="images/1.png" alt="slide image"> <img src="images/2.png" alt="slide image"> <img src="images/3.png" alt="slide image"> </div> </div> </div>Distributed by Fluider Team 63
  • 64. Untuk saat ini, slider tidak dapat berjalan atau menampilkan semua gambar, dikarenakanbelum adanya fungsi javascript yang menjalankan slider tersebut, tambahkan script di bawahini di atas </body>. <script> $(window).load(function(){ $("#slider").orbit(); }); </script>Maka hasilnya akan tampak seperti di bawah ini.Distributed by Fluider Team 64
  • 65. 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> <p>Lorem ipsum dolor sit amet,Distributed by Fluider Team 65
  • 66. 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"> <h5>Accordion Panel 2</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> <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 quiDistributed by Fluider Team 66
  • 67. officia deserunt mollit anim id est laborum.</p> </div> </li> <li> <div class="title"> <h5>Accordion Panel 3</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> <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> </ul>Distributed by Fluider Team 67
  • 68. C.16 Alert Di pembahasan ini akan membahas fungsi zurb foundation lain yaitu fungsi untukmenampilkan pesan pemberitahuan. Untuk kode dapat melihat contohnya di bawah ini. <div class="alert-box"> Ini adalah standar peringatan. <a href="" class="close">&times;</a> </div> <div class="alert-box success"> Ini adalah peringatan sukses. <a href="" class="close">&times;</a> </div> <div class="alert-box alert"> Ini adalah peringatan bahaya. <a href="" class="close">&times;</a>Distributed by Fluider Team 68
  • 69. </div> <div class="alert-box secondary"> Ini adalah peringatan yang kedua. <a href="" class="close">&times;</a> </div>C.17 Label Pada panduan kali ini akan dijelaskan bagaimana membuat label. Untuk syntax yangdigunakan 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”Distributed by Fluider Team 69
  • 70. 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>Distributed by Fluider Team 70
  • 71. 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 secarapopup. 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, untukmenggunakannya class progress. Class progress pada zurb foundation di bagi menjadi 4yaitu: progress, progress radius, progress secondary dan progress alert.Untuk contoh kode dapat menggunakan kode di bawah ini.Distributed by Fluider Team 71
  • 72. <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 class="meter"></span></div> <div class="nice secondary progress"><span class="meter"></span></div>C.20 Thumbnail Pada panduan ini akan membahas bagaimana cara membuat thumbnail, class yangdigunakan adalah class “th”.Untuk percobaan, ganti kode pada content pertama, content kedua dan content ketigadengan kode di bawah ini. <div class="four columns orange panel"> <h4>Penggunaan Thumbnail</h4> <a href="#" class="th"><img src="http://placehold.it/350x200"></a> </div> <div class="four columns orange panel">Distributed by Fluider Team 72
  • 73. <h4>Penggunaan Thumbnail</h4> <a href="#" class="th"><img src="http://placehold.it/350x200"></a> </div> <div class="four columns orange panel"> <h4>Penggunaan Thumbnail</h4> <a href="#" class="th"><img src="http://placehold.it/350x200"></a> </div>C.21 Panel dan Tabel Harga Pada Toolkit Zurb Foundation ada tambahan fitur untuk HTML yaitu panel dan TabelHarga, untuk panel dapat menggunakan class radius sedangkan untuk tabel harga dapatmenggunakan class pricing-table. Berikut contoh kode untuk keduanya.Panel <h3>Panel</h3> <div class="row"> <div class="six columns"> <div class="panel">Distributed by Fluider Team 73
  • 74. <h5>Ini adalah Panel Regular.</h5> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div> <div class="six columns"> <div class="panel callout radius"> <h5>Ini adalah Callout Panel.</h5> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div> </div>Tabel Harga <h3>Tabel Harga</h3> <div class="row"> <div class="six columns">Distributed by Fluider Team 74
  • 75. <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 &raquo;</a></li> </ul> </div> <div class="six columns"> <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 &raquo;</a></li> </ul> </div>Distributed by Fluider Team 75
  • 76. </div>C.22 Video Selain menampilkan gambar dan tulisan, zurb foundation juga menyediakan fitur untukmenampilkan video, untuk class yang digunakan adalah flex-video. Berikut contoh kodenyadapat 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"Distributed by Fluider Team 76
  • 77. 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>Distributed by Fluider Team 77
  • 78. C.23 Responsive Pada pembahasan yang terakhir, yaitu mengubah desain HTML yang ada menjadidapat di tampilkan pada layout mobile, layout tablet dan layout desktop dalam sekaligus.Kelebihan dari toolkit zurb foundation, css dan javascript yang digunakan dapat langsungterinclude semua fitur dan fungsi beserta fungsi responsive juga.Ketika HTML yang telah dibuat, digeser menjadi ukuran tablet, tampilannya akan seperti dibawah ini.Distributed by Fluider Team 78
  • 79. ~ Selamat Mencoba ~Distributed by Fluider Team 79