--- a/foundation.html +++ b/foundation.html @@ -1,1 +1,137 @@ +<!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> +