<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>Foundation | Welcome</title>
- <link rel="stylesheet" href="css/app.css" />
+ <title>Foundation</title>
+ <link rel="stylesheet" href="stylesheets/app.css" />
<script src="bower_components/modernizr/modernizr.js"></script>
</head>
<body>
-
<div class="row">
<div class="large-12 columns">
- <h2>Welcome to Foundation</h2>
- <hr />
+ <h1>Welcome to Foundation</h1>
</div>
</div>
<div class="row">
- <div class="large-8 columns">
- <h3>The Grid</h3>
+ <div class="large-12 columns">
+ <div class="panel">
+ <h3>We’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’s your basic grid:</h5>
<!-- Grid Example -->
+
<div class="row">
<div class="large-12 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 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 columns">
- <div class="panel">
+ <div class="large-6 medium-6 columns">
+ <div class="callout panel">
<p>Six columns</p>
</div>
</div>
- <div class="large-6 columns">
- <div class="panel">
+ <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 columns">
- <div class="panel">
+ <div class="large-4 medium-4 small-4 columns">
+ <div class="callout panel">
<p>Four columns</p>
</div>
</div>
- <div class="large-4 columns">
- <div class="panel">
+ <div class="large-4 medium-4 small-4 columns">
+ <div class="callout panel">
<p>Four columns</p>
</div>
</div>
- <div class="large-4 columns">
- <div class="panel">
+ <div class="large-4 medium-4 small-4 columns">
+ <div class="callout panel">
<p>Four columns</p>
</div>
</div>
</div>
- <h3>Buttons</h3>
+ <hr />
- <div class="row">
- <div class="large-6 columns">
- <p><a href="#" class="small button">Small Button</a></p>
- <p><a href="#" class="button">Medium Button</a></p>
- <p><a href="#" class="large button">Large Button</a></p>
+ <h5>We bet you’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="large-6 columns">
- <p><a href="#" class="small alert button">Small Alert Button</a></p>
- <p><a href="#" class="success button">Medium Success Button</a></p>
- <p><a href="#" class="large secondary button">Large Secondary Button</a></p>
+ <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>
+ <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 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 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>
-
- <script src="bower_components/jquery/jquery.min.js"></script>
+
+ <script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/foundation/js/foundation.min.js"></script>
<script src="js/app.js"></script>
</body>
-</html>
\ No newline at end of file
+</html>
projects / web / FoundationZurbProject.git / commitdiff