Panduan Zurb Foundation 3Didistribusikan oleh : Fluider Team                             versi 1.1                  Update...
Panduan Zurb Foundation1.2 Zurb Foundation 3A. PengenalanZurb Foundation 3 adalah responsive front-end framework yang memu...
phone, tablet portrait and tablet landscape, small desktop, dan large wide screen desktop.Pertama, buat sebuah file HTML d...
</body>   </html>Untuk membuat sebuah grid system pada zurb foundation, dibutuhkan beberapa class seperti: row dan columns...
<div class="four columns">         </div>         <div class="four columns">         </div>         <div class="four colum...
</div>   </div>   <div class="row">         <div class="one columns">         </div>         <div class="one columns">    ...
Dengan contoh di atas, tidak dapat menampilkan grid system secara kasat mata, untukmenampilkan warna dari tiap-tiap span, ...
<div class="row">         <div class="six columns”>                  <div class="blue panel">                             ...
<div class="three columns">                  <div class="red panel">                              </div>         </div>   ...
</div>         <div class="two columns”>                  <div class="purple panel">                              </div>  ...
</div>         </div>         <div class="one columns">                  <div class="yellow panel">                       ...
</div>   </div>Maka akan tampak struktur grid memenuhi 12 kolom tiap barisnya seperti tampilan HTML dibawah ini.C.2      L...
<div class="twelve columns">Header / Navigasi</div>         </div>   </header>ContentKedua, yang diperlukan sebuah content...
<footer class="blue panel">         <div class="row">                  <div class="twelve columns">Footer</div>         </...
<div class="row">         <div class="twelve columns panel">                  <img src="http://dummyimage.com/1200x300/ddd...
</div>Pada bagian Content Pertama, berikan contoh typography untuk penggunaan address,berikut codenya.   <div class="four ...
</div>Untuk yang Content yang terakhir yaitu Content ketiga, berikan code untuk menampilkanpenggunaan Unordered List sama ...
</div>   </footer>Setelah semuanya selesai, maka tampilannya akan berubah menjadi seperti gambar dibawah ini.Distributed b...
C.4      Tabel         Tabel sering digunakan untuk menampilkan data yang bersifat sama dandikelompokkan menurut kolom dan...
<td>Budi</td>                                         <td>Prasetyo</td>                                         <td>SDN Su...
C.5      Form         Pada panduan selanjutnya akan membahas tentang membuat form dengan zurbfoundation, form lebih sering...
placeholder="State" />                                       </div>                                       <div class="thre...
<div class="row">         <h3>Input dengan Prefix character,Postfix label dan Postfix   button</h3>         <div class="si...
<span   class="postfix">.com</span>                                                 </div>                                ...
Membuat Inline Form LayoutGunakan contoh kode di bawah ini untuk membuat inline form layout.   <form>                     ...
<input type="text" class="eight">                               </div>                          </div>                    ...
<div class="six columns panel">                  <form class="custom">                              <fieldset>            ...
Membuat Radio Button dan CheckboxPilihan radio button dan checkbox harus ada di setiap form, entah untuk digunakan untukme...
<input name="radio1" type="radio" id="radio2"   disabled> Radio Button 2                  </label>                  <label...
<div class="row">         <h3>Form dropdown / select element</h3>         <form class="custom panel">                  <la...
C.6      Top Bar         Pada bagian struktur HTML yang telah dibuat, ada bagian bernama header. Dalampanduan ini akan dib...
<li class="has-dropdown">                                               <a class="active"   href="#">Responsive</a>       ...
</ul>                                                           </li>                                                     ...
small"></li>                              </ul>                              <!-- Right Nav Section -->                   ...
<li   class="divider"></li>                                                            <li><a   href="#">See all &rarr;</a...
Untuk fungsi drop down dapat langsung aktif dan dapat mencobanya dengan mengkliksalah satu tab.Distributed by Fluider Team...
C.7      Icon         Pada Pembahasan selanjutnya, yaitu menambahkan icon, dengan menggunakan fontawesome yang dapat di do...
<a class="active" href="#"><i class="icon-book"></i>   Responsive</a>   <a href="#"><i class="icon-cog"></i> Zurb Foundati...
3</a></li>                                            <li><a href="#">Sub Nav   4</a></li>                                ...
<li class="has-flyout">                                       <a href="#">Nav Item 4</a>                                  ...
src="http://placehold.it/200x250" />                                                   </div>                             ...
<div class="three columns green panel">         Sidebar         </div>         <div class="nine columns yellow panel">    ...
toggle"><span> </span></a>                                         <div class="flyout">                                   ...
<p>This is example   text. This is example text. This is example text. This is example   text. This is example text. This ...
<h3>Apa itu Fluider ?</h3>                  <p>                  <strong>Fluider</strong> adalah inisiatif dari meruvian  ...
Syntax yang digunakan untuk membuat vertical navigation adalah .nav-bar vertical , untukmembuat sebuah navigasi vertikal, ...
<a href="#" class="flyout-toggle"><span>   </span></a>                                  <ul class="flyout">               ...
text. This is example text. This is example text. This is example   text. This is example text.</p>                       ...
Membuat Side NavigasiSyntax yang digunakan adalah side-nav, ubah baris di sidebar menjadi baris berikut :   <ul class="tab...
C.9      Navigation Tabs dan PillsMembuat Navigation TabsUntuk membuat navigation tabs pada HTML dapat menggunakan contoh ...
<li class="active"><a href="#simple1">Tab Pertama</a></li>                              <li><a href="#simple2">Tab Kedua</...
<li><a href="#simple5">Tab Kelima</a></li>   </ul>   <ul class="tabs-content">                        <li class="active" i...
<ul class="tabs-content contained">                              <li class="active" id="simpleContained1Tab">Ini   contoh ...
Hasilnya akan seperti gambar berikut :C.10 Button         Pada panduan kali ini akan dijelaskan bagaimana membuat tombol, ...
Berikut contoh kode, tambahkan di HTML yang telah dibuat.   <div class="row">         <div class="three columns">         ...
</div>         <div class="three columns">                  <p><a href="#" class="tiny alert button">Tiny Alert   Button »...
<h5>Styles</h5>                                       <a class="button"   href="#">Square</a><br><br>                     ...
2</a></li>                                <li><a href="#" class="button radius">Button   3</a></li>                       ...
Membuat Split ButtonUntuk membuat split button, class yang dibutuhkan adalah split. Berikut contoh kodenya.   <h5>Split Bu...
C.11 Breadcrumbs         Breadcrumbs adalah bantuan navigasi yang menginformasikan kepada penggunamengenai posisi atau let...
<ul class="pagination" style="margin-top:10px;">                              <li class="arrow unavailable"><a   href="">&...
<div class="row">         <div class="six columns">                              <h3>Ini adalah contoh modal Zurb Foundati...
C.14 Orbit         Zurb Foundation juga memiliki fitur image slider bernama orbit. Dengan fitur ini, dapatmenampilkan gamb...
Untuk saat ini, slider tidak dapat berjalan atau menampilkan semua gambar, dikarenakanbelum adanya fungsi javascript yang ...
C.15 Accordion         Accordion pada Zurb kegunaannya hampir sama dengan collapse pada bootstrap.Untuk mengetahui lebih l...
consectetur adipisicing elit, sed do eiusmod tempor incididunt ut   labore et dolore magna aliqua. Ut enim ad minim veniam...
officia deserunt mollit anim id est laborum.</p>                               </div>                  </li>              ...
C.16 Alert         Di pembahasan ini akan membahas fungsi zurb foundation lain yaitu fungsi untukmenampilkan pesan pemberi...
</div>   <div class="alert-box secondary">                              Ini adalah peringatan yang kedua.                 ...
Berikut contoh kode, tambahkan di HTML yang telah dibuat.   <div class="row">                              <div class="thr...
C.18 Tooltip         Dalam pembahasan ini akan dilanjutkan dengan fitur zurb foundation yaitu tooltip,fungsi dari tootip a...
<h5>Contoh Progress Bar.</h5>   <div class="progress six"><span class="meter"></span></div>   <div class="radius progress ...
<h4>Penggunaan Thumbnail</h4>         <a href="#" class="th"><img   src="http://placehold.it/350x200"></a>   </div>   <div...
<h5>Ini adalah Panel   Regular.</h5>                                                 <p>Lorem ipsum dolor sit amet,   cons...
<ul class="pricing-table">                                           <li class="title">Standar</li>                       ...
</div>C.22 Video         Selain menampilkan gambar dan tulisan, zurb foundation juga menyediakan fitur untukmenampilkan vi...
src="link_youtube" frameborder="0" allowfullscreen></iframe>                                      </div>                  ...
Responsive zurb fondation v.1.1
Responsive zurb fondation v.1.1
Upcoming SlideShare
Loading in …5
×

Responsive zurb fondation v.1.1

730 views

Published on

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

No Downloads
Views
Total views
730
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
46
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Responsive zurb fondation v.1.1

  1. 1. Panduan Zurb Foundation 3Didistribusikan oleh : Fluider Team versi 1.1 Update : Maret 2013
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 18. </div> </footer>Setelah semuanya selesai, maka tampilannya akan berubah menjadi seperti gambar dibawah ini.Distributed by Fluider Team 18
  19. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 36. Untuk fungsi drop down dapat langsung aktif dan dapat mencobanya dengan mengkliksalah satu tab.Distributed by Fluider Team 36
  37. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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

×