Description
this is cheatsheet to fast learning foundation framework, just copy paste the code and run it from your webserver apache / nginx. some element like icon won't appear until you download the icon / font on official site.
How To
<html> <head> <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.3.1/css/foundation.css" /> <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.3.1/css/foundation.min.css" /> <link rel="stylesheet" href="css/foundation-icons.css" /> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.3.1/js/foundation/foundation.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.3.1/js/vendor/modernizr.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.3.1/js/vendor/modernizr.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.3.1/js/foundation/foundation.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.3.1/js/foundation/foundation.offcanvas.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.3.1/js/foundation/foundation.joyride.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.3.1/js/foundation/foundation.alert.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.3.1/js/foundation/foundation.reveal.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.3.1/js/foundation/foundation.clearing.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.3.1/js/foundation/foundation.slider.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.3.1/js/foundation/foundation.tooltip.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.3.1/js/foundation/foundation.equalizer.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.3.1/js/foundation/foundation.tabs.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.3.1/js/foundation/foundation.accordion.js"></script> <script> //normal javascript function message() { alert("hello world"); } // all of foundation framework use jquery $("document").ready(function(){ /* activate feature such as : Alert , Off Canvas, clearing, slider, equalizer*/ $(document).foundation(); /* activate joyride feature*/ $(document).foundation('joyride', 'start'); function showModal() { $("#myModal").foundation('reveal', 'open'); $("#myModal").foundation('reveal', 'close'); } }); </script> <!-- font size for icon set --> <style> .size-12 { font-size: 12px; } .size-14 { font-size: 14px; } .size-16 { font-size: 16px; } .size-18 { font-size: 18px; } .size-21 { font-size: 21px; } .size-24 { font-size: 24px; } .size-36 { font-size: 36px; } .size-48 { font-size: 48px; } .size-60 { font-size: 60px; } .size-72 { font-size: 72px; } </style> </head> <body> <!-- classes for button --> <a id="satu" href="#" class="small radius button">Radius Button</a><br/> <a id="dua"href="#" class="small round button">Round Button</a><br/> <a id="tiga"href="#" class="medium success button">Success Btn</a><br/> <a href="#" class="medium alert button">Alert Btn</a><br/> <a href="#" class="medium secondary button">Secondary Btn</a></p> <a href="#" class="large button">Large Simple Button</a><br/> <a id="empat" href="#" class="large radius button" onclick="message()">Large Radius Button</a><br/> <button class="tiny button" onclick="message()">Button</button><br/> <!-- Joyride--> <!-- Panel--> <div id="firstStop" class="panel">This is Panel 1</div> <div id="numero1" class="panel">This is Panel 2</div> <div id="numero2" class="panel">This is Panel 3</div> <!-- Joyride Class--> <ol class="joyride-list" data-joyride> <li data-id="firstStop" data-text="Next" data-options="tip_location: top; prev_button: false"> <h4>First Tutor</h4> <p>Hello and welcome to the Joyride documentation page, first this is Panel</p> </li> <li data-id="alertFeature" data-class="custom so-awesome" data-text="Next" data-prev-text="Prev"> <h4>Second Tutor</h4> <p>this is Alert, You can close this alert by click icon close on the right.</p> </li> <li data-id="iconStyling" data-button="Next" data-prev-text="Prev" data-options="tip_location:top;tip_animation:fade"> <h4>Third Tutor</h4> <p>this icon using graphic vector , styling use text property !.</p> </li> <li data-button="End" data-prev-text="Prev"> <h4>Best Foundation Feature</h4> <p>Awesone this is best framework styling ever after</p> </li> </ol> <!-- Alert Feature--> <div id="alertFeature" data-alert class="alert-box success radius"> This is a success alert with a radius. <a href="#" class="close">×</a> </div> <div data-alert class="alert-box warning round"> This is a warning alert that is rounded. <a href="#" class="close">×</a> </div> <div data-alert class="alert-box info radius"> This is an info alert with a radius. <a href="#" class="close">×</a> </div> <div data-alert class="alert-box alert round"> This is an alert - alert that is rounded. <a href="#" class="close">×</a> </div> <div data-alert class="alert-box secondary"> This is a secondary alert. <a href="#" class="close">×</a> </div> <!-- Off Canvas Feature --> <div class="off-canvas-wrap" data-offcanvas> <div class="inner-wrap"> <nav class="tab-bar"> <section class="left-small"> <a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a> </section> <section class="middle tab-bar-section"> <h1 class="title">Foundation</h1> </section> <section class="right-small"> <a class="right-off-canvas-toggle menu-icon" href="#"><span></span></a> </section> </nav> <aside class="left-off-canvas-menu"> <ul class="off-canvas-list"> <li><label>Foundation</label></li> <li><a href="#">The Psychohistorians</a></li> <li><a href="#">The Encyclopedists</a></li> <li><a href="#">The Mayors</a></li> <li><a href="#">The Traders</a></li> <li><a href="#">The Merchant Princes</a></li> </ul> </aside> <aside class="right-off-canvas-menu"> <ul class="off-canvas-list"> <li><label>Users</label></li> <li><a href="#">Hari Seldon</a></li> <li><a href="#">...</a></li> </ul> </aside> <section class="main-section" style="height:250px"> Add content Here , you can adjust height the off canvas from this element ... </section> <a class="exit-off-canvas"></a> </div> </div> <!-- Paragraph--> <p class="text-left">Left Paragraph</p> <p class="text-right">Right Paragraph</p> <p class="text-center">Middle Paragraph</p> <p class="text-justify">Justify</p> <!-- Modal --> <a href="#" data-reveal-id="myModal" class="small button" onclick="showModal()">Click Me For A Modal</a> <div id="myModal" class="reveal-modal" data-reveal> <h2>Awesome. I have it.</h2> <p class="lead">Your couch. It is mine.</p> <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p> <a class="close-reveal-modal">×</a> </div> <!-- Grid System --> <div class="row"> <div class="small-2 large-4 columns">small2 large4</div> <div class="small-4 large-4 columns">small4 large4</div> <div class="small-6 large-4 columns">small6 large4</div> </div> <div class="row"> <div class="small-6 columns">large3</div> <div class="medium-6 columns">large6</div> <div class="large-3 columns">large3</div> </div> <!-- Grid Block --> <ul class="small-block-grid-3"> <li><-- Your content goes here 1--></li> <li><-- Your content goes here 2--></li> <li><-- Your content goes here 3--></li> <li><-- Your content goes here 4--></li> </ul> <!-- Top Nav Bar --> <nav class="top-bar" data-topbar> <ul class="title-area"> <li class="name"> <h1><a href="#">Title Top Navigation</a></h1> </li> <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --> <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li> </ul> <section class="top-bar-section"> <!-- Right Nav Section --> <ul class="right"> <li class="active"><a href="#">Right Button Active</a></li> <li class="has-dropdown"> <a href="#">Right Button Dropdown</a> <ul class="dropdown"> <li><a href="#">First link in dropdown</a></li> <li class="active"><a href="#">Active link in dropdown</a></li> </ul> </li> </ul> <!-- Left Nav Section --> <ul class="left"> <li><a href="#">Left Nav Button</a></li> </ul> </section> </nav> <!-- Sub Navigation --> <dl class="sub-nav"> <dt>Sub Navigation:</dt> <dd class="active"><a href="#">First Sub Nav</a></dd> <dd><a href="#">Second Sub Nav</a></dd> <dd><a href="#">Third Sub Nav</a></dd> <dd><a href="#">And Last</a></dd> </dl> <!-- Icon Feature --> <!-- to use icon feature download icon pack foundation on official site --> <!-- to edit path , open foundation-icon.css--> <i class="step fi-address-book size-12"></i> <i class="step fi-pencil size-14"></i> <i class="step fi-address-book size-16"></i> <i class="step fi-address-book size-18"></i> <i class="step fi-address-book size-21"></i> <i class="step fi-address-book size-24"></i> <i class="step fi-address-book size-36"></i> <i class="step fi-address-book size-48"></i> <i class="step fi-address-book size-60"></i> <i id="iconStyling" class="step fi-address-book size-72" style="color:blue;text-shadow:0 0 5px red"></i> <!-- Breadcrumb Feature --> <ul class="breadcrumbs"> <li><a href="#">Home</a></li> <li><a href="#">Features</a></li> <li class="unavailable"><a href="#">Gene Splicing</a></li> <li class="current"><a href="#">Cloning</a></li> </ul> <!-- tooltip Feature --> <span data-tooltip class="has-tip" title="Tooltips are awesome, you should totally use them!">extended information</span> <!-- range slider Feature--> <div class="row"> <div class="small-10 medium-11 columns"> <div class="range-slider" data-slider data-options="display_selector: #sliderOutput3;"> <span class="range-slider-handle"></span> <span class="range-slider-active-segment"></span> </div> </div> <div class="small-2 medium-1 columns"> <span id="sliderOutput3"></span> </div> </div> <!-- Pricing Table Feature --> <ul class="pricing-table"> <li class="title">Standard</li> <li class="price">$99.99</li> <li class="description">An awesome description</li> <li class="bullet-item">1 Database</li> <li class="bullet-item">5GB Storage</li> <li class="bullet-item">20 Users</li> <li class="cta-button"><a class="button" href="#">Buy Now</a></li> </ul> <!-- Thumbnail Feature --> <a class="th" href="https://ssl.gstatic.com/gb/images/v1_2e543709.png"> <img src="https://ssl.gstatic.com/gb/images/v1_2e543709.png"> </a> <!-- Clearing Feature --> <ul class="clearing-thumbs" data-clearing> <li><a href="http://www.zurb.com/blog/system/images/1028/original/balance.jpg?1377285282"><img src="http://www.zurb.com/blog/system/images/1028/original/balance.jpg?1377285282-th"></a></li> <li><a href="http://www.zurb.com/blog/system/images/1021/original/icon-progress.jpg?1377283888"><img src="http://www.zurb.com/blog/system/images/1021/original/icon-progress.jpg?1377283888"></a></li> <li><a href="http://zurb.com/playground/uploads/project/thumb/5/foundation-icons.jpg"><img src="http://zurb.com/playground/uploads/project/thumb/5/foundation-icons.jpg-th"></a></li> </ul> <!-- Equalizer Feature --> <div class="row" data-equalizer> <div class="large-6 columns panel" data-equalizer-watch> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. </div> <div class="large-6 columns panel" data-equalizer-watch> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. </div> </div> <!-- Accordion Feature --> <dl class="accordion" data-accordion> <dd class="accordion-navigation"> <a href="#panel1">Accordion 1</a> <div id="panel1" class="content active"> <p>Omai gat</p> <div class="tabs-content"> <div class="content active" id="panel2-1"> <p>First panel content goes here...</p> </div> <div class="content" id="panel2-2"> <p>Second panel content goes here...</p> </div> <div class="content" id="panel2-3"> <p>Third panel content goes here...</p> </div> <div class="content" id="panel2-4"> <p>Fourth panel content goes here...</p> </div> </div> </div> </dd> <dd class="accordion-navigation"> <a href="#panel2">Accordion 2</a> <div id="panel2" class="content"> Panel 2. 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. </div> </dd> <dd class="accordion-navigation"> <a href="#panel3">Accordion 3</a> <div id="panel3" class="content"> Panel 3. 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. </div> </dd> </dl> <!-- Progress Bar Feature--> <div class="progress"> <span class="meter" style="width:50%;background:red"></span> </div> </body> </html>
Post a Comment
Harap gunakan bahasa yang baik dan sopan, terima kasih