Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

add a bunch of other stuff, yey

  • Loading branch information...
commit 725078b9382222474d926b14041b9596bfea7cac 1 parent e6efd13
@justinmarsan authored
View
2  css/foundation.css
@@ -856,7 +856,7 @@ div.alert-box {
padding: 6px 7px;
font-weight: bold;
font-size: 13px;
- background: #eee;
+ background: #cccccc;
border: 1px solid rgba(0, 0, 0, 0.1);
margin-bottom: 12px;
-webkit-border-radius: 3px;
View
2  css/foundation.min.css
@@ -156,7 +156,7 @@ input[type=submit].button{-webkit-appearance:none;}
.white.button:hover,.white.button:focus{background-color:#dcdcdc;color:#333;}
.black.button:hover,.black.button:focus{background-color:#070707;}
.button.disabled,.button[disabled]{filter:alpha(opacity=60);-khtml-opacity:0.6;-moz-opacity:0.6;opacity:0.6;cursor:default;}
-div.alert-box{display:block;padding:6px 7px;font-weight:bold;font-size:13px;background:#eee;border:1px solid rgba(0, 0, 0, 0.1);margin-bottom:12px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-text-shadow:0 1px rgba(255, 255, 255, 0.9);-moz-text-shadow:0 1px rgba(255, 255, 255, 0.9);text-shadow:0 1px rgba(255, 255, 255, 0.9);position:relative;}
+div.alert-box{display:block;padding:6px 7px;font-weight:bold;font-size:13px;background:#cccccc;border:1px solid rgba(0, 0, 0, 0.1);margin-bottom:12px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-text-shadow:0 1px rgba(255, 255, 255, 0.9);-moz-text-shadow:0 1px rgba(255, 255, 255, 0.9);text-shadow:0 1px rgba(255, 255, 255, 0.9);position:relative;}
.alert-box.success{background-color:#7fae00;color:#fff;-webkit-text-shadow:0 -1px rgba(0, 0, 0, 0.3);-moz-text-shadow:0 -1px rgba(0, 0, 0, 0.3);text-shadow:0 -1px rgba(0, 0, 0, 0.3);}
.alert-box.warning{background-color:#c08c00;color:#fff;-webkit-text-shadow:0 -1px rgba(0, 0, 0, 0.3);-moz-text-shadow:0 -1px rgba(0, 0, 0, 0.3);text-shadow:0 -1px rgba(0, 0, 0, 0.3);}
.alert-box.error{background-color:#c00000;color:#fff;-webkit-text-shadow:0 -1px rgba(0, 0, 0, 0.3);-moz-text-shadow:0 -1px rgba(0, 0, 0, 0.3);text-shadow:0 -1px rgba(0, 0, 0, 0.3);}
View
603 index.html
@@ -119,6 +119,609 @@
</div>
</div>
+
+
+ <div class="container">
+ <div class="row">
+ <div class="twelve columns">
+ <div class="foundation-header">
+ <h1><a href="index.php">Foundation Docs</a></h1>
+ <h4 class="subheader">Rapid prototyping and building library from ZURB.</h4>
+ </div>
+ </div>
+ </div>
+
+ <div class="row">
+ <div class="two columns">
+ <dl class="nice tabs vertical hide-on-phones">
+ <dd><a href="index.php">Getting Started</a></dd>
+ <dd><a href="grid.php">Grid</a></dd>
+ <dd><a href="buttons.php">Buttons</a></dd>
+ <dd><a href="forms.php">Forms</a></dd>
+ <dd><a href="layout.php">Layout</a></dd>
+ <dd><a href="ui.php" class="active">UI</a></dd>
+ <dd><a href="orbit.php">Orbit</a></dd>
+ <dd><a href="reveal.php">Reveal</a></dd>
+ <dd><a href="gems.php">Gems</a></dd>
+ <dd><a href="qa.php">QA</a></dd>
+ </dl>
+ </div>
+ <div class="six columns">
+ <h3>UI Elements</h3>
+ <h4 class="subheader">Need tabs, tables, or other common UI elements?<br>Yeah, we got that.</h4>
+ <hr>
+
+ <h4>Alerts</h4>
+ <p>Alerts are a handy element you can drop into a form or inline on a page to communicate success, warnings, failure or just information. The syntax is extremely simple and like anything else in Foundation, easy to customize.</p>
+
+ <div class="alert-box">
+ This is a standard alert (div.alert-box).
+ <a href="" class="close">×</a>
+ </div>
+
+ <div class="alert-box success">
+ This is a success alert (div.alert-box.success).
+ <a href="" class="close">×</a>
+ </div>
+
+ <div class="alert-box warning">
+ This is a warning alert (div.alert-box.warning).
+ <a href="" class="close">×</a>
+ </div>
+
+ <div class="alert-box error">
+ This is an error alert (div.alert-box.error).
+ <a href="" class="close">×</a>
+ </div>
+
+ <p>
+ <script type="text/javascript" src="http://snipt.net/embed/e291c9b926573dfd81fe24168d554c92"></script></p><div onmouseover="document.getElementById('snipt-31348').style.display = 'block'; return false;" onmouseout="document.getElementById('snipt-31348').style.display = 'none'; return false;" style="position: relative;">
+ <div class="highlight" style="background: #202020"><pre style="-moz-border-radius: 5px; border-radius: 5px; -webkit-border-radius: 5px; margin: 0; display: block; font: 11px Monaco, monospace !important; padding: 15px; background-color: #1C1C1C; overflow: auto; color: #D0D0D0;; line-height: 125%"><span style="color: #6ab825; font-weight: normal">&lt;div</span> <span style="color: #bbbbbb">class=</span><span style="color: #ed9d13">"alert-box [success warning error]"</span><span style="color: #6ab825; font-weight: normal">&gt;</span>
+ This is a success alert (div.alert-box.success).
+ <span style="color: #6ab825; font-weight: normal">&lt;a</span> <span style="color: #bbbbbb">href=</span><span style="color: #ed9d13">""</span> <span style="color: #bbbbbb">class=</span><span style="color: #ed9d13">"close"</span><span style="color: #6ab825; font-weight: normal">&gt;</span><span style="color: #d0d0d0">&amp;times;</span><span style="color: #6ab825; font-weight: normal">&lt;/a&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;/div&gt;</span>
+ </pre></div>
+
+ <div style="background-color: rgb(17, 17, 17); color: rgb(208, 208, 208); float: right; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; border-top-left-radius: 5px; border-bottom-right-radius: 5px; font: normal normal normal 11px/normal Arial, sans-serif; position: absolute; bottom: 0px; right: 0px; display: none; " id="snipt-31348">code hosted by <a href="http://snipt.net/smileyj68/foundation-alert" style="color: #0084FF; text-decoration: none;">snipt.net</a></div>
+ </div>
+
+ <p></p>
+
+ <hr>
+
+ <h4>Panels</h4>
+ <p>A panel is a simple, helpful css class that enables you to outline sections of your page easily. This allows you to view your page sections as you add content to them, or add emphasis to a section (for example the download box on the right).</p>
+
+ <div class="panel">
+ <h5>My panel is bigger than yours.</h5>
+ <p>Seriously, just look at this sweet panel.</p>
+ </div>
+
+ <p>
+ <script type="text/javascript" src="http://snipt.net/embed/66b5c85cee4ee8648ad51dfcf2c2ffd6"></script></p><div onmouseover="document.getElementById('snipt-34540').style.display = 'block'; return false;" onmouseout="document.getElementById('snipt-34540').style.display = 'none'; return false;" style="position: relative;">
+ <div class="highlight" style="background: #202020"><pre style="-moz-border-radius: 5px; border-radius: 5px; -webkit-border-radius: 5px; margin: 0; display: block; font: 11px Monaco, monospace !important; padding: 15px; background-color: #1C1C1C; overflow: auto; color: #D0D0D0;; line-height: 125%"><span style="color: #6ab825; font-weight: normal">&lt;div</span> <span style="color: #bbbbbb">class=</span><span style="color: #ed9d13">"panel"</span><span style="color: #6ab825; font-weight: normal">&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;h5&gt;</span>My panel is bigger than yours.<span style="color: #6ab825; font-weight: normal">&lt;/h5&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;p&gt;</span>Seriously, just look at this sweet panel.<span style="color: #6ab825; font-weight: normal">&lt;/p&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;/div&gt;</span>
+ </pre></div>
+
+ <div style="background-color: #111; color: #D0D0D0; float: right; padding: 5px 10px; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; border-top-left-radius: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; border-bottom-right-radius: 5px; font: 11px Arial,Sans-Serif; display: none; position: absolute; bottom: 0; right: 0;" id="snipt-34540">code hosted by <a href="http://snipt.net/smileyj68/panel-example?key=66b5c85cee4ee8648ad51dfcf2c2ffd6" style="color: #0084FF; text-decoration: none;">snipt.net</a></div>
+ </div>
+
+ <p></p>
+
+ <hr>
+
+ <h4>Tabs</h4>
+ <div class="row">
+ <div class="six columns">
+ <p>Tabs are very versatile both as organization and navigational constructs. To keep things easy for everyone we've created two main tab styles (simple and nice) as well as two variants of each - open and contained. With the base Foundation package, tabs of a particular format are actually already hooked up - no extra work required.</p>
+ </div>
+ <div class="six columns">
+ <p>Tabs are made of <strong>two objects:</strong> a DL object containing the tabs themselves, and a UL object containing the tab content. If you simply want visual tabs (as seen in this documentation) without the on-page hookup, you only need the DL. If you want functional tabs, just be sure that each tab is linked to an ID, and that the corresponding tab has an ID of tabnameTab. Check out these examples.</p>
+ </div>
+ </div>
+ <p><em>Note: The third tab is using the <a href="layout.php">mobile visibility classes</a> to hide on small devices.</em></p>
+ <h5>Simple Tabs</h5>
+ <dl class="tabs">
+ <dd><a href="#simple1" class="active">Simple Tab 1</a></dd>
+ <dd><a href="#simple2">Simple Tab 2</a></dd>
+ <dd class="hide-on-phones"><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 only okay.</li>
+ </ul>
+
+ <script src="http://snipt.net/embed/beabf0c3da0338ec44d9d383d9c405f4"></script><div onmouseover="document.getElementById('snipt-23177').style.display = 'block'; return false;" onmouseout="document.getElementById('snipt-23177').style.display = 'none'; return false;" style="position: relative;">
+ <div class="highlight" style="background: #202020"><pre style="-moz-border-radius: 5px; border-radius: 5px; -webkit-border-radius: 5px; margin: 0; display: block; font: 11px Monaco, monospace !important; padding: 15px; background-color: #1C1C1C; overflow: auto; color: #D0D0D0;; line-height: 125%"><span style="color: #6ab825; font-weight: normal">&lt;dl</span> <span style="color: #bbbbbb">class=</span><span style="color: #ed9d13">"tabs"</span><span style="color: #6ab825; font-weight: normal">&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;dd&gt;&lt;a</span> <span style="color: #bbbbbb">href=</span><span style="color: #ed9d13">"#simple1"</span> <span style="color: #bbbbbb">class=</span><span style="color: #ed9d13">"active"</span><span style="color: #6ab825; font-weight: normal">&gt;</span>Simple Tab 1<span style="color: #6ab825; font-weight: normal">&lt;/a&gt;&lt;/dd&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;dd&gt;&lt;a</span> <span style="color: #bbbbbb">href=</span><span style="color: #ed9d13">"#simple2"</span><span style="color: #6ab825; font-weight: normal">&gt;</span>Simple Tab 2<span style="color: #6ab825; font-weight: normal">&lt;/a&gt;&lt;/dd&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;dd&gt;&lt;a</span> <span style="color: #bbbbbb">href=</span><span style="color: #ed9d13">"#simple3"</span><span style="color: #6ab825; font-weight: normal">&gt;</span>Simple Tab 3<span style="color: #6ab825; font-weight: normal">&lt;/a&gt;&lt;/dd&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;/dl&gt;</span>
+
+ <span style="color: #6ab825; font-weight: normal">&lt;ul</span> <span style="color: #bbbbbb">class=</span><span style="color: #ed9d13">"tabs-content"</span><span style="color: #6ab825; font-weight: normal">&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;li</span> <span style="color: #bbbbbb">class=</span><span style="color: #ed9d13">"active"</span> <span style="color: #bbbbbb">id=</span><span style="color: #ed9d13">"simple1Tab"</span><span style="color: #6ab825; font-weight: normal">&gt;</span>This is simple tab 1's content. Pretty neat, huh?<span style="color: #6ab825; font-weight: normal">&lt;/li&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;li</span> <span style="color: #bbbbbb">id=</span><span style="color: #ed9d13">"simple2Tab"</span><span style="color: #6ab825; font-weight: normal">&gt;</span>This is simple tab 2's content. Now you see it!<span style="color: #6ab825; font-weight: normal">&lt;/li&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;li</span> <span style="color: #bbbbbb">id=</span><span style="color: #ed9d13">"simple3Tab"</span><span style="color: #6ab825; font-weight: normal">&gt;</span>This is simple tab 3's content. It's, you know...okay.<span style="color: #6ab825; font-weight: normal">&lt;/li&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;/ul&gt;</span>
+ </pre></div>
+
+ <div style="background-color: #111; color: #D0D0D0; float: right; padding: 5px 10px; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; border-top-left-radius: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; border-bottom-right-radius: 5px; font: 11px Arial,Sans-Serif; display: none; position: absolute; bottom: 0; right: 0;" id="snipt-23177">code hosted by <a href="http://snipt.net/smileyj68/simple-tabs-no-container?key=beabf0c3da0338ec44d9d383d9c405f4" style="color: #0084FF; text-decoration: none;">snipt.net</a></div>
+ </div>
+
+
+ <hr>
+
+ <h5>Contained Tabs</h5>
+ <p>Contained tabs have a simple added class of 'contained' on the tabs-content element. What that means is the tab content has a border around it tying it to the tabs, and the padding on that container (by default) is one column on each side. That means you can still use standard column sizes inside a tab element.</p>
+
+ <dl class="tabs contained">
+ <dd><a href="#simpleContained1" class="active">Simple Tab 1</a></dd>
+ <dd><a href="#simpleContained2">Simple Tab 2</a></dd>
+ <dd class="hide-on-phones"><a href="#simpleContained3">Simple Tab 3</a></dd>
+ </dl>
+ <ul class="tabs-content contained">
+ <li class="active" id="simpleContained1Tab">This is simple tab 1's content. Pretty neat, huh?</li>
+ <li id="simpleContained2Tab">This is simple tab 2's content. Now you see it!</li>
+ <li id="simpleContained3Tab">This is simple tab 3's content. It's only okay.</li>
+ </ul>
+
+ <script src="http://snipt.net/embed/79e2cd3515daf12475946930a3d0f011"></script><div onmouseover="document.getElementById('snipt-23178').style.display = 'block'; return false;" onmouseout="document.getElementById('snipt-23178').style.display = 'none'; return false;" style="position: relative;">
+ <div class="highlight" style="background: #202020"><pre style="-moz-border-radius: 5px; border-radius: 5px; -webkit-border-radius: 5px; margin: 0; display: block; font: 11px Monaco, monospace !important; padding: 15px; background-color: #1C1C1C; overflow: auto; color: #D0D0D0;; line-height: 125%"><span style="color: #6ab825; font-weight: normal">&lt;dl</span> <span style="color: #bbbbbb">class=</span><span style="color: #ed9d13">"tabs contained"</span><span style="color: #6ab825; font-weight: normal">&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;dd&gt;&lt;a</span> <span style="color: #bbbbbb">href=</span><span style="color: #ed9d13">"#simpleContained1"</span> <span style="color: #bbbbbb">class=</span><span style="color: #ed9d13">"active"</span><span style="color: #6ab825; font-weight: normal">&gt;</span>Simple Tab 1<span style="color: #6ab825; font-weight: normal">&lt;/a&gt;&lt;/dd&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;dd&gt;&lt;a</span> <span style="color: #bbbbbb">href=</span><span style="color: #ed9d13">"#simpleContained2"</span><span style="color: #6ab825; font-weight: normal">&gt;</span>Simple Tab 2<span style="color: #6ab825; font-weight: normal">&lt;/a&gt;&lt;/dd&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;dd&gt;&lt;a</span> <span style="color: #bbbbbb">href=</span><span style="color: #ed9d13">"#simpleContained3"</span><span style="color: #6ab825; font-weight: normal">&gt;</span>Simple Tab 3<span style="color: #6ab825; font-weight: normal">&lt;/a&gt;&lt;/dd&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;/dl&gt;</span>
+
+ <span style="color: #6ab825; font-weight: normal">&lt;ul</span> <span style="color: #bbbbbb">class=</span><span style="color: #ed9d13">"tabs-content contained"</span><span style="color: #6ab825; font-weight: normal">&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;li</span> <span style="color: #bbbbbb">class=</span><span style="color: #ed9d13">"active"</span> <span style="color: #bbbbbb">id=</span><span style="color: #ed9d13">"simpleContained1Tab"</span><span style="color: #6ab825; font-weight: normal">&gt;</span>This is simple tab 1's content. Pretty neat, huh?<span style="color: #6ab825; font-weight: normal">&lt;/li&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;li</span> <span style="color: #bbbbbb">id=</span><span style="color: #ed9d13">"simpleContained2Tab"</span><span style="color: #6ab825; font-weight: normal">&gt;</span>This is simple tab 2's content. Now you see it!<span style="color: #6ab825; font-weight: normal">&lt;/li&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;li</span> <span style="color: #bbbbbb">id=</span><span style="color: #ed9d13">"simpleContained3Tab"</span><span style="color: #6ab825; font-weight: normal">&gt;</span>This is simple tab 3's content. It's, you know...okay.<span style="color: #6ab825; font-weight: normal">&lt;/li&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;/ul&gt;</span>
+ </pre></div>
+
+ <div style="background-color: #111; color: #D0D0D0; float: right; padding: 5px 10px; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; border-top-left-radius: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; border-bottom-right-radius: 5px; font: 11px Arial,Sans-Serif; display: none; position: absolute; bottom: 0; right: 0;" id="snipt-23178">code hosted by <a href="http://snipt.net/smileyj68/simple-contained-tabs?key=79e2cd3515daf12475946930a3d0f011" style="color: #0084FF; text-decoration: none;">snipt.net</a></div>
+ </div>
+
+
+ <hr>
+
+ <h5>Nice Tabs</h5>
+ <p>Need something a little fancier? Nice tabs have some sweet default styling and can add a little polish to a prototype (or documentation). They can be both standard and contained, just like the simple tabs.</p>
+
+ <dl class="nice contained tabs">
+ <dd><a href="#nice1" class="active">Nice Tab 1</a></dd>
+ <dd><a href="#nice2" class="">Nice Tab 2</a></dd>
+ <dd class="hide-on-phones"><a href="#nice3">Nice Tab 3</a></dd>
+ </dl>
+ <ul class="nice tabs-content contained">
+ <li class="active" id="nice1Tab" style="display: block; ">This is nice tab 1's content. Pretty neat, huh?</li>
+ <li id="nice2Tab" style="display: none; ">This is nice tab 2's content. Now you see it!</li>
+ <li id="nice3Tab" style="display: none; ">This is simple tab 3's content. It's only okay.</li>
+ </ul>
+
+ <script src="http://snipt.net/embed/63e549cb8b9606acbaed87b1b37b51e1"></script><div onmouseover="document.getElementById('snipt-23179').style.display = 'block'; return false;" onmouseout="document.getElementById('snipt-23179').style.display = 'none'; return false;" style="position: relative;">
+ <div class="highlight" style="background: #202020"><pre style="-moz-border-radius: 5px; border-radius: 5px; -webkit-border-radius: 5px; margin: 0; display: block; font: 11px Monaco, monospace !important; padding: 15px; background-color: #1C1C1C; overflow: auto; color: #D0D0D0;; line-height: 125%"><span style="color: #6ab825; font-weight: normal">&lt;dl</span> <span style="color: #bbbbbb">class=</span><span style="color: #ed9d13">"nice contained tabs"</span><span style="color: #6ab825; font-weight: normal">&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;dd&gt;&lt;a</span> <span style="color: #bbbbbb">href=</span><span style="color: #ed9d13">"#nice1"</span> <span style="color: #bbbbbb">class=</span><span style="color: #ed9d13">"active"</span><span style="color: #6ab825; font-weight: normal">&gt;</span>Nice Tab 1<span style="color: #6ab825; font-weight: normal">&lt;/a&gt;&lt;/dd&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;dd&gt;&lt;a</span> <span style="color: #bbbbbb">href=</span><span style="color: #ed9d13">"#nice2"</span><span style="color: #6ab825; font-weight: normal">&gt;</span>Nice Tab 2<span style="color: #6ab825; font-weight: normal">&lt;/a&gt;&lt;/dd&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;dd&gt;&lt;a</span> <span style="color: #bbbbbb">href=</span><span style="color: #ed9d13">"#nice3"</span><span style="color: #6ab825; font-weight: normal">&gt;</span>Nice Tab 3<span style="color: #6ab825; font-weight: normal">&lt;/a&gt;&lt;/dd&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;/dl&gt;</span>
+
+ <span style="color: #6ab825; font-weight: normal">&lt;ul</span> <span style="color: #bbbbbb">class=</span><span style="color: #ed9d13">"nice tabs-content contained"</span><span style="color: #6ab825; font-weight: normal">&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;li</span> <span style="color: #bbbbbb">class=</span><span style="color: #ed9d13">"active"</span> <span style="color: #bbbbbb">id=</span><span style="color: #ed9d13">"nice1Tab"</span><span style="color: #6ab825; font-weight: normal">&gt;</span>This is nice tab 1's content. Pretty neat, huh?<span style="color: #6ab825; font-weight: normal">&lt;/li&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;li</span> <span style="color: #bbbbbb">id=</span><span style="color: #ed9d13">"nice2Tab"</span><span style="color: #6ab825; font-weight: normal">&gt;</span>This is nice tab 2's content. Now you see it!<span style="color: #6ab825; font-weight: normal">&lt;/li&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;li</span> <span style="color: #bbbbbb">id=</span><span style="color: #ed9d13">"nice3Tab"</span><span style="color: #6ab825; font-weight: normal">&gt;</span>This is nice tab 3's content. It's, you know...okay.<span style="color: #6ab825; font-weight: normal">&lt;/li&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;/ul&gt;</span>
+ </pre></div>
+
+ <div style="background-color: #111; color: #D0D0D0; float: right; padding: 5px 10px; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; border-top-left-radius: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; border-bottom-right-radius: 5px; font: 11px Arial,Sans-Serif; display: none; position: absolute; bottom: 0; right: 0;" id="snipt-23179">code hosted by <a href="http://snipt.net/smileyj68/nice-contained-tabs?key=63e549cb8b9606acbaed87b1b37b51e1" style="color: #0084FF; text-decoration: none;">snipt.net</a></div>
+ </div>
+
+
+ <hr>
+
+ <h5>Vertical Tabs</h5>
+ <p>You can also use tabs in a vertical configuration by adding a class of 'vertical' to the DL element. These are great for more scalable nav, and you can see how they work on this page on a tablet or desktop.</p>
+
+ <dl class="nice vertical tabs">
+ <dd><a href="#vertical1" class="">Vertical Tab 1</a></dd>
+ <dd><a href="#vertical2" class="">Vertical Tab 2</a></dd>
+ <dd><a href="#vertical3" class="active">Vertical Tab 3</a></dd>
+ </dl>
+
+ <script type="text/javascript" src="http://snipt.net/embed/4086cc6652ec6713851eba85db00c3e5"></script><div onmouseover="document.getElementById('snipt-32428').style.display = 'block'; return false;" onmouseout="document.getElementById('snipt-32428').style.display = 'none'; return false;" style="position: relative;">
+ <div class="highlight" style="background: #202020"><pre style="-moz-border-radius: 5px; border-radius: 5px; -webkit-border-radius: 5px; margin: 0; display: block; font: 11px Monaco, monospace !important; padding: 15px; background-color: #1C1C1C; overflow: auto; color: #D0D0D0;; line-height: 125%"><span style="color: #6ab825; font-weight: normal">&lt;dl</span> <span style="color: #bbbbbb">class=</span><span style="color: #ed9d13">"nice vertical tabs"</span><span style="color: #6ab825; font-weight: normal">&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;dd&gt;&lt;a</span> <span style="color: #bbbbbb">href=</span><span style="color: #ed9d13">"#vertical1"</span> <span style="color: #bbbbbb">class=</span><span style="color: #ed9d13">"active"</span><span style="color: #6ab825; font-weight: normal">&gt;</span>Vertical Tab 1<span style="color: #6ab825; font-weight: normal">&lt;/a&gt;&lt;/dd&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;dd&gt;&lt;a</span> <span style="color: #bbbbbb">href=</span><span style="color: #ed9d13">"#vertical1"</span><span style="color: #6ab825; font-weight: normal">&gt;</span>Vertical Tab 2<span style="color: #6ab825; font-weight: normal">&lt;/a&gt;&lt;/dd&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;dd&gt;&lt;a</span> <span style="color: #bbbbbb">href=</span><span style="color: #ed9d13">"#vertical1"</span><span style="color: #6ab825; font-weight: normal">&gt;</span>Vertical Tab 3<span style="color: #6ab825; font-weight: normal">&lt;/a&gt;&lt;/dd&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;/dl&gt;</span>
+ </pre></div>
+
+ <div style="background-color: rgb(17, 17, 17); color: rgb(208, 208, 208); float: right; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; border-top-left-radius: 5px; border-bottom-right-radius: 5px; font: normal normal normal 11px/normal Arial, sans-serif; position: absolute; bottom: 0px; right: 0px; display: none; " id="snipt-32428">code hosted by <a href="http://snipt.net/smileyj68/vertical-tabs" style="color: #0084FF; text-decoration: none;">snipt.net</a></div>
+ </div>
+
+
+ <hr>
+
+ <h5>Mobile Tabs</h5>
+ <p>To demonstrate how mobile navigation can work, adding a class of 'mobile' to a tab group will switch them (at small resolutions) to full width nav bars.</p>
+
+ <hr>
+
+ <h4>Nav Bar</h4>
+ <p>If you need a more traditional nav bar with dropdowns, you can use this sucka. The dropdowns are optional - omitting the flyout element and .has-flyout class means it will act as a standard link. The flyouts can hold arbitrary content, including grid objects, and have three sizes (.small, standard, and .large).</p>
+
+ <p><em>Note: In IE7 the dropdowns are obscured by the code snippet below. This is due to IE7s iframe z-index bug, and is not an issue with the dropdowns themselves. Try not to have dropdown elements over an iframe.</em></p>
+
+ <ul class="nav-bar">
+ <li><a href="#">Nav Item 1</a></li>
+ <li class="has-flyout"><a href="#">Nav Item 2</a>
+ <div class="flyout small">
+ <h5>Small Example (200px)</h5>
+ <p>This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. </p>
+ </div>
+ </li>
+ <li class="has-flyout"><a href="#">Nav Item 3</a>
+ <div class="flyout">
+ <div class="row">
+ <div class="twelve columns">
+ <h5>Medium Example (400px)</h5>
+ <div class="row">
+ <div class="six columns">
+ <p>This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.</p>
+ </div>
+ <div class="six columns">
+ <p>This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </li>
+ <li class="has-flyout hide-on-tablets"><a href="#">Nav Item 4</a>
+ <div class="flyout large right">
+ <div class="row">
+ <div class="twelve columns">
+ <h5>Large Example (600px)</h5>
+ <div class="row">
+ <div class="four columns">
+ <p>This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.</p>
+ <p>This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.</p>
+ </div>
+ <div class="four columns">
+ <p>This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.</p>
+ <p>This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.</p>
+ </div>
+ <div class="four columns">
+ <img src="http://placehold.it/200x250">
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </li>
+ </ul>
+
+ <script type="text/javascript" src="http://snipt.net/embed/7dd4b241f040a3437468b7e7176429a6"></script><div onmouseover="document.getElementById('snipt-33501').style.display = 'block'; return false;" onmouseout="document.getElementById('snipt-33501').style.display = 'none'; return false;" style="position: relative;">
+ <div class="highlight" style="background: #202020"><pre style="-moz-border-radius: 5px; border-radius: 5px; -webkit-border-radius: 5px; margin: 0; display: block; font: 11px Monaco, monospace !important; padding: 15px; background-color: #1C1C1C; overflow: auto; color: #D0D0D0;; line-height: 125%"><span style="color: #6ab825; font-weight: normal">&lt;ul</span> <span style="color: #bbbbbb">class=</span><span style="color: #ed9d13">"nav-bar"</span><span style="color: #6ab825; font-weight: normal">&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;li&gt;&lt;a</span> <span style="color: #bbbbbb">href=</span><span style="color: #ed9d13">"#"</span><span style="color: #6ab825; font-weight: normal">&gt;</span>Nav Item 1<span style="color: #6ab825; font-weight: normal">&lt;/a&gt;&lt;/li&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;li</span> <span style="color: #bbbbbb">class=</span><span style="color: #ed9d13">"has-flyout"</span><span style="color: #6ab825; font-weight: normal">&gt;&lt;a</span> <span style="color: #bbbbbb">href=</span><span style="color: #ed9d13">"#"</span><span style="color: #6ab825; font-weight: normal">&gt;</span>Nav Item 2<span style="color: #6ab825; font-weight: normal">&lt;/a&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;div</span> <span style="color: #bbbbbb">class=</span><span style="color: #ed9d13">"flyout small"</span><span style="color: #6ab825; font-weight: normal">&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;h5&gt;</span>Small Example (200px)<span style="color: #6ab825; font-weight: normal">&lt;/h5&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;p&gt;</span>This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. <span style="color: #6ab825; font-weight: normal">&lt;/p&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;/div&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;/li&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;li</span> <span style="color: #bbbbbb">class=</span><span style="color: #ed9d13">"has-flyout"</span><span style="color: #6ab825; font-weight: normal">&gt;&lt;a</span> <span style="color: #bbbbbb">href=</span><span style="color: #ed9d13">"#"</span><span style="color: #6ab825; font-weight: normal">&gt;</span>Nav Item 3<span style="color: #6ab825; font-weight: normal">&lt;/a&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;div</span> <span style="color: #bbbbbb">class=</span><span style="color: #ed9d13">"flyout"</span><span style="color: #6ab825; font-weight: normal">&gt;</span>
+ Content...
+ <span style="color: #6ab825; font-weight: normal">&lt;/div&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;/li&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;li</span> <span style="color: #bbbbbb">class=</span><span style="color: #ed9d13">"has-flyout"</span><span style="color: #6ab825; font-weight: normal">&gt;&lt;a</span> <span style="color: #bbbbbb">href=</span><span style="color: #ed9d13">"#"</span><span style="color: #6ab825; font-weight: normal">&gt;</span>Nav Item 4<span style="color: #6ab825; font-weight: normal">&lt;/a&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;div</span> <span style="color: #bbbbbb">class=</span><span style="color: #ed9d13">"flyout large right"</span><span style="color: #6ab825; font-weight: normal">&gt;</span>
+ Content...
+ <span style="color: #6ab825; font-weight: normal">&lt;/div&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;/li&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;/ul&gt;</span>
+ </pre></div>
+
+ <div style="background-color: #111; color: #D0D0D0; float: right; padding: 5px 10px; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; border-top-left-radius: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; border-bottom-right-radius: 5px; font: 11px Arial,Sans-Serif; display: none; position: absolute; bottom: 0; right: 0;" id="snipt-33501">code hosted by <a href="http://snipt.net/smileyj68/foundation-nav-bar?key=7dd4b241f040a3437468b7e7176429a6" style="color: #0084FF; text-decoration: none;">snipt.net</a></div>
+ </div>
+
+
+ <p>You can also drop inputs into the nav in place of an anchor. Here you can see a search input.</p>
+
+ <ul class="nav-bar">
+ <li><input type="search"></li>
+ <li class="has-flyout"><a href="">Nav Element</a>
+ <div class="flyout">
+ <ul>
+ <li><a href="">This is a link in a UL.</a></li>
+ <li><a href="">This is a link in a UL.</a></li>
+ <li><a href="">This is a link in a UL.</a></li>
+ </ul>
+ </div>
+ </li>
+ </ul>
+
+ <hr>
+
+ <h4>Pagination</h4>
+ <p>Breaking stuff up into pages? Yeah you are. Here's some pagination to get you started.</p>
+
+ <ul class="pagination">
+ <li class="unavailable"><a href="">«</a></li>
+ <li class="current"><a href="">1</a></li>
+ <li><a href="">2</a></li>
+ <li><a href="">3</a></li>
+ <li><a href="">4</a></li>
+ <li class="unavailable"><a href="">…</a></li>
+ <li><a href="">12</a></li>
+ <li><a href="">13</a></li>
+ <li><a href="">»</a></li>
+ </ul>
+
+ <script src="http://snipt.net/embed/724214a9eba6436e1565fc748693e61b"></script><div onmouseover="document.getElementById('snipt-23516').style.display = 'block'; return false;" onmouseout="document.getElementById('snipt-23516').style.display = 'none'; return false;" style="position: relative;">
+ <div class="highlight" style="background: #202020"><pre style="-moz-border-radius: 5px; border-radius: 5px; -webkit-border-radius: 5px; margin: 0; display: block; font: 11px Monaco, monospace !important; padding: 15px; background-color: #1C1C1C; overflow: auto; color: #D0D0D0;; line-height: 125%"><span style="color: #6ab825; font-weight: normal">&lt;ul</span> <span style="color: #bbbbbb">class=</span><span style="color: #ed9d13">"pagination"</span><span style="color: #6ab825; font-weight: normal">&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;li</span> <span style="color: #bbbbbb">class=</span><span style="color: #ed9d13">"unavailable"</span><span style="color: #6ab825; font-weight: normal">&gt;&lt;a</span> <span style="color: #bbbbbb">href=</span><span style="color: #ed9d13">""</span><span style="color: #6ab825; font-weight: normal">&gt;</span><span style="color: #d0d0d0">&amp;laquo;</span><span style="color: #6ab825; font-weight: normal">&lt;/a&gt;&lt;/li&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;li</span> <span style="color: #bbbbbb">class=</span><span style="color: #ed9d13">"current"</span><span style="color: #6ab825; font-weight: normal">&gt;&lt;a</span> <span style="color: #bbbbbb">href=</span><span style="color: #ed9d13">""</span><span style="color: #6ab825; font-weight: normal">&gt;</span>1<span style="color: #6ab825; font-weight: normal">&lt;/a&gt;&lt;/li&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;li&gt;&lt;a</span> <span style="color: #bbbbbb">href=</span><span style="color: #ed9d13">""</span><span style="color: #6ab825; font-weight: normal">&gt;</span>2<span style="color: #6ab825; font-weight: normal">&lt;/a&gt;&lt;/li&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;li&gt;&lt;a</span> <span style="color: #bbbbbb">href=</span><span style="color: #ed9d13">""</span><span style="color: #6ab825; font-weight: normal">&gt;</span>3<span style="color: #6ab825; font-weight: normal">&lt;/a&gt;&lt;/li&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;li&gt;&lt;a</span> <span style="color: #bbbbbb">href=</span><span style="color: #ed9d13">""</span><span style="color: #6ab825; font-weight: normal">&gt;</span>4<span style="color: #6ab825; font-weight: normal">&lt;/a&gt;&lt;/li&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;li</span> <span style="color: #bbbbbb">class=</span><span style="color: #ed9d13">"unavailable"</span><span style="color: #6ab825; font-weight: normal">&gt;&lt;a</span> <span style="color: #bbbbbb">href=</span><span style="color: #ed9d13">""</span><span style="color: #6ab825; font-weight: normal">&gt;</span><span style="color: #d0d0d0">&amp;hellip;</span><span style="color: #6ab825; font-weight: normal">&lt;/a&gt;&lt;/li&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;li&gt;&lt;a</span> <span style="color: #bbbbbb">href=</span><span style="color: #ed9d13">""</span><span style="color: #6ab825; font-weight: normal">&gt;</span>12<span style="color: #6ab825; font-weight: normal">&lt;/a&gt;&lt;/li&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;li&gt;&lt;a</span> <span style="color: #bbbbbb">href=</span><span style="color: #ed9d13">""</span><span style="color: #6ab825; font-weight: normal">&gt;</span>13<span style="color: #6ab825; font-weight: normal">&lt;/a&gt;&lt;/li&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;li&gt;&lt;a</span> <span style="color: #bbbbbb">href=</span><span style="color: #ed9d13">""</span><span style="color: #6ab825; font-weight: normal">&gt;</span><span style="color: #d0d0d0">&amp;raquo;</span><span style="color: #6ab825; font-weight: normal">&lt;/a&gt;&lt;/li&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;/ul&gt;</span>
+ </pre></div>
+
+ <div style="background-color: rgb(17, 17, 17); color: rgb(208, 208, 208); float: right; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; border-top-left-radius: 5px; border-bottom-right-radius: 5px; font: normal normal normal 11px/normal Arial, sans-serif; position: absolute; bottom: 0px; right: 0px; display: none; " id="snipt-23516">code hosted by <a href="http://snipt.net/smileyj68/pagination-demo?key=724214a9eba6436e1565fc748693e61b" style="color: #0084FF; text-decoration: none;">snipt.net</a></div>
+ </div>
+
+
+ <hr>
+
+ <h4>Tables</h4>
+ <p>Okay, they're not the sexiest things ever, but tables get the job done (for tabular data).</p>
+
+ <table>
+ <thead>
+ <tr>
+ <th>Table Header</th>
+ <th>Table Header</th>
+ <th>Table Header</th>
+ <th>Table Header</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Content</td>
+ <td>This is longer content</td>
+ <td>Content</td>
+ <td>Content</td>
+ </tr>
+ <tr>
+ <td>Content</td>
+ <td>This is longer content</td>
+ <td>Content</td>
+ <td>Content</td>
+ </tr>
+ <tr>
+ <td>Content</td>
+ <td>This is longer content</td>
+ <td>Content</td>
+ <td>Content</td>
+ </tr>
+ <tr>
+ <td>Content</td>
+ <td>This is longer content</td>
+ <td>Content</td>
+ <td>Content</td>
+ </tr>
+ </tbody>
+ </table>
+
+
+ <hr>
+
+ <h4>Video</h4>
+ <p>If you're embedding video from YouTube, Vimeo, or another site that uses iframe, embed or object elements you can wrap your video in <code>div.flex-video</code> to create an intrinsic ratio that will properly scale your video on any device.</p>
+
+ <dl class="tabs contained">
+ <dd><a href="#video1" class="active">4:3</a></dd>
+ <dd><a href="#video2">Widescreen</a></dd>
+ <dd><a href="#video3">Vimeo</a></dd>
+ </dl>
+ <ul class="tabs-content contained">
+ <li class="active" id="video1Tab">
+ <div class="flex-video">
+ <iframe width="420" height="315" src="http://www.youtube.com/embed/9otNWTHOJi8" frameborder="0" allowfullscreen=""></iframe>
+ </div>
+ 4:3 is the default size for the .video element, and the assumption for .video for chrome (controls) height is based on YouTube.
+ </li>
+ <li id="video2Tab">
+ <div class="flex-video widescreen">
+ <iframe width="560" height="315" src="http://www.youtube.com/embed/N966cATFWjI" frameborder="0" allowfullscreen=""></iframe>
+ </div>
+ By adding a class of .widescreen we change the ratio to 16:9, ideal for more recent video and most popular YouTube or Vimeo embeds.
+ </li>
+ <li id="video3Tab">
+ <div class="flex-video widescreen vimeo">
+ <iframe src="http://player.vimeo.com/video/21762736?title=0&amp;byline=0&amp;portrait=0" width="400" height="225" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
+ </div>
+ Because Vimeo places their chrome on the player itself, adding a class of .vimeo creates a container that is sized for the video only - no extra padding for the controls.
+ </li>
+ </ul>
+
+ <script type="text/javascript" src="http://snipt.net/embed/723bad35ef085d939ed09fff20fca68e"></script><div onmouseover="document.getElementById('snipt-33770').style.display = 'block'; return false;" onmouseout="document.getElementById('snipt-33770').style.display = 'none'; return false;" style="position: relative;">
+ <div class="highlight" style="background: #202020"><pre style="-moz-border-radius: 5px; border-radius: 5px; -webkit-border-radius: 5px; margin: 0; display: block; font: 11px Monaco, monospace !important; padding: 15px; background-color: #1C1C1C; overflow: auto; color: #D0D0D0;; line-height: 125%"><span style="color: #6ab825; font-weight: normal">&lt;div</span> <span style="color: #bbbbbb">class=</span><span style="color: #ed9d13">"flex-video"</span><span style="color: #6ab825; font-weight: normal">&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;iframe</span> <span style="color: #bbbbbb">width=</span><span style="color: #ed9d13">"420"</span> <span style="color: #bbbbbb">height=</span><span style="color: #ed9d13">"315"</span> <span style="color: #bbbbbb">src=</span><span style="color: #ed9d13">"http://www.youtube.com/embed/9otNWTHOJi8"</span> <span style="color: #bbbbbb">frameborder=</span><span style="color: #ed9d13">"0"</span> <span style="color: #bbbbbb">allowfullscreen</span><span style="color: #6ab825; font-weight: normal">&gt;&lt;/iframe&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;/div&gt;</span>
+
+ <span style="color: #6ab825; font-weight: normal">&lt;div</span> <span style="color: #bbbbbb">class=</span><span style="color: #ed9d13">"flex-video widescreen"</span><span style="color: #6ab825; font-weight: normal">&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;iframe</span> <span style="color: #bbbbbb">width=</span><span style="color: #ed9d13">"560"</span> <span style="color: #bbbbbb">height=</span><span style="color: #ed9d13">"315"</span> <span style="color: #bbbbbb">src=</span><span style="color: #ed9d13">"http://www.youtube.com/embed/N966cATFWjI"</span> <span style="color: #bbbbbb">frameborder=</span><span style="color: #ed9d13">"0"</span> <span style="color: #bbbbbb">allowfullscreen</span><span style="color: #6ab825; font-weight: normal">&gt;&lt;/iframe&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;/div&gt;</span>
+
+ <span style="color: #6ab825; font-weight: normal">&lt;div</span> <span style="color: #bbbbbb">class=</span><span style="color: #ed9d13">"flex-video widescreen vimeo"</span><span style="color: #6ab825; font-weight: normal">&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;iframe</span> <span style="color: #bbbbbb">src=</span><span style="color: #ed9d13">"http://player.vimeo.com/video/21762736?title=0&amp;amp;byline=0&amp;amp;portrait=0"</span> <span style="color: #bbbbbb">width=</span><span style="color: #ed9d13">"400"</span> <span style="color: #bbbbbb">height=</span><span style="color: #ed9d13">"225"</span> <span style="color: #bbbbbb">frameborder=</span><span style="color: #ed9d13">"0"</span> <span style="color: #bbbbbb">webkitAllowFullScreen</span> <span style="color: #bbbbbb">mozallowfullscreen</span> <span style="color: #bbbbbb">allowFullScreen</span><span style="color: #6ab825; font-weight: normal">&gt;&lt;/iframe&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;/div&gt;</span>
+ </pre></div>
+
+ <div style="background-color: #111; color: #D0D0D0; float: right; padding: 5px 10px; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; border-top-left-radius: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; border-bottom-right-radius: 5px; font: 11px Arial,Sans-Serif; display: none; position: absolute; bottom: 0; right: 0;" id="snipt-33770">code hosted by <a href="http://snipt.net/smileyj68/intrinsic-ratio-video-wrapper?key=723bad35ef085d939ed09fff20fca68e" style="color: #0084FF; text-decoration: none;">snipt.net</a></div>
+ </div>
+
+
+ <hr>
+
+ <h4>Microformats</h4>
+ <p>Microformats are formats for data objects represented on the page using standard HTML. By applying specific classes to objects parsers like the operator plugin can detect relevant data and display it. This can be especially handy for contact info, events, locations and news articles. We've supplied some base styling for microformats, as well as the relevant markup.</p>
+
+ <h5>hCard</h5>
+ <p>hCards are a microformat for contact information. We've represented the correct syntax here to ensure they are machine readable, as well as applied some minimal styling.</p>
+
+ <ul class="vcard">
+ <li class="fn">John T. Yeti</li>
+ <li class="nickname">Yeti</li>
+ <li class="org">Foundation, Inc.</li>
+ <li class="tel"><a href="tel:408-867-5309">408-867-5309</a></li>
+ <li><a class="url" href="http://foundation.zurb.com/">http://foundation.zurb.com/</a></li>
+ </ul>
+
+ <p><script type="text/javascript" src="http://snipt.net/embed/eb809555f900b7fa2651d6f31b35d941"></script></p><div onmouseover="document.getElementById('snipt-33155').style.display = 'block'; return false;" onmouseout="document.getElementById('snipt-33155').style.display = 'none'; return false;" style="position: relative;">
+ <div class="highlight" style="background: #202020"><pre style="-moz-border-radius: 5px; border-radius: 5px; -webkit-border-radius: 5px; margin: 0; display: block; font: 11px Monaco, monospace !important; padding: 15px; background-color: #1C1C1C; overflow: auto; color: #D0D0D0;; line-height: 125%"><span style="color: #6ab825; font-weight: normal">&lt;ul</span> <span style="color: #bbbbbb">class=</span><span style="color: #ed9d13">"vcard"</span><span style="color: #6ab825; font-weight: normal">&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;li</span> <span style="color: #bbbbbb">class=</span><span style="color: #ed9d13">"fn"</span><span style="color: #6ab825; font-weight: normal">&gt;</span>John T. Yeti<span style="color: #6ab825; font-weight: normal">&lt;/li&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;li</span> <span style="color: #bbbbbb">class=</span><span style="color: #ed9d13">"nickname"</span><span style="color: #6ab825; font-weight: normal">&gt;</span>Yeti<span style="color: #6ab825; font-weight: normal">&lt;/li&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;li</span> <span style="color: #bbbbbb">class=</span><span style="color: #ed9d13">"org"</span><span style="color: #6ab825; font-weight: normal">&gt;</span>Foundation, Inc.<span style="color: #6ab825; font-weight: normal">&lt;/li&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;li</span> <span style="color: #bbbbbb">class=</span><span style="color: #ed9d13">"tel"</span><span style="color: #6ab825; font-weight: normal">&gt;&lt;a</span> <span style="color: #bbbbbb">href=</span><span style="color: #ed9d13">"tel:408-867-5309"</span><span style="color: #6ab825; font-weight: normal">&gt;</span>408-867-5309<span style="color: #6ab825; font-weight: normal">&lt;/a&gt;&lt;/li&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;li&gt;&lt;a</span> <span style="color: #bbbbbb">class=</span><span style="color: #ed9d13">"url"</span> <span style="color: #bbbbbb">href=</span><span style="color: #ed9d13">"http://foundation.zurb.com/"</span><span style="color: #6ab825; font-weight: normal">&gt;</span>http://foundation.zurb.com/<span style="color: #6ab825; font-weight: normal">&lt;/a&gt;&lt;/li&gt;</span>
+ <span style="color: #6ab825; font-weight: normal">&lt;/ul&gt;</span>
+ </pre></div>
+
+ <div style="background-color: #111; color: #D0D0D0; float: right; padding: 5px 10px; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; border-top-left-radius: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; border-bottom-right-radius: 5px; font: 11px Arial,Sans-Serif; display: none; position: absolute; bottom: 0; right: 0;" id="snipt-33155">code hosted by <a href="http://snipt.net/smileyj68/hcard-microformat?key=eb809555f900b7fa2651d6f31b35d941" style="color: #0084FF; text-decoration: none;">snipt.net</a></div>
+ </div>
+ <p></p>
+
+ <h5>hCalendar</h5>
+ <p>An hCalendar event is an iCalendar formatted entry for an event at a specific time and location. This can be interpreted by parsing tools to recognize events and add them to a calendar.</p>
+
+ <p class="vevent">
+ The <span class="summary">Foundation Launch Party</span>
+ was on October 13 2011 from
+ <abbr class="dtstart" title="2011-10-13T14:00:00+06:00">2</abbr>–<abbr class="dtend" title="2011-10-13T16:00:00+06:00">4</abbr>pm at
+ <span class="location">ZURB HQ</span>
+ (<a class="url" href="http://foundation.zurb.com">More Info</a>)
+ </p>
+
+ <p><script type="text/javascript" src="http://snipt.net/embed/ef85ba34e235c9bc712baa62cc8bdf4c"></script></p><div onmouseover="document.getElementById('snipt-33156').style.display = 'block'; return false;" onmouseout="document.getElementById('snipt-33156').style.display = 'none'; return false;" style="position: relative;">
+ <div class="highlight" style="background: #202020"><pre style="-moz-border-radius: 5px; border-radius: 5px; -webkit-border-radius: 5px; margin: 0; display: block; font: 11px Monaco, monospace !important; padding: 15px; background-color: #1C1C1C; overflow: auto; color: #D0D0D0;; line-height: 125%"><span style="color: #6ab825; font-weight: normal">&lt;p</span> <span style="color: #bbbbbb">class=</span><span style="color: #ed9d13">"vevent"</span><span style="color: #6ab825; font-weight: normal">&gt;</span>
+ The <span style="color: #6ab825; font-weight: normal">&lt;span</span> <span style="color: #bbbbbb">class=</span><span style="color: #ed9d13">"summary"</span><span style="color: #6ab825; font-weight: normal">&gt;</span>Foundation Launch Party<span style="color: #6ab825; font-weight: normal">&lt;/span&gt;</span>
+ was on October 13 2011 from
+ <span style="color: #6ab825; font-weight: normal">&lt;abbr</span> <span style="color: #bbbbbb">class=</span><span style="color: #ed9d13">"dtstart"</span> <span style="color: #bbbbbb">title=</span><span style="color: #ed9d13">"2011-10-13T14:00:00+06:00"</span><span style="color: #6ab825; font-weight: normal">&gt;</span>2<span style="color: #6ab825; font-weight: normal">&lt;/abbr&gt;</span><span style="color: #d0d0d0">&amp;ndash;</span><span style="color: #6ab825; font-weight: normal">&lt;abbr</span> <span style="color: #bbbbbb">class=</span><span style="color: #ed9d13">"dtend"</span> <span style="color: #bbbbbb">title=</span><span style="color: #ed9d13">"2011-10-13T16:00:00+06:00"</span><span style="color: #6ab825; font-weight: normal">&gt;</span>4<span style="color: #6ab825; font-weight: normal">&lt;/abbr&gt;</span>pm at
+ <span style="color: #6ab825; font-weight: normal">&lt;span</span> <span style="color: #bbbbbb">class=</span><span style="color: #ed9d13">"location"</span><span style="color: #6ab825; font-weight: normal">&gt;</span>ZURB HQ<span style="color: #6ab825; font-weight: normal">&lt;/span&gt;</span>
+ (<span style="color: #6ab825; font-weight: normal">&lt;a</span> <span style="color: #bbbbbb">class=</span><span style="color: #ed9d13">"url"</span> <span style="color: #bbbbbb">href=</span><span style="color: #ed9d13">"http://foundation.zurb.com"</span><span style="color: #6ab825; font-weight: normal">&gt;</span>More Info<span style="color: #6ab825; font-weight: normal">&lt;/a&gt;</span>)
+ <span style="color: #6ab825; font-weight: normal">&lt;/p&gt;</span>
+ </pre></div>
+
+ <div style="background-color: #111; color: #D0D0D0; float: right; padding: 5px 10px; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; border-top-left-radius: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; border-bottom-right-radius: 5px; font: 11px Arial,Sans-Serif; display: none; position: absolute; bottom: 0; right: 0;" id="snipt-33156">code hosted by <a href="http://snipt.net/smileyj68/microformats-hcalendar-event?key=ef85ba34e235c9bc712baa62cc8bdf4c" style="color: #0084FF; text-decoration: none;">snipt.net</a></div>
+ </div>
+ <p></p>
+
+
+ </div>
+ <div class="four columns">
+ <div class="panel hide-on-phones">
+ <h4>Get Foundation</h4>
+ <p>Download Foundation here to get started quickly. Includes the base file structure, CSS, JS, and required images.</p>
+ <p>
+ <a href="../files/foundation-download-2.1.4.zip" class="nice radius blue button mobile src-download">Download Foundation</a>
+ </p>
+ </div>
+
+
+ <!-- ==========================
+ ZURBjobs
+ =============================== -->
+
+ <div class="jobs hide-on-phones">
+ <h5>Score an awesome product engineering<br>or design job. Check out:</h5>
+ <script type="text/javascript" src="http://www.zurb.com/jobs/widgets/jobs.js?limit=3&amp;variation=foundation-sidebar"></script><ul>
+ <li>
+ <a href="http://www.zurb.com/jobs/37-mediafire-web-designer" target="_blank">
+ <span class="positionTitle">Web Designer</span>
+ <span class="location"><span class="companyName">MediaFire</span> in Houston, Texas</span>
+ </a> </li>
+ <li>
+ <a href="http://www.zurb.com/jobs/62-launchrock-chief-awesomeness-design-dev-dude-tte-other-awesome-titley-things" target="_blank">
+ <span class="positionTitle">Chief Awesomeness Design/Dev Dude(tte) &amp; Other Awesome Titley Things</span>
+ <span class="location"><span class="companyName">LaunchRock</span> in San Francisco, CA</span>
+ </a> </li>
+ <li>
+ <a href="http://www.zurb.com/jobs/76-epic-ui-designer" target="_blank">
+ <span class="positionTitle">UI Designer</span>
+ <span class="location"><span class="companyName">Epic</span> in Madison, WI</span>
+ </a> </li>
+ </ul>
+ <a id="via" href="http://zurbjobs.com">via&nbsp;<span class="jobs-link">ZURBjobs</span></a>
+ </div>
+ </div>
+ </div>
+
+ <div class="row">
+ <div class="twelve columns">
+ <dl class="nice tabs mobile show-on-phones">
+ <dd><a href="index.php">Getting Started</a></dd>
+ <dd><a href="grid.php">Grid</a></dd>
+ <dd><a href="buttons.php">Buttons</a></dd>
+ <dd><a href="forms.php">Forms</a></dd>
+ <dd><a href="layout.php">Layout</a></dd>
+ <dd><a href="ui.php" class="active">UI</a></dd>
+ <dd><a href="orbit.php">Orbit</a></dd>
+ <dd><a href="reveal.php">Reveal</a></dd>
+ <dd><a href="qa.php">QA</a></dd>
+ </dl>
+ </div>
+ </div>
+
+
+ <!-- Das Footer -->
+ <footer class="row">
+ <section class="five columns">
+ <h6><strong>Made by ZURB</strong></h6>
+ <p>Foundation is made by <a href="http://www.zurb.com/">ZURB</a>, an <a href="http://www.zurb.com/words/design-process">interaction design and strategy company</a> located in Campbell, California. We've put over 10 years of experience building web products, services and websites into this framework. <a href="../about.php">Foundation Info and Goodies →</a></p>
+ </section>
+
+ <section class="three columns">
+ <h6><strong>Using Foundation?</strong></h6>
+ <p>Let us know how you're using Foundation and we might feature you as an example! <a href="mailto:foundation@zurb.com?subject=I'm%20using%20Foundation">Get in touch →</a></p>
+ </section>
+
+ <section class="four columns">
+ <h6><strong>Need some help?</strong></h6>
+ <p>For quick answers or help <a href="mailto:foundation@zurb.com">email us →</a></p>
+
+ <ul class="block-grid three-up">
+ <li>
+ <!-- Place this tag where you want the +1 button to render -->
+ <div id="___plusone_0" style="height: 20px; width: 90px; display: inline-block; text-indent: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; "><iframe allowtransparency="true" frameborder="0" hspace="0" id="I1_1326821065248" marginheight="0" marginwidth="0" name="I1_1326821065248" scrolling="no" src="https://plusone.google.com/_/+1/fastbutton?url=http%3A%2F%2Ffoundation.zurb.com%2Fdocs%2Fui.php&amp;size=medium&amp;count=true&amp;annotation=&amp;hl=en-US&amp;jsh=m%3B%2F_%2Fapps-static%2F_%2Fjs%2Fwidget%2F__features__%2Frt%3Dj%2Fver%3DVOzl2d3IIXQ.en.%2Fsv%3D1%2Fam%3D!bMxf2l2AOqKIHfWTkg%2Fd%3D1%2F#id=I1_1326821065248&amp;parent=http%3A%2F%2Ffoundation.zurb.com&amp;rpctoken=381202553&amp;_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe" style="width: 90px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; height: 20px; position: static; left: 0px; top: 0px; visibility: visible; " tabindex="-1" vspace="0" width="100%" title="+1"></iframe></div>
+
+ <!-- Place this render call where appropriate -->
+ <script>
+ (function() {
+ var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
+ po.src = 'https://apis.google.com/js/plusone.js';
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
+ })();
+ </script>
+ </li>
+ <li>
+
+ <iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.html?screen_name=foundationzurb" style="width:80px; height:20px;"></iframe>
+ </li>
+ <li>
+ <iframe src="http://www.facebook.com/plugins/like.php?app_id=273982815961057&amp;href=foundation.zurb.com&amp;send=false&amp;layout=button_count&amp;width=90&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=lucida+grande&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:90px; height:21px;" allowtransparency="true"></iframe>
+ </li>
+ </ul></section></footer></div>
<!-- container -->
View
2  less/foundation.less
@@ -921,7 +921,7 @@ div.alert-box {
padding: 6px 7px;
font-weight: bold;
font-size: 13px;
- background: #eee;
+ background: @grayLighter;
border: 1px solid rgba(0,0,0,0.1);
margin-bottom: 12px;
.border-radius(3px);
Please sign in to comment.
Something went wrong with that request. Please try again.