| <!DOCTYPE html> | |
| <!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ --> | |
| <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]--> | |
| <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]--> | |
| <!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]--> | |
| <!--[if gt IE 8]><!--> <html 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>Welcome to Foundation</title> | |
| <!-- Included CSS Files --> | |
| <link rel="stylesheet" href="stylesheets/foundation.css"> | |
| <link rel="stylesheet" href="stylesheets/app.css"> | |
| <!--[if lt IE 9]> | |
| <link rel="stylesheet" href="stylesheets/ie.css"> | |
| <![endif]--> | |
| <!-- IE Fix for HTML5 Tags --> | |
| <!--[if lt IE 9]> | |
| <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> | |
| <![endif]--> | |
| </head> | |
| <body> | |
| <!-- container --> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="twelve columns"> | |
| <h2>Welcome to Foundation</h2> | |
| <p>This is version 2.1.4 released on December 19, 2011</p> | |
| <hr /> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="eight columns"> | |
| <h3>The Grid</h3> | |
| <!-- Grid Example --> | |
| <div class="row"> | |
| <div class="twelve columns"> | |
| <div class="panel"> | |
| <p>This is a twelve column section in a row. 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="six columns"> | |
| <div class="panel"> | |
| <p>Six columns</p> | |
| </div> | |
| </div> | |
| <div class="six columns"> | |
| <div class="panel"> | |
| <p>Six columns</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="four columns"> | |
| <div class="panel"> | |
| <p>Four columns</p> | |
| </div> | |
| </div> | |
| <div class="four columns"> | |
| <div class="panel"> | |
| <p>Four columns</p> | |
| </div> | |
| </div> | |
| <div class="four columns"> | |
| <div class="panel"> | |
| <p>Four columns</p> | |
| </div> | |
| </div> | |
| </div> | |
| <h3>Tabs</h3> | |
| <dl class="tabs"> | |
| <dd><a href="#simple1" class="active">Simple Tab 1</a></dd> | |
| <dd><a href="#simple2">Simple Tab 2</a></dd> | |
| <dd><a href="#simple3">Simple Tab 3</a></dd> | |
| </dl> | |
| <ul class="tabs-content"> | |
| <li class="active" id="simple1Tab">This is simple tab 1's content. Pretty neat, huh?</li> | |
| <li id="simple2Tab">This is simple tab 2's content. Now you see it!</li> | |
| <li id="simple3Tab">This is simple tab 3's content. It's, you know...okay.</li> | |
| </ul> | |
| <h3>Buttons</h3> | |
| <p><a href="#" class="small blue button">Small Blue Button</a></p> | |
| <p><a href="#" class="blue button">Medium Blue Button</a></p> | |
| <p><a href="#" class="large blue button">Large Blue Button</a></p> | |
| <p><a href="#" class="nice radius small blue button">Nice Blue Button</a></p> | |
| <p><a href="#" class="nice radius blue button">Nice Blue Button</a></p> | |
| <p><a href="#" class="nice radius large blue button">Nice Blue Button</a></p> | |
| </div> | |
| <div class="four columns"> | |
| <h4>Getting Started</h4> | |
| <p>We're stoked you want to try Foundation! To get going, this file (index.html) includes some basic styles you can modify, play around with, or totally destroy to get going.</p> | |
| <h4>Other Resources</h4> | |
| <p>Once you've exhausted the fun in this document, you should check out:</p> | |
| <ul class="disc"> | |
| <li><a href="http://foundation.zurb.com/docs">Foundation Documentation</a><br />Everything you need to know about using the framework.</li> | |
| <li><a href="http://github.com/zurb/foundation">Foundation on Github</a><br />Latest code, issue reports, feature requests and more.</li> | |
| <li><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).</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- container --> | |
| <!-- Included JS Files --> | |
| <script src="javascripts/foundation.js"></script> | |
| <script src="javascripts/app.js"></script> | |
| </body> | |
| </html> | |