UNPKG

generator-bedrock

Version:

Scaffolds out foundation 5, font-awesome and some opinionated folder structure.

185 lines (183 loc) 8.56 kB
<!DOCTYPE html> <html class="no-js" lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title><%= appname %></title> <!-- build:css(.tmp) styles/main.min.css --> <link rel="stylesheet" href="styles/main.css"> <!-- endbuild --> <!-- build:js scripts/vendor/modernizr.min.js --> <script src="bower_components/modernizr/modernizr.js"></script> <!-- endbuild --> </head> <body> <div class="row"> <div class="large-12 columns"> <h1>Welcome to Foundation <span class="fa fa-html5"></span></h1> </div> </div> <div class="row"> <div class="large-12 columns"> <div class="panel"> <h3>We&rsquo;re stoked you want to try Foundation! </h3> <p>To get going, this file (index.html) includes some basic styles you can modify, play around with, or totally destroy to get going.</p> <p>Once you've exhausted the fun in this document, you should check out:</p> <div class="row"> <div class="large-4 medium-4 columns"> <p><a href="http://foundation.zurb.com/docs">Foundation Documentation</a><br />Everything you need to know about using the framework.</p> </div> <div class="large-4 medium-4 columns"> <p><a href="http://github.com/zurb/foundation">Foundation on Github</a><br />Latest code, issue reports, feature requests and more.</p> </div> <div class="large-4 medium-4 columns"> <p><a href="http://twitter.com/foundationzurb">@foundationzurb</a><br />Ping us on Twitter if you have questions. If you build something with this we'd love to see it (and send you a totally boss sticker).</p> </div> </div> </div> </div> </div> <div class="row"> <div class="large-8 medium-8 columns"> <h5>Here&rsquo;s your basic grid:</h5> <!-- Grid Example --> <div class="row"> <div class="large-12 columns"> <div class="callout panel"> <p><strong>This is a twelve column section in a row.</strong> Each of these includes a div.panel element so you can see where the columns are - it's not required at all for the grid.</p> </div> </div> </div> <div class="row"> <div class="large-6 medium-6 columns"> <div class="callout panel"> <p>Six columns</p> </div> </div> <div class="large-6 medium-6 columns"> <div class="callout panel"> <p>Six columns</p> </div> </div> </div> <div class="row"> <div class="large-4 medium-4 small-4 columns"> <div class="callout panel"> <p>Four columns</p> </div> </div> <div class="large-4 medium-4 small-4 columns"> <div class="callout panel"> <p>Four columns</p> </div> </div> <div class="large-4 medium-4 small-4 columns"> <div class="callout panel"> <p>Four columns</p> </div> </div> </div> <hr /> <h5>We bet you&rsquo;ll need a form somewhere:</h5> <form> <div class="row"> <div class="large-12 columns"> <label>Input Label</label> <input type="text" placeholder="large-12.columns" /> </div> </div> <div class="row"> <div class="large-4 medium-4 columns"> <label>Input Label</label> <input type="text" placeholder="large-4.columns" /> </div> <div class="large-4 medium-4 columns"> <label>Input Label</label> <input type="text" placeholder="large-4.columns" /> </div> <div class="large-4 medium-4 columns"> <div class="row collapse"> <label>Input Label</label> <div class="small-9 columns"> <input type="text" placeholder="small-9.columns" /> </div> <div class="small-3 columns"> <span class="postfix">.com</span> </div> </div> </div> </div> <div class="row"> <div class="large-12 columns"> <label>Select Box</label> <select> <option value="husker">Husker</option> <option value="starbuck">Starbuck</option> <option value="hotdog">Hot Dog</option> <option value="apollo">Apollo</option> </select> </div> </div> <div class="row"> <div class="large-6 medium-6 columns"> <label>Choose Your Favorite</label> <input type="radio" name="pokemon" value="Red" id="pokemonRed"><label for="pokemonRed">Radio 1</label> <input type="radio" name="pokemon" value="Blue" id="pokemonBlue"><label for="pokemonBlue">Radio 2</label> </div> <div class="large-6 medium-6 columns"> <label>Check these out</label> <input id="checkbox1" type="checkbox"><label for="checkbox1">Checkbox 1</label> <input id="checkbox2" type="checkbox"><label for="checkbox2">Checkbox 2</label> </div> </div> <div class="row"> <div class="large-12 columns"> <label>Textarea Label</label> <textarea placeholder="small-12.columns"></textarea> </div> </div> </form> </div> <div class="large-4 medium-4 columns"> <h5>Try one of these buttons:</h5> <p><a href="#" class="small button">Simple Button</a><br/> <a href="#" class="small radius button">Radius Button</a><br/> <a href="#" class="small round button">Round Button</a><br/> <a 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> <div class="panel"> <h5>So many components, girl!</h5> <p>A whole kitchen sink of goodies comes with Foundation. Checkout the docs to see them all, along with details on making them your own.</p> <a href="http://foundation.zurb.com/docs/" class="small button">Go to Foundation Docs</a> </div> </div> </div> <!-- build:js scripts/vendor/scripts.min.js --> <script src="bower_components/jquery/dist/jquery.js"></script> <script src="bower_components/foundation/js/vendor/fastclick.js"></script> <script src="bower_components/foundation/js/foundation/foundation.js"></script> <script src="bower_components/foundation/js/foundation/foundation.abide.js"></script> <script src="bower_components/foundation/js/foundation/foundation.accordion.js"></script> <script src="bower_components/foundation/js/foundation/foundation.alert.js"></script> <script src="bower_components/foundation/js/foundation/foundation.clearing.js"></script> <script src="bower_components/foundation/js/foundation/foundation.dropdown.js"></script> <script src="bower_components/foundation/js/foundation/foundation.equalizer.js"></script> <script src="bower_components/foundation/js/foundation/foundation.interchange.js"></script> <script src="bower_components/foundation/js/foundation/foundation.joyride.js"></script> <script src="bower_components/foundation/js/foundation/foundation.magellan.js"></script> <script src="bower_components/foundation/js/foundation/foundation.offcanvas.js"></script> <script src="bower_components/foundation/js/foundation/foundation.orbit.js"></script> <script src="bower_components/foundation/js/foundation/foundation.reveal.js"></script> <script src="bower_components/foundation/js/foundation/foundation.tab.js"></script> <script src="bower_components/foundation/js/foundation/foundation.tooltip.js"></script> <script src="bower_components/foundation/js/foundation/foundation.topbar.js"></script> <!-- endbuild --> <!-- build:js scripts/main.min.js --> <script src="scripts/main.js"></script> <!-- endbuild --> </body> </html>