+++ /dev/null
-<!doctype html>
-<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
-<html class="no-js" lang="en" dir="ltr">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="Abide is a form validation library that extends the HTML5 validation API with custom validators.">
- <link rel="icon" href="assets/img/icons/foundation-favicon.ico" type="image/x-icon">
- <title>Foundation for Sites 6 Docs | Abide</title>
- <link href="assets/css/docs.css?hash=30f6e9dfa0c76e27e721b8659ed69908" rel="stylesheet" />
- <link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=e269f56654d0e38c8f9fb9f9809eb870" rel="stylesheet">
- <!-- <link rel="stylesheet" href="./node_modules/motion-ui/dist/motion-ui.css" /> -->
-</head>
-<body>
-
- <div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
-
- <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="mobile-ofc vertical menu">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
-
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/support.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/sort/unanswered">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
- </div>
-
- <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="vertical menu">
- <li><a href="#">Foundation</a></li>
- <li><a href="#">Dot</a></li>
- <li><a href="#">ZURB</a></li>
- <li><a href="#">Com</a></li>
- <li><a href="#">Slash</a></li>
- <li><a href="#">Sites</a></li>
- </ul>
- </div>
-
-
- <div class="off-canvas-content" data-off-canvas-content>
- <!-- Info Banner For Announcements or Links -->
- <!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
- <div class="info">
- <h5>Foundation 6 is here!</h5>
- </div>
- </a> -->
-
- <nav class="marketing-topbar show-for-medium">
-
- <ul class="menu">
- <li class="topbar-title"><a href="https://get.foundation/index.html"><img src="assets/img/logos/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
- </ul>
-
- <ul class="dropdown menu" data-dropdown-menu data-click-open="false">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/" target="_blank">F5 Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="https://get.foundation/emails/docs/" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
-
- </nav>
-
- <div class="title-bar hide-for-medium">
- <div class="title-bar-left">
- <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
- <span class="title-bar-title">Foundation</span>
- </div>
- </div>
-
-
- <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
-
- <div class="expanded row">
- <div class="medium-9 large-10 medium-push-3 large-push-2 columns">
-
-<article class="docs-component" id="docs-abide">
-
-<a href="#docs-menu" class="small secondary expanded button hide-for-medium">Jump to Nav</a>
-
-<header>
- <h1 class="docs-page-title">Abide</h1>
-
- <span data-tooltip title="Requires a JavaScript library." class="docs-js label">JavaScript</span>
-
- <p class="lead docs-page-lead">Abide is a form validation library that extends the HTML5 validation API with custom validators.</p>
-
- <ul class="menu simple docs-contribute-menu">
- <li><a href="https://github.com/zurb/foundation-sites/edit/master/docs/pages/abide.md" target="_blank"><i class="fi-pencil"></i>Edit this Page</a></li>
- <li><a href="https://github.com/zurb/foundation-sites/issues/new?title=%5BAbide%5D%20ISSUE%20NAME%20HERE" target="_blank"><i class="fi-social-github"></i>Report a Bug</a></li>
- <li><a href="https://get.foundation/forum" target="_blank"><i class="fi-comment"></i>Get Help</a></li>
- </ul>
-</header>
-
-<hr>
-
-<div class="row">
-
-<div class="large-9 columns" id="docs">
-
-<h3 id="abide-demo" class="docs-heading">Abide Demo<a class="docs-heading-icon" href="#abide-demo"></a></h3><p>These input types create a text field: <code>text</code>, <code>date</code>, <code>datetime</code>, <code>datetime-local</code>, <code>email</code>, <code>month</code>, <code>number</code>, <code>password</code>, <code>search</code>, <code>tel</code>, <code>time</code>, <code>url</code>, and <code>week</code>.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">data-abide</span> <span class="hljs-attr">novalidate</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">data-abide-error</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"alert callout"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"display: none;"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"fi-alert"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> There are some errors in your form.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-12 columns"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Number Required
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"1234"</span> <span class="hljs-attr">aria-describedby</span>=<span class="hljs-string">"exampleHelpText"</span> <span class="hljs-attr">required</span> <span class="hljs-attr">pattern</span>=<span class="hljs-string">"number"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-error"</span>></span>
- Yo, you had better fill this out, it's required.
- <span class="hljs-tag"></<span class="hljs-name">span</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"help-text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"exampleHelpText"</span>></span>Here's how you use this input field!<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-12 columns"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Nothing Required!
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Use me, or don't"</span> <span class="hljs-attr">aria-describedby</span>=<span class="hljs-string">"exampleHelpTex"</span> <span class="hljs-attr">data-abide-ignore</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"help-text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"exampleHelpTex"</span>></span>This input is ignored by Abide using `data-abide-ignore`<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-12 columns"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Password Required
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"password"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"password"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"yeti4preZ"</span> <span class="hljs-attr">aria-describedby</span>=<span class="hljs-string">"exampleHelpText"</span> <span class="hljs-attr">required</span> ></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-error"</span>></span>
- I'm required!
- <span class="hljs-tag"></<span class="hljs-name">span</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"help-text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"exampleHelpText"</span>></span>Enter a password please.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-12 columns"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Re-enter Password
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"password"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"yeti4preZ"</span> <span class="hljs-attr">aria-describedby</span>=<span class="hljs-string">"exampleHelpText2"</span> <span class="hljs-attr">required</span> <span class="hljs-attr">pattern</span>=<span class="hljs-string">"alpha_numeric"</span> <span class="hljs-attr">data-equalto</span>=<span class="hljs-string">"password"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-error"</span>></span>
- Hey, passwords are supposed to match!
- <span class="hljs-tag"></<span class="hljs-name">span</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"help-text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"exampleHelpText2"</span>></span>This field is using the `data-equalto="password"` attribute, causing it to match the password field above.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"medium-6 columns"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">label</span>></span>URL Pattern, not required, but throws error if it doesn't match the Regular Expression for a valid URL.
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"https://get.foundation"</span> <span class="hljs-attr">pattern</span>=<span class="hljs-string">"url"</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"medium-6 columns"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">label</span>></span>European Cars, Choose One, it can't be the blank option.
- <span class="hljs-tag"><<span class="hljs-name">select</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"select"</span> <span class="hljs-attr">required</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">""</span>></span><span class="hljs-tag"></<span class="hljs-name">option</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"volvo"</span>></span>Volvo<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"saab"</span>></span>Saab<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"mercedes"</span>></span>Mercedes<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"audi"</span>></span>Audi<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">select</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">fieldset</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"large-6 columns"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">legend</span>></span>Choose Your Favorite, and this is required, so you have to pick one.<span class="hljs-tag"></<span class="hljs-name">legend</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"pokemon"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"Red"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"pokemonRed"</span>></span><span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"pokemonRed"</span>></span>Red<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"pokemon"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"Blue"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"pokemonBlue"</span> <span class="hljs-attr">required</span>></span><span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"pokemonBlue"</span>></span>Blue<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"pokemon"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"Yellow"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"pokemonYellow"</span>></span><span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"pokemonYellow"</span>></span>Yellow<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">fieldset</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">fieldset</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"large-6 columns"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">legend</span>></span>Choose Your Favorite - not required, you can leave this one blank.<span class="hljs-tag"></<span class="hljs-name">legend</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"pockets"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"Red"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"pocketsRed"</span>></span><span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"pocketsRed"</span>></span>Red<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"pockets"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"Blue"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"pocketsBlue"</span>></span><span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"pocketsBlue"</span>></span>Blue<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"pockets"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"Yellow"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"pocketsYellow"</span>></span><span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"pocketsYellow"</span>></span>Yellow<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">fieldset</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">fieldset</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"large-6 columns"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">legend</span>></span>Check these out<span class="hljs-tag"></<span class="hljs-name">legend</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"checkbox1"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>></span><span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"checkbox1"</span>></span>Checkbox 1<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"checkbox2"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">required</span>></span><span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"checkbox2"</span>></span>Checkbox 2<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"checkbox3"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>></span><span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"checkbox3"</span>></span>Checkbox 3<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">fieldset</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">fieldset</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"large-6 columns"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"submit"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"Submit"</span>></span>Submit<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">fieldset</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">fieldset</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"large-6 columns"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"reset"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"Reset"</span>></span>Reset<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">fieldset</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">form</span>></span></code></pre></div>
-
-<div class="docs-code-live"><form data-abide novalidate>
- <div data-abide-error class="alert callout" style="display: none;">
- <p><i class="fi-alert"></i> There are some errors in your form.</p>
- </div>
- <div class="row">
- <div class="small-12 columns">
- <label>Number Required
- <input type="text" placeholder="1234" aria-describedby="exampleHelpText" required pattern="number">
- <span class="form-error">
- Yo, you had better fill this out, it's required.
- </span>
- </label>
- <p class="help-text" id="exampleHelpText">Here's how you use this input field!</p>
- </div>
- <div class="small-12 columns">
- <label>Nothing Required!
- <input type="text" placeholder="Use me, or don't" aria-describedby="exampleHelpTex" data-abide-ignore>
- </label>
- <p class="help-text" id="exampleHelpTex">This input is ignored by Abide using `data-abide-ignore`</p>
- </div>
- <div class="small-12 columns">
- <label>Password Required
- <input type="password" id="password" placeholder="yeti4preZ" aria-describedby="exampleHelpText" required >
- <span class="form-error">
- I'm required!
- </span>
- </label>
- <p class="help-text" id="exampleHelpText">Enter a password please.</p>
- </div>
- <div class="small-12 columns">
- <label>Re-enter Password
- <input type="password" placeholder="yeti4preZ" aria-describedby="exampleHelpText2" required pattern="alpha_numeric" data-equalto="password">
- <span class="form-error">
- Hey, passwords are supposed to match!
- </span>
- </label>
- <p class="help-text" id="exampleHelpText2">This field is using the `data-equalto="password"` attribute, causing it to match the password field above.</p>
- </div>
- </div>
- <div class="row">
- <div class="medium-6 columns">
- <label>URL Pattern, not required, but throws error if it doesn't match the Regular Expression for a valid URL.
- <input type="text" placeholder="https://get.foundation" pattern="url">
- </label>
- </div>
- <div class="medium-6 columns">
- <label>European Cars, Choose One, it can't be the blank option.
- <select id="select" required>
- <option value=""></option>
- <option value="volvo">Volvo</option>
- <option value="saab">Saab</option>
- <option value="mercedes">Mercedes</option>
- <option value="audi">Audi</option>
- </select>
- </label>
- </div>
- </div>
- <div class="row">
- <fieldset class="large-6 columns">
- <legend>Choose Your Favorite, and this is required, so you have to pick one.</legend>
- <input type="radio" name="pokemon" value="Red" id="pokemonRed"><label for="pokemonRed">Red</label>
- <input type="radio" name="pokemon" value="Blue" id="pokemonBlue" required><label for="pokemonBlue">Blue</label>
- <input type="radio" name="pokemon" value="Yellow" id="pokemonYellow"><label for="pokemonYellow">Yellow</label>
- </fieldset>
- <fieldset class="large-6 columns">
- <legend>Choose Your Favorite - not required, you can leave this one blank.</legend>
- <input type="radio" name="pockets" value="Red" id="pocketsRed"><label for="pocketsRed">Red</label>
- <input type="radio" name="pockets" value="Blue" id="pocketsBlue"><label for="pocketsBlue">Blue</label>
- <input type="radio" name="pockets" value="Yellow" id="pocketsYellow"><label for="pocketsYellow">Yellow</label>
- </fieldset>
- <fieldset class="large-6 columns">
- <legend>Check these out</legend>
- <input id="checkbox1" type="checkbox"><label for="checkbox1">Checkbox 1</label>
- <input id="checkbox2" type="checkbox" required><label for="checkbox2">Checkbox 2</label>
- <input id="checkbox3" type="checkbox"><label for="checkbox3">Checkbox 3</label>
- </fieldset>
- </div>
- <div class="row">
- <fieldset class="large-6 columns">
- <button class="button" type="submit" value="Submit">Submit</button>
- </fieldset>
- <fieldset class="large-6 columns">
- <button class="button" type="reset" value="Reset">Reset</button>
- </fieldset>
- </div>
-</form></div><hr>
-<p> </p>
-
-<div class="alert callout">
- <p><i class="fi-alert"></i> There are some errors in your form.</p>
-</div>
-
-<label class="is-invalid-label">
- Required Thing
- <input type="text" class="is-invalid-input">
- <span class="form-error is-visible">
- Yo, you had better fill this out.
- </span>
-</label>
-
-<label class="is-invalid-label">
- Required Thing
- <textarea type="text" class="is-invalid-input"></textarea>
-</label>
-
-<h2 id="initial-state" class="docs-heading" data-magellan-target="initial-state">Initial State<a class="docs-heading-icon" href="#initial-state"></a></h2><div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">data-abide</span>></span>
- <span class="hljs-comment"><!-- Add "display: none" right away --></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">data-abide-error</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"alert callout"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"display: none;"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"fi-alert"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> There are some errors in your form.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">label</span>></span>
- Name
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">required</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-error"</span>></span>This field is required.<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">label</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">form</span>></span></code></pre></div><h2 id="error-state" class="docs-heading" data-magellan-target="error-state">Error State<a class="docs-heading-icon" href="#error-state"></a></h2><div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">data-abide</span>></span>
- <span class="hljs-comment"><!-- Add role="alert" --></span>
- <span class="hljs-comment"><!-- Add "display: block" --></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">data-abide-error</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"alert"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"alert callout"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"display: block;"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"fi-alert"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> There are some errors in your form.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-comment"><!-- Add "is-invalid-label" --></span>
- <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"is-invalid-label"</span>></span>
- Name
- <span class="hljs-comment"><!-- Add "is-invalid-input" --></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"is-invalid-input"</span> <span class="hljs-attr">required</span> <span class="hljs-attr">aria-invalid</span> <span class="hljs-attr">aria-describedby</span>=<span class="hljs-string">"uuid"</span>></span>
- <span class="hljs-comment"><!-- Add "is-visible" --></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-error is-visible"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"uuid"</span>></span>This field is required.<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">label</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">form</span>></span></code></pre></div><h2 id="event-listener" class="docs-heading" data-magellan-target="event-listener">Event Listener<a class="docs-heading-icon" href="#event-listener"></a></h2><p>Setup event listener after foundation is initialized (especially for formvalid/forminvalid). Easier to chain via document selector.</p>
-<ul>
-<li>valid.zf.abide and invalid.zf.abide are field level events, triggered in validateInput function <ul>
-<li>ev.target is the DOM field element, </li>
-<li>elem is jQuery selector for field element</li>
-</ul>
-</li>
-<li>formvalid.zf.abide and forminvalid.zf.abide are form events, triggered in validateForm function<ul>
-<li>ev.target is the DOM form element, </li>
-<li>frm is jQuery selector for form element</li>
-</ul>
-</li>
-</ul>
-<div class="docs-code" data-docs-code><pre><code class="javascript">$(<span class="hljs-built_in">document</span>)
- <span class="hljs-comment">// field element is invalid</span>
- .on(<span class="hljs-string">"invalid.zf.abide"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">ev,elem</span>) </span>{
- <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"Field id "</span>+ev.target.id+<span class="hljs-string">" is invalid"</span>);
- })
- <span class="hljs-comment">// field element is valid</span>
- .on(<span class="hljs-string">"valid.zf.abide"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">ev,elem</span>) </span>{
- <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"Field name "</span>+elem.attr(<span class="hljs-string">'name'</span>)+<span class="hljs-string">" is valid"</span>);
- })
- <span class="hljs-comment">// form validation failed</span>
- .on(<span class="hljs-string">"forminvalid.zf.abide"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">ev,frm</span>) </span>{
- <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"Form id "</span>+ev.target.id+<span class="hljs-string">" is invalid"</span>);
- })
- <span class="hljs-comment">// form validation passed, form will submit if submit event not returned false</span>
- .on(<span class="hljs-string">"formvalid.zf.abide"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">ev,frm</span>) </span>{
- <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"Form id "</span>+frm.attr(<span class="hljs-string">'id'</span>)+<span class="hljs-string">" is valid"</span>);
- <span class="hljs-comment">// ajax post form </span>
- })
- <span class="hljs-comment">// to prevent form from submitting upon successful validation</span>
- .on(<span class="hljs-string">"submit"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">ev</span>) </span>{
- ev.preventDefault();
- <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"Submit for form id "</span>+ev.target.id+<span class="hljs-string">" intercepted"</span>);
- });
-<span class="hljs-comment">// You can bind field or form event selectively</span>
-$(<span class="hljs-string">"#foo"</span>).on(<span class="hljs-string">"invalid.zf.abide"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">ev,el</span>) </span>{
- alert(<span class="hljs-string">"Input field foo is invalid"</span>);
-});
-$(<span class="hljs-string">"#bar"</span>).on(<span class="hljs-string">"formvalid.zf.abide"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">ev,frm</span>) </span>{
- alert(<span class="hljs-string">"Form is valid, finally!"</span>);
- <span class="hljs-comment">// do something perhaps</span>
-});</code></pre></div><h2 id="adding-custom-pattern-and-validator" class="docs-heading" data-magellan-target="adding-custom-pattern-and-validator">Adding Custom Pattern and Validator<a class="docs-heading-icon" href="#adding-custom-pattern-and-validator"></a></h2><ul>
-<li>Override builtin patterns and validators before foundation is initialized</li>
-<li>Add new patterns and validators before or after foundation is initialized</li>
-</ul>
-<div class="docs-code" data-docs-code><pre><code class="javascript">$(<span class="hljs-built_in">document</span>).foundation();
-Foundation.Abide.defaults.patterns[<span class="hljs-string">'dashes_only'</span>] = <span class="hljs-regexp">/^[0-9-]*$/</span>;
-Foundation.Abide.defaults.validators[<span class="hljs-string">'greater_than'</span>] =
-<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">$el,required,parent</span>) </span>{
- <span class="hljs-comment">// parameter 1 is jQuery selector</span>
- <span class="hljs-keyword">if</span> (!required) <span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;
- <span class="hljs-keyword">var</span> <span class="hljs-keyword">from</span> = $(<span class="hljs-string">'#'</span>+$el.attr(<span class="hljs-string">'data-greater-than'</span>)).val(),
- to = $el.val();
- <span class="hljs-keyword">return</span> (<span class="hljs-built_in">parseInt</span>(to) > <span class="hljs-built_in">parseInt</span>(<span class="hljs-keyword">from</span>));
-};</code></pre></div><div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"phone"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">pattern</span>=<span class="hljs-string">"dashes_only"</span> <span class="hljs-attr">required</span> ></span>
-<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"min"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"number"</span> <span class="hljs-attr">required</span> ></span>
-<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"max"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"number"</span> <span class="hljs-attr">data-validator</span>=<span class="hljs-string">"greater_than"</span> <span class="hljs-attr">data-greater-than</span>=<span class="hljs-string">"min"</span> <span class="hljs-attr">required</span>></span></code></pre></div>
-
-<hr>
-<section>
- <h2 id="sass-reference" class="docs-heading" data-magellan-target="sass-reference">Sass Reference<a class="docs-heading-icon" href="#sass-reference"></a></h2>
-
- <section>
- <h3 id="sass-variables" class="docs-heading">Variables<a class="docs-heading-icon" href="#sass-variables"></a></h3>
-
- <p>The default styles of this component can be customized using these Sass variables in your project's <a href="sass.html#the-settings-file">settings file</a>.</p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td class="name"><code>$abide-inputs</code></td>
- <td>Boolean</td>
- <td class="boolean"><code>true</code></td>
- <td><p>Sets if error styles should be added to inputs.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$abide-labels</code></td>
- <td>Boolean</td>
- <td class="boolean"><code>true</code></td>
- <td><p>Sets if error styles should be added to labels.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$input-background-invalid</code></td>
- <td>Color</td>
- <td class="color"><code>map-get($foundation-palette, alert)</code></td>
- <td><p>Background color to use for invalid text inputs.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$form-label-color-invalid</code></td>
- <td>Color</td>
- <td class="color"><code>map-get($foundation-palette, alert)</code></td>
- <td><p>Color to use for labels of invalid inputs.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$input-error-color</code></td>
- <td>Color</td>
- <td class="color"><code>map-get($foundation-palette, alert)</code></td>
- <td><p>Default font color for form error text.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$input-error-font-size</code></td>
- <td>Number</td>
- <td class="number"><code>rem-calc(12)</code></td>
- <td><p>Default font size for form error text.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$input-error-font-weight</code></td>
- <td>Keyword</td>
- <td class="keyword"><code>$global-weight-bold</code></td>
- <td><p>Default font weight for form error text.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="sass-mixins" class="docs-heading">Mixins<a class="docs-heading-icon" href="#sass-mixins"></a></h3>
-
- <p>We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.</p>
-
-
- <section >
- <h4 id="form-input-error" class="docs-heading">form-input-error<a class="docs-heading-icon" href="#form-input-error"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> form-input-error(<span class="hljs-variable">$background</span>, <span class="hljs-variable">$background-alpha</span>);</code></pre>
- </div>
-
- <p>Styles the background and border of an input field to have an error state.</p>
-
-
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$background</code></td>
- <td>Color</td>
- <td><code>$alert-color</code></td>
- <td><p>Color to use for the background and border.</p>
-</td>
- </tr>
- <tr>
- <td><code>$background-alpha</code></td>
- <td>Number</td>
- <td><code>0.1</code></td>
- <td><p>Transparency level of the background color.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="form-error" class="docs-heading">form-error<a class="docs-heading-icon" href="#form-error"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> form-error;</code></pre>
- </div>
-
- <p>Adds error styles to a form element, using the values in the settings file.</p>
-
-
-
-
-
- </section>
-
-
-
-
-
- </section>
-
-
-</section>
-
-<hr>
-<section>
- <h2 id="javascript-reference" class="docs-heading" data-magellan-target="javascript-reference">JavaScript Reference<a class="docs-heading-icon" href="#javascript-reference"></a></h2>
-
-
- <section>
- <h3 id="js-module" class="docs-heading">Initializing<a class="docs-heading-icon" href="#js-module"></a></h3>
-
- <p>The file <code>foundation.abide.js</code> must be included in your JavaScript to use this plugin, along with <code>foundation.core.js</code>.</p>
-
-
-
- </section>
-
-
- <section>
- <h3 id="js-class" class="docs-heading">Foundation.Abide<a class="docs-heading-icon" href="#js-class"></a></h3>
-
- <p>Creates a new instance of Abide.</p>
-
-
- <div class="docs-code"><pre><code><span class="hljs-keyword">var</span> elem = <span class="hljs-keyword">new</span> Foundation.Abide(element, options);</code></pre></div>
-
- <p><strong>Fires these events:</strong>
- Abide#event:init
- </p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>element</code></td>
- <td>Object</td>
- <td>jQuery object to add the trigger to.</td>
- </tr>
- <tr>
- <td><code>options</code></td>
- <td>Object</td>
- <td>Overrides to the default plugin settings.</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="js-options" class="docs-heading">Plugin Options<a class="docs-heading-icon" href="#js-options"></a></h3>
-
- <p>Use these options to customize an instance of Abide. Plugin options can be set as individual data attributes, one combined <code>data-options</code> attribute, or as an object passed to the plugin's constructor. <a href="javascript.html#initializing">Learn more about how JavaScript plugins are initialized.</a></p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Default</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>data-validate-on</code></td>
- <td><code>fieldChange</code></td>
- <td>The default event to validate inputs. Checkboxes and radios validate immediately.
-Remove or change this value for manual validation.</td>
- </tr>
- <tr>
- <td><code>data-label-error-class</code></td>
- <td><code>is-invalid-label</code></td>
- <td>Class to be applied to input labels on failed validation.</td>
- </tr>
- <tr>
- <td><code>data-input-error-class</code></td>
- <td><code>is-invalid-input</code></td>
- <td>Class to be applied to inputs on failed validation.</td>
- </tr>
- <tr>
- <td><code>data-form-error-selector</code></td>
- <td><code>.form-error</code></td>
- <td>Class selector to use to target Form Errors for show/hide.</td>
- </tr>
- <tr>
- <td><code>data-form-error-class</code></td>
- <td><code>is-visible</code></td>
- <td>Class added to Form Errors on failed validation.</td>
- </tr>
- <tr>
- <td><code>data-live-validate</code></td>
- <td><code>false</code></td>
- <td>Set to true to validate text inputs on any value change.</td>
- </tr>
- <tr>
- <td><code>data-validators</code></td>
- <td><code></code></td>
- <td>Optional validation functions to be used. `equalTo` being the only default included function.
-Functions should return only a boolean if the input is valid or not. Functions are given the following arguments:
-el : The jQuery element to validate.
-required : Boolean value of the required attribute be present or not.
-parent : The direct parent of the input.</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="js-events" class="docs-heading">Events<a class="docs-heading-icon" href="#js-events"></a></h3>
-
- <p>These events will fire from any element with a Abide plugin attached.</p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>invalid.zf.abide</code></td>
- <td>Fires when the input is done checking for validation. Event trigger is either `valid.zf.abide` or `invalid.zf.abide`
-Trigger includes the DOM element of the input.</td>
- </tr>
- <tr>
- <td><code>forminvalid.zf.abide</code></td>
- <td>Fires when the form is finished validating. Event trigger is either `formvalid.zf.abide` or `forminvalid.zf.abide`.
-Trigger includes the element of the form.</td>
- </tr>
- <tr>
- <td><code>formreset.zf.abide</code></td>
- <td>Fires when the form has been reset.</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="js-functions" class="docs-heading">Methods<a class="docs-heading-icon" href="#js-functions"></a></h3>
-
- <section>
- <h4 id="requiredcheck" class="docs-heading">requiredCheck<a class="docs-heading-icon" href="#requiredcheck"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'requiredCheck'</span>, element);</code></pre>
- </div>
-
- <p>Checks whether or not a form element has the required attribute and if it's checked or not</p>
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>element</code></td>
- <td>Object</td>
- <td>jQuery object to check for required attribute</td>
- </tr>
- </table>
-
- <hr>
- </section>
- <section>
- <h4 id="findformerror" class="docs-heading">findFormError<a class="docs-heading-icon" href="#findformerror"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'findFormError'</span>, $el);</code></pre>
- </div>
-
- <p>Based on $el, get the first element with selector in this order:</p>
-<ol>
-<li>The element's direct sibling('s).</li>
-<li>The element's parent's children.</li>
-</ol>
-<p>This allows for multiple form errors per input, though if none are found, no form errors will be shown.</p>
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$el</code></td>
- <td>Object</td>
- <td>jQuery object to use as reference to find the form error selector.</td>
- </tr>
- </table>
-
- <hr>
- </section>
- <section>
- <h4 id="findlabel" class="docs-heading">findLabel<a class="docs-heading-icon" href="#findlabel"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'findLabel'</span>, $el);</code></pre>
- </div>
-
- <p>Get the first element in this order:</p>
-<ol>
-<li>The <label> with the attribute <code>[for="someInputId"]</code></li>
-<li>The <code>.closest()</code> <label></li>
-</ol>
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$el</code></td>
- <td>Object</td>
- <td>jQuery object to check for required attribute</td>
- </tr>
- </table>
-
- <hr>
- </section>
- <section>
- <h4 id="findradiolabels" class="docs-heading">findRadioLabels<a class="docs-heading-icon" href="#findradiolabels"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'findRadioLabels'</span>, $el);</code></pre>
- </div>
-
- <p>Get the set of labels associated with a set of radio els in this order</p>
-<ol>
-<li>The <label> with the attribute <code>[for="someInputId"]</code></li>
-<li>The <code>.closest()</code> <label></li>
-</ol>
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$el</code></td>
- <td>Object</td>
- <td>jQuery object to check for required attribute</td>
- </tr>
- </table>
-
- <hr>
- </section>
- <section>
- <h4 id="adderrorclasses" class="docs-heading">addErrorClasses<a class="docs-heading-icon" href="#adderrorclasses"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'addErrorClasses'</span>, $el);</code></pre>
- </div>
-
- <p>Adds the CSS error class as specified by the Abide settings to the label, input, and the form</p>
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$el</code></td>
- <td>Object</td>
- <td>jQuery object to add the class to</td>
- </tr>
- </table>
-
- <hr>
- </section>
- <section>
- <h4 id="removeradioerrorclasses" class="docs-heading">removeRadioErrorClasses<a class="docs-heading-icon" href="#removeradioerrorclasses"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'removeRadioErrorClasses'</span>, groupName);</code></pre>
- </div>
-
- <p>Remove CSS error classes etc from an entire radio button group</p>
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>groupName</code></td>
- <td>String</td>
- <td>A string that specifies the name of a radio button group</td>
- </tr>
- </table>
-
- <hr>
- </section>
- <section>
- <h4 id="removeerrorclasses" class="docs-heading">removeErrorClasses<a class="docs-heading-icon" href="#removeerrorclasses"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'removeErrorClasses'</span>, $el);</code></pre>
- </div>
-
- <p>Removes CSS error class as specified by the Abide settings from the label, input, and the form</p>
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$el</code></td>
- <td>Object</td>
- <td>jQuery object to remove the class from</td>
- </tr>
- </table>
-
- <hr>
- </section>
- <section>
- <h4 id="validateinput" class="docs-heading">validateInput<a class="docs-heading-icon" href="#validateinput"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'validateInput'</span>, element);</code></pre>
- </div>
-
- <p>Goes through a form to find inputs and proceeds to validate them in ways specific to their type</p>
-
-
- <p><strong>Fires these events:</strong>
- Abide#event:invalid
- Abide#event:valid
- </p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>element</code></td>
- <td>Object</td>
- <td>jQuery object to validate, should be an HTML input</td>
- </tr>
- </table>
-
- <hr>
- </section>
- <section>
- <h4 id="validateform" class="docs-heading">validateForm<a class="docs-heading-icon" href="#validateform"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'validateForm'</span>);</code></pre>
- </div>
-
- <p>Goes through a form and if there are any invalid inputs, it will display the form error element</p>
-
-
- <p><strong>Fires these events:</strong>
- Abide#event:formvalid
- Abide#event:forminvalid
- </p>
-
-
- <hr>
- </section>
- <section>
- <h4 id="validatetext" class="docs-heading">validateText<a class="docs-heading-icon" href="#validatetext"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'validateText'</span>, $el, pattern);</code></pre>
- </div>
-
- <p>Determines whether or a not a text input is valid based on the pattern specified in the attribute. If no matching pattern is found, returns true.</p>
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$el</code></td>
- <td>Object</td>
- <td>jQuery object to validate, should be a text input HTML element</td>
- </tr>
- <tr>
- <td><code>pattern</code></td>
- <td>String</td>
- <td>string value of one of the RegEx patterns in Abide.options.patterns</td>
- </tr>
- </table>
-
- <hr>
- </section>
- <section>
- <h4 id="validateradio" class="docs-heading">validateRadio<a class="docs-heading-icon" href="#validateradio"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'validateRadio'</span>, groupName);</code></pre>
- </div>
-
- <p>Determines whether or a not a radio input is valid based on whether or not it is required and selected. Although the function targets a single <code><input></code>, it validates by checking the <code>required</code> and <code>checked</code> properties of all radio buttons in its group.</p>
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>groupName</code></td>
- <td>String</td>
- <td>A string that specifies the name of a radio button group</td>
- </tr>
- </table>
-
- <hr>
- </section>
- <section>
- <h4 id="matchvalidation" class="docs-heading">matchValidation<a class="docs-heading-icon" href="#matchvalidation"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'matchValidation'</span>, $el, validators, required);</code></pre>
- </div>
-
- <p>Determines if a selected input passes a custom validation function. Multiple validations can be used, if passed to the element with <code>data-validator="foo bar baz"</code> in a space separated listed.</p>
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$el</code></td>
- <td>Object</td>
- <td>jQuery input element.</td>
- </tr>
- <tr>
- <td><code>validators</code></td>
- <td>String</td>
- <td>a string of function names matching functions in the Abide.options.validators object.</td>
- </tr>
- <tr>
- <td><code>required</code></td>
- <td>Boolean</td>
- <td>self explanatory?</td>
- </tr>
- </table>
-
- <hr>
- </section>
- <section>
- <h4 id="resetform" class="docs-heading">resetForm<a class="docs-heading-icon" href="#resetform"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'resetForm'</span>);</code></pre>
- </div>
-
- <p>Resets form inputs and styles</p>
-
-
- <p><strong>Fires these events:</strong>
- Abide#event:formreset
- </p>
-
-
- <hr>
- </section>
- <section>
- <h4 id="destroy" class="docs-heading">destroy<a class="docs-heading-icon" href="#destroy"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'destroy'</span>);</code></pre>
- </div>
-
- <p>Destroys an instance of Abide.
-Removes error styles and classes from elements, without resetting their values.</p>
-
-
-
-
-
- </section>
- </section>
-</section>
-
-<!-- <hr> -->
-<!-- <section class="docs-building-blocks">
- <h2 id="building-blocks" class="docs-heading" data-magellan-target="building-blocks">Building Blocks<a class="docs-heading-icon" href="#building-blocks"></a></h2>
-
- <p><a href="http://zurb.com/building-blocks">Building Blocks</a> is a ZURB-curated resource with useful code snippets that use Foundation components. Here are a few for this component:</p>
-
- <div class="warning callout">
- <p>These are placeholder items. If you have ideas for building blocks for this component, <a href="https://github.com/zurb/foundation-sites-6/issues/118">we're taking ideas on GitHub</a>.</p>
- </div>
-
- <div data-building-blocks></div>
-</section> -->
-
-</div>
-
-<div class="large-3 columns" data-sticky-container>
- <nav class="columns docs-toc-wrap" data-sticky data-anchor="docs" data-sticky-on="large">
- <div class="docs-toc hide" id="docsTOC">
- <ul class="vertical menu" data-docs-toc>
- <li class="docs-nav-title">On this page:</li>
- </ul>
- </div>
- <div class="foundation-toc-ad-unit" id="TOCAdUnit">
- </div>
- </nav>
-</div>
-
-</div>
-
-</article>
-
- </div>
- <div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
- <ul class="vertical menu docs-nav" id="docs-menu">
- <p class="docs-nav-version">
- <span data-docs-version></span>
- <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">(Changelog)</a>
- </p>
-
- <li class="docs-nav-title">Getting Started</li>
- <li><a href="installation.html">Installation</a></li>
- <li><a href="starter-projects.html">Starter Projects</a></li>
- <li><a href="compatibility.html">Compatibility</a></li>
- <li><a href="accessibility.html">Accessibility</a></li>
- <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
-
- <li class="docs-nav-title">Setup</li>
- <li><a href="global.html">Global Styles</a></li>
- <li><a href="rtl.html">Right-to-Left Support</a></li>
- <li><a href="flexbox.html">Flexbox</a></li>
- <li><a href="sass.html">Sass</a></li>
- <li><a href="javascript.html">JavaScript</a></li>
- <li><a href="javascript-utilities.html">JavaScript Utilities</a></li>
- <li><a href="media-queries.html">Media Queries</a></li>
-
- <li class="docs-nav-title">General</li>
- <li><a href="grid.html">Grid</a></li>
- <li><a href="flex-grid.html">Flex Grid</a></li>
- <li><a href="forms.html">Forms</a></li>
- <li><a href="visibility.html">Visibility Classes</a></li>
- <li><a href="float-classes.html">Float Classes</a></li>
-
- <li class="docs-nav-title">Typography</li>
- <li><a href="typography-base.html">Base Styles</a></li>
- <li><a href="typography-helpers.html">Helper Classes</a></li>
-
- <li class="docs-nav-title">Controls</li>
- <li><a href="button.html">Button</a></li>
- <li><a href="button-group.html">Button Group</a></li>
- <li><a href="close-button.html">Close Button</a></li>
- <li><a href="slider.html">Slider <span class="label">JS</span></a></li>
- <li><a href="switch.html">Switch</a></li>
-
- <li class="docs-nav-title">Navigation</li>
- <li><a href="navigation.html">Overview</a></li>
- <li><a href="menu.html">Menu</a></li>
- <li><a href="dropdown-menu.html">Dropdown Menu <span class="label">JS</span></a></li>
- <li><a href="drilldown-menu.html">Drilldown Menu <span class="label">JS</span></a></li>
- <li><a href="accordion-menu.html">Accordion Menu <span class="label">JS</span></a></li>
- <li><a href="top-bar.html">Top Bar</a></li>
- <li><a href="responsive-navigation.html">Responsive Navigation</a></li>
- <li><a href="magellan.html">Magellan <span class="label">JS</span></a></li>
- <li><a href="pagination.html">Pagination</a></li>
- <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
-
- <li class="docs-nav-title">Containers</li>
- <li><a href="accordion.html">Accordion <span class="label">JS</span></a></li>
- <li><a href="callout.html">Callout</a></li>
- <li><a href="dropdown.html">Dropdown <span class="label">JS</span></a></li>
- <li><a href="media-object.html">Media Object</a></li>
- <li><a href="off-canvas.html">Off-canvas <span class="label">JS</span></a></li>
- <li><a href="reveal.html">Reveal <span class="label">JS</span> <small>Modal</small></a></li>
- <li><a href="table.html">Table</a></li>
- <li><a href="tabs.html">Tabs <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Media</li>
- <li><a href="badge.html">Badge</a></li>
- <li><a href="flex-video.html">Flex Video</a></li>
- <li><a href="label.html">Label</a></li>
- <li><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
- <li><a href="progress-bar.html">Progress Bar</a></li>
- <li><a href="thumbnail.html">Thumbnail</a></li>
- <li><a href="tooltip.html">Tooltip <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Plugins</li>
- <li class="current"><a href="abide.html">Abide <small>Form Validation</small></a></li>
- <li><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
- <li><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
- <li><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
- <li><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
-
- <li class="docs-nav-title">Sass</li>
- <li><a href="sass-functions.html">Functions</a></li>
- <li><a href="sass-mixins.html">Mixins</a></li>
-
- <li class="docs-nav-title">Libraries</li>
- <li><a href="motion-ui.html">Motion UI</a></li>
- <li><a href="panini.html">Panini</a></li>
- <li><a href="style-sherpa.html">Style Sherpa</a></li>
-
- <li class="docs-nav-title">Older Versions</li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
- <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
- <li><a href="https://get.foundation/sites/docs/v/3.2.5/">Foundation 3</a></li>
- <li><a href="https://get.foundation/sites/docs/v/2.2.1/">Foundation 2</a></li>
- </ul>
-
- </div>
- </div>
-
- <!-- Small Business(Docs) -->
- <section id="studiosCallout">
- <div class="row">
- <div class="medium-4 large-4 columns">
- <img src="https://get.foundation/assets/img/smallbiz-footer.svg" alt="">
- </div>
- <div class="medium-8 large-8 columns banner-info">
- <div class="row column property-label">ZURB Foundation</div>
- <h3 class="light">Yeah, we can help with that.</h3>
- <p class="lead"> We’ll collaborate with your team throughout the entire project life cycle. We’ll take your concept and move it through ideation, hi-fi wireframes, visual design and code, all while informing you on the whys and hows along the way.</p>
- <div class="course-buttons">
- <a href="https://get.foundation/get-involved/premium-support.html" class="studios button" data-zcom-event="studios_foundation_click" id="foundationSmallV1">Show Me How →</a>
- </div>
- </div>
- </div>
- </section>
-
- <div class="docs-newsletter">
- <div class="row">
- <div class="medium-7 large-8 columns">
- <a target="_blank" href="https://get.foundation/learn/responsive-reading.html">
- <h5 class="">Download ZURB’s 21 Responsive Trends That Will Shape 2017</h5>
- <p style="margin-bottom: 0;">Stay informed with amazing responsive trends each month from ZURB.</p>
- </a>
- </div>
- <div class="medium-5 large-4 footer-signup-form columns">
- <a style="margin-bottom: 0;" target="_blank" href="https://get.foundation/learn/responsive-reading.html" class="button expanded">Download the PDF</a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-top bg-fblue">
- <div class="row property">
- <div class="medium-4 columns">
- <div class="property-info">
- <h3>Foundation for Sites</h3>
- <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
- </p>
- </div>
- </div>
-
- <div class="medium-8 columns">
- <div class="row collapse">
- <div class="medium-4 columns">
- <div class="learn-links">
- <h4 class="hide-for-small">Want more?</h4>
- <ul>
- <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
- <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
- <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
- <li><a href="http://zurb.com/university/courses">Training</a></li>
- <li><a href="http://zurb.com/library">Design Resources</a></li>
- </ul>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="support-links">
- <h4 class="hide-for-small">Talk to us</h4>
- <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
- <p><a href="https://get.foundation/get-involved/contribute.html">Get involved in<br>our amazing community.</a></p>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="connect-links">
- <h4 class="hide-for-small">Stay Updated</h4>
- <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
- <a href="http://zurb.com/news" class="small button">Stay Connected</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="row global">
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/studios" class="footer-link-block services">
- <span class="title">Studios</span>
- <span>Helping more than 200 startups succeed since 1998.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="https://get.foundation/" class="footer-link-block foundation">
- <span class="title">Foundation</span>
- <span>The most advanced front-end framework in the world.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/notable" class="footer-link-block apps">
- <span class="title">Notable Design Apps</span>
- <span>Prototype, iterate and collect feedback on your products.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/university" class="footer-link-block expo">
- <span class="title">University</span>
- <span>Ideas, thoughts and design resources shared with you.</span>
- </a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-bottom">
- <div class="row">
- <div class="medium-4 medium-push-8 columns">
- <ul class="home-social">
- <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
- <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
- <li><a href="http://zurb.com/contact" class="mail"></a></li>
- </ul>
- </div>
- <div class="medium-8 medium-pull-4 columns">
- <a href="http://www.zurb.com" class="zurb-logo regular"></a>
- <ul class="zurb-links">
- <li><a href="http://zurb.com/about">About</a></li>
- <li><a href="http://zurb.com/blog">Blog</a></li>
- <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
- <li><a href="http://zurb.com/contact">Contact</a></li>
- <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
- </ul>
- <p class="copyright">© 1998‐2016 ZURB, Inc. All rights reserved.</p>
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- <script>
- var _gaq = _gaq || [];
- _gaq.push(
- ['_setAccount', 'UA-2195009-2'],
- ['_trackPageview'],
- ['b._setAccount', 'UA-2195009-27'],
- ['b._trackPageview']
- );
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
-
- <script src="assets/js/vendor.js?hash=629853e5ebffa079380ac394731d8a85"></script>
- <script src="assets/js/foundation.js?hash=9d254b43a1549db8837ba15f86443c04"></script>
- <script src="assets/js/docs.js?hash=b98ffa3398494e36e099da7d4e73b063"></script>
- <script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
-</body>
-</html>
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="Foundation for Sites is a fully-accessible framework. Here are some general guidelines to keep in mind as you make your pages accessible.">
- <link rel="icon" href="assets/img/icons/foundation-favicon.ico" type="image/x-icon">
- <title>Foundation for Sites 6 Docs | Accessibility</title>
- <link href="assets/css/docs.css?hash=20985794eb2d717b4b906f93dcbe75a7" rel="stylesheet" />
- <link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=3af2703edb2eeaddce3298baae82a413" rel="stylesheet">
- <!-- <link rel="stylesheet" href="./node_modules/motion-ui/dist/motion-ui.css" /> -->
-</head>
-<body>
-
- <div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
-
- <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="mobile-ofc vertical menu">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
-
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/support.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/sort/unanswered">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
- </ul>
- </li>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <title>Accessibility | Foundation Docs</title>
+ <link rel="icon" href="assets/img/icons/oundation-favicon.ico" type="image/x-icon">
+ <!-- For third-generation iPad with high-resolution Retina display: -->
+ <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/img/icons/apple-touch-icon-144x144-precomposed.png">
+ <!-- For iPhone with high-resolution Retina display: -->
+ <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/img/icons/apple-touch-icon-114x114-precomposed.png">
+ <!-- For first- and second-generation iPad: -->
+ <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/img/icons/apple-touch-icon-72x72-precomposed.png">
+ <!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
+ <link rel="apple-touch-icon-precomposed" href="assets/img/icons/apple-touch-icon-precomposed.png">
+
+ <meta name="description" content="Documentation and reference library for ZURB Foundation. JavaScript, CSS, components, grid and more.">
+ <meta name="author" content="ZURB, inc. ZURB network also includes zurb.com">
+ <meta name="copyright" content="ZURB, inc. Copyright (c) 2014">
+
+ <link href="assets/css/docs.css" rel="stylesheet" />
+ <link href="http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" rel="stylesheet" />
+ <script src="assets/js/modernizr.js"></script>
+ </head>
+ <body class="antialiased hide-extras">
+
+ <!-- Info Banner For Announcements or Links -->
+ <!-- <a href="https://get.foundation" id="notice">
+ <div class="info">
+ <h5>Foundation 6 is here!</h5>
+ </div>
+ </a> -->
+
+
+ <div class="marketing off-canvas-wrap" data-offcanvas>
+ <div class="inner-wrap">
+
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
- </div>
-
- <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="vertical menu">
- <li><a href="#">Foundation</a></li>
- <li><a href="#">Dot</a></li>
- <li><a href="#">ZURB</a></li>
- <li><a href="#">Com</a></li>
- <li><a href="#">Slash</a></li>
- <li><a href="#">Sites</a></li>
- </ul>
- </div>
-
- <div class="off-canvas-content" data-off-canvas-content>
- <!-- Info Banner For Announcements or Links -->
- <!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
- <div class="info">
- <h5>Foundation 6 is here!</h5>
- </div>
- </a> -->
- <nav class="marketing-topbar show-for-medium">
-
- <ul class="menu">
- <li class="topbar-title"><a href="https://get.foundation/index.html"><img src="assets/img/logos/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
+<!-- <nav class="tab-bar show-for-small">
+ <a class="off-canvas-left-toggle menu-icon ">
+ <span></span>
+ </a>
+</nav> -->
+
+
+<nav class="top-bar docs-bar hide-for-small" data-topbar>
+ <ul class="title-area">
+ <li class="name">
+ <h1>
+ <a href="https://get.foundation/">
+ <span>Foundation</span>
+ </a>
+ </h1>
+ </li>
+ </ul>
+
+ <section class="top-bar-section">
+ <ul class="right">
+ <li class="divider"></li>
+ <li class="has-dropdown">
+ <a target="_blank" href="https://zurb.com/responsive">Showcase <i class="fa fa-external-link"></i></a>
+ <ul class="dropdown">
+ <li><a target="_blank" href="https://zurb.com/responsive">Showcase <i class="fa fa-external-link"></i></a></li>
+ <li><a href="https://get.foundation/showcase/brands.html">Brands</a></li>
+ <li><a href="https://get.foundation/showcase/case-studies.html">Case Studies</a></li>
+ <li><a href="https://get.foundation/showcase/blog.html">Blog</a></li>
+ <li><a href="https://get.foundation/showcase/buzz.html">Buzz</a></li>
+ <li><a href="https://get.foundation/showcase/about.html">About Foundation</a></li>
</ul>
-
- <ul class="dropdown menu" data-dropdown-menu data-click-open="false">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/" target="_blank">F5 Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="https://get.foundation/emails/docs/" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
+ </li>
+ <li class="divider"></li>
+ <li class="has-dropdown">
+ <a href="https://get.foundation/develop/getting-started.html" class="">Develop</a>
+ <ul class="dropdown">
+ <li class="title">Frameworks</li>
+ <li><a class="" href="https://get.foundation/sites.html">Foundation for Sites</a></li>
+ <li><a class="" href="https://get.foundation/apps.html">Foundation for Apps</a></li>
+ <li><a class="spaced-list-item" href="https://get.foundation/emails.html">Foundation for Emails</a></li>
+ <li class="spaced-divider"><hr></li>
+ <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
+ <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
+ <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
+ <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
</ul>
-
- </nav>
-
- <div class="title-bar hide-for-medium">
- <div class="title-bar-left">
- <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
- <span class="title-bar-title">Foundation</span>
- </div>
- </div>
-
+ </li>
+ <li class="divider"></li>
+ <li class="has-dropdown">
+ <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
+ <ul class="dropdown">
+ <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
+ <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
+ <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
+ <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
+ <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
+ </ul>
+ </li>
+ <li class="divider"></li>
+ <li class="has-dropdown">
+ <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
+ <ul class="dropdown">
+ <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
+ <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
+ <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
+ <li><a href="https://get.foundation/learn/events.html">Events</a></li>
+ <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
+ <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
+ <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
+ </ul>
+ </li>
+ <li class="divider"></li>
+ <li class="has-dropdown">
+ <a href="https://get.foundation/sites/docs/v/5.5.3/">Docs</a>
+ <ul class="dropdown">
+ <li><a href="https://get.foundation/sites/docs/v/5.5.3/">F5 Sites Docs</a></li>
+ <li><a href="https://get.foundation/sites/docs">F6 Sites Docs</a></li>
+ <li><a href="https://get.foundation/emails/docs">Emails Docs</a></li>
+ <li><a href="https://get.foundation/apps/docs">Apps Docs</a></li>
+ </ul>
+ </li>
+ <li class="divider"></li>
+ <li class="has-form">
+ <a href="https://get.foundation/sites/getting-started.html">Getting Started</a>
+ </ul>
+ </section>
+</nav>
+ <nav class="tab-bar show-for-small">
+ <a class="left-off-canvas-toggle menu-icon">
+ <span>Foundation</span>
+ </a>
+</nav>
+
+<aside class="marketing-left-off-canvas-menu">
- <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
+ <ul class="off-canvas-list">
+ <li><label class="first">Foundation</label></li>
+ <li><a href="https://get.foundation">Home</a></li>
+ </ul>
- <div class="expanded row">
- <div class="medium-9 large-10 medium-push-3 large-push-2 columns">
+ <hr>
-<article class="docs-component" id="docs-accessibility">
+ <ul class="off-canvas-list">
+ <li><label>Setup</label></li>
-<a href="#docs-menu" class="small secondary expanded button hide-for-medium">Jump to Nav</a>
+ <li><a href="index.html" data-search="">Getting Started</a></li>
+ <li><a href="css.html" data-search="Styles">CSS</a></li>
+ <li><a href="sass.html" data-search="Sass">Sass</a></li>
+ <li><a href="sass-files.html" data-search="Sass,Sass - What You Get, How to Use Sass">Sass Files</a></li>
+ <li><a href="using-sass.html" data-search="Sass,Sass - What You Get, How to Use Sass">Using Sass</a></li>
+ <li><a href="applications.html" data-search="Rails,Gem">Applications</a></li>
+ <li><a href="javascript.html" data-search="">Javascript</a></li>
+ <li><a href="components/global.html" data-search="Global Styles,Global Mixins,Global Variables,Useful HTML Classes">Global Styles</a></li>
+ <li><a href="components/kitchen_sink.html" data-search="">Kitchen Sink</a></li>
+ <li><a href="upgrading.html" data-search="Migration">Upgrading</a></li>
-<header>
- <h1 class="docs-page-title">Accessibility</h1>
+ <li class="divider"></li>
+ <li><label>Structure</label></li>
+ <li><a href="media-queries.html" data-search="Breakpoints">Media Queries</a></li>
+ <li><a href="components/visibility.html" data-search="">Visibility</a></li>
+ <li><a href="components/grid.html" data-search="">Grid</a></li>
+ <li><a href="components/block_grid.html" data-search="">Block Grid</a></li>
+ <li><a href="components/interchange.html" data-search="Responsive Images">Interchange Responsive Content <span class="label">JS</span></a></li>
+ <li><a href="utility-classes.html" data-search="">Utility Classes</a></li>
+ <li><a href="javascript-utilities.html" data-search="">Javascript Utilities</a></li>
+ <li><a href="components/rtl.html" data-search="RTL">Right-to-Left Support</a></li>
+ <li class="divider"></li>
+ <li><label>Navigation</label></li>
+ <li><a href="components/offcanvas.html" data-search="Off Canvas">Off-canvas <span class="label">JS</span></a></li>
+ <li><a href="components/topbar.html" data-search="Nav Bar,Navigation,Sticky">Top Bar <span class="label">JS</span></a></li>
+ <li><a href="components/icon-bar.html" data-search="">Icon Bar</a></li>
+ <li><a href="components/sidenav.html" data-search="">Side Nav</a></li>
+ <li><a href="components/magellan.html" data-search="Scrollspy">Magellan Sticky Nav <span class="label">JS</span></a></li>
+ <li><a href="components/subnav.html" data-search="">Sub Nav</a></li>
+ <li><a href="components/breadcrumbs.html" data-search="Navigation Path,Cookie Crumb">Breadcrumbs</a></li>
+ <li><a href="components/pagination.html" data-search="">Pagination</a></li>
- <p class="lead docs-page-lead">Foundation for Sites is a fully-accessible framework. Here are some general guidelines to keep in mind as you make your pages accessible.</p>
+ <li class="divider"></li>
+ <li><label>Media</label></li>
+ <li><a href="components/orbit.html" data-search="Carousel,Slider,Slideshow">Orbit Slider <span class="label">JS</span></a></li>
+ <li><a href="components/thumbnails.html" data-search="Images">Thumbnails</a></li>
+ <li><a href="components/clearing.html" data-search="Responsive Lightbox,Lightbox">Clearing Lightbox <span class="label">JS</span></a></li>
+ <li><a href="components/flex_video.html" data-search="Responsive Video">Flex Video</a></li>
- <ul class="menu simple docs-contribute-menu">
- <li><a href="https://github.com/zurb/foundation-sites/edit/master/docs/pages/accessibility.md" target="_blank"><i class="fi-pencil"></i>Edit this Page</a></li>
- <li><a href="https://github.com/zurb/foundation-sites/issues/new?title=%5BAccessibility%5D%20ISSUE%20NAME%20HERE" target="_blank"><i class="fi-social-github"></i>Report a Bug</a></li>
- <li><a href="https://get.foundation/forum" target="_blank"><i class="fi-comment"></i>Get Help</a></li>
- </ul>
-</header>
+ <li class="divider"></li>
+ <li><label>Forms</label></li>
+ <li><a href="components/forms.html" data-search="">Forms</a></li>
+ <li><a href="components/switch.html" data-search="">Switches</a></li>
+ <li><a href="components/range_slider.html" data-search="Range Slider">Sliders <span class="label">JS</span></a></li>
+ <li><a href="components/abide.html" data-search="Form Validation,Field Validation">Abide Validation <span class="label">JS</span></a></li>
-<hr>
+ <li class="divider"></li>
+ <li><label>Buttons</label></li>
+ <li><a href="components/buttons.html" data-search="">Buttons</a></li>
+ <li><a href="components/button_groups.html" data-search="Button Bar">Button Groups</a></li>
+ <li><a href="components/split_buttons.html" data-search="">Split Buttons <span class="label">JS</span></a></li>
+ <li><a href="components/dropdown_buttons.html" data-search="">Dropdown Buttons <span class="label">JS</span></a></li>
-<div class="row">
+ <li class="divider"></li>
+ <li><label>Typography</label></li>
+ <li><a href="components/typography.html" data-search="Typography,Type-setting,Composition">Type</a></li>
+ <li><a href="components/inline_lists.html" data-search="Lists">Inline Lists</a></li>
+ <li><a href="components/labels.html" data-search="Tags">Labels</a></li>
+ <li><a href="components/keystrokes.html" data-search="">Keystrokes</a></li>
-<div class="large-9 columns" id="docs">
+ <li class="divider"></li>
+ <li class="heading"><label>Callouts & Prompts</label></li>
+ <li><a href="components/reveal.html" data-search="Modal">Reveal Modal <span class="label">JS</span></a></li>
+ <li><a href="components/alert_boxes.html" data-search="Error,Success,Warning">Alerts <span class="label">JS</span></a></li>
+ <li><a href="components/panels.html" data-search="Wells">Panels</a></li>
+ <li><a href="components/tooltips.html" data-search="Popover">Tooltips <span class="label">JS</span></a></li>
+ <li><a href="components/joyride.html" data-search="Tooltip Tour,Guider,Tooltip Walk-through">Joyride <span class="label">JS</span></a></li>
-<p>In addition to the accessibility features built into Foundation's components, be sure to follow best practices for making your site more accessible.</p>
-<div class="primary callout">
- <p>Care about accessibility or want to contribute? Submit a Pull Request or get into the <a href="https://github.com/zurb/foundation-sites/labels/accessibility">conversation on GitHub</a>.</p>
+ <li class="divider"></li>
+ <li><label>Content</label></li>
+ <li><a href="components/dropdown.html" data-search="">Dropdowns <span class="label">JS</span></a></li>
+ <li><a href="components/pricing_tables.html" data-search="">Pricing Tables</a></li>
+ <li><a href="components/progress_bars.html" data-search="">Progress Bars</a></li>
+ <li><a href="components/tables.html" data-search="">Tables</a></li>
+ <li><a href="components/accordion.html" data-search="">Accordion <span class="label">JS</span></a></li>
+ <li><a href="components/tabs.html" data-search="">Tabs <span class="label">JS</span></a></li>
+ <li><a href="components/equalizer.html" data-search="">Equalizer <span class="label">JS</span></a></li>
+
+ <li class="divider"></li>
+ <li><label>Support</label></li>
+
+ <li><a href="changelog.html" data-search="">Changelog</a></li>
+ <li><a href="compatibility.html" data-search="">Compatibility</a></li>
+
+ <li class="divider"></li>
+ <li class="heading"><label>Older Docs</label></li>
+ <li><a href="/docs/v/4.3.2/" data-search="">Foundation 4</a></li>
+ <li><a href="/docs/v/3.2.5/" data-search="">Foundation 3</a></li>
+ <li><a href="/docs/v/2.2.1/" data-search="">Foundation 2</a></li>
+ </ul>
+
+ <hr>
+
+ <div class="zurb-links">
+ <ul class="top">
+ <li class="logo"><a href="http://zurb.com"></a></li>
+ <li><a href="http://zurb.com/about">About</a></li>
+ <li><a href="http://zurb.com/blog">Blog</a></li>
+ <li><a href="http://zurb.com/contact">Contact</a></li>
+ </ul>
+ <ul class="pillars">
+ <li>
+ <a href="http://www.zurb.com/studios" class="footer-link-block services">
+ <span class="title">Studios</span>
+ <span>Helping startups win since '98.</span>
+ </a>
+ </li>
+ <li>
+ <a href="https://get.foundation/" class="footer-link-block foundation">
+ <span class="title">Foundation</span>
+ <span>World's most advanced responsive framework.</span>
+ </a>
+ </li>
+ <li>
+ <a href="http://zurb.com/notable" class="footer-link-block apps">
+ <span class="title">Notable</span>
+ <span>Tools to rapidly prototype and iterate.</span>
+ </a>
+ </li>
+ <li>
+ <a href="http://zurb.com/university" class="footer-link-block expo">
+ <span class="title">University</span>
+ <span>Online training for smarter product design.</span>
+ </a>
+ </li>
+ </ul>
</div>
-<h2 id="basic-principles" class="docs-heading" data-magellan-target="basic-principles">Basic Principles<a class="docs-heading-icon" href="#basic-principles"></a></h2><ul>
-<li><strong>Structure your document properly.</strong> Use the right HTML tags for the job when marking up navigation, lists, links, controls, and so on.</li>
-<li><strong>Label everything.</strong> If a control or form element has no text label, add one. You can use the <a href="visibility.html#accessibility">visibility classes</a> to hide labels visually while maintaining accessibility. Use the <code>alt</code> attribute on all images to describe what they are.</li>
-<li><strong>Don't rely on purely visual cues.</strong> The content of a page should make sense even if page is being read to the user, or if the user is colorblind and can't make use of color-based labeling.</li>
-<li><strong>Make everything usable on a keyboard and mouse.</strong> Lucky for you, all of our components work with keyboards, mice, and touch screens out of the box.</li>
-</ul>
-<hr>
-<h2 id="types-of-disabilities" class="docs-heading" data-magellan-target="types-of-disabilities">Types of Disabilities<a class="docs-heading-icon" href="#types-of-disabilities"></a></h2><h3 id="visual" class="docs-heading">Visual<a class="docs-heading-icon" href="#visual"></a></h3><p>Visually-impaired users may have low vision or be completely blind. For low vision users, proper typographic contrast is important, both size and color. Foreground colors should stand out from background colors. You can use tools to calculate the contrast ratio of your foreground and background colors. The contrast ratio should at least be 1:4.5 for normal text and 3:1 for large text.
-Blind users consume the web by reading it using a <a href="http://en.wikipedia.org/wiki/Screen_reader">screen reader</a>. Screen readers read the content of a web page out loud, or write it out as Braille, using certain queues from the HTML to infer meaning.</p>
-<h3 id="motor" class="docs-heading">Motor<a class="docs-heading-icon" href="#motor"></a></h3><p>Users with motor disabilities may have trouble using a mouse, or don't use a mouse at all. For this reason, it's very important that your site is fully keyboard-accessible. Visually-impaired users also typically navigate websites using only their keyboard.</p>
-<p>When using only the keyboard, the <kbd>tab</kbd> key is the primary way to navigate through a page. However, most screen readers include many shortcut keys to skip around a page. For example, a screen reader can read every heading on a page, or every link, making it easier to find the right content on the page.</p>
-<p>More complex components like menus, tabs, or sliders can also typically be used with arrow keys, not just the <kbd>tab</kbd> keys. All of our JavaScript plugins provide advanced keyboard support by default.</p>
-<h3 id="auditory" class="docs-heading">Auditory<a class="docs-heading-icon" href="#auditory"></a></h3><p>If your site has video, provide captions so that users who are deaf or hard-of-hearing can properly view the content.</p>
+</aside>
+
+<a class="exit-off-canvas" href="#"></a>
+
+
+ <section role="main" class="scroll-container">
+
+ <div class="row">
+ <div class="large-3 medium-4 columns">
+ <div class="hide-for-small">
+ <div class="sidebar">
+ <h5>Foundation Documentation</h5>
+ <!-- <form>
+ <label>Search Documentation</label>
+ <input tabindex="1" id="autocomplete" type="search" placeholder="Search Docs: e.g. forms">
+ </form>
+
+ <a href="https://get.foundation/sites/download.html" class="download button expand">Download Foundation</a> -->
+
+ <nav>
+ <ul class="side-nav">
+ <li class="heading">Setup</li>
+
+ <li><a href="index.html" data-search="">Getting Started</a></li>
+ <li><a href="css.html" data-search="Styles">CSS</a></li>
+ <li><a href="sass.html" data-search="Sass">Sass</a></li>
+ <li><a href="sass-files.html" data-search="Sass,Sass - What You Get, How to Use Sass">Sass Files</a></li>
+ <li><a href="using-sass.html" data-search="Sass,Sass - What You Get, How to Use Sass">Using Sass</a></li>
+ <li><a href="applications.html" data-search="Rails,Gem">Applications</a></li>
+ <li><a href="javascript.html" data-search="">JavaScript</a></li>
+ <li><a href="components/global.html" data-search="Global Styles,Global Mixins,Global Variables,Useful HTML Classes">Global Styles</a></li>
+ <li><a href="components/kitchen_sink.html" data-search="">Kitchen Sink</a></li>
+ <li><a href="accessibility.html" data-search="accessibility">Accessibility</a></li>
+ <li><a href="upgrading.html" data-search="Migration">Upgrading</a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Structure</li>
+ <li><a href="media-queries.html" data-search="Breakpoints">Media Queries</a></li>
+ <li><a href="components/visibility.html" data-search="">Visibility</a></li>
+ <li><a href="components/grid.html" data-search="">Grid</a></li>
+ <li><a href="components/block_grid.html" data-search="">Block Grid</a></li>
+ <li><a href="components/interchange.html" data-search="Responsive Images">Interchange Responsive Content <span class="label">JS</span></a></li>
+ <li><a href="utility-classes.html" data-search="">Utility Classes</a></li>
+ <li><a href="javascript-utilities.html" data-search="">Javascript Utilities</a></li>
+ <li><a href="components/rtl.html" data-search="RTL">Right-to-Left Support</a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Navigation</li>
+ <li><a href="components/offcanvas.html" data-search="Off Canvas">Off-canvas <span class="label">JS</span></a></li>
+ <li><a href="components/topbar.html" data-search="Nav Bar,Navigation,Sticky">Top Bar <span class="label">JS</span></a></li>
+ <li><a href="components/icon-bar.html" data-search="">Icon Bar</a></li>
+ <li><a href="components/sidenav.html" data-search="">Side Nav</a></li>
+ <li><a href="components/magellan.html" data-search="Scrollspy">Magellan Sticky Nav <span class="label">JS</span></a></li>
+ <li><a href="components/subnav.html" data-search="">Sub Nav</a></li>
+ <li><a href="components/breadcrumbs.html" data-search="Navigation Path,Cookie Crumb">Breadcrumbs</a></li>
+ <li><a href="components/pagination.html" data-search="">Pagination</a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Media</li>
+ <li><a href="components/orbit.html" data-search="Carousel,Slider,Slideshow">Orbit Slider <span class="label">JS</span></a></li>
+ <li><a href="components/thumbnails.html" data-search="Images">Thumbnails</a></li>
+ <li><a href="components/clearing.html" data-search="Responsive Lightbox,Lightbox">Clearing Lightbox <span class="label">JS</span></a></li>
+ <li><a href="components/flex_video.html" data-search="Responsive Video">Flex Video</a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Forms</li>
+ <li><a href="components/forms.html" data-search="">Forms</a></li>
+ <li><a href="components/switch.html" data-search="">Switches</a></li>
+ <li><a href="components/range_slider.html" data-search="Range Slider">Range Sliders <span class="label">JS</span></a></li>
+ <li><a href="components/abide.html" data-search="Form Validation,Field Validation">Abide Validation <span class="label">JS</span></a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Buttons</li>
+ <li><a href="components/buttons.html" data-search="">Buttons</a></li>
+ <li><a href="components/button_groups.html" data-search="Button Bar">Button Groups</a></li>
+ <li><a href="components/split_buttons.html" data-search="">Split Buttons <span class="label">JS</span></a></li>
+ <li><a href="components/dropdown_buttons.html" data-search="">Dropdown Buttons <span class="label">JS</span></a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Typography</li>
+ <li><a href="components/typography.html" data-search="Typography,Type-setting,Composition">Type</a></li>
+ <li><a href="components/inline_lists.html" data-search="Lists">Inline Lists</a></li>
+ <li><a href="components/labels.html" data-search="Tags">Labels</a></li>
+ <li><a href="components/keystrokes.html" data-search="">Keystrokes</a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Callouts & Prompts</li>
+ <li><a href="components/reveal.html" data-search="Modal">Reveal Modal <span class="label">JS</span></a></li>
+ <li><a href="components/alert_boxes.html" data-search="Error,Success,Warning">Alerts <span class="label">JS</span></a></li>
+ <li><a href="components/panels.html" data-search="Wells">Panels</a></li>
+ <li><a href="components/tooltips.html" data-search="Popover">Tooltips <span class="label">JS</span></a></li>
+ <li><a href="components/joyride.html" data-search="Tooltip Tour,Guider,Tooltip Walk-through">Joyride <span class="label">JS</span></a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Content</li>
+ <li><a href="components/dropdown.html" data-search="">Dropdowns <span class="label">JS</span></a></li>
+ <li><a href="components/pricing_tables.html" data-search="">Pricing Tables</a></li>
+ <li><a href="components/progress_bars.html" data-search="">Progress Bars</a></li>
+ <li><a href="components/tables.html" data-search="">Tables</a></li>
+ <li><a href="components/accordion.html" data-search="">Accordion <span class="label">JS</span></a></li>
+ <li><a href="components/tabs.html" data-search="">Tabs <span class="label">JS</span></a></li>
+ <li><a href="components/equalizer.html" data-search="">Equalizer <span class="label">JS</span></a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Support</li>
+
+ <li><a href="changelog.html" data-search="">Changelog</a></li>
+ <li><a href="compatibility.html" data-search="">Compatibility</a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Older Docs</li>
+ <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html" data-search="">Foundation 4</a></li>
+ <li><a href="https://get.foundation/sites/docs/v/3.2.5/" data-search="">Foundation 3</a></li>
+ <li><a href="https://get.foundation/sites/docs/v/2.2.1/" data-search="">Foundation 2</a></li>
+
+ </ul>
+ </nav>
+
+</div>
+ </div>
+ </div>
+ <div class="large-9 medium-8 columns">
+ <h1 id="accessibility">Accessibility</h1>
+ <h3 class="subheader">Guidelines on this page will help you make your sites more accessible for keyboard navigation and screen readers.</h3>
+
+<p>Aside from accessibility features that has been built into Foundation's components, this guide will give you additional best practices towards making your site more accessible. This is a living document and will continue to be updated.</p>
+<p class="panel">Care about accessibility or want to contribute? Submit a Pull Request or get into the conversation on <a href="https://github.com/zurb/foundation">GitHub</a>.</p>
+
<hr>
-<h2 id="foundation-and-accessibility" class="docs-heading" data-magellan-target="foundation-and-accessibility">Foundation and Accessibility<a class="docs-heading-icon" href="#foundation-and-accessibility"></a></h2><p>All of Foundation's components are keyboard-accessible and screen reader-friendly. All of our code examples include the required accessibility hooks, but there may be instances where you, as the developer, need to fine-tune the specifics of how those hooks are used. Our JavaScript plugins will automatically add many required attributes to the HTML for you. Refer to each component's documentation to learn how to ensure your markup is screen reader-friendly.</p>
-<p>Foundation's CSS makes use of the library <a href="https://github.com/ten1seven/what-input">what-input</a>, which can detect the user's current input device and adjust CSS accordingly. We use it to disable outlines for mouse users, but not keyboard users, who need the outline to know what element on the page has focus.</p>
-<p>If you're using the Sass version of Foundation, you can use this mixin to enable the feature on your own components:</p>
-<div class="docs-code" data-docs-code><pre><code class="scss"><span class="hljs-selector-class">.element</span> {
- @<span class="hljs-keyword">include</span> disable-mouse-outline;
- <span class="hljs-comment">// ...</span>
-}</code></pre></div><hr>
-<h2 id="learn-more" class="docs-heading" data-magellan-target="learn-more">Learn More<a class="docs-heading-icon" href="#learn-more"></a></h2><h3 id="resources" class="docs-heading">Resources<a class="docs-heading-icon" href="#resources"></a></h3><ul>
-<li><a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/">WCAG 2.0 Guide</a></li>
-<li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility">MDN accessibility documentation</a></li>
-<li><a href="http://www.w3.org/WAI/intro/accessibility.php">w3.org Introduction to Accessibility</a></li>
-<li><a href="http://www.section508.gov/">Section 508 government requirements</a></li>
-<li><a href="http://webaim.org/">WebAIM certification and training</a></li>
-<li><a href="http://a11yproject.com/checklist.html">Web Accessibility Checklist</a></li>
+<h2 id="basic-concepts-overview">Basic Concepts - Overview</h2>
+<ul>
+ <li>Images should have text alternative for images. Captions or transcripts should be provided for video and audio. Sufficient color contrast between text and background is important for people with vision impairment or color blindness.</li>
+ <li>Sites should be navigatable using only a keyboard, providing meaningful hyperlinks, and allowing enough time for users to complete a task.</li>
+ <li>Make content readable and provide predictable functionality.</li>
+ <li>Maximizing compatibility with current and future tools (web browsers, assistive technologies, etc.).</li>
</ul>
-<h3 id="tools" class="docs-heading">Tools<a class="docs-heading-icon" href="#tools"></a></h3><ul>
-<li><a href="https://tenon.io/index.php">Tenon accessibility checker</a></li>
-<li><a href="http://wave.webaim.org">WAVE Chrome plugin - free accessibility checker</a></li>
-<li><a href="http://webaim.org/resources/contrastchecker">Color Contrast Checker</a></li>
-<li><a href="http://www.chromevox.com">ChromeVox screen reader plugin for Chrome</a></li>
-<li><a href="http://www.freedomscientific.com/Products/Blindness/Jaws">JAWS screen reader for Windows</a></li>
-<li><a href="http://www.nvaccess.org/download/">NVDA screen reader for Windows - Free</a></li>
+
+<hr>
+<h2 id="keyboard-access">Keyboard Access</h2>
+<p>The most common impairments for web users are those with problems seeing, hearing or a physical inability to use a mouse. For that reason, the site must be navigatable by keyboard. Most commonly the tab key is used to tab through the content. For a vision impaired person will have a <a href="http://en.wikipedia.org/wiki/Screen_reader">screenreader</a> installed that reads the content out loud. We used <a href="http://www.chromevox.com/">Chromevox</a> to test with. You can find a list of popular screen readers below in the resource list.</p>
+
+<h3 id="how-to-test-a-website-s-keyboard-accessibility">How to Test a Website’s Keyboard Accessibility</h3>
+<p>On a desktop or laptop in Firefox, IE, Chrome, or Safari,
+click into the browser address bar.</p>
+
+<p>Take your hand off your mouse and use only your keyboard.
+Using the Tab button, navigate until you’ve reached the link below. (You can use Shift+Tab to navigate back one step.)</p>
+
+<ul>
+ <li>Right arrow: Next navigation bar item</li>
+ <li>Left arrow: Previous navigation bar item</li>
+ <li>Enter: Activate currently focused item (i.e. navigate to corresponding URL)</li>
</ul>
+<hr>
+<h3 id="skip-navigation">Skip Navigation</h3>
+<p>Give the person the ability to skip the navigation at the top of the page. If you have menu with 40 links, you can imagine how long it would take someone to tab through all that. Here's one way to do it:</p>
+<div class="row">
+ <div class="medium-7 columns">
+<pre><code class="language-html"><div class="code-container"><span class="tag"><<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"skip"</span>></span><span class="tag"><<span class="title">a</span> <span class="attribute">href</span>=<span class="value">"#content"</span>></span>Skip to Main Content<span class="tag"></<span class="title">a</span>></span><span class="tag"></<span class="title">div</span>></span></div></code></pre>
+ </div>
+ <div class="medium-5 columns">
+<pre><code class="language-css"><div class="code-container"> <span class="id">#skip</span> <span class="tag">a</span> <span class="rules">{
+ <span class="rule"><span class="attribute">position</span>:<span class="value">absolute;</span></span>
+ <span class="rule"><span class="attribute">left</span>:<span class="value">-<span class="number">10000</span>px;</span></span>
+ <span class="rule"><span class="attribute">top</span>:<span class="value">auto;</span></span>
+ <span class="rule"><span class="attribute">width</span>:<span class="value"><span class="number">1</span>px;</span></span>
+ <span class="rule"><span class="attribute">height</span>:<span class="value"><span class="number">1</span>px;</span></span>
+ <span class="rule"><span class="attribute">overflow</span>:<span class="value">hidden;</span></span>
+ <span class="rule">}</span></span>
+ <span class="id">#skip</span> <span class="tag">a</span><span class="pseudo">:focus</span> <span class="rules">{
+ <span class="rule"><span class="attribute">position</span>:<span class="value">static;</span></span>
+ <span class="rule"><span class="attribute">width</span>:<span class="value">auto;</span></span>
+ <span class="rule"><span class="attribute">height</span>:<span class="value">auto;</span></span>
+ <span class="rule">}</span></span></div></code></pre>
+ </div>
</div>
-<div class="large-3 columns" data-sticky-container>
- <nav class="columns docs-toc-wrap" data-sticky data-anchor="docs" data-sticky-on="large">
- <div class="docs-toc hide" id="docsTOC">
- <ul class="vertical menu" data-docs-toc>
- <li class="docs-nav-title">On this page:</li>
- </ul>
+<p>Note: A person who can see may be slightly confused that their focus is off screen. This is a minor compromise for this method.</p>
+
+<hr>
+<h3 id="nested-headings">Nested Headings</h3>
+<p>When nesting headings <code><h1> - <h6></code>, your primary document header should be an <code><h1></code>. Subsequent headings should make logical use of <code><h2> - <h6></code> such that screen readers can construct a table of contents for your pages.</p>
+
+<hr>
+<h2 id="learn-more">Learn More</h2>
+<div class="row">
+ <div class="medium-6 columns">
+ <h4 id="label-additional-resources">Additional resources</h4>
+ <ul class="side-nav" aria-labelledby="label-additional-resources">
+ <li><a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/">WCAG 2.0 Guide</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility">MDN accessibility documentation</a></li>
+ <li><a href="http://achecker.ca/checker/index.php">AChecker Web Accessibility Checker</a></li>
+ <li><a href="http://www.w3.org/WAI/intro/accessibility.php">w3.org Introduction to Accessibility</a></li>
+ <li><a href="http://www.section508.gov/">Section 508 Government Requirements</a></li>
+ <li><a href="http://webaim.org/">Accessibilty Certification and Training</a></li>
+ <li><a href="http://a11yproject.com/">A community-driven effort to make web accessibility easier</a></li>
+ </ul>
</div>
- <div class="foundation-toc-ad-unit" id="TOCAdUnit">
+ <div class="medium-6 columns">
+ <h4 id="label-tools">Tools</h4>
+ <ul class="side-nav" aria-labelledby="label-tools">
+ <li><a href="http://www.chromevox.com/">Chromevox screenreader plugin for Chrome</a></li>
+ <li><a href="http://www.freedomscientific.com/Products/Blindness/Jaws">Jaws screnreader plugin for Windows</a></li>
+ <li><a href="https://github.com/squizlabs/HTML_CodeSniffer">"HTML Codesniffer" bookmarklet for identifying accessibility issues</a></li>
+ <li><a href="http://webaim.org/">Accessibilty Certification and Training</a></li>
+ <li><a href="http://wave.webaim.org/extension/">WAVE Chrome Extension</a></li>
+ <li><a href="http://www.tenon.io/">Tenon.io - Free Online Accessiblity Testing</a></li>
+ </ul>
</div>
- </nav>
-</div>
-
</div>
-</article>
-
- </div>
- <div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
- <ul class="vertical menu docs-nav" id="docs-menu">
- <p class="docs-nav-version">
- <span data-docs-version></span>
- <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">(Changelog)</a>
- </p>
-
- <li class="docs-nav-title">Getting Started</li>
- <li><a href="installation.html">Installation</a></li>
- <li><a href="starter-projects.html">Starter Projects</a></li>
- <li><a href="compatibility.html">Compatibility</a></li>
- <li class="current"><a href="accessibility.html">Accessibility</a></li>
- <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
-
- <li class="docs-nav-title">Setup</li>
- <li><a href="global.html">Global Styles</a></li>
- <li><a href="rtl.html">Right-to-Left Support</a></li>
- <li><a href="flexbox.html">Flexbox</a></li>
- <li><a href="sass.html">Sass</a></li>
- <li><a href="javascript.html">JavaScript</a></li>
- <li><a href="javascript-utilities.html">JavaScript Utilities</a></li>
- <li><a href="media-queries.html">Media Queries</a></li>
-
- <li class="docs-nav-title">General</li>
- <li><a href="grid.html">Grid</a></li>
- <li><a href="flex-grid.html">Flex Grid</a></li>
- <li><a href="forms.html">Forms</a></li>
- <li><a href="visibility.html">Visibility Classes</a></li>
- <li><a href="float-classes.html">Float Classes</a></li>
-
- <li class="docs-nav-title">Typography</li>
- <li><a href="typography-base.html">Base Styles</a></li>
- <li><a href="typography-helpers.html">Helper Classes</a></li>
-
- <li class="docs-nav-title">Controls</li>
- <li><a href="button.html">Button</a></li>
- <li><a href="button-group.html">Button Group</a></li>
- <li><a href="close-button.html">Close Button</a></li>
- <li><a href="slider.html">Slider <span class="label">JS</span></a></li>
- <li><a href="switch.html">Switch</a></li>
-
- <li class="docs-nav-title">Navigation</li>
- <li><a href="navigation.html">Overview</a></li>
- <li><a href="menu.html">Menu</a></li>
- <li><a href="dropdown-menu.html">Dropdown Menu <span class="label">JS</span></a></li>
- <li><a href="drilldown-menu.html">Drilldown Menu <span class="label">JS</span></a></li>
- <li><a href="accordion-menu.html">Accordion Menu <span class="label">JS</span></a></li>
- <li><a href="top-bar.html">Top Bar</a></li>
- <li><a href="responsive-navigation.html">Responsive Navigation</a></li>
- <li><a href="magellan.html">Magellan <span class="label">JS</span></a></li>
- <li><a href="pagination.html">Pagination</a></li>
- <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
-
- <li class="docs-nav-title">Containers</li>
- <li><a href="accordion.html">Accordion <span class="label">JS</span></a></li>
- <li><a href="callout.html">Callout</a></li>
- <li><a href="dropdown.html">Dropdown <span class="label">JS</span></a></li>
- <li><a href="media-object.html">Media Object</a></li>
- <li><a href="off-canvas.html">Off-canvas <span class="label">JS</span></a></li>
- <li><a href="reveal.html">Reveal <span class="label">JS</span> <small>Modal</small></a></li>
- <li><a href="table.html">Table</a></li>
- <li><a href="tabs.html">Tabs <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Media</li>
- <li><a href="badge.html">Badge</a></li>
- <li><a href="flex-video.html">Flex Video</a></li>
- <li><a href="label.html">Label</a></li>
- <li><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
- <li><a href="progress-bar.html">Progress Bar</a></li>
- <li><a href="thumbnail.html">Thumbnail</a></li>
- <li><a href="tooltip.html">Tooltip <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Plugins</li>
- <li><a href="abide.html">Abide <small>Form Validation</small></a></li>
- <li><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
- <li><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
- <li><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
- <li><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
-
- <li class="docs-nav-title">Sass</li>
- <li><a href="sass-functions.html">Functions</a></li>
- <li><a href="sass-mixins.html">Mixins</a></li>
-
- <li class="docs-nav-title">Libraries</li>
- <li><a href="motion-ui.html">Motion UI</a></li>
- <li><a href="panini.html">Panini</a></li>
- <li><a href="style-sherpa.html">Style Sherpa</a></li>
-
- <li class="docs-nav-title">Older Versions</li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
- <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
- <li><a href="https://get.foundation/sites/docs/v/3.2.5/">Foundation 3</a></li>
- <li><a href="https://get.foundation/sites/docs/v/2.2.1/">Foundation 2</a></li>
- </ul>
-
- </div>
- </div>
- <!-- Small Business(Docs) -->
- <section id="studiosCallout">
- <div class="row">
- <div class="medium-4 large-4 columns">
- <img src="https://get.foundation/assets/img/smallbiz-footer.svg" alt="">
- </div>
- <div class="medium-8 large-8 columns banner-info">
- <div class="row column property-label">ZURB Foundation</div>
- <h3 class="light">Yeah, we can help with that.</h3>
- <p class="lead"> We’ll collaborate with your team throughout the entire project life cycle. We’ll take your concept and move it through ideation, hi-fi wireframes, visual design and code, all while informing you on the whys and hows along the way.</p>
- <div class="course-buttons">
- <a href="https://get.foundation/get-involved/premium-support.html" class="studios button" data-zcom-event="studios_foundation_click" id="foundationSmallV1">Show Me How →</a>
</div>
</div>
- </div>
- </section>
-
- <div class="docs-newsletter">
- <div class="row">
- <div class="medium-7 large-8 columns">
- <a target="_blank" href="https://get.foundation/learn/responsive-reading.html">
- <h5 class="">Download ZURB’s 21 Responsive Trends That Will Shape 2017</h5>
- <p style="margin-bottom: 0;">Stay informed with amazing responsive trends each month from ZURB.</p>
- </a>
+ <!-- <section id="courses-banner-large">
+ <div class="row">
+ <div class="large-5 medium-5 columns banner-image">
+ <img src="https://get.foundation/assets/img/responsive-banner-main.svg" alt="responsive design">
+ </div>
+ <div class="large-7 medium-7 columns banner-info">
+ <h3>Get a running start with Foundation</h3>
+ <p>Learn the fundamentals of the world's most advanced responsive framework in our <strong>Intro to Foundation class.</strong> You'll learn from the creators themselves on how to use Foundation and jumpstart your next project. <a href="http://zurb.com/university/courses" class="inline-hide">Learn more about classes »</a></p>
+ <a href="http://zurb.com/university/foundation-intro?utm_source=Foundation%20Docs&utm_medium=Large%20Banner&utm_campaign=Intro%20to%20Foundation" class="button">Learn More</a>
+ <a href="http://zurb.com/university/courses" class="learn-more hide-for-medium-up">Learn more about classes »</a>
+ </div>
+ </div>
+</section> -->
+ <div id="newsletter">
+ <div class="row">
+ <div class="medium-8 columns">
+ <h5>Stay on top of what’s happening in <a href="http://zurb.com/responsive">responsive design</a>.</h5>
+ <p>Sign up to receive monthly Responsive Reading highlights. <a href="http://zurb.com/responsive/reading">Read Last Month's Edition »</a></p>
+ </div>
+ <div class="medium-4 columns">
+ <form action="http://zurb.createsend.com/t/y/s/xlitlu/" method="post" id="subForm">
+ <div class="row collapse margintop-20px">
+ <div class="small-8 medium-8 columns">
+ <input id="fieldEmail" name="cm-xlitlu-xlitlu" type="email" placeholder="signup@example.com">
</div>
- <div class="medium-5 large-4 footer-signup-form columns">
- <a style="margin-bottom: 0;" target="_blank" href="https://get.foundation/learn/responsive-reading.html" class="button expanded">Download the PDF</a>
+ <div class="small-4 medium-4 columns">
+ <input type="submit" href="#" class="postfix button" value="Sign Up">
</div>
</div>
+ </form>
+ </div>
+ </div>
+</div>
+
+
+<div class="zurb-footer-top bg-fblue">
+ <div class="row property">
+ <div class="medium-4 columns">
+ <div class="property-info">
+ <h3>Foundation for Sites</h3>
+ <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
+ </p>
</div>
-
- <div class="zurb-footer-top bg-fblue">
- <div class="row property">
- <div class="medium-4 columns">
- <div class="property-info">
- <h3>Foundation for Sites</h3>
- <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
- </p>
- </div>
- </div>
-
- <div class="medium-8 columns">
- <div class="row collapse">
- <div class="medium-4 columns">
- <div class="learn-links">
- <h4 class="hide-for-small">Want more?</h4>
- <ul>
- <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
- <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
- <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
- <li><a href="http://zurb.com/university/courses">Training</a></li>
- <li><a href="http://zurb.com/library">Design Resources</a></li>
- </ul>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="support-links">
- <h4 class="hide-for-small">Talk to us</h4>
- <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
- <p><a href="https://get.foundation/get-involved/contribute.html">Get involved in<br>our amazing community.</a></p>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="connect-links">
- <h4 class="hide-for-small">Stay Updated</h4>
- <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
- <a href="http://zurb.com/news" class="small button">Stay Connected</a>
- </div>
- </div>
- </div>
+ </div>
+
+ <div class="medium-8 columns">
+ <div class="row collapse">
+ <div class="medium-4 columns">
+ <div class="learn-links">
+ <h4 class="hide-for-small">Want more?</h4>
+ <ul>
+ <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
+ <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
+ <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
+ <li><a href="http://zurb.com/university/courses">Training</a></li>
+ <li><a href="http://zurb.com/library">Design Resources</a></li>
+ </ul>
</div>
</div>
- <div class="row global">
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/studios" class="footer-link-block services">
- <span class="title">Studios</span>
- <span>Helping more than 200 startups succeed since 1998.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="https://get.foundation/" class="footer-link-block foundation">
- <span class="title">Foundation</span>
- <span>The most advanced front-end framework in the world.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/notable" class="footer-link-block apps">
- <span class="title">Notable Design Apps</span>
- <span>Prototype, iterate and collect feedback on your products.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/university" class="footer-link-block expo">
- <span class="title">University</span>
- <span>Ideas, thoughts and design resources shared with you.</span>
- </a>
+ <div class="medium-4 columns">
+ <div class="support-links">
+ <h4 class="hide-for-small">Talk to us</h4>
+ <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
+ <p><a href="https://get.foundation/business/business-support.html">Business Support</a></p>
+ <p>Or check our <a href="https://get.foundation/support/support.html">support page</a></p>
+ </div>
</div>
- </div>
- </div>
-
- <div class="zurb-footer-bottom">
- <div class="row">
- <div class="medium-4 medium-push-8 columns">
- <ul class="home-social">
- <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
- <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
- <li><a href="http://zurb.com/contact" class="mail"></a></li>
- </ul>
- </div>
- <div class="medium-8 medium-pull-4 columns">
- <a href="http://www.zurb.com" class="zurb-logo regular"></a>
- <ul class="zurb-links">
- <li><a href="http://zurb.com/about">About</a></li>
- <li><a href="http://zurb.com/blog">Blog</a></li>
- <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
- <li><a href="http://zurb.com/contact">Contact</a></li>
- <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
- </ul>
- <p class="copyright">© 1998‐2016 ZURB, Inc. All rights reserved.</p>
+ <div class="medium-4 columns">
+ <div class="connect-links">
+ <h4 class="hide-for-small">Stay Updated</h4>
+ <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
+ <a href="http://zurb.com/news" class="small button">Stay Connected</a>
</div>
</div>
</div>
-
</div>
</div>
+ <div class="row global">
+ <div class="medium-3 small-6 columns">
+ <a href="http://zurb.com/studios" class="footer-link-block services">
+ <span class="title">Studios</span>
+ <span>Helping more than 200 startups succeed since 1998.</span>
+ </a>
+ </div>
+ <div class="medium-3 small-6 columns">
+ <a href="https://get.foundation/" class="footer-link-block foundation">
+ <span class="title">Foundation</span>
+ <span>The most advanced front-end framework in the world.</span>
+ </a>
+ </div>
+ <div class="medium-3 small-6 columns">
+ <a href="http://zurb.com/notable" class="footer-link-block apps">
+ <span class="title">Notable Design Apps</span>
+ <span>Prototype, iterate and collect feedback on your products.</span>
+ </a>
+ </div>
+ <div class="medium-3 small-6 columns">
+ <a href="http://zurb.com/university" class="footer-link-block expo">
+ <span class="title">University</span>
+ <span>Ideas, thoughts and design resources shared with you.</span>
+ </a>
+ </div>
+ </div>
+</div>
+
+<div class="zurb-footer-bottom">
+ <div class="row">
+ <div class="medium-4 medium-4 push-8 columns">
+ <ul class="home-social">
+ <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
+ <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
+ <li><a href="http://zurb.com/contact" class="mail"></a></li>
+ </ul>
+ </div>
+ <div class="medium-8 medium-8 pull-4 columns">
+ <a href="http://www.zurb.com" class="zurb-logo regular"></a>
+ <ul class="zurb-links">
+ <li><a href="http://zurb.com/about">About</a></li>
+ <li><a href="http://zurb.com/blog">Blog</a></li>
+ <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
+ <li><a href="http://zurb.com/contact">Contact</a></li>
+ <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
+ </ul>
+ <p class="copyright">© 1998‐2015 ZURB, Inc. All rights reserved.</p>
+ </div>
+ </div>
+</div>
+
+ </section>
+
+ </div>
+ </div>
+
+ <script src="assets/js/templates.js"></script>
+ <script src="assets/js/all.js"></script>
+ <script>
+ var _gaq = _gaq || [];
+ _gaq.push(
+ ['_setAccount', 'UA-2195009-2'],
+ ['_trackPageview'],
+ ['b._setAccount', 'UA-2195009-27'],
+ ['b._trackPageview']
+ );
+
+ (function() {
+ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+ })();
+ </script>
+ <script>
+ $(document).foundation().foundation('joyride', 'start');
+ </script>
+ </body>
+
- <script>
- var _gaq = _gaq || [];
- _gaq.push(
- ['_setAccount', 'UA-2195009-2'],
- ['_trackPageview'],
- ['b._setAccount', 'UA-2195009-27'],
- ['b._trackPageview']
- );
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
-
- <script src="assets/js/vendor.js?hash=a33a5a9f2263fba017dc346a7e5305b7"></script>
- <script src="assets/js/foundation.js?hash=0ef31811e7b7249332cd7ea6aa7c7801"></script>
- <script src="assets/js/docs.js?hash=6caecb542ca7066d74fa7bdb776abeeb"></script>
- <script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
-</body>
</html>
+++ /dev/null
-<!doctype html>
-<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
-<html class="no-js" lang="en" dir="ltr">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="Change a basic vertical Menu into a expandable accordion menu with the Accordion Menu plugin.">
- <link rel="icon" href="assets/img/icons/foundation-favicon.ico" type="image/x-icon">
- <title>Foundation for Sites 6 Docs | Accordion Menu</title>
- <link href="assets/css/docs.css?hash=99290d37a24bf8a6cba110d2079b49c1" rel="stylesheet" />
- <link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=ad3ad9eaca866603a0fa6fd760ee4de0" rel="stylesheet">
- <!-- <link rel="stylesheet" href="./node_modules/motion-ui/dist/motion-ui.css" /> -->
-</head>
-<body>
-
- <div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
-
- <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="mobile-ofc vertical menu">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
-
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/support.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/sort/unanswered">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
- </div>
-
- <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="vertical menu">
- <li><a href="#">Foundation</a></li>
- <li><a href="#">Dot</a></li>
- <li><a href="#">ZURB</a></li>
- <li><a href="#">Com</a></li>
- <li><a href="#">Slash</a></li>
- <li><a href="#">Sites</a></li>
- </ul>
- </div>
-
-
- <div class="off-canvas-content" data-off-canvas-content>
- <!-- Info Banner For Announcements or Links -->
- <!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
- <div class="info">
- <h5>Foundation 6 is here!</h5>
- </div>
- </a> -->
-
- <nav class="marketing-topbar show-for-medium">
-
- <ul class="menu">
- <li class="topbar-title"><a href="https://get.foundation/index.html"><img src="assets/img/logos/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
- </ul>
-
- <ul class="dropdown menu" data-dropdown-menu data-click-open="false">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/" target="_blank">F5 Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="https://get.foundation/emails/docs/" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
-
- </nav>
-
- <div class="title-bar hide-for-medium">
- <div class="title-bar-left">
- <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
- <span class="title-bar-title">Foundation</span>
- </div>
- </div>
-
-
- <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
-
- <div class="expanded row">
- <div class="medium-9 large-10 medium-push-3 large-push-2 columns">
-
-<article class="docs-component" id="docs-accordion-menu">
-
-<a href="#docs-menu" class="small secondary expanded button hide-for-medium">Jump to Nav</a>
-
-<header>
- <h1 class="docs-page-title">Accordion Menu</h1>
-
- <span data-tooltip title="Requires a JavaScript library." class="docs-js label">JavaScript</span>
-
- <p class="lead docs-page-lead">Change a basic vertical Menu into a expandable accordion menu with the Accordion Menu plugin.</p>
-
- <ul class="menu simple docs-contribute-menu">
- <li><a href="https://github.com/zurb/foundation-sites/edit/master/docs/pages/accordion-menu.md" target="_blank"><i class="fi-pencil"></i>Edit this Page</a></li>
- <li><a href="https://github.com/zurb/foundation-sites/issues/new?title=%5BAccordion%20Menu%5D%20ISSUE%20NAME%20HERE" target="_blank"><i class="fi-social-github"></i>Report a Bug</a></li>
- <li><a href="https://get.foundation/forum" target="_blank"><i class="fi-comment"></i>Get Help</a></li>
- </ul>
-</header>
-
-<hr>
-
-<div class="row">
-
-<div class="large-9 columns" id="docs">
-
-<h2 id="basics" class="docs-heading" data-magellan-target="basics">Basics<a class="docs-heading-icon" href="#basics"></a></h2><p>Accordion menus follow the basic <a href="menu.html">Menu</a> syntax of <code><ul></code>, <code><li></code>, and <code><a></code>. To convert a basic menu into an accordion, add the attribute <code>data-accordion-menu</code>. You probably also want it to be vertical, so add the class <code>.vertical</code> as well.</p>
-<p>Any <code><a></code> will behave like a standard link. However, any <code><a></code> paired with a nested <code><ul></code> menu will then slide that sub-menu up and down when clicked on.</p>
-<div class="primary callout">
- <p>You can use the built-in <code>.nested</code> class to add an indent to a nested menu.</p>
-</div>
-
-<div class="primary callout">
- <p>To have a sub-menu already open when the page loads, add the class <code>.is-active</code> to that sub-menu.</p>
-</div>
-
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"vertical menu"</span> <span class="hljs-attr">data-accordion-menu</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 1<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu vertical nested"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 1A<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 1B<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 2<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">ul</span>></span></code></pre></div><ul class="vertical menu" data-accordion-menu>
- <li>
- <a href="#">Item 1</a>
- <ul class="menu vertical nested">
- <li>
- <a href="#">Item 1A</a>
- <ul class="menu vertical nested">
- <li><a href="#">Item 1Ai</a></li>
- <li><a href="#">Item 1Aii</a></li>
- <li><a href="#">Item 1Aiii</a></li>
- </ul>
- </li>
- <li><a href="#">Item 1B</a></li>
- <li><a href="#">Item 1C</a></li>
- </ul>
- </li>
- <li>
- <a href="#">Item 2</a>
- <ul class="menu vertical nested">
- <li><a href="#">Item 2A</a></li>
- <li><a href="#">Item 2B</a></li>
- </ul>
- </li>
- <li><a href="#">Item 3</a></li>
-</ul>
-
-
-<hr>
-<section>
- <h2 id="sass-reference" class="docs-heading" data-magellan-target="sass-reference">Sass Reference<a class="docs-heading-icon" href="#sass-reference"></a></h2>
-
- <section>
- <h3 id="sass-variables" class="docs-heading">Variables<a class="docs-heading-icon" href="#sass-variables"></a></h3>
-
- <p>The default styles of this component can be customized using these Sass variables in your project's <a href="sass.html#the-settings-file">settings file</a>.</p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td class="name"><code>$accordionmenu-arrows</code></td>
- <td>Boolean</td>
- <td class="boolean"><code>true</code></td>
- <td><p>Sets if accordion menus have the default arrow styles.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$accordionmenu-arrow-color</code></td>
- <td>Color</td>
- <td class="color"><code>$primary-color</code></td>
- <td><p>Sets accordion menu arrow color if arrow is used.</p>
-</td>
- </tr>
- </table>
- </section>
-
-
-
-</section>
-
-<hr>
-<section>
- <h2 id="javascript-reference" class="docs-heading" data-magellan-target="javascript-reference">JavaScript Reference<a class="docs-heading-icon" href="#javascript-reference"></a></h2>
-
-
- <section>
- <h3 id="js-module" class="docs-heading">Initializing<a class="docs-heading-icon" href="#js-module"></a></h3>
-
- <p>The file <code>foundation.accordionMenu.js</code> must be included in your JavaScript to use this plugin, along with <code>foundation.core.js</code>. <strong>This plugin also requires these utility libraries:</strong></p>
-
-
- <ul>
- <li><code>foundation.util.keyboard.js</code></li>
- </ul>
-
- <ul>
- <li><code>foundation.util.motion.js</code></li>
- </ul>
-
- <ul>
- <li><code>foundation.util.nest.js</code></li>
- </ul>
-
-
- </section>
-
-
- <section>
- <h3 id="js-class" class="docs-heading">Foundation.AccordionMenu<a class="docs-heading-icon" href="#js-class"></a></h3>
-
- <p>Creates a new instance of an accordion menu.</p>
-
-
- <div class="docs-code"><pre><code><span class="hljs-keyword">var</span> elem = <span class="hljs-keyword">new</span> Foundation.AccordionMenu(element, options);</code></pre></div>
-
- <p><strong>Fires these events:</strong>
- AccordionMenu#event:init
- </p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>element</code></td>
- <td>jQuery</td>
- <td>jQuery object to make into an accordion menu.</td>
- </tr>
- <tr>
- <td><code>options</code></td>
- <td>Object</td>
- <td>Overrides to the default plugin settings.</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="js-options" class="docs-heading">Plugin Options<a class="docs-heading-icon" href="#js-options"></a></h3>
-
- <p>Use these options to customize an instance of Accordion Menu. Plugin options can be set as individual data attributes, one combined <code>data-options</code> attribute, or as an object passed to the plugin's constructor. <a href="javascript.html#initializing">Learn more about how JavaScript plugins are initialized.</a></p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Default</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>data-slide-speed</code></td>
- <td><code>250</code></td>
- <td>Amount of time to animate the opening of a submenu in ms.</td>
- </tr>
- <tr>
- <td><code>data-multi-open</code></td>
- <td><code>true</code></td>
- <td>Allow the menu to have multiple open panes.</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="js-events" class="docs-heading">Events<a class="docs-heading-icon" href="#js-events"></a></h3>
-
- <p>These events will fire from any element with a Accordion Menu plugin attached.</p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>down.zf.accordionMenu</code></td>
- <td>Fires when the menu is done opening.</td>
- </tr>
- <tr>
- <td><code>up.zf.accordionMenu</code></td>
- <td>Fires when the menu is done collapsing up.</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="js-functions" class="docs-heading">Methods<a class="docs-heading-icon" href="#js-functions"></a></h3>
-
- <section>
- <h4 id="hideall" class="docs-heading">hideAll<a class="docs-heading-icon" href="#hideall"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'hideAll'</span>);</code></pre>
- </div>
-
- <p>Closes all panes of the menu.</p>
-
-
-
-
- <hr>
- </section>
- <section>
- <h4 id="toggle" class="docs-heading">toggle<a class="docs-heading-icon" href="#toggle"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'toggle'</span>, $target);</code></pre>
- </div>
-
- <p>Toggles the open/close state of a submenu.</p>
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$target</code></td>
- <td>jQuery</td>
- <td>the submenu to toggle</td>
- </tr>
- </table>
-
- <hr>
- </section>
- <section>
- <h4 id="down" class="docs-heading">down<a class="docs-heading-icon" href="#down"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'down'</span>, $target);</code></pre>
- </div>
-
- <p>Opens the sub-menu defined by <code>$target</code>.</p>
-
-
- <p><strong>Fires these events:</strong>
- AccordionMenu#event:down
- </p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$target</code></td>
- <td>jQuery</td>
- <td>Sub-menu to open.</td>
- </tr>
- </table>
-
- <hr>
- </section>
- <section>
- <h4 id="up" class="docs-heading">up<a class="docs-heading-icon" href="#up"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'up'</span>, $target);</code></pre>
- </div>
-
- <p>Closes the sub-menu defined by <code>$target</code>. All sub-menus inside the target will be closed as well.</p>
-
-
- <p><strong>Fires these events:</strong>
- AccordionMenu#event:up
- </p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$target</code></td>
- <td>jQuery</td>
- <td>Sub-menu to close.</td>
- </tr>
- </table>
-
- <hr>
- </section>
- <section>
- <h4 id="destroy" class="docs-heading">destroy<a class="docs-heading-icon" href="#destroy"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'destroy'</span>);</code></pre>
- </div>
-
- <p>Destroys an instance of accordion menu.</p>
-
-
- <p><strong>Fires these events:</strong>
- AccordionMenu#event:destroyed
- </p>
-
-
-
- </section>
- </section>
-</section>
-
-<!-- <hr> -->
-<!-- <section class="docs-building-blocks">
- <h2 id="building-blocks" class="docs-heading" data-magellan-target="building-blocks">Building Blocks<a class="docs-heading-icon" href="#building-blocks"></a></h2>
-
- <p><a href="http://zurb.com/building-blocks">Building Blocks</a> is a ZURB-curated resource with useful code snippets that use Foundation components. Here are a few for this component:</p>
-
- <div class="warning callout">
- <p>These are placeholder items. If you have ideas for building blocks for this component, <a href="https://github.com/zurb/foundation-sites-6/issues/118">we're taking ideas on GitHub</a>.</p>
- </div>
-
- <div data-building-blocks></div>
-</section> -->
-
-</div>
-
-<div class="large-3 columns" data-sticky-container>
- <nav class="columns docs-toc-wrap" data-sticky data-anchor="docs" data-sticky-on="large">
- <div class="docs-toc hide" id="docsTOC">
- <ul class="vertical menu" data-docs-toc>
- <li class="docs-nav-title">On this page:</li>
- </ul>
- </div>
- <div class="foundation-toc-ad-unit" id="TOCAdUnit">
- </div>
- </nav>
-</div>
-
-</div>
-
-</article>
-
- </div>
- <div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
- <ul class="vertical menu docs-nav" id="docs-menu">
- <p class="docs-nav-version">
- <span data-docs-version></span>
- <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">(Changelog)</a>
- </p>
-
- <li class="docs-nav-title">Getting Started</li>
- <li><a href="installation.html">Installation</a></li>
- <li><a href="starter-projects.html">Starter Projects</a></li>
- <li><a href="compatibility.html">Compatibility</a></li>
- <li><a href="accessibility.html">Accessibility</a></li>
- <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
-
- <li class="docs-nav-title">Setup</li>
- <li><a href="global.html">Global Styles</a></li>
- <li><a href="rtl.html">Right-to-Left Support</a></li>
- <li><a href="flexbox.html">Flexbox</a></li>
- <li><a href="sass.html">Sass</a></li>
- <li><a href="javascript.html">JavaScript</a></li>
- <li><a href="javascript-utilities.html">JavaScript Utilities</a></li>
- <li><a href="media-queries.html">Media Queries</a></li>
-
- <li class="docs-nav-title">General</li>
- <li><a href="grid.html">Grid</a></li>
- <li><a href="flex-grid.html">Flex Grid</a></li>
- <li><a href="forms.html">Forms</a></li>
- <li><a href="visibility.html">Visibility Classes</a></li>
- <li><a href="float-classes.html">Float Classes</a></li>
-
- <li class="docs-nav-title">Typography</li>
- <li><a href="typography-base.html">Base Styles</a></li>
- <li><a href="typography-helpers.html">Helper Classes</a></li>
-
- <li class="docs-nav-title">Controls</li>
- <li><a href="button.html">Button</a></li>
- <li><a href="button-group.html">Button Group</a></li>
- <li><a href="close-button.html">Close Button</a></li>
- <li><a href="slider.html">Slider <span class="label">JS</span></a></li>
- <li><a href="switch.html">Switch</a></li>
-
- <li class="docs-nav-title">Navigation</li>
- <li><a href="navigation.html">Overview</a></li>
- <li><a href="menu.html">Menu</a></li>
- <li><a href="dropdown-menu.html">Dropdown Menu <span class="label">JS</span></a></li>
- <li><a href="drilldown-menu.html">Drilldown Menu <span class="label">JS</span></a></li>
- <li class="current"><a href="accordion-menu.html">Accordion Menu <span class="label">JS</span></a></li>
- <li><a href="top-bar.html">Top Bar</a></li>
- <li><a href="responsive-navigation.html">Responsive Navigation</a></li>
- <li><a href="magellan.html">Magellan <span class="label">JS</span></a></li>
- <li><a href="pagination.html">Pagination</a></li>
- <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
-
- <li class="docs-nav-title">Containers</li>
- <li><a href="accordion.html">Accordion <span class="label">JS</span></a></li>
- <li><a href="callout.html">Callout</a></li>
- <li><a href="dropdown.html">Dropdown <span class="label">JS</span></a></li>
- <li><a href="media-object.html">Media Object</a></li>
- <li><a href="off-canvas.html">Off-canvas <span class="label">JS</span></a></li>
- <li><a href="reveal.html">Reveal <span class="label">JS</span> <small>Modal</small></a></li>
- <li><a href="table.html">Table</a></li>
- <li><a href="tabs.html">Tabs <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Media</li>
- <li><a href="badge.html">Badge</a></li>
- <li><a href="flex-video.html">Flex Video</a></li>
- <li><a href="label.html">Label</a></li>
- <li><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
- <li><a href="progress-bar.html">Progress Bar</a></li>
- <li><a href="thumbnail.html">Thumbnail</a></li>
- <li><a href="tooltip.html">Tooltip <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Plugins</li>
- <li><a href="abide.html">Abide <small>Form Validation</small></a></li>
- <li><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
- <li><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
- <li><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
- <li><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
-
- <li class="docs-nav-title">Sass</li>
- <li><a href="sass-functions.html">Functions</a></li>
- <li><a href="sass-mixins.html">Mixins</a></li>
-
- <li class="docs-nav-title">Libraries</li>
- <li><a href="motion-ui.html">Motion UI</a></li>
- <li><a href="panini.html">Panini</a></li>
- <li><a href="style-sherpa.html">Style Sherpa</a></li>
-
- <li class="docs-nav-title">Older Versions</li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
- <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
- <li><a href="https://get.foundation/sites/docs/v/3.2.5/">Foundation 3</a></li>
- <li><a href="https://get.foundation/sites/docs/v/2.2.1/">Foundation 2</a></li>
- </ul>
-
- </div>
- </div>
-
- <!-- Small Business(Docs) -->
- <section id="studiosCallout">
- <div class="row">
- <div class="medium-4 large-4 columns">
- <img src="https://get.foundation/assets/img/smallbiz-footer.svg" alt="">
- </div>
- <div class="medium-8 large-8 columns banner-info">
- <div class="row column property-label">ZURB Foundation</div>
- <h3 class="light">Yeah, we can help with that.</h3>
- <p class="lead"> We’ll collaborate with your team throughout the entire project life cycle. We’ll take your concept and move it through ideation, hi-fi wireframes, visual design and code, all while informing you on the whys and hows along the way.</p>
- <div class="course-buttons">
- <a href="https://get.foundation/get-involved/premium-support.html" class="studios button" data-zcom-event="studios_foundation_click" id="foundationSmallV1">Show Me How →</a>
- </div>
- </div>
- </div>
- </section>
-
- <div class="docs-newsletter">
- <div class="row">
- <div class="medium-7 large-8 columns">
- <a target="_blank" href="https://get.foundation/learn/responsive-reading.html">
- <h5 class="">Download ZURB’s 21 Responsive Trends That Will Shape 2017</h5>
- <p style="margin-bottom: 0;">Stay informed with amazing responsive trends each month from ZURB.</p>
- </a>
- </div>
- <div class="medium-5 large-4 footer-signup-form columns">
- <a style="margin-bottom: 0;" target="_blank" href="https://get.foundation/learn/responsive-reading.html" class="button expanded">Download the PDF</a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-top bg-fblue">
- <div class="row property">
- <div class="medium-4 columns">
- <div class="property-info">
- <h3>Foundation for Sites</h3>
- <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
- </p>
- </div>
- </div>
-
- <div class="medium-8 columns">
- <div class="row collapse">
- <div class="medium-4 columns">
- <div class="learn-links">
- <h4 class="hide-for-small">Want more?</h4>
- <ul>
- <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
- <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
- <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
- <li><a href="http://zurb.com/university/courses">Training</a></li>
- <li><a href="http://zurb.com/library">Design Resources</a></li>
- </ul>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="support-links">
- <h4 class="hide-for-small">Talk to us</h4>
- <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
- <p><a href="https://get.foundation/get-involved/contribute.html">Get involved in<br>our amazing community.</a></p>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="connect-links">
- <h4 class="hide-for-small">Stay Updated</h4>
- <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
- <a href="http://zurb.com/news" class="small button">Stay Connected</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="row global">
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/studios" class="footer-link-block services">
- <span class="title">Studios</span>
- <span>Helping more than 200 startups succeed since 1998.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="https://get.foundation/" class="footer-link-block foundation">
- <span class="title">Foundation</span>
- <span>The most advanced front-end framework in the world.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/notable" class="footer-link-block apps">
- <span class="title">Notable Design Apps</span>
- <span>Prototype, iterate and collect feedback on your products.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/university" class="footer-link-block expo">
- <span class="title">University</span>
- <span>Ideas, thoughts and design resources shared with you.</span>
- </a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-bottom">
- <div class="row">
- <div class="medium-4 medium-push-8 columns">
- <ul class="home-social">
- <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
- <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
- <li><a href="http://zurb.com/contact" class="mail"></a></li>
- </ul>
- </div>
- <div class="medium-8 medium-pull-4 columns">
- <a href="http://www.zurb.com" class="zurb-logo regular"></a>
- <ul class="zurb-links">
- <li><a href="http://zurb.com/about">About</a></li>
- <li><a href="http://zurb.com/blog">Blog</a></li>
- <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
- <li><a href="http://zurb.com/contact">Contact</a></li>
- <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
- </ul>
- <p class="copyright">© 1998‐2016 ZURB, Inc. All rights reserved.</p>
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- <script>
- var _gaq = _gaq || [];
- _gaq.push(
- ['_setAccount', 'UA-2195009-2'],
- ['_trackPageview'],
- ['b._setAccount', 'UA-2195009-27'],
- ['b._trackPageview']
- );
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
-
- <script src="assets/js/vendor.js?hash=658cb826540c98776e5bb7bca358c666"></script>
- <script src="assets/js/foundation.js?hash=2b29f44f6e191ebec40e37feb400e4be"></script>
- <script src="assets/js/docs.js?hash=4d01c03b77a3a95d07cfe0fc2ae213d3"></script>
- <script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
-</body>
-</html>
+++ /dev/null
-<!doctype html>
-<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
-<html class="no-js" lang="en" dir="ltr">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="Accordions are elements that help you organize and navigate multiple documents in a single container. They can be used for switching between items in the container.">
- <link rel="icon" href="assets/img/icons/foundation-favicon.ico" type="image/x-icon">
- <title>Foundation for Sites 6 Docs | Accordion</title>
- <link href="assets/css/docs.css?hash=9b60418363562049ac7fbd3c28cb8038" rel="stylesheet" />
- <link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=0f82b1f1e9876b4f0a9db79425768800" rel="stylesheet">
- <!-- <link rel="stylesheet" href="./node_modules/motion-ui/dist/motion-ui.css" /> -->
-</head>
-<body>
-
- <div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
-
- <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="mobile-ofc vertical menu">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
-
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/support.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/sort/unanswered">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
- </div>
-
- <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="vertical menu">
- <li><a href="#">Foundation</a></li>
- <li><a href="#">Dot</a></li>
- <li><a href="#">ZURB</a></li>
- <li><a href="#">Com</a></li>
- <li><a href="#">Slash</a></li>
- <li><a href="#">Sites</a></li>
- </ul>
- </div>
-
-
- <div class="off-canvas-content" data-off-canvas-content>
- <!-- Info Banner For Announcements or Links -->
- <!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
- <div class="info">
- <h5>Foundation 6 is here!</h5>
- </div>
- </a> -->
-
- <nav class="marketing-topbar show-for-medium">
-
- <ul class="menu">
- <li class="topbar-title"><a href="https://get.foundation/index.html"><img src="assets/img/logos/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
- </ul>
-
- <ul class="dropdown menu" data-dropdown-menu data-click-open="false">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/" target="_blank">F5 Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="https://get.foundation/emails/docs/" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
-
- </nav>
-
- <div class="title-bar hide-for-medium">
- <div class="title-bar-left">
- <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
- <span class="title-bar-title">Foundation</span>
- </div>
- </div>
-
-
- <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
-
- <div class="expanded row">
- <div class="medium-9 large-10 medium-push-3 large-push-2 columns">
-
-<article class="docs-component" id="docs-accordion">
-
-<a href="#docs-menu" class="small secondary expanded button hide-for-medium">Jump to Nav</a>
-
-<header>
- <h1 class="docs-page-title">Accordion</h1>
-
- <span data-tooltip title="Requires a JavaScript library." class="docs-js label">JavaScript</span>
-
- <p class="lead docs-page-lead">Accordions are elements that help you organize and navigate multiple documents in a single container. They can be used for switching between items in the container.</p>
-
- <ul class="menu simple docs-contribute-menu">
- <li><a href="https://github.com/zurb/foundation-sites/edit/master/docs/pages/accordion.md" target="_blank"><i class="fi-pencil"></i>Edit this Page</a></li>
- <li><a href="https://github.com/zurb/foundation-sites/issues/new?title=%5BAccordion%5D%20ISSUE%20NAME%20HERE" target="_blank"><i class="fi-social-github"></i>Report a Bug</a></li>
- <li><a href="https://get.foundation/forum" target="_blank"><i class="fi-comment"></i>Get Help</a></li>
- </ul>
-</header>
-
-<hr>
-
-<div class="row">
-
-<div class="large-9 columns" id="docs">
-
-<h2 id="basics" class="docs-heading" data-magellan-target="basics">Basics<a class="docs-heading-icon" href="#basics"></a></h2><p>The container for an accordion needs the class <code>.accordion</code>, and the attribute <code>data-accordion</code>. Note that in these examples, we use a <code><ul></code>, but you can use any element you want.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion"</span> <span class="hljs-attr">data-accordion</span>></span><span class="hljs-tag"></<span class="hljs-name">ul</span>></span></code></pre></div><p>Inside the accordion, place a series of panes with the class <code>.accordion-item</code> and the attribute <code>data-accordion-item</code>. To mark which pane should be open by default, add the class <code>.is-active</code> to that pane.</p>
-<p>Each pane has a <strong>title</strong>, an <code><a></code> with the class <code>.accordion-title</code>, and a <strong>content area</strong>, an element with the class <code>.accordion-content</code> and the attribute <code>data-tab-content</code>.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion"</span> <span class="hljs-attr">data-accordion</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion-item is-active"</span> <span class="hljs-attr">data-accordion-item</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion-title"</span>></span>Accordion 1<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion-content"</span> <span class="hljs-attr">data-tab-content</span>></span>
- I would start in the open state, due to using the `is-active` state class.
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-comment"><!-- ... --></span>
-<span class="hljs-tag"></<span class="hljs-name">ul</span>></span></code></pre></div><p>Once you put it all together, here's what you get!</p>
-<ul class="accordion" data-accordion>
- <li class="accordion-item is-active" data-accordion-item>
- <a href="#" class="accordion-title">Accordion 1</a>
- <div class="accordion-content" data-tab-content >
- <p>Panel 1. Lorem ipsum dolor</p>
- <a href="#">Nowhere to Go</a>
- </div>
- </li>
- <li class="accordion-item" data-accordion-item>
- <a href="#" class="accordion-title">Accordion 2</a>
- <div class="accordion-content" data-tab-content>
- <textarea></textarea>
- <button class="button">I do nothing!</button>
- </div>
- </li>
- <li class="accordion-item" data-accordion-item>
- <a href="#" class="accordion-title">Accordion 3</a>
- <div class="accordion-content" data-tab-content>
- Pick a date!
- <input type="date"></input>
- </div>
- </li>
-</ul>
-
-<hr>
-<h2 id="advanced-options" class="docs-heading" data-magellan-target="advanced-options">Advanced Options<a class="docs-heading-icon" href="#advanced-options"></a></h2><h3 id="multi-expand" class="docs-heading">Multi-expand<a class="docs-heading-icon" href="#multi-expand"></a></h3><p>By default, only one pane of an accordion can be open at a time. This can be changed by setting the <code>multiExpand</code> option to <code>true</code>.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion"</span> <span class="hljs-attr">data-accordion</span> <span class="hljs-attr">data-multi-expand</span>=<span class="hljs-string">"true"</span>></span>
- <span class="hljs-comment"><!-- ... --></span>
-<span class="hljs-tag"></<span class="hljs-name">ul</span>></span></code></pre></div><ul class="accordion" data-accordion data-multi-expand='true'>
- <li class="accordion-item is-active" data-accordion-item>
- <a href="#" class="accordion-title">Accordion 1</a>
- <div class="accordion-content" data-tab-content >
- Panel 1. Lorem ipsum dolor
- </div>
- </li>
- <li class="accordion-item" data-accordion-item>
- <a href="#" class="accordion-title">Accordion 2</a>
- <div class="accordion-content" data-tab-content>
- Panel 2. Lorem ipsum dolor
- </div>
- </li>
- <li class="accordion-item" data-accordion-item>
- <a href="#" class="accordion-title">Accordion 3</a>
- <div class="accordion-content" data-tab-content>
- Panel 3. Lorem ipsum dolor
- </div>
- </li>
-</ul>
-
-<hr>
-<h3 id="all-closed" class="docs-heading">All Closed<a class="docs-heading-icon" href="#all-closed"></a></h3><p>By default, at least one pane in an accordion must be open. This can be changed by setting <code>allowAllClosed</code> option to <code>true</code>.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion"</span> <span class="hljs-attr">data-accordion</span> <span class="hljs-attr">data-allow-all-closed</span>=<span class="hljs-string">"true"</span>></span>
- <span class="hljs-comment"><!-- ... --></span>
-<span class="hljs-tag"></<span class="hljs-name">ul</span>></span></code></pre></div><ul class="accordion" data-accordion data-allow-all-closed='true'>
- <li class="accordion-item is-active" data-accordion-item>
- <a href="#" class="accordion-title">Accordion 1</a>
- <div class="accordion-content" data-tab-content >
- Panel 1. Lorem ipsum dolor
- </div>
- </li>
- <li class="accordion-item" data-accordion-item>
- <a href="#" class="accordion-title">Accordion 2</a>
- <div class="accordion-content" data-tab-content>
- Panel 2. Lorem ipsum dolor
- </div>
- </li>
- <li class="accordion-item" data-accordion-item>
- <a href="#" class="accordion-title">Accordion 3</a>
- <div class="accordion-content" data-tab-content>
- Panel 3. Lorem ipsum dolor
- </div>
- </li>
-</ul>
-
-
-<hr>
-<section>
- <h2 id="sass-reference" class="docs-heading" data-magellan-target="sass-reference">Sass Reference<a class="docs-heading-icon" href="#sass-reference"></a></h2>
-
- <section>
- <h3 id="sass-variables" class="docs-heading">Variables<a class="docs-heading-icon" href="#sass-variables"></a></h3>
-
- <p>The default styles of this component can be customized using these Sass variables in your project's <a href="sass.html#the-settings-file">settings file</a>.</p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td class="name"><code>$accordion-background</code></td>
- <td>Color</td>
- <td class="color"><code>$white</code></td>
- <td><p>Default background color of an accordion group.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$accordion-plusminus</code></td>
- <td>Boolean</td>
- <td class="boolean"><code>true</code></td>
- <td><p>If <code>true</code>, adds plus and minus icons to the side of each accordion title.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$accordion-item-color</code></td>
- <td>Color</td>
- <td class="color"><code>foreground($accordion-background, $primary-color)</code></td>
- <td><p>Default text color for items in a Menu.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$accordion-item-background-hover</code></td>
- <td>Color</td>
- <td class="color"><code>$light-gray</code></td>
- <td><p>Default background color on hover for items in a Menu.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$accordion-item-padding</code></td>
- <td>Number or List</td>
- <td class="number | list"><code>1.25rem 1rem</code></td>
- <td><p>Default padding of an accordion item.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$accordion-content-background</code></td>
- <td>Color</td>
- <td class="color"><code>$white</code></td>
- <td><p>Default background color of tab content.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$accordion-content-border</code></td>
- <td>Color</td>
- <td class="color"><code>1px solid $light-gray</code></td>
- <td><p>Default border color of tab content.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$accordion-content-color</code></td>
- <td>Color</td>
- <td class="color"><code>foreground($accordion-content-background, $body-font-color)</code></td>
- <td><p>Default text color of tab content.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$accordion-content-padding</code></td>
- <td>Number or List</td>
- <td class="number | list"><code>1rem</code></td>
- <td><p>Default padding for tab content.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="sass-mixins" class="docs-heading">Mixins<a class="docs-heading-icon" href="#sass-mixins"></a></h3>
-
- <p>We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.</p>
-
-
- <section >
- <h4 id="accordion-container" class="docs-heading">accordion-container<a class="docs-heading-icon" href="#accordion-container"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> accordion-container;</code></pre>
- </div>
-
- <p>Adds styles for an accordion container. Apply this to the same element that gets <code>data-accordion</code>.</p>
-
-
-
-
-
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="accordion-item" class="docs-heading">accordion-item<a class="docs-heading-icon" href="#accordion-item"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> accordion-item;</code></pre>
- </div>
-
- <p>Adds styles for the accordion item. Apply this to the list item within an accordion ul.</p>
-
-
-
-
-
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="accordion-title" class="docs-heading">accordion-title<a class="docs-heading-icon" href="#accordion-title"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> accordion-title;</code></pre>
- </div>
-
- <p>Adds styles for the title of an accordion item. Apply this to the link within an accordion item.</p>
-
-
-
-
-
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="accordion-content" class="docs-heading">accordion-content<a class="docs-heading-icon" href="#accordion-content"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> accordion-content;</code></pre>
- </div>
-
- <p>Adds styles for accordion content. Apply this to the content pane below an accordion item's title.</p>
-
-
-
-
-
- </section>
-
-
-
-
-
- </section>
-
-
-</section>
-
-<hr>
-<section>
- <h2 id="javascript-reference" class="docs-heading" data-magellan-target="javascript-reference">JavaScript Reference<a class="docs-heading-icon" href="#javascript-reference"></a></h2>
-
-
- <section>
- <h3 id="js-module" class="docs-heading">Initializing<a class="docs-heading-icon" href="#js-module"></a></h3>
-
- <p>The file <code>foundation.accordion.js</code> must be included in your JavaScript to use this plugin, along with <code>foundation.core.js</code>. <strong>This plugin also requires these utility libraries:</strong></p>
-
-
- <ul>
- <li><code>foundation.util.keyboard.js</code></li>
- </ul>
-
- <ul>
- <li><code>foundation.util.motion.js</code></li>
- </ul>
-
-
- </section>
-
-
- <section>
- <h3 id="js-class" class="docs-heading">Foundation.Accordion<a class="docs-heading-icon" href="#js-class"></a></h3>
-
- <p>Creates a new instance of an accordion.</p>
-
-
- <div class="docs-code"><pre><code><span class="hljs-keyword">var</span> elem = <span class="hljs-keyword">new</span> Foundation.Accordion(element, options);</code></pre></div>
-
- <p><strong>Fires these events:</strong>
- Accordion#event:init
- </p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>element</code></td>
- <td>jQuery</td>
- <td>jQuery object to make into an accordion.</td>
- </tr>
- <tr>
- <td><code>options</code></td>
- <td>Object</td>
- <td>a plain object with settings to override the default options.</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="js-options" class="docs-heading">Plugin Options<a class="docs-heading-icon" href="#js-options"></a></h3>
-
- <p>Use these options to customize an instance of Accordion. Plugin options can be set as individual data attributes, one combined <code>data-options</code> attribute, or as an object passed to the plugin's constructor. <a href="javascript.html#initializing">Learn more about how JavaScript plugins are initialized.</a></p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Default</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>data-slide-speed</code></td>
- <td><code>250</code></td>
- <td>Amount of time to animate the opening of an accordion pane.</td>
- </tr>
- <tr>
- <td><code>data-multi-expand</code></td>
- <td><code>false</code></td>
- <td>Allow the accordion to have multiple open panes.</td>
- </tr>
- <tr>
- <td><code>data-allow-all-closed</code></td>
- <td><code>false</code></td>
- <td>Allow the accordion to close all panes.</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="js-events" class="docs-heading">Events<a class="docs-heading-icon" href="#js-events"></a></h3>
-
- <p>These events will fire from any element with a Accordion plugin attached.</p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>down.zf.accordion</code></td>
- <td>Fires when the tab is done opening.</td>
- </tr>
- <tr>
- <td><code>up.zf.accordion</code></td>
- <td>Fires when the tab is done collapsing up.</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="js-functions" class="docs-heading">Methods<a class="docs-heading-icon" href="#js-functions"></a></h3>
-
- <section>
- <h4 id="toggle" class="docs-heading">toggle<a class="docs-heading-icon" href="#toggle"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'toggle'</span>, $target);</code></pre>
- </div>
-
- <p>Toggles the selected content pane's open/close state.</p>
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$target</code></td>
- <td>jQuery</td>
- <td>jQuery object of the pane to toggle.</td>
- </tr>
- </table>
-
- <hr>
- </section>
- <section>
- <h4 id="down" class="docs-heading">down<a class="docs-heading-icon" href="#down"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'down'</span>, $target, firstTime);</code></pre>
- </div>
-
- <p>Opens the accordion tab defined by <code>$target</code>.</p>
-
-
- <p><strong>Fires these events:</strong>
- Accordion#event:down
- </p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$target</code></td>
- <td>jQuery</td>
- <td>Accordion pane to open.</td>
- </tr>
- <tr>
- <td><code>firstTime</code></td>
- <td>Boolean</td>
- <td>flag to determine if reflow should happen.</td>
- </tr>
- </table>
-
- <hr>
- </section>
- <section>
- <h4 id="up" class="docs-heading">up<a class="docs-heading-icon" href="#up"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'up'</span>, $target);</code></pre>
- </div>
-
- <p>Closes the tab defined by <code>$target</code>.</p>
-
-
- <p><strong>Fires these events:</strong>
- Accordion#event:up
- </p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$target</code></td>
- <td>jQuery</td>
- <td>Accordion tab to close.</td>
- </tr>
- </table>
-
- <hr>
- </section>
- <section>
- <h4 id="destroy" class="docs-heading">destroy<a class="docs-heading-icon" href="#destroy"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'destroy'</span>);</code></pre>
- </div>
-
- <p>Destroys an instance of an accordion.</p>
-
-
- <p><strong>Fires these events:</strong>
- Accordion#event:destroyed
- </p>
-
-
-
- </section>
- </section>
-</section>
-
-<!-- <hr> -->
-<!-- <section class="docs-building-blocks">
- <h2 id="building-blocks" class="docs-heading" data-magellan-target="building-blocks">Building Blocks<a class="docs-heading-icon" href="#building-blocks"></a></h2>
-
- <p><a href="http://zurb.com/building-blocks">Building Blocks</a> is a ZURB-curated resource with useful code snippets that use Foundation components. Here are a few for this component:</p>
-
- <div class="warning callout">
- <p>These are placeholder items. If you have ideas for building blocks for this component, <a href="https://github.com/zurb/foundation-sites-6/issues/118">we're taking ideas on GitHub</a>.</p>
- </div>
-
- <div data-building-blocks></div>
-</section> -->
-
-</div>
-
-<div class="large-3 columns" data-sticky-container>
- <nav class="columns docs-toc-wrap" data-sticky data-anchor="docs" data-sticky-on="large">
- <div class="docs-toc hide" id="docsTOC">
- <ul class="vertical menu" data-docs-toc>
- <li class="docs-nav-title">On this page:</li>
- </ul>
- </div>
- <div class="foundation-toc-ad-unit" id="TOCAdUnit">
- </div>
- </nav>
-</div>
-
-</div>
-
-</article>
-
- </div>
- <div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
- <ul class="vertical menu docs-nav" id="docs-menu">
- <p class="docs-nav-version">
- <span data-docs-version></span>
- <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">(Changelog)</a>
- </p>
-
- <li class="docs-nav-title">Getting Started</li>
- <li><a href="installation.html">Installation</a></li>
- <li><a href="starter-projects.html">Starter Projects</a></li>
- <li><a href="compatibility.html">Compatibility</a></li>
- <li><a href="accessibility.html">Accessibility</a></li>
- <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
-
- <li class="docs-nav-title">Setup</li>
- <li><a href="global.html">Global Styles</a></li>
- <li><a href="rtl.html">Right-to-Left Support</a></li>
- <li><a href="flexbox.html">Flexbox</a></li>
- <li><a href="sass.html">Sass</a></li>
- <li><a href="javascript.html">JavaScript</a></li>
- <li><a href="javascript-utilities.html">JavaScript Utilities</a></li>
- <li><a href="media-queries.html">Media Queries</a></li>
-
- <li class="docs-nav-title">General</li>
- <li><a href="grid.html">Grid</a></li>
- <li><a href="flex-grid.html">Flex Grid</a></li>
- <li><a href="forms.html">Forms</a></li>
- <li><a href="visibility.html">Visibility Classes</a></li>
- <li><a href="float-classes.html">Float Classes</a></li>
-
- <li class="docs-nav-title">Typography</li>
- <li><a href="typography-base.html">Base Styles</a></li>
- <li><a href="typography-helpers.html">Helper Classes</a></li>
-
- <li class="docs-nav-title">Controls</li>
- <li><a href="button.html">Button</a></li>
- <li><a href="button-group.html">Button Group</a></li>
- <li><a href="close-button.html">Close Button</a></li>
- <li><a href="slider.html">Slider <span class="label">JS</span></a></li>
- <li><a href="switch.html">Switch</a></li>
-
- <li class="docs-nav-title">Navigation</li>
- <li><a href="navigation.html">Overview</a></li>
- <li><a href="menu.html">Menu</a></li>
- <li><a href="dropdown-menu.html">Dropdown Menu <span class="label">JS</span></a></li>
- <li><a href="drilldown-menu.html">Drilldown Menu <span class="label">JS</span></a></li>
- <li><a href="accordion-menu.html">Accordion Menu <span class="label">JS</span></a></li>
- <li><a href="top-bar.html">Top Bar</a></li>
- <li><a href="responsive-navigation.html">Responsive Navigation</a></li>
- <li><a href="magellan.html">Magellan <span class="label">JS</span></a></li>
- <li><a href="pagination.html">Pagination</a></li>
- <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
-
- <li class="docs-nav-title">Containers</li>
- <li class="current"><a href="accordion.html">Accordion <span class="label">JS</span></a></li>
- <li><a href="callout.html">Callout</a></li>
- <li><a href="dropdown.html">Dropdown <span class="label">JS</span></a></li>
- <li><a href="media-object.html">Media Object</a></li>
- <li><a href="off-canvas.html">Off-canvas <span class="label">JS</span></a></li>
- <li><a href="reveal.html">Reveal <span class="label">JS</span> <small>Modal</small></a></li>
- <li><a href="table.html">Table</a></li>
- <li><a href="tabs.html">Tabs <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Media</li>
- <li><a href="badge.html">Badge</a></li>
- <li><a href="flex-video.html">Flex Video</a></li>
- <li><a href="label.html">Label</a></li>
- <li><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
- <li><a href="progress-bar.html">Progress Bar</a></li>
- <li><a href="thumbnail.html">Thumbnail</a></li>
- <li><a href="tooltip.html">Tooltip <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Plugins</li>
- <li><a href="abide.html">Abide <small>Form Validation</small></a></li>
- <li><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
- <li><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
- <li><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
- <li><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
-
- <li class="docs-nav-title">Sass</li>
- <li><a href="sass-functions.html">Functions</a></li>
- <li><a href="sass-mixins.html">Mixins</a></li>
-
- <li class="docs-nav-title">Libraries</li>
- <li><a href="motion-ui.html">Motion UI</a></li>
- <li><a href="panini.html">Panini</a></li>
- <li><a href="style-sherpa.html">Style Sherpa</a></li>
-
- <li class="docs-nav-title">Older Versions</li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
- <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
- <li><a href="https://get.foundation/sites/docs/v/3.2.5/">Foundation 3</a></li>
- <li><a href="https://get.foundation/sites/docs/v/2.2.1/">Foundation 2</a></li>
- </ul>
-
- </div>
- </div>
-
- <!-- Small Business(Docs) -->
- <section id="studiosCallout">
- <div class="row">
- <div class="medium-4 large-4 columns">
- <img src="https://get.foundation/assets/img/smallbiz-footer.svg" alt="">
- </div>
- <div class="medium-8 large-8 columns banner-info">
- <div class="row column property-label">ZURB Foundation</div>
- <h3 class="light">Yeah, we can help with that.</h3>
- <p class="lead"> We’ll collaborate with your team throughout the entire project life cycle. We’ll take your concept and move it through ideation, hi-fi wireframes, visual design and code, all while informing you on the whys and hows along the way.</p>
- <div class="course-buttons">
- <a href="https://get.foundation/get-involved/premium-support.html" class="studios button" data-zcom-event="studios_foundation_click" id="foundationSmallV1">Show Me How →</a>
- </div>
- </div>
- </div>
- </section>
-
- <div class="docs-newsletter">
- <div class="row">
- <div class="medium-7 large-8 columns">
- <a target="_blank" href="https://get.foundation/learn/responsive-reading.html">
- <h5 class="">Download ZURB’s 21 Responsive Trends That Will Shape 2017</h5>
- <p style="margin-bottom: 0;">Stay informed with amazing responsive trends each month from ZURB.</p>
- </a>
- </div>
- <div class="medium-5 large-4 footer-signup-form columns">
- <a style="margin-bottom: 0;" target="_blank" href="https://get.foundation/learn/responsive-reading.html" class="button expanded">Download the PDF</a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-top bg-fblue">
- <div class="row property">
- <div class="medium-4 columns">
- <div class="property-info">
- <h3>Foundation for Sites</h3>
- <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
- </p>
- </div>
- </div>
-
- <div class="medium-8 columns">
- <div class="row collapse">
- <div class="medium-4 columns">
- <div class="learn-links">
- <h4 class="hide-for-small">Want more?</h4>
- <ul>
- <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
- <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
- <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
- <li><a href="http://zurb.com/university/courses">Training</a></li>
- <li><a href="http://zurb.com/library">Design Resources</a></li>
- </ul>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="support-links">
- <h4 class="hide-for-small">Talk to us</h4>
- <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
- <p><a href="https://get.foundation/get-involved/contribute.html">Get involved in<br>our amazing community.</a></p>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="connect-links">
- <h4 class="hide-for-small">Stay Updated</h4>
- <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
- <a href="http://zurb.com/news" class="small button">Stay Connected</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="row global">
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/studios" class="footer-link-block services">
- <span class="title">Studios</span>
- <span>Helping more than 200 startups succeed since 1998.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="https://get.foundation/" class="footer-link-block foundation">
- <span class="title">Foundation</span>
- <span>The most advanced front-end framework in the world.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/notable" class="footer-link-block apps">
- <span class="title">Notable Design Apps</span>
- <span>Prototype, iterate and collect feedback on your products.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/university" class="footer-link-block expo">
- <span class="title">University</span>
- <span>Ideas, thoughts and design resources shared with you.</span>
- </a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-bottom">
- <div class="row">
- <div class="medium-4 medium-push-8 columns">
- <ul class="home-social">
- <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
- <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
- <li><a href="http://zurb.com/contact" class="mail"></a></li>
- </ul>
- </div>
- <div class="medium-8 medium-pull-4 columns">
- <a href="http://www.zurb.com" class="zurb-logo regular"></a>
- <ul class="zurb-links">
- <li><a href="http://zurb.com/about">About</a></li>
- <li><a href="http://zurb.com/blog">Blog</a></li>
- <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
- <li><a href="http://zurb.com/contact">Contact</a></li>
- <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
- </ul>
- <p class="copyright">© 1998‐2016 ZURB, Inc. All rights reserved.</p>
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- <script>
- var _gaq = _gaq || [];
- _gaq.push(
- ['_setAccount', 'UA-2195009-2'],
- ['_trackPageview'],
- ['b._setAccount', 'UA-2195009-27'],
- ['b._trackPageview']
- );
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
-
- <script src="assets/js/vendor.js?hash=213c9b77c5d00d60db6b4a727357b11b"></script>
- <script src="assets/js/foundation.js?hash=5a5e8f5eb5a6e8fa8f367a565c5cc4ef"></script>
- <script src="assets/js/docs.js?hash=ddbc3edd7274fe1f7cf220acf64e6034"></script>
- <script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
-</body>
-</html>
+++ /dev/null
-<!doctype html>
-<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
-<html class="no-js" lang="en" dir="ltr">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="The badge is a basic component that displays a number. It's useful for calling out a number of unread items.">
- <link rel="icon" href="assets/img/icons/foundation-favicon.ico" type="image/x-icon">
- <title>Foundation for Sites 6 Docs | Badge</title>
- <link href="assets/css/docs.css?hash=576d166a8e6e77f7d29d6ead831600af" rel="stylesheet" />
- <link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=f007842afeb0ddcc59e3a3f5dd29d78d" rel="stylesheet">
- <!-- <link rel="stylesheet" href="./node_modules/motion-ui/dist/motion-ui.css" /> -->
-</head>
-<body>
-
- <div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
-
- <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="mobile-ofc vertical menu">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
-
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/support.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/sort/unanswered">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
- </div>
-
- <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="vertical menu">
- <li><a href="#">Foundation</a></li>
- <li><a href="#">Dot</a></li>
- <li><a href="#">ZURB</a></li>
- <li><a href="#">Com</a></li>
- <li><a href="#">Slash</a></li>
- <li><a href="#">Sites</a></li>
- </ul>
- </div>
-
-
- <div class="off-canvas-content" data-off-canvas-content>
- <!-- Info Banner For Announcements or Links -->
- <!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
- <div class="info">
- <h5>Foundation 6 is here!</h5>
- </div>
- </a> -->
-
- <nav class="marketing-topbar show-for-medium">
-
- <ul class="menu">
- <li class="topbar-title"><a href="https://get.foundation/index.html"><img src="assets/img/logos/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
- </ul>
-
- <ul class="dropdown menu" data-dropdown-menu data-click-open="false">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/" target="_blank">F5 Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="https://get.foundation/emails/docs/" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
-
- </nav>
-
- <div class="title-bar hide-for-medium">
- <div class="title-bar-left">
- <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
- <span class="title-bar-title">Foundation</span>
- </div>
- </div>
-
-
- <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
-
- <div class="expanded row">
- <div class="medium-9 large-10 medium-push-3 large-push-2 columns">
-
-<article class="docs-component" id="docs-badge">
-
-<a href="#docs-menu" class="small secondary expanded button hide-for-medium">Jump to Nav</a>
-
-<header>
- <h1 class="docs-page-title">Badge</h1>
-
-
- <p class="lead docs-page-lead">The badge is a basic component that displays a number. It's useful for calling out a number of unread items.</p>
-
- <ul class="menu simple docs-contribute-menu">
- <li><a href="https://github.com/zurb/foundation-sites/edit/master/docs/pages/badge.md" target="_blank"><i class="fi-pencil"></i>Edit this Page</a></li>
- <li><a href="https://github.com/zurb/foundation-sites/issues/new?title=%5BBadge%5D%20ISSUE%20NAME%20HERE" target="_blank"><i class="fi-social-github"></i>Report a Bug</a></li>
- <li><a href="https://get.foundation/forum" target="_blank"><i class="fi-comment"></i>Get Help</a></li>
- </ul>
-</header>
-
-<hr>
-
-<div class="row">
-
-<div class="large-9 columns" id="docs">
-
-<h2 id="basics" class="docs-heading" data-magellan-target="basics">Basics<a class="docs-heading-icon" href="#basics"></a></h2><p>Add the <code>.badge</code> class to an element to create a badge. In the below example, we're using <code><span></code>, but any tag will work fine.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"badge"</span>></span>1<span class="hljs-tag"></<span class="hljs-name">span</span>></span></code></pre></div>
-
-<div class="docs-code-live"><span class="badge">1</span></div><p><br></p>
-<p>A badge will typically be describing another element on the page. To bind the two elements together, give the badge a unique ID, and reference that ID in an <code>aria-describedby</code> attribute on the main element.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">aria-describedby</span>=<span class="hljs-string">"messageCount"</span>></span>Unread Messages<span class="hljs-tag"></<span class="hljs-name">h1</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"badge"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"messageCount"</span>></span>1<span class="hljs-tag"></<span class="hljs-name">span</span>></span></code></pre></div><p>Finally, the content itself might need more context for users that use screen readers. You can add extra text inside the badge using the <code>.show-for-sr</code> class.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"badge"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"messageCount"</span>></span>1 <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"show-for-sr"</span>></span>unread message<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span></code></pre></div><hr>
-<h2 id="coloring" class="docs-heading" data-magellan-target="coloring">Coloring<a class="docs-heading-icon" href="#coloring"></a></h2><p>Badges can be colored with the same classes used for buttons and other components.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"secondary badge"</span>></span>2<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"success badge"</span>></span>3<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"alert badge"</span>></span>A<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"warning badge"</span>></span>B<span class="hljs-tag"></<span class="hljs-name">span</span>></span></code></pre></div>
-
-<div class="docs-code-live"><span class="secondary badge">2</span>
-<span class="success badge">3</span>
-<span class="alert badge">A</span>
-<span class="warning badge">B</span></div><hr>
-<h3 id="with-icons" class="docs-heading">With Icons<a class="docs-heading-icon" href="#with-icons"></a></h3><p>An icon can be used in place of text. We're using the <a href="http://zurb.com/playground/foundation-icon-fonts-3">Foundation icon font</a> here, but any icon fonts or image-based icons will work fine.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"info badge"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"fi-share"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"success badge"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"fi-check"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"warning badge"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"fi-wrench"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span></code></pre></div>
-
-<div class="docs-code-live"><span class="info badge"><i class="fi-share"></i></span>
-<span class="success badge"><i class="fi-check"></i></span>
-<span class="warning badge"><i class="fi-wrench"></i></span></div>
-
-<hr>
-<section>
- <h2 id="sass-reference" class="docs-heading" data-magellan-target="sass-reference">Sass Reference<a class="docs-heading-icon" href="#sass-reference"></a></h2>
-
- <section>
- <h3 id="sass-variables" class="docs-heading">Variables<a class="docs-heading-icon" href="#sass-variables"></a></h3>
-
- <p>The default styles of this component can be customized using these Sass variables in your project's <a href="sass.html#the-settings-file">settings file</a>.</p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td class="name"><code>$badge-background</code></td>
- <td>Color</td>
- <td class="color"><code>$primary-color</code></td>
- <td><p>Default background color for badges.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$badge-color</code></td>
- <td>Color</td>
- <td class="color"><code>foreground($badge-background)</code></td>
- <td><p>Default text color for badges.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$badge-padding</code></td>
- <td>Number</td>
- <td class="number"><code>0.3em</code></td>
- <td><p>Default padding inside badges.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$badge-minwidth</code></td>
- <td>Number</td>
- <td class="number"><code>2.1em</code></td>
- <td><p>Minimum width of a badge.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$badge-font-size</code></td>
- <td>Number</td>
- <td class="number"><code>0.6rem</code></td>
- <td><p>Default font size for badges.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="sass-mixins" class="docs-heading">Mixins<a class="docs-heading-icon" href="#sass-mixins"></a></h3>
-
- <p>We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.</p>
-
-
- <section >
- <h4 id="badge" class="docs-heading">badge<a class="docs-heading-icon" href="#badge"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> badge;</code></pre>
- </div>
-
- <p>Generates the base styles for a badge.</p>
-
-
-
-
-
- </section>
-
-
-
-
-
- </section>
-
-
-</section>
-
-
-<!-- <hr> -->
-<!-- <section class="docs-building-blocks">
- <h2 id="building-blocks" class="docs-heading" data-magellan-target="building-blocks">Building Blocks<a class="docs-heading-icon" href="#building-blocks"></a></h2>
-
- <p><a href="http://zurb.com/building-blocks">Building Blocks</a> is a ZURB-curated resource with useful code snippets that use Foundation components. Here are a few for this component:</p>
-
- <div class="warning callout">
- <p>These are placeholder items. If you have ideas for building blocks for this component, <a href="https://github.com/zurb/foundation-sites-6/issues/118">we're taking ideas on GitHub</a>.</p>
- </div>
-
- <div data-building-blocks></div>
-</section> -->
-
-</div>
-
-<div class="large-3 columns" data-sticky-container>
- <nav class="columns docs-toc-wrap" data-sticky data-anchor="docs" data-sticky-on="large">
- <div class="docs-toc hide" id="docsTOC">
- <ul class="vertical menu" data-docs-toc>
- <li class="docs-nav-title">On this page:</li>
- </ul>
- </div>
- <div class="foundation-toc-ad-unit" id="TOCAdUnit">
- </div>
- </nav>
-</div>
-
-</div>
-
-</article>
-
- </div>
- <div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
- <ul class="vertical menu docs-nav" id="docs-menu">
- <p class="docs-nav-version">
- <span data-docs-version></span>
- <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">(Changelog)</a>
- </p>
-
- <li class="docs-nav-title">Getting Started</li>
- <li><a href="installation.html">Installation</a></li>
- <li><a href="starter-projects.html">Starter Projects</a></li>
- <li><a href="compatibility.html">Compatibility</a></li>
- <li><a href="accessibility.html">Accessibility</a></li>
- <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
-
- <li class="docs-nav-title">Setup</li>
- <li><a href="global.html">Global Styles</a></li>
- <li><a href="rtl.html">Right-to-Left Support</a></li>
- <li><a href="flexbox.html">Flexbox</a></li>
- <li><a href="sass.html">Sass</a></li>
- <li><a href="javascript.html">JavaScript</a></li>
- <li><a href="javascript-utilities.html">JavaScript Utilities</a></li>
- <li><a href="media-queries.html">Media Queries</a></li>
-
- <li class="docs-nav-title">General</li>
- <li><a href="grid.html">Grid</a></li>
- <li><a href="flex-grid.html">Flex Grid</a></li>
- <li><a href="forms.html">Forms</a></li>
- <li><a href="visibility.html">Visibility Classes</a></li>
- <li><a href="float-classes.html">Float Classes</a></li>
-
- <li class="docs-nav-title">Typography</li>
- <li><a href="typography-base.html">Base Styles</a></li>
- <li><a href="typography-helpers.html">Helper Classes</a></li>
-
- <li class="docs-nav-title">Controls</li>
- <li><a href="button.html">Button</a></li>
- <li><a href="button-group.html">Button Group</a></li>
- <li><a href="close-button.html">Close Button</a></li>
- <li><a href="slider.html">Slider <span class="label">JS</span></a></li>
- <li><a href="switch.html">Switch</a></li>
-
- <li class="docs-nav-title">Navigation</li>
- <li><a href="navigation.html">Overview</a></li>
- <li><a href="menu.html">Menu</a></li>
- <li><a href="dropdown-menu.html">Dropdown Menu <span class="label">JS</span></a></li>
- <li><a href="drilldown-menu.html">Drilldown Menu <span class="label">JS</span></a></li>
- <li><a href="accordion-menu.html">Accordion Menu <span class="label">JS</span></a></li>
- <li><a href="top-bar.html">Top Bar</a></li>
- <li><a href="responsive-navigation.html">Responsive Navigation</a></li>
- <li><a href="magellan.html">Magellan <span class="label">JS</span></a></li>
- <li><a href="pagination.html">Pagination</a></li>
- <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
-
- <li class="docs-nav-title">Containers</li>
- <li><a href="accordion.html">Accordion <span class="label">JS</span></a></li>
- <li><a href="callout.html">Callout</a></li>
- <li><a href="dropdown.html">Dropdown <span class="label">JS</span></a></li>
- <li><a href="media-object.html">Media Object</a></li>
- <li><a href="off-canvas.html">Off-canvas <span class="label">JS</span></a></li>
- <li><a href="reveal.html">Reveal <span class="label">JS</span> <small>Modal</small></a></li>
- <li><a href="table.html">Table</a></li>
- <li><a href="tabs.html">Tabs <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Media</li>
- <li class="current"><a href="badge.html">Badge</a></li>
- <li><a href="flex-video.html">Flex Video</a></li>
- <li><a href="label.html">Label</a></li>
- <li><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
- <li><a href="progress-bar.html">Progress Bar</a></li>
- <li><a href="thumbnail.html">Thumbnail</a></li>
- <li><a href="tooltip.html">Tooltip <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Plugins</li>
- <li><a href="abide.html">Abide <small>Form Validation</small></a></li>
- <li><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
- <li><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
- <li><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
- <li><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
-
- <li class="docs-nav-title">Sass</li>
- <li><a href="sass-functions.html">Functions</a></li>
- <li><a href="sass-mixins.html">Mixins</a></li>
-
- <li class="docs-nav-title">Libraries</li>
- <li><a href="motion-ui.html">Motion UI</a></li>
- <li><a href="panini.html">Panini</a></li>
- <li><a href="style-sherpa.html">Style Sherpa</a></li>
-
- <li class="docs-nav-title">Older Versions</li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
- <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
- <li><a href="https://get.foundation/sites/docs/v/3.2.5/">Foundation 3</a></li>
- <li><a href="https://get.foundation/sites/docs/v/2.2.1/">Foundation 2</a></li>
- </ul>
-
- </div>
- </div>
-
- <!-- Small Business(Docs) -->
- <section id="studiosCallout">
- <div class="row">
- <div class="medium-4 large-4 columns">
- <img src="https://get.foundation/assets/img/smallbiz-footer.svg" alt="">
- </div>
- <div class="medium-8 large-8 columns banner-info">
- <div class="row column property-label">ZURB Foundation</div>
- <h3 class="light">Yeah, we can help with that.</h3>
- <p class="lead"> We’ll collaborate with your team throughout the entire project life cycle. We’ll take your concept and move it through ideation, hi-fi wireframes, visual design and code, all while informing you on the whys and hows along the way.</p>
- <div class="course-buttons">
- <a href="https://get.foundation/get-involved/premium-support.html" class="studios button" data-zcom-event="studios_foundation_click" id="foundationSmallV1">Show Me How →</a>
- </div>
- </div>
- </div>
- </section>
-
- <div class="docs-newsletter">
- <div class="row">
- <div class="medium-7 large-8 columns">
- <a target="_blank" href="https://get.foundation/learn/responsive-reading.html">
- <h5 class="">Download ZURB’s 21 Responsive Trends That Will Shape 2017</h5>
- <p style="margin-bottom: 0;">Stay informed with amazing responsive trends each month from ZURB.</p>
- </a>
- </div>
- <div class="medium-5 large-4 footer-signup-form columns">
- <a style="margin-bottom: 0;" target="_blank" href="https://get.foundation/learn/responsive-reading.html" class="button expanded">Download the PDF</a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-top bg-fblue">
- <div class="row property">
- <div class="medium-4 columns">
- <div class="property-info">
- <h3>Foundation for Sites</h3>
- <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
- </p>
- </div>
- </div>
-
- <div class="medium-8 columns">
- <div class="row collapse">
- <div class="medium-4 columns">
- <div class="learn-links">
- <h4 class="hide-for-small">Want more?</h4>
- <ul>
- <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
- <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
- <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
- <li><a href="http://zurb.com/university/courses">Training</a></li>
- <li><a href="http://zurb.com/library">Design Resources</a></li>
- </ul>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="support-links">
- <h4 class="hide-for-small">Talk to us</h4>
- <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
- <p><a href="https://get.foundation/get-involved/contribute.html">Get involved in<br>our amazing community.</a></p>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="connect-links">
- <h4 class="hide-for-small">Stay Updated</h4>
- <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
- <a href="http://zurb.com/news" class="small button">Stay Connected</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="row global">
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/studios" class="footer-link-block services">
- <span class="title">Studios</span>
- <span>Helping more than 200 startups succeed since 1998.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="https://get.foundation/" class="footer-link-block foundation">
- <span class="title">Foundation</span>
- <span>The most advanced front-end framework in the world.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/notable" class="footer-link-block apps">
- <span class="title">Notable Design Apps</span>
- <span>Prototype, iterate and collect feedback on your products.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/university" class="footer-link-block expo">
- <span class="title">University</span>
- <span>Ideas, thoughts and design resources shared with you.</span>
- </a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-bottom">
- <div class="row">
- <div class="medium-4 medium-push-8 columns">
- <ul class="home-social">
- <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
- <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
- <li><a href="http://zurb.com/contact" class="mail"></a></li>
- </ul>
- </div>
- <div class="medium-8 medium-pull-4 columns">
- <a href="http://www.zurb.com" class="zurb-logo regular"></a>
- <ul class="zurb-links">
- <li><a href="http://zurb.com/about">About</a></li>
- <li><a href="http://zurb.com/blog">Blog</a></li>
- <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
- <li><a href="http://zurb.com/contact">Contact</a></li>
- <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
- </ul>
- <p class="copyright">© 1998‐2016 ZURB, Inc. All rights reserved.</p>
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- <script>
- var _gaq = _gaq || [];
- _gaq.push(
- ['_setAccount', 'UA-2195009-2'],
- ['_trackPageview'],
- ['b._setAccount', 'UA-2195009-27'],
- ['b._trackPageview']
- );
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
-
- <script src="assets/js/vendor.js?hash=a9e3c3aee56ab9e2a0bb5c9d417180f7"></script>
- <script src="assets/js/foundation.js?hash=1c6870d43a08d0fbf2ecb830abe7e97f"></script>
- <script src="assets/js/docs.js?hash=6ebd982fc70b550b7f9b9af913e97292"></script>
- <script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
-</body>
-</html>
+++ /dev/null
-<!doctype html>
-<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
-<html class="no-js" lang="en" dir="ltr">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="Typography in Foundation 6 is meant to make your life easier by providing clean, attractive, simple default styles for all of the most basic typographical elements.">
- <link rel="icon" href="assets/img/icons/foundation-favicon.ico" type="image/x-icon">
- <title>Foundation for Sites 6 Docs | Base Typography</title>
- <link href="assets/css/docs.css?hash=13c710a91135c520c43f5d900f51058e" rel="stylesheet" />
- <link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=82eba1754451a3d99ee95c0f675d62ba" rel="stylesheet">
- <!-- <link rel="stylesheet" href="./node_modules/motion-ui/dist/motion-ui.css" /> -->
-</head>
-<body>
-
- <div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
-
- <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="mobile-ofc vertical menu">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
-
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/support.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/sort/unanswered">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
- </div>
-
- <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="vertical menu">
- <li><a href="#">Foundation</a></li>
- <li><a href="#">Dot</a></li>
- <li><a href="#">ZURB</a></li>
- <li><a href="#">Com</a></li>
- <li><a href="#">Slash</a></li>
- <li><a href="#">Sites</a></li>
- </ul>
- </div>
-
-
- <div class="off-canvas-content" data-off-canvas-content>
- <!-- Info Banner For Announcements or Links -->
- <!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
- <div class="info">
- <h5>Foundation 6 is here!</h5>
- </div>
- </a> -->
-
- <nav class="marketing-topbar show-for-medium">
-
- <ul class="menu">
- <li class="topbar-title"><a href="https://get.foundation/index.html"><img src="assets/img/logos/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
- </ul>
-
- <ul class="dropdown menu" data-dropdown-menu data-click-open="false">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/" target="_blank">F5 Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="https://get.foundation/emails/docs/" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
-
- </nav>
-
- <div class="title-bar hide-for-medium">
- <div class="title-bar-left">
- <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
- <span class="title-bar-title">Foundation</span>
- </div>
- </div>
-
-
- <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
-
- <div class="expanded row">
- <div class="medium-9 large-10 medium-push-3 large-push-2 columns">
-
-<article class="docs-component" id="docs-base-typography">
-
-<a href="#docs-menu" class="small secondary expanded button hide-for-medium">Jump to Nav</a>
-
-<header>
- <h1 class="docs-page-title">Base Typography</h1>
-
-
- <p class="lead docs-page-lead">Typography in Foundation 6 is meant to make your life easier by providing clean, attractive, simple default styles for all of the most basic typographical elements.</p>
-
- <ul class="menu simple docs-contribute-menu">
- <li><a href="https://github.com/zurb/foundation-sites/edit/master/docs/pages/base-typography.md" target="_blank"><i class="fi-pencil"></i>Edit this Page</a></li>
- <li><a href="https://github.com/zurb/foundation-sites/issues/new?title=%5BBase%20Typography%5D%20ISSUE%20NAME%20HERE" target="_blank"><i class="fi-social-github"></i>Report a Bug</a></li>
- <li><a href="https://get.foundation/forum" target="_blank"><i class="fi-comment"></i>Get Help</a></li>
- </ul>
-</header>
-
-<hr>
-
-<div class="row">
-
-<div class="large-9 columns" id="docs">
-
-<h2 id="paragraphs" class="docs-heading" data-magellan-target="paragraphs">Paragraphs<a class="docs-heading-icon" href="#paragraphs"></a></h2><p>This is a paragraph. Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm. To show what a paragraph looks like this needs a little more content—so, did you know that there are storms occurring on Jupiter that are larger than the Earth? Pretty cool. Use the <code><strong></code> and <code><em></code> tags to denote text that should be displayed or read with emphasis. Browsers will bold and italicize them, while screen readers will read the words with <em>emphasis</em>.</p>
-<div class="callout primary">
- <p>If the emphasis of a phrase is important, don't make the emphasis purely visual—use the <code><em></code> or <code><strong></code> tags to mark it as well. Both of these tags have built-in styles, but there's no harm in adding additional styles in specific contexts.</p>
-</div>
-
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">p</span>></span>This is a paragraph. Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm. To show what a paragraph looks like this needs a little more content so, did you know that there are storms occurring on Jupiter that are larger than the Earth? Pretty cool. Wrap strong around type to <span class="hljs-tag"><<span class="hljs-name">strong</span>></span>make it bold!<span class="hljs-tag"></<span class="hljs-name">strong</span>></span>. You can also use em to <span class="hljs-tag"><<span class="hljs-name">em</span>></span>italicize your words<span class="hljs-tag"></<span class="hljs-name">em</span>></span>.<span class="hljs-tag"></<span class="hljs-name">p</span>></span></code></pre></div><hr>
-<h2 id="header" class="docs-heading" data-magellan-target="header">Header<a class="docs-heading-icon" href="#header"></a></h2><p>Foundation includes styles for all headings—they're balanced and sized along a modular scale.</p>
-<div class="callout primary">
- <p>Avoid skipping heading levels when structuring your document, as it confuses screen readers. For example, after using an <code><h2></code> in your code, the next heading used should be either <code><h2></code> or <code><h3></code>. If you need a heading to look bigger or smaller to match a specific style, use CSS to override the default size.</p>
-</div>
-
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">h1</span>></span>h1. This is a very large header.<span class="hljs-tag"></<span class="hljs-name">h1</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">h2</span>></span>h2. This is a large header.<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">h3</span>></span>h3. This is a medium header.<span class="hljs-tag"></<span class="hljs-name">h3</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">h4</span>></span>h4. This is a moderate header.<span class="hljs-tag"></<span class="hljs-name">h4</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">h5</span>></span>h5. This is a small header.<span class="hljs-tag"></<span class="hljs-name">h5</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">h6</span>></span>h6. This is a tiny header.<span class="hljs-tag"></<span class="hljs-name">h6</span>></span></code></pre></div>
-
-<div class="docs-code-live"><h1>h1. This is a very large header.</h1>
-<h2>h2. This is a large header.</h2>
-<h3>h3. This is a medium header.</h3>
-<h4>h4. This is a moderate header.</h4>
-<h5>h5. This is a small header.</h5>
-<h6>h6. This is a tiny header.</h6></div><hr>
-<h3 id="header-sizes" class="docs-heading">Header Sizes<a class="docs-heading-icon" href="#header-sizes"></a></h3><p>The framework includes two typographic scales—one uses a narrow range of sizes for small-sized screens, and the other uses a wider range of sizes for medium- and large-sized screens. You can change these scales, or add new ones for other breakpoints, by editing the <code>$header-sizes</code> map in your project's <a href="sass.html#the-settings-file">Settings File</a>.</p>
-<table>
-<thead>
-<tr>
-<th>Header</th>
-<th>Default</th>
-<th>Medium and up</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td><code><h1></code></td>
-<td>24px</td>
-<td>48px</td>
-</tr>
-<tr>
-<td><code><h2></code></td>
-<td>20px</td>
-<td>40px </td>
-</tr>
-<tr>
-<td><code><h3></code></td>
-<td>19px</td>
-<td>31px</td>
-</tr>
-<tr>
-<td><code><h4></code></td>
-<td>18px</td>
-<td>25px</td>
-</tr>
-<tr>
-<td><code><h5></code></td>
-<td>17px</td>
-<td>20px</td>
-</tr>
-<tr>
-<td><code><h6></code></td>
-<td>16px</td>
-<td>16px</td>
-</tr>
-</tbody>
-</table>
-<hr>
-<h3 id="small-header-segments" class="docs-heading">Small Header Segments<a class="docs-heading-icon" href="#small-header-segments"></a></h3><p>By inserting a <code><small></code> element into a header Foundation will scale the header font size down for an inline element, allowing you to use this for subtitles or other secondary header text.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">h3</span>></span>Foundation for Sites <span class="hljs-tag"><<span class="hljs-name">small</span>></span>Version 6<span class="hljs-tag"></<span class="hljs-name">small</span>></span><span class="hljs-tag"></<span class="hljs-name">h3</span>></span></code></pre></div>
-
-<div class="docs-code-live"><h3>Foundation for Sites <small>Version 6</small></h3></div><hr>
-<h2 id="links" class="docs-heading" data-magellan-target="links">Links<a class="docs-heading-icon" href="#links"></a></h2><p>Links are very standard, and the color is preset to the Foundation primary color. <a href="global.html">Learn more about Foundation's global colors.</a></p>
-<div class="callout">
- <p>To make links screen reader-friendly, avoid using vague words like "here" or "read more" within link text. The text of the link itself should adequately describe where the link goes.</p>
-</div>
-
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">p</span>></span>Links are very standard, and the color is preset to the Foundation primary color. <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"global.html"</span>></span>Learn more about Foundation's global colors.<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">p</span>></span></code></pre></div><hr>
-<h2 id="dividers" class="docs-heading" data-magellan-target="dividers">Dividers<a class="docs-heading-icon" href="#dividers"></a></h2><p>Use dividers to define thematic breaks between paragraphs. To denote the end of one section of a page and the start of another, it's better to use the <code><section></code> tag.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">hr</span>></span></code></pre></div><hr>
-<h2 id="unordered-lists" class="docs-heading" data-magellan-target="unordered-lists">Unordered Lists<a class="docs-heading-icon" href="#unordered-lists"></a></h2><p>Use an unordered list to... <em>list things</em>, if the order of the items doesn't matter.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">ul</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>List item with a much longer description or more content.<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>List item<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>List item
- <span class="hljs-tag"><<span class="hljs-name">ul</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Nested list item<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Nested list item<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Nested list item<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>List item<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>List item<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>List item<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">ul</span>></span></code></pre></div>
-
-<div class="docs-code-live"><ul>
- <li>List item with a much longer description or more content.</li>
- <li>List item</li>
- <li>List item
- <ul>
- <li>Nested list item</li>
- <li>Nested list item</li>
- <li>Nested list item</li>
- </ul>
- </li>
- <li>List item</li>
- <li>List item</li>
- <li>List item</li>
-</ul></div><hr>
-<h2 id="ordered-lists" class="docs-heading" data-magellan-target="ordered-lists">Ordered Lists<a class="docs-heading-icon" href="#ordered-lists"></a></h2><p>Use an <code><ol></code> when creating a list where the order of the items is important, like ranking pizza toppings from best to worst.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">ol</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Cheese (essential)<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Pepperoni<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Bacon
- <span class="hljs-tag"><<span class="hljs-name">ol</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Normal bacon<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Canadian bacon<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">ol</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Sausage<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Onions<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Mushrooms<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">ol</span>></span></code></pre></div>
-
-<div class="docs-code-live"><ol>
- <li>Cheese (essential)</li>
- <li>Pepperoni</li>
- <li>Bacon
- <ol>
- <li>Normal bacon</li>
- <li>Canadian bacon</li>
- </ol>
- </li>
- <li>Sausage</li>
- <li>Onions</li>
- <li>Mushrooms</li>
-</ol></div><hr>
-<h2 id="definition-lists" class="docs-heading" data-magellan-target="definition-lists">Definition Lists<a class="docs-heading-icon" href="#definition-lists"></a></h2><p>A definition list (<code><dl></code>) is used to display name-value pairs, like metadata or a dictionary definition. Each term (<code><dt></code>) is paired with one or more definitions (<code><dd></code>).</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">dl</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">dt</span>></span>Time<span class="hljs-tag"></<span class="hljs-name">dt</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">dd</span>></span>The indefinite continued progress of existence and events in the past, present, and future regarded as a whole.<span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">dt</span>></span>Space<span class="hljs-tag"></<span class="hljs-name">dt</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">dd</span>></span>A continuous area or expanse that is free, available, or unoccupied.<span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">dd</span>></span>The dimensions of height, depth, and width within which all things exist and move.<span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">dl</span>></span></code></pre></div>
-
-<div class="docs-code-live"><dl>
- <dt>Time</dt>
- <dd>The indefinite continued progress of existence and events in the past, present, and future regarded as a whole.</dd>
- <dt>Space</dt>
- <dd>A continuous area or expanse that is free, available, or unoccupied.</dd>
- <dd>The dimensions of height, depth, and width within which all things exist and move.</dd>
-</dl></div><hr>
-<h2 id="blockquotes" class="docs-heading" data-magellan-target="blockquotes">Blockquotes<a class="docs-heading-icon" href="#blockquotes"></a></h2><p>Sometimes other people say smart things, and you may want to mention those things with a quote. We've got you covered.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">blockquote</span>></span>
- Those people who think they know everything are a great annoyance to those of us who do.
- <span class="hljs-tag"><<span class="hljs-name">cite</span>></span>Isaac Asimov<span class="hljs-tag"></<span class="hljs-name">cite</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">blockquote</span>></span></code></pre></div>
-
-<div class="docs-code-live"><blockquote>
- Those people who think they know everything are a great annoyance to those of us who do.
- <cite>Isaac Asimov</cite>
-</blockquote></div><hr>
-<h2 id="abbreviations" class="docs-heading" data-magellan-target="abbreviations">Abbreviations<a class="docs-heading-icon" href="#abbreviations"></a></h2><p>Use the <code><abbr></code> tag to annotate a shortened term. Abbreviations must always have a <code>title</code> attribute which clarifies the full term.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">p</span>></span>In my dream last night, I saw <span class="hljs-tag"><<span class="hljs-name">abbr</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"John Ronald Reuel"</span>></span>J. R. R.<span class="hljs-tag"></<span class="hljs-name">abbr</span>></span> Tolkien and George <span class="hljs-tag"><<span class="hljs-name">abbr</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Raymond Richard"</span>></span>R. R.<span class="hljs-tag"></<span class="hljs-name">abbr</span>></span> Martin hanging out on Sunset <span class="hljs-tag"><<span class="hljs-name">abbr</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Boulevard"</span>></span>Blvd<span class="hljs-tag"></<span class="hljs-name">abbr</span>></span>.<span class="hljs-tag"></<span class="hljs-name">p</span>></span></code></pre></div>
-
-<div class="docs-code-live"><p>In my dream last night, I saw <abbr title="John Ronald Reuel">J. R. R.</abbr> Tolkien and George <abbr title="Raymond Richard">R. R.</abbr> Martin hanging out on Sunset <abbr title="Boulevard">Blvd</abbr>.</p></div><hr>
-<h2 id="code" class="docs-heading" data-magellan-target="code">Code<a class="docs-heading-icon" href="#code"></a></h2><p>Format references to code with the <code><code></code> tag.</p>
-<div class="docs-code" data-docs-code><pre><code class="html">Remember to escape angle brackets when printing HTML: <span class="hljs-tag"><<span class="hljs-name">code</span>></span>&lt;div&gt;<span class="hljs-tag"></<span class="hljs-name">code</span>></span></code></pre></div>
-
-<div class="docs-code-live">Remember to escape angle brackets when printing HTML: <code><div></code></div><hr>
-<h2 id="keystrokes" class="docs-heading" data-magellan-target="keystrokes">Keystrokes<a class="docs-heading-icon" href="#keystrokes"></a></h2><p>Use the <code><kbd></code> element to annotate a key stroke or combination.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">p</span>></span>Press <span class="hljs-tag"><<span class="hljs-name">kbd</span>></span>Cmd+Q<span class="hljs-tag"></<span class="hljs-name">kbd</span>></span> (or <span class="hljs-tag"><<span class="hljs-name">kbd</span>></span>Ctrl+Q<span class="hljs-tag"></<span class="hljs-name">kbd</span>></span> on Windows) to play Half-Life 3.<span class="hljs-tag"></<span class="hljs-name">p</span>></span></code></pre></div>
-
-<div class="docs-code-live"><p>Press <kbd>Cmd+Q</kbd> (or <kbd>Ctrl+Q</kbd> on Windows) to play Half-Life 3.</p></div><hr>
-<h2 id="accessibility" class="docs-heading" data-magellan-target="accessibility">Accessibility<a class="docs-heading-icon" href="#accessibility"></a></h2><p>Text is core to the content of your page, so making it accessible to everyone is important. Here are some general guidelines to follow.</p>
-<h3 id="text-vs-images" class="docs-heading">Text vs. Images<a class="docs-heading-icon" href="#text-vs-images"></a></h3><p>Prefer using actual text over text inside a graphic. Assistive technologies can't read an image, and the text in an image can't be resized by a browser, like normal text. If an image has text that needs to be read, add it in the <code>alt</code> attribute of the image.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"assets/img/buy-now.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Buy now"</span>></span></code></pre></div><hr>
-<h3 id="contrast" class="docs-heading">Contrast<a class="docs-heading-icon" href="#contrast"></a></h3><p>The contrast between the color of an element's text and its background should be high enough that low-vision users can read it. <strong>The minimum recommended contrast ratio is 4.5:1.</strong> There are no automated tools that can effectively check this for you, but if you aren't sure about a specific color combination, you can run it through one of many color contrast checkers, such as <a href="http://webaim.org/resources/contrastchecker/">WebAIM's color contrast checker</a>.</p>
-<p>Google Chrome's <a href="https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb?hl=en">Accessibility Developer Tools</a> also includes a contrast checker. By selecting an element in the inspector, you can see if the contrast meets the minimum standards.</p>
-<p><img class="thumbnail" src="assets/img/a11y/chrome-a11y-inspector.jpg" alt="Screenshot of Google Chrome's Accessibility Tools"></p>
-<hr>
-<h3 id="type-size" class="docs-heading">Type Size<a class="docs-heading-icon" href="#type-size"></a></h3><p>When possible, use the <code>rem</code> and <code>em</code> units to size everything. Not just font size, but also padding, margins, and any length value. This ensures that your design scales up and down uniformly if the user changes their browser's text size. It's common for vision-impaired users to resize their browser up to 200% zoom.</p>
-<p>We use the <code>rem</code> unit nearly everywhere in Foundation, and even wrote a Sass function to make it a little easier. The <code>rem-calc()</code> function can take one or more pixel values and convert them to proper <code>rem</code> values.</p>
-<div class="docs-code" data-docs-code><pre><code class="scss"><span class="hljs-selector-class">.element</span> {
- <span class="hljs-attribute">width</span>: rem-calc(<span class="hljs-number">300</span>);
- <span class="hljs-attribute">padding</span>: rem-calc(<span class="hljs-number">10</span> <span class="hljs-number">16</span>);
-}</code></pre></div><hr>
-<h3 id="more-resources" class="docs-heading">More Resources<a class="docs-heading-icon" href="#more-resources"></a></h3><ul>
-<li><a href="http://webaim.org/techniques/fonts/">WebAIM: Fonts</a></li>
-<li><a href="http://webaim.org/techniques/hypertext/">WebAIM: Links and HyperText</a></li>
-<li><a href="http://webaim.org/techniques/semanticstructure/">WebAIM: Writing Clearly and Simply</a></li>
-<li><a href="http://webaim.org/resources/contrastchecker/">WebAIM: Color Contrast Checker</a></li>
-</ul>
-<hr>
-<h2 id="print-styles" class="docs-heading" data-magellan-target="print-styles">Print Styles<a class="docs-heading-icon" href="#print-styles"></a></h2><p>Foundation includes print styles developed by HTML5 Boilerplate to give you some basic print-specific styles. These are activated when you print through a media query. It includes:</p>
-<ul>
-<li>Clearing out backgrounds, box shadows and text shadows</li>
-<li>Appending link URLs after the anchor text</li>
-<li>Adding borders to <code><blockquote></code> and <code><pre></code> elements</li>
-<li>Page cleanup and window minimization</li>
-</ul>
-<p>On top of that, Foundation includes a couple of simple classes you can use to control elements printing, or not printing. Simply attach <code>.show-for-print</code> to an element to only show when printing, and <code>.hide-for-print</code> to hide something when printing.</p>
-
-
-<hr>
-<section>
- <h2 id="sass-reference" class="docs-heading" data-magellan-target="sass-reference">Sass Reference<a class="docs-heading-icon" href="#sass-reference"></a></h2>
-
- <section>
- <h3 id="sass-variables" class="docs-heading">Variables<a class="docs-heading-icon" href="#sass-variables"></a></h3>
-
- <p>The default styles of this component can be customized using these Sass variables in your project's <a href="sass.html#the-settings-file">settings file</a>.</p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td class="name"><code>$print-transparent-backgrounds</code></td>
- <td>Boolean</td>
- <td class="boolean"><code>true</code></td>
- <td><p>If <code>true</code>, all elements will have transparent backgrounds when printed, to save on ink.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$header-font-family</code></td>
- <td>String or List</td>
- <td class="string | list"><code>$body-font-family</code></td>
- <td><p>Font family for header elements.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$header-font-weight</code></td>
- <td>String</td>
- <td class="string"><code>$global-weight-normal</code></td>
- <td><p>Font weight of headers.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$header-font-style</code></td>
- <td>String</td>
- <td class="string"><code>normal</code></td>
- <td><p>Font style (e.g. italicized) of headers.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$font-family-monospace</code></td>
- <td>String or List</td>
- <td class="string | list"><code>Consolas, 'Liberation Mono', Courier, monospace</code></td>
- <td><p>Font stack used for elements that use monospaced type, such as code samples</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$header-sizes</code></td>
- <td>Map</td>
- <td class="map"><code>
- small: (
- 'h1': 24<br>
- 'h2': 20<br>
- 'h3': 19<br>
- 'h4': 18<br>
- 'h5': 17<br>
- 'h6': 16<br>
- )<br>
- medium: (
- 'h1': 48<br>
- 'h2': 40<br>
- 'h3': 31<br>
- 'h4': 25<br>
- 'h5': 20<br>
- 'h6': 16<br>
- )<br>
-</code></td>
- <td><p>Sizes of headings at various screen sizes. Each key is a breakpoint, and each value is a map of heading sizes.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$header-color</code></td>
- <td>Color</td>
- <td class="color"><code>inherit</code></td>
- <td><p>Color of headers.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$header-lineheight</code></td>
- <td>Number</td>
- <td class="number"><code>1.4</code></td>
- <td><p>Line height of headers.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$header-margin-bottom</code></td>
- <td>Number</td>
- <td class="number"><code>0.5rem</code></td>
- <td><p>Bottom margin of headers.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$header-text-rendering</code></td>
- <td>String</td>
- <td class="string"><code>optimizeLegibility</code></td>
- <td><p>Text rendering method of headers.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$small-font-size</code></td>
- <td>Number</td>
- <td class="number"><code>80%</code></td>
- <td><p>Font size of <code><small></code> elements.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$header-small-font-color</code></td>
- <td>Color</td>
- <td class="color"><code>$medium-gray</code></td>
- <td><p>Color of <code><small></code> elements when placed inside headers.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$paragraph-lineheight</code></td>
- <td>Number</td>
- <td class="number"><code>1.6</code></td>
- <td><p>Line height of text inside <code><p></code> elements.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$paragraph-margin-bottom</code></td>
- <td>Number</td>
- <td class="number"><code>1rem</code></td>
- <td><p>Bottom margin of paragraphs.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$paragraph-text-rendering</code></td>
- <td>String</td>
- <td class="string"><code>optimizeLegibility</code></td>
- <td><p>Text rendering method for paragraph text.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$code-color</code></td>
- <td>Color</td>
- <td class="color"><code>$black</code></td>
- <td><p>Text color of code samples.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$code-font-family</code></td>
- <td>String or List</td>
- <td class="string | list"><code>$font-family-monospace</code></td>
- <td><p>Font family of code samples.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$code-font-weight</code></td>
- <td>String</td>
- <td class="string"><code>$global-weight-normal</code></td>
- <td><p>Font weight of text in code samples.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$code-background</code></td>
- <td>Color</td>
- <td class="color"><code>$light-gray</code></td>
- <td><p>Background color of code samples.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$code-border</code></td>
- <td>List</td>
- <td class="list"><code>1px solid $medium-gray</code></td>
- <td><p>Border around code samples.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$code-padding</code></td>
- <td>Number or List</td>
- <td class="number | list"><code>rem-calc(2 5 1)</code></td>
- <td><p>Padding around text of code samples.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$anchor-color</code></td>
- <td>Color</td>
- <td class="color"><code>$primary-color</code></td>
- <td><p>Default color for links.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$anchor-color-hover</code></td>
- <td>Color</td>
- <td class="color"><code>scale-color($anchor-color, $lightness: -14%)</code></td>
- <td><p>Default color for links on hover.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$anchor-text-decoration</code></td>
- <td>String</td>
- <td class="string"><code>none</code></td>
- <td><p>Default text deocration for links.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$anchor-text-decoration-hover</code></td>
- <td>String</td>
- <td class="string"><code>none</code></td>
- <td><p>Default text decoration for links on hover.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$hr-width</code></td>
- <td>Number</td>
- <td class="number"><code>$global-width</code></td>
- <td><p>Maximum width of a divider.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$hr-border</code></td>
- <td>List</td>
- <td class="list"><code>1px solid $medium-gray</code></td>
- <td><p>Default border for a divider.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$hr-margin</code></td>
- <td>Number or List</td>
- <td class="number | list"><code>rem-calc(20) auto</code></td>
- <td><p>Default margin for a divider.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$list-lineheight</code></td>
- <td>Number</td>
- <td class="number"><code>$paragraph-lineheight</code></td>
- <td><p>Line height for items in a list.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$list-margin-bottom</code></td>
- <td>Number</td>
- <td class="number"><code>$paragraph-margin-bottom</code></td>
- <td><p>Bottom margin for items in a list.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$list-style-type</code></td>
- <td>String</td>
- <td class="string"><code>disc</code></td>
- <td><p>Bullet type to use for unordered lists (e.g., <code>square</code>, <code>circle</code>, <code>disc</code>).</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$list-style-position</code></td>
- <td>String</td>
- <td class="string"><code>outside</code></td>
- <td><p>Positioning for bullets on unordered list items.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$list-side-margin</code></td>
- <td>Number</td>
- <td class="number"><code>1.25rem</code></td>
- <td><p>Left (or right) margin for lists.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$list-nested-side-margin</code></td>
- <td>Number</td>
- <td class="number"><code>1.25rem</code></td>
- <td><p>Left (or right) margin for a list inside a list.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$defnlist-margin-bottom</code></td>
- <td>Number</td>
- <td class="number"><code>1rem</code></td>
- <td><p>Bottom margin for <code><dl></code> elements.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$defnlist-term-weight</code></td>
- <td>String</td>
- <td class="string"><code>$global-weight-bold</code></td>
- <td><p>Font weight for <code><dt></code> elements.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$defnlist-term-margin-bottom</code></td>
- <td>Number</td>
- <td class="number"><code>0.3rem</code></td>
- <td><p>Spacing between <code><dt></code> and <code><dd></code> elements.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$blockquote-color</code></td>
- <td>Color</td>
- <td class="color"><code>$dark-gray</code></td>
- <td><p>Text color of <code><blockquote></code> elements.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$blockquote-padding</code></td>
- <td>Number or List</td>
- <td class="number | list"><code>rem-calc(9 20 0 19)</code></td>
- <td><p>Padding inside a <code><blockquote></code> element.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$blockquote-border</code></td>
- <td>List</td>
- <td class="list"><code>1px solid $medium-gray</code></td>
- <td><p>Side border for <code><blockquote></code> elements.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$cite-font-size</code></td>
- <td>Number</td>
- <td class="number"><code>rem-calc(13)</code></td>
- <td><p>Font size for <code><cite></code> elements.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$cite-color</code></td>
- <td>Color</td>
- <td class="color"><code>$dark-gray</code></td>
- <td><p>Text color for <code><cite></code> elements.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$keystroke-font</code></td>
- <td>String or List</td>
- <td class="string | list"><code>$font-family-monospace</code></td>
- <td><p>Font family for <code><kbd></code> elements.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$keystroke-color</code></td>
- <td>Color</td>
- <td class="color"><code>$black</code></td>
- <td><p>Text color for <code><kbd></code> elements.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$keystroke-background</code></td>
- <td>Color</td>
- <td class="color"><code>$light-gray</code></td>
- <td><p>Background color for <code><kbd></code> elements.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$keystroke-padding</code></td>
- <td>Number or List</td>
- <td class="number | list"><code>rem-calc(2 4 0)</code></td>
- <td><p>Padding for <code><kbd></code> elements.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$keystroke-radius</code></td>
- <td>Number or List</td>
- <td class="number | list"><code>$global-radius</code></td>
- <td><p>Border radius for <code><kbd></code> elements.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$abbr-underline</code></td>
- <td>List</td>
- <td class="list"><code>1px dotted $black</code></td>
- <td><p>Bottom border style for <code><abbr></code> elements.</p>
-</td>
- </tr>
- </table>
- </section>
-
-
-
-</section>
-
-
-<!-- <hr> -->
-<!-- <section class="docs-building-blocks">
- <h2 id="building-blocks" class="docs-heading" data-magellan-target="building-blocks">Building Blocks<a class="docs-heading-icon" href="#building-blocks"></a></h2>
-
- <p><a href="http://zurb.com/building-blocks">Building Blocks</a> is a ZURB-curated resource with useful code snippets that use Foundation components. Here are a few for this component:</p>
-
- <div class="warning callout">
- <p>These are placeholder items. If you have ideas for building blocks for this component, <a href="https://github.com/zurb/foundation-sites-6/issues/118">we're taking ideas on GitHub</a>.</p>
- </div>
-
- <div data-building-blocks></div>
-</section> -->
-
-</div>
-
-<div class="large-3 columns" data-sticky-container>
- <nav class="columns docs-toc-wrap" data-sticky data-anchor="docs" data-sticky-on="large">
- <div class="docs-toc hide" id="docsTOC">
- <ul class="vertical menu" data-docs-toc>
- <li class="docs-nav-title">On this page:</li>
- </ul>
- </div>
- <div class="foundation-toc-ad-unit" id="TOCAdUnit">
- </div>
- </nav>
-</div>
-
-</div>
-
-</article>
-
- </div>
- <div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
- <ul class="vertical menu docs-nav" id="docs-menu">
- <p class="docs-nav-version">
- <span data-docs-version></span>
- <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">(Changelog)</a>
- </p>
-
- <li class="docs-nav-title">Getting Started</li>
- <li><a href="installation.html">Installation</a></li>
- <li><a href="starter-projects.html">Starter Projects</a></li>
- <li><a href="compatibility.html">Compatibility</a></li>
- <li><a href="accessibility.html">Accessibility</a></li>
- <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
-
- <li class="docs-nav-title">Setup</li>
- <li><a href="global.html">Global Styles</a></li>
- <li><a href="rtl.html">Right-to-Left Support</a></li>
- <li><a href="flexbox.html">Flexbox</a></li>
- <li><a href="sass.html">Sass</a></li>
- <li><a href="javascript.html">JavaScript</a></li>
- <li><a href="javascript-utilities.html">JavaScript Utilities</a></li>
- <li><a href="media-queries.html">Media Queries</a></li>
-
- <li class="docs-nav-title">General</li>
- <li><a href="grid.html">Grid</a></li>
- <li><a href="flex-grid.html">Flex Grid</a></li>
- <li><a href="forms.html">Forms</a></li>
- <li><a href="visibility.html">Visibility Classes</a></li>
- <li><a href="float-classes.html">Float Classes</a></li>
-
- <li class="docs-nav-title">Typography</li>
- <li><a href="typography-base.html">Base Styles</a></li>
- <li><a href="typography-helpers.html">Helper Classes</a></li>
-
- <li class="docs-nav-title">Controls</li>
- <li><a href="button.html">Button</a></li>
- <li><a href="button-group.html">Button Group</a></li>
- <li><a href="close-button.html">Close Button</a></li>
- <li><a href="slider.html">Slider <span class="label">JS</span></a></li>
- <li><a href="switch.html">Switch</a></li>
-
- <li class="docs-nav-title">Navigation</li>
- <li><a href="navigation.html">Overview</a></li>
- <li><a href="menu.html">Menu</a></li>
- <li><a href="dropdown-menu.html">Dropdown Menu <span class="label">JS</span></a></li>
- <li><a href="drilldown-menu.html">Drilldown Menu <span class="label">JS</span></a></li>
- <li><a href="accordion-menu.html">Accordion Menu <span class="label">JS</span></a></li>
- <li><a href="top-bar.html">Top Bar</a></li>
- <li><a href="responsive-navigation.html">Responsive Navigation</a></li>
- <li><a href="magellan.html">Magellan <span class="label">JS</span></a></li>
- <li><a href="pagination.html">Pagination</a></li>
- <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
-
- <li class="docs-nav-title">Containers</li>
- <li><a href="accordion.html">Accordion <span class="label">JS</span></a></li>
- <li><a href="callout.html">Callout</a></li>
- <li><a href="dropdown.html">Dropdown <span class="label">JS</span></a></li>
- <li><a href="media-object.html">Media Object</a></li>
- <li><a href="off-canvas.html">Off-canvas <span class="label">JS</span></a></li>
- <li><a href="reveal.html">Reveal <span class="label">JS</span> <small>Modal</small></a></li>
- <li><a href="table.html">Table</a></li>
- <li><a href="tabs.html">Tabs <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Media</li>
- <li><a href="badge.html">Badge</a></li>
- <li><a href="flex-video.html">Flex Video</a></li>
- <li><a href="label.html">Label</a></li>
- <li><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
- <li><a href="progress-bar.html">Progress Bar</a></li>
- <li><a href="thumbnail.html">Thumbnail</a></li>
- <li><a href="tooltip.html">Tooltip <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Plugins</li>
- <li><a href="abide.html">Abide <small>Form Validation</small></a></li>
- <li><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
- <li><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
- <li><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
- <li><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
-
- <li class="docs-nav-title">Sass</li>
- <li><a href="sass-functions.html">Functions</a></li>
- <li><a href="sass-mixins.html">Mixins</a></li>
-
- <li class="docs-nav-title">Libraries</li>
- <li><a href="motion-ui.html">Motion UI</a></li>
- <li><a href="panini.html">Panini</a></li>
- <li><a href="style-sherpa.html">Style Sherpa</a></li>
-
- <li class="docs-nav-title">Older Versions</li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
- <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
- <li><a href="https://get.foundation/sites/docs/v/3.2.5/">Foundation 3</a></li>
- <li><a href="https://get.foundation/sites/docs/v/2.2.1/">Foundation 2</a></li>
- </ul>
-
- </div>
- </div>
-
- <!-- Small Business(Docs) -->
- <section id="studiosCallout">
- <div class="row">
- <div class="medium-4 large-4 columns">
- <img src="https://get.foundation/assets/img/smallbiz-footer.svg" alt="">
- </div>
- <div class="medium-8 large-8 columns banner-info">
- <div class="row column property-label">ZURB Foundation</div>
- <h3 class="light">Yeah, we can help with that.</h3>
- <p class="lead"> We’ll collaborate with your team throughout the entire project life cycle. We’ll take your concept and move it through ideation, hi-fi wireframes, visual design and code, all while informing you on the whys and hows along the way.</p>
- <div class="course-buttons">
- <a href="https://get.foundation/get-involved/premium-support.html" class="studios button" data-zcom-event="studios_foundation_click" id="foundationSmallV1">Show Me How →</a>
- </div>
- </div>
- </div>
- </section>
-
- <div class="docs-newsletter">
- <div class="row">
- <div class="medium-7 large-8 columns">
- <a target="_blank" href="https://get.foundation/learn/responsive-reading.html">
- <h5 class="">Download ZURB’s 21 Responsive Trends That Will Shape 2017</h5>
- <p style="margin-bottom: 0;">Stay informed with amazing responsive trends each month from ZURB.</p>
- </a>
- </div>
- <div class="medium-5 large-4 footer-signup-form columns">
- <a style="margin-bottom: 0;" target="_blank" href="https://get.foundation/learn/responsive-reading.html" class="button expanded">Download the PDF</a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-top bg-fblue">
- <div class="row property">
- <div class="medium-4 columns">
- <div class="property-info">
- <h3>Foundation for Sites</h3>
- <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
- </p>
- </div>
- </div>
-
- <div class="medium-8 columns">
- <div class="row collapse">
- <div class="medium-4 columns">
- <div class="learn-links">
- <h4 class="hide-for-small">Want more?</h4>
- <ul>
- <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
- <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
- <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
- <li><a href="http://zurb.com/university/courses">Training</a></li>
- <li><a href="http://zurb.com/library">Design Resources</a></li>
- </ul>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="support-links">
- <h4 class="hide-for-small">Talk to us</h4>
- <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
- <p><a href="https://get.foundation/get-involved/contribute.html">Get involved in<br>our amazing community.</a></p>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="connect-links">
- <h4 class="hide-for-small">Stay Updated</h4>
- <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
- <a href="http://zurb.com/news" class="small button">Stay Connected</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="row global">
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/studios" class="footer-link-block services">
- <span class="title">Studios</span>
- <span>Helping more than 200 startups succeed since 1998.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="https://get.foundation/" class="footer-link-block foundation">
- <span class="title">Foundation</span>
- <span>The most advanced front-end framework in the world.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/notable" class="footer-link-block apps">
- <span class="title">Notable Design Apps</span>
- <span>Prototype, iterate and collect feedback on your products.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/university" class="footer-link-block expo">
- <span class="title">University</span>
- <span>Ideas, thoughts and design resources shared with you.</span>
- </a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-bottom">
- <div class="row">
- <div class="medium-4 medium-push-8 columns">
- <ul class="home-social">
- <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
- <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
- <li><a href="http://zurb.com/contact" class="mail"></a></li>
- </ul>
- </div>
- <div class="medium-8 medium-pull-4 columns">
- <a href="http://www.zurb.com" class="zurb-logo regular"></a>
- <ul class="zurb-links">
- <li><a href="http://zurb.com/about">About</a></li>
- <li><a href="http://zurb.com/blog">Blog</a></li>
- <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
- <li><a href="http://zurb.com/contact">Contact</a></li>
- <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
- </ul>
- <p class="copyright">© 1998‐2016 ZURB, Inc. All rights reserved.</p>
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- <script>
- var _gaq = _gaq || [];
- _gaq.push(
- ['_setAccount', 'UA-2195009-2'],
- ['_trackPageview'],
- ['b._setAccount', 'UA-2195009-27'],
- ['b._trackPageview']
- );
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
-
- <script src="assets/js/vendor.js?hash=5c23f3c3ca85b207b9ad50ee938ce8a3"></script>
- <script src="assets/js/foundation.js?hash=37c0c54522273b578b76064ecde17d49"></script>
- <script src="assets/js/docs.js?hash=6ff33fe8292ac7d76051a236f3e70d32"></script>
- <script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
-</body>
-</html>
+++ /dev/null
-<!doctype html>
-<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
-<html class="no-js" lang="en" dir="ltr">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="Breadcrumbs come in handy to show a navigation trail for users clicking through your site.">
- <link rel="icon" href="assets/img/icons/foundation-favicon.ico" type="image/x-icon">
- <title>Foundation for Sites 6 Docs | Breadcrumbs</title>
- <link href="assets/css/docs.css?hash=b26a03298ac134bfd27591e98c481ece" rel="stylesheet" />
- <link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=d98d83f21f6cceb3341faf581ab81a67" rel="stylesheet">
- <!-- <link rel="stylesheet" href="./node_modules/motion-ui/dist/motion-ui.css" /> -->
-</head>
-<body>
-
- <div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
-
- <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="mobile-ofc vertical menu">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
-
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/support.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/sort/unanswered">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
- </div>
-
- <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="vertical menu">
- <li><a href="#">Foundation</a></li>
- <li><a href="#">Dot</a></li>
- <li><a href="#">ZURB</a></li>
- <li><a href="#">Com</a></li>
- <li><a href="#">Slash</a></li>
- <li><a href="#">Sites</a></li>
- </ul>
- </div>
-
-
- <div class="off-canvas-content" data-off-canvas-content>
- <!-- Info Banner For Announcements or Links -->
- <!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
- <div class="info">
- <h5>Foundation 6 is here!</h5>
- </div>
- </a> -->
-
- <nav class="marketing-topbar show-for-medium">
-
- <ul class="menu">
- <li class="topbar-title"><a href="https://get.foundation/index.html"><img src="assets/img/logos/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
- </ul>
-
- <ul class="dropdown menu" data-dropdown-menu data-click-open="false">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/" target="_blank">F5 Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="https://get.foundation/emails/docs/" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
-
- </nav>
-
- <div class="title-bar hide-for-medium">
- <div class="title-bar-left">
- <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
- <span class="title-bar-title">Foundation</span>
- </div>
- </div>
-
-
- <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
-
- <div class="expanded row">
- <div class="medium-9 large-10 medium-push-3 large-push-2 columns">
-
-<article class="docs-component" id="docs-breadcrumbs">
-
-<a href="#docs-menu" class="small secondary expanded button hide-for-medium">Jump to Nav</a>
-
-<header>
- <h1 class="docs-page-title">Breadcrumbs</h1>
-
-
- <p class="lead docs-page-lead">Breadcrumbs come in handy to show a navigation trail for users clicking through your site.</p>
-
- <ul class="menu simple docs-contribute-menu">
- <li><a href="https://github.com/zurb/foundation-sites/edit/master/docs/pages/breadcrumbs.md" target="_blank"><i class="fi-pencil"></i>Edit this Page</a></li>
- <li><a href="https://github.com/zurb/foundation-sites/issues/new?title=%5BBreadcrumbs%5D%20ISSUE%20NAME%20HERE" target="_blank"><i class="fi-social-github"></i>Report a Bug</a></li>
- <li><a href="https://get.foundation/forum" target="_blank"><i class="fi-comment"></i>Get Help</a></li>
- </ul>
-</header>
-
-<hr>
-
-<div class="row">
-
-<div class="large-9 columns" id="docs">
-
-<p>To make a set of breadcrumb links, just add the class <code>.breadcrumbs</code> to a <code><ul></code>, and then add links inside of the <code><li></code> elements.</p>
-<p>The current page doesn't require a link or a class, but you should add some explanatory text for AT that indicates which item is the current page.</p>
-<p>To mark a disabled item, add the class <code>.disabled</code> to the <code><li></code>, and just use plain text instead of a link.</p>
-<div class="warning callout">
- <p>We use a CSS <code>::after</code> element containing a slash character to create the separator between items. Some screen readers will read this character out loud—if this is an issue, you can use a background image or a separate element with <code>aria-hidden="true"</code> to create the separator instead.</p>
-</div>
-
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">nav</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"You are here:"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"navigation"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"breadcrumbs"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Home<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Features<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"disabled"</span>></span>Gene Splicing<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"show-for-sr"</span>></span>Current: <span class="hljs-tag"></<span class="hljs-name">span</span>></span> Cloning
- <span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">nav</span>></span></code></pre></div>
-
-<div class="docs-code-live"><nav aria-label="You are here:" role="navigation">
- <ul class="breadcrumbs">
- <li><a href="#">Home</a></li>
- <li><a href="#">Features</a></li>
- <li class="disabled">Gene Splicing</li>
- <li>
- <span class="show-for-sr">Current: </span> Cloning
- </li>
- </ul>
-</nav></div>
-
-<hr>
-<section>
- <h2 id="sass-reference" class="docs-heading" data-magellan-target="sass-reference">Sass Reference<a class="docs-heading-icon" href="#sass-reference"></a></h2>
-
- <section>
- <h3 id="sass-variables" class="docs-heading">Variables<a class="docs-heading-icon" href="#sass-variables"></a></h3>
-
- <p>The default styles of this component can be customized using these Sass variables in your project's <a href="sass.html#the-settings-file">settings file</a>.</p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td class="name"><code>$breadcrumbs-margin</code></td>
- <td>Number</td>
- <td class="number"><code>0 0 $global-margin 0</code></td>
- <td><p>Margin around a breadcrumbs container.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$breadcrumbs-item-font-size</code></td>
- <td>Number</td>
- <td class="number"><code>rem-calc(11)</code></td>
- <td><p>Font size of breadcrumb links.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$breadcrumbs-item-color</code></td>
- <td>Color</td>
- <td class="color"><code>$primary-color</code></td>
- <td><p>Color of breadcrumb links.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$breadcrumbs-item-color-current</code></td>
- <td>Color</td>
- <td class="color"><code>$black</code></td>
- <td><p>Color of the active breadcrumb link.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$breadcrumbs-item-color-disabled</code></td>
- <td>Number</td>
- <td class="number"><code>$medium-gray</code></td>
- <td><p>Opacity of disabled breadcrumb links.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$breadcrumbs-item-margin</code></td>
- <td>Number</td>
- <td class="number"><code>0.75rem</code></td>
- <td><p>Margin between breadcrumb items.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$breadcrumbs-item-uppercase</code></td>
- <td>Boolean</td>
- <td class="boolean"><code>true</code></td>
- <td><p>If <code>true</code>, makes breadcrumb links uppercase.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$breadcrumbs-item-slash</code></td>
- <td>Boolean</td>
- <td class="boolean"><code>true</code></td>
- <td><p>If <code>true</code>, adds a slash between breadcrumb links.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="sass-mixins" class="docs-heading">Mixins<a class="docs-heading-icon" href="#sass-mixins"></a></h3>
-
- <p>We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.</p>
-
-
- <section >
- <h4 id="breadcrumbs-container" class="docs-heading">breadcrumbs-container<a class="docs-heading-icon" href="#breadcrumbs-container"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> breadcrumbs-container;</code></pre>
- </div>
-
- <p>Adds styles for a breadcrumbs container, along with the styles for the <code><li></code> and <code><a></code> elements inside of it.</p>
-
-
-
-
-
- </section>
-
-
-
-
-
- </section>
-
-
-</section>
-
-
-<!-- <hr> -->
-<!-- <section class="docs-building-blocks">
- <h2 id="building-blocks" class="docs-heading" data-magellan-target="building-blocks">Building Blocks<a class="docs-heading-icon" href="#building-blocks"></a></h2>
-
- <p><a href="http://zurb.com/building-blocks">Building Blocks</a> is a ZURB-curated resource with useful code snippets that use Foundation components. Here are a few for this component:</p>
-
- <div class="warning callout">
- <p>These are placeholder items. If you have ideas for building blocks for this component, <a href="https://github.com/zurb/foundation-sites-6/issues/118">we're taking ideas on GitHub</a>.</p>
- </div>
-
- <div data-building-blocks></div>
-</section> -->
-
-</div>
-
-<div class="large-3 columns" data-sticky-container>
- <nav class="columns docs-toc-wrap" data-sticky data-anchor="docs" data-sticky-on="large">
- <div class="docs-toc hide" id="docsTOC">
- <ul class="vertical menu" data-docs-toc>
- <li class="docs-nav-title">On this page:</li>
- </ul>
- </div>
- <div class="foundation-toc-ad-unit" id="TOCAdUnit">
- </div>
- </nav>
-</div>
-
-</div>
-
-</article>
-
- </div>
- <div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
- <ul class="vertical menu docs-nav" id="docs-menu">
- <p class="docs-nav-version">
- <span data-docs-version></span>
- <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">(Changelog)</a>
- </p>
-
- <li class="docs-nav-title">Getting Started</li>
- <li><a href="installation.html">Installation</a></li>
- <li><a href="starter-projects.html">Starter Projects</a></li>
- <li><a href="compatibility.html">Compatibility</a></li>
- <li><a href="accessibility.html">Accessibility</a></li>
- <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
-
- <li class="docs-nav-title">Setup</li>
- <li><a href="global.html">Global Styles</a></li>
- <li><a href="rtl.html">Right-to-Left Support</a></li>
- <li><a href="flexbox.html">Flexbox</a></li>
- <li><a href="sass.html">Sass</a></li>
- <li><a href="javascript.html">JavaScript</a></li>
- <li><a href="javascript-utilities.html">JavaScript Utilities</a></li>
- <li><a href="media-queries.html">Media Queries</a></li>
-
- <li class="docs-nav-title">General</li>
- <li><a href="grid.html">Grid</a></li>
- <li><a href="flex-grid.html">Flex Grid</a></li>
- <li><a href="forms.html">Forms</a></li>
- <li><a href="visibility.html">Visibility Classes</a></li>
- <li><a href="float-classes.html">Float Classes</a></li>
-
- <li class="docs-nav-title">Typography</li>
- <li><a href="typography-base.html">Base Styles</a></li>
- <li><a href="typography-helpers.html">Helper Classes</a></li>
-
- <li class="docs-nav-title">Controls</li>
- <li><a href="button.html">Button</a></li>
- <li><a href="button-group.html">Button Group</a></li>
- <li><a href="close-button.html">Close Button</a></li>
- <li><a href="slider.html">Slider <span class="label">JS</span></a></li>
- <li><a href="switch.html">Switch</a></li>
-
- <li class="docs-nav-title">Navigation</li>
- <li><a href="navigation.html">Overview</a></li>
- <li><a href="menu.html">Menu</a></li>
- <li><a href="dropdown-menu.html">Dropdown Menu <span class="label">JS</span></a></li>
- <li><a href="drilldown-menu.html">Drilldown Menu <span class="label">JS</span></a></li>
- <li><a href="accordion-menu.html">Accordion Menu <span class="label">JS</span></a></li>
- <li><a href="top-bar.html">Top Bar</a></li>
- <li><a href="responsive-navigation.html">Responsive Navigation</a></li>
- <li><a href="magellan.html">Magellan <span class="label">JS</span></a></li>
- <li><a href="pagination.html">Pagination</a></li>
- <li class="current"><a href="breadcrumbs.html">Breadcrumbs</a></li>
-
- <li class="docs-nav-title">Containers</li>
- <li><a href="accordion.html">Accordion <span class="label">JS</span></a></li>
- <li><a href="callout.html">Callout</a></li>
- <li><a href="dropdown.html">Dropdown <span class="label">JS</span></a></li>
- <li><a href="media-object.html">Media Object</a></li>
- <li><a href="off-canvas.html">Off-canvas <span class="label">JS</span></a></li>
- <li><a href="reveal.html">Reveal <span class="label">JS</span> <small>Modal</small></a></li>
- <li><a href="table.html">Table</a></li>
- <li><a href="tabs.html">Tabs <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Media</li>
- <li><a href="badge.html">Badge</a></li>
- <li><a href="flex-video.html">Flex Video</a></li>
- <li><a href="label.html">Label</a></li>
- <li><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
- <li><a href="progress-bar.html">Progress Bar</a></li>
- <li><a href="thumbnail.html">Thumbnail</a></li>
- <li><a href="tooltip.html">Tooltip <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Plugins</li>
- <li><a href="abide.html">Abide <small>Form Validation</small></a></li>
- <li><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
- <li><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
- <li><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
- <li><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
-
- <li class="docs-nav-title">Sass</li>
- <li><a href="sass-functions.html">Functions</a></li>
- <li><a href="sass-mixins.html">Mixins</a></li>
-
- <li class="docs-nav-title">Libraries</li>
- <li><a href="motion-ui.html">Motion UI</a></li>
- <li><a href="panini.html">Panini</a></li>
- <li><a href="style-sherpa.html">Style Sherpa</a></li>
-
- <li class="docs-nav-title">Older Versions</li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
- <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
- <li><a href="https://get.foundation/sites/docs/v/3.2.5/">Foundation 3</a></li>
- <li><a href="https://get.foundation/sites/docs/v/2.2.1/">Foundation 2</a></li>
- </ul>
-
- </div>
- </div>
-
- <!-- Small Business(Docs) -->
- <section id="studiosCallout">
- <div class="row">
- <div class="medium-4 large-4 columns">
- <img src="https://get.foundation/assets/img/smallbiz-footer.svg" alt="">
- </div>
- <div class="medium-8 large-8 columns banner-info">
- <div class="row column property-label">ZURB Foundation</div>
- <h3 class="light">Yeah, we can help with that.</h3>
- <p class="lead"> We’ll collaborate with your team throughout the entire project life cycle. We’ll take your concept and move it through ideation, hi-fi wireframes, visual design and code, all while informing you on the whys and hows along the way.</p>
- <div class="course-buttons">
- <a href="https://get.foundation/get-involved/premium-support.html" class="studios button" data-zcom-event="studios_foundation_click" id="foundationSmallV1">Show Me How →</a>
- </div>
- </div>
- </div>
- </section>
-
- <div class="docs-newsletter">
- <div class="row">
- <div class="medium-7 large-8 columns">
- <a target="_blank" href="https://get.foundation/learn/responsive-reading.html">
- <h5 class="">Download ZURB’s 21 Responsive Trends That Will Shape 2017</h5>
- <p style="margin-bottom: 0;">Stay informed with amazing responsive trends each month from ZURB.</p>
- </a>
- </div>
- <div class="medium-5 large-4 footer-signup-form columns">
- <a style="margin-bottom: 0;" target="_blank" href="https://get.foundation/learn/responsive-reading.html" class="button expanded">Download the PDF</a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-top bg-fblue">
- <div class="row property">
- <div class="medium-4 columns">
- <div class="property-info">
- <h3>Foundation for Sites</h3>
- <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
- </p>
- </div>
- </div>
-
- <div class="medium-8 columns">
- <div class="row collapse">
- <div class="medium-4 columns">
- <div class="learn-links">
- <h4 class="hide-for-small">Want more?</h4>
- <ul>
- <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
- <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
- <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
- <li><a href="http://zurb.com/university/courses">Training</a></li>
- <li><a href="http://zurb.com/library">Design Resources</a></li>
- </ul>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="support-links">
- <h4 class="hide-for-small">Talk to us</h4>
- <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
- <p><a href="https://get.foundation/get-involved/contribute.html">Get involved in<br>our amazing community.</a></p>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="connect-links">
- <h4 class="hide-for-small">Stay Updated</h4>
- <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
- <a href="http://zurb.com/news" class="small button">Stay Connected</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="row global">
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/studios" class="footer-link-block services">
- <span class="title">Studios</span>
- <span>Helping more than 200 startups succeed since 1998.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="https://get.foundation/" class="footer-link-block foundation">
- <span class="title">Foundation</span>
- <span>The most advanced front-end framework in the world.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/notable" class="footer-link-block apps">
- <span class="title">Notable Design Apps</span>
- <span>Prototype, iterate and collect feedback on your products.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/university" class="footer-link-block expo">
- <span class="title">University</span>
- <span>Ideas, thoughts and design resources shared with you.</span>
- </a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-bottom">
- <div class="row">
- <div class="medium-4 medium-push-8 columns">
- <ul class="home-social">
- <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
- <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
- <li><a href="http://zurb.com/contact" class="mail"></a></li>
- </ul>
- </div>
- <div class="medium-8 medium-pull-4 columns">
- <a href="http://www.zurb.com" class="zurb-logo regular"></a>
- <ul class="zurb-links">
- <li><a href="http://zurb.com/about">About</a></li>
- <li><a href="http://zurb.com/blog">Blog</a></li>
- <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
- <li><a href="http://zurb.com/contact">Contact</a></li>
- <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
- </ul>
- <p class="copyright">© 1998‐2016 ZURB, Inc. All rights reserved.</p>
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- <script>
- var _gaq = _gaq || [];
- _gaq.push(
- ['_setAccount', 'UA-2195009-2'],
- ['_trackPageview'],
- ['b._setAccount', 'UA-2195009-27'],
- ['b._trackPageview']
- );
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
-
- <script src="assets/js/vendor.js?hash=51c3b585ef63087577bc0e6d26b367e4"></script>
- <script src="assets/js/foundation.js?hash=f5efb1210bcc1fb20aaf6123b31bc303"></script>
- <script src="assets/js/docs.js?hash=ea6d1c78998b123d086f2460b82590b0"></script>
- <script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
-</body>
-</html>
+++ /dev/null
-<!doctype html>
-<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
-<html class="no-js" lang="en" dir="ltr">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="Button groups are containers for related action items. They're great when you need to display a group of actions in a bar. These build off the button styles and work perfectly with the grid.">
- <link rel="icon" href="assets/img/icons/foundation-favicon.ico" type="image/x-icon">
- <title>Foundation for Sites 6 Docs | Button Group</title>
- <link href="assets/css/docs.css?hash=8a443e471c4d514422a69d8757bc8012" rel="stylesheet" />
- <link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=2be61ef65adc3eb5cc28acaf8812958b" rel="stylesheet">
- <!-- <link rel="stylesheet" href="./node_modules/motion-ui/dist/motion-ui.css" /> -->
-</head>
-<body>
-
- <div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
-
- <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="mobile-ofc vertical menu">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
-
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/support.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/sort/unanswered">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
- </div>
-
- <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="vertical menu">
- <li><a href="#">Foundation</a></li>
- <li><a href="#">Dot</a></li>
- <li><a href="#">ZURB</a></li>
- <li><a href="#">Com</a></li>
- <li><a href="#">Slash</a></li>
- <li><a href="#">Sites</a></li>
- </ul>
- </div>
-
-
- <div class="off-canvas-content" data-off-canvas-content>
- <!-- Info Banner For Announcements or Links -->
- <!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
- <div class="info">
- <h5>Foundation 6 is here!</h5>
- </div>
- </a> -->
-
- <nav class="marketing-topbar show-for-medium">
-
- <ul class="menu">
- <li class="topbar-title"><a href="https://get.foundation/index.html"><img src="assets/img/logos/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
- </ul>
-
- <ul class="dropdown menu" data-dropdown-menu data-click-open="false">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/" target="_blank">F5 Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="https://get.foundation/emails/docs/" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
-
- </nav>
-
- <div class="title-bar hide-for-medium">
- <div class="title-bar-left">
- <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
- <span class="title-bar-title">Foundation</span>
- </div>
- </div>
-
-
- <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
-
- <div class="expanded row">
- <div class="medium-9 large-10 medium-push-3 large-push-2 columns">
-
-<article class="docs-component" id="docs-button-group">
-
-<a href="#docs-menu" class="small secondary expanded button hide-for-medium">Jump to Nav</a>
-
-<header>
- <h1 class="docs-page-title">Button Group</h1>
-
- <span data-tooltip title="Supports flexbox mode." class="docs-flex label"><a href="flexbox.html">Flexbox</a></span>
-
- <p class="lead docs-page-lead">Button groups are containers for related action items. They're great when you need to display a group of actions in a bar. These build off the button styles and work perfectly with the grid.</p>
-
- <ul class="menu simple docs-contribute-menu">
- <li><a href="https://github.com/zurb/foundation-sites/edit/master/docs/pages/button-group.md" target="_blank"><i class="fi-pencil"></i>Edit this Page</a></li>
- <li><a href="https://github.com/zurb/foundation-sites/issues/new?title=%5BButton%20Group%5D%20ISSUE%20NAME%20HERE" target="_blank"><i class="fi-social-github"></i>Report a Bug</a></li>
- <li><a href="https://get.foundation/forum" target="_blank"><i class="fi-comment"></i>Get Help</a></li>
- </ul>
-</header>
-
-<hr>
-
-<div class="row">
-
-<div class="large-9 columns" id="docs">
-
-<h2 id="basics" class="docs-heading" data-magellan-target="basics">Basics<a class="docs-heading-icon" href="#basics"></a></h2><p>Add the <code>.button-group</code> class to a container, and inside it place any number of buttons. The buttons are separated by a small border.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button-group"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button"</span>></span>One<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button"</span>></span>Two<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button"</span>></span>Three<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="button-group">
- <a class="button">One</a>
- <a class="button">Two</a>
- <a class="button">Three</a>
-</div></div><hr>
-<h2 id="sizing" class="docs-heading" data-magellan-target="sizing">Sizing<a class="docs-heading-icon" href="#sizing"></a></h2><p>Button groups can be sized with the same classes as standard buttons: <code>.tiny</code>, <code>.small</code>, and <code>.large</code>.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small button-group"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button"</span>></span>Small<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button"</span>></span>Button<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button"</span>></span>Group<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="small button-group">
- <a class="button">Small</a>
- <a class="button">Button</a>
- <a class="button">Group</a>
-</div></div><hr>
-<h2 id="coloring" class="docs-heading" data-magellan-target="coloring">Coloring<a class="docs-heading-icon" href="#coloring"></a></h2><p>Buttons within a button group can be colored individually with the <code>.secondary</code>, <code>.success</code>, <code>.warning</code>, and <code>.alert</code> classes.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button-group"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"secondary button"</span>></span>View<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"success button"</span>></span>Edit<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"warning button"</span>></span>Share<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"alert button"</span>></span>Delete<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="button-group">
- <a class="secondary button">View</a>
- <a class="success button">Edit</a>
- <a class="warning button">Share</a>
- <a class="alert button">Delete</a>
-</div></div><p>The entire group can also be colored using the same classes.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"secondary button-group"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button"</span>></span>Harder<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button"</span>></span>Better<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button"</span>></span>Faster<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button"</span>></span>Stronger<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="secondary button-group">
- <a class="button">Harder</a>
- <a class="button">Better</a>
- <a class="button">Faster</a>
- <a class="button">Stronger</a>
-</div></div><hr>
-<h2 id="even-width-group" class="docs-heading" data-magellan-target="even-width-group">Even-width Group<a class="docs-heading-icon" href="#even-width-group"></a></h2><p>Add the <code>.expanded</code> class to the container to make a full-width button group. Each item will automatically size itself based on how many buttons there are, up to a maximum of six.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"expanded button-group"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button"</span>></span>Expanded<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button"</span>></span>Button<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button"</span>></span>Group<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="expanded button-group">
- <a class="button">Expanded</a>
- <a class="button">Button</a>
- <a class="button">Group</a>
-</div></div><hr>
-<h2 id="stacking" class="docs-heading" data-magellan-target="stacking">Stacking<a class="docs-heading-icon" href="#stacking"></a></h2><p>A button group can be made vertical with the <code>.stacked</code> class. You can also use <code>.stacked-for-small</code> to only stack a button group on small screens, or <code>.stacked-for-medium</code> to only stack on small and medium screens.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"stacked-for-small button-group"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button"</span>></span>How<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button"</span>></span>Low<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button"</span>></span>Can<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button"</span>></span>You<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button"</span>></span>Go<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="stacked-for-small button-group">
- <a class="button">How</a>
- <a class="button">Low</a>
- <a class="button">Can</a>
- <a class="button">You</a>
- <a class="button">Go</a>
-</div></div><hr>
-<h2 id="split-buttons" class="docs-heading" data-magellan-target="split-buttons">Split Buttons<a class="docs-heading-icon" href="#split-buttons"></a></h2><p>To build a split button, just create a button group with two buttons.</p>
-<p>To create a button with only an arrow, add the class <code>.arrow-only</code>. Note that the button still needs a label for screen readers, which can be embedded inside the button with a <code>.show-for-sr</code> element. In the example below, an assistive device will read the arrow button as "Show menu".</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button-group"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button"</span>></span>Primary Action<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"dropdown button arrow-only"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"show-for-sr"</span>></span>Show menu<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">a</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="button-group">
- <a class="button">Primary Action</a>
- <a class="dropdown button arrow-only">
- <span class="show-for-sr">Show menu</span>
- </a>
-</div></div>
-
-<hr>
-<section>
- <h2 id="sass-reference" class="docs-heading" data-magellan-target="sass-reference">Sass Reference<a class="docs-heading-icon" href="#sass-reference"></a></h2>
-
- <section>
- <h3 id="sass-variables" class="docs-heading">Variables<a class="docs-heading-icon" href="#sass-variables"></a></h3>
-
- <p>The default styles of this component can be customized using these Sass variables in your project's <a href="sass.html#the-settings-file">settings file</a>.</p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td class="name"><code>$buttongroup-margin</code></td>
- <td>Number</td>
- <td class="number"><code>1rem</code></td>
- <td><p>Margin for button groups.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$buttongroup-spacing</code></td>
- <td>Border</td>
- <td class="border"><code>1px</code></td>
- <td><p>Margin between buttons in a button group.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$buttongroup-child-selector</code></td>
- <td>String</td>
- <td class="string"><code>'.button'</code></td>
- <td><p>Selector for the buttons inside a button group.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$buttongroup-expand-max</code></td>
- <td>Number</td>
- <td class="number"><code>6</code></td>
- <td><p>Maximum number of buttons that can be in an even-width button group.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="sass-mixins" class="docs-heading">Mixins<a class="docs-heading-icon" href="#sass-mixins"></a></h3>
-
- <p>We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.</p>
-
-
- <section >
- <h4 id="button-group" class="docs-heading">button-group<a class="docs-heading-icon" href="#button-group"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> button-group(<span class="hljs-variable">$child-selector</span>);</code></pre>
- </div>
-
- <p>Add styles for a button group container.</p>
-
-
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$child-selector</code></td>
- <td>String</td>
- <td><code>$buttongroup-child-selector</code></td>
- <td><p>Selector for the buttons inside a button group.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="button-group-expand" class="docs-heading">button-group-expand<a class="docs-heading-icon" href="#button-group-expand"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> button-group-expand(<span class="hljs-variable">$selector</span>);</code></pre>
- </div>
-
- <p>Creates a full-width button group, making each button equal width.</p>
-
-
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$selector</code></td>
- <td>String</td>
- <td><code>$buttongroup-child-selector</code></td>
- <td><p>Selector for the buttons inside a button group.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="button-group-stack" class="docs-heading">button-group-stack<a class="docs-heading-icon" href="#button-group-stack"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> button-group-stack(<span class="hljs-variable">$selector</span>);</code></pre>
- </div>
-
- <p>Stacks the buttons in a button group.</p>
-
-
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$selector</code></td>
- <td>String</td>
- <td><code>$buttongroup-child-selector</code></td>
- <td><p>Selector for the buttons inside the button group.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="button-group-unstack" class="docs-heading">button-group-unstack<a class="docs-heading-icon" href="#button-group-unstack"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> button-group-unstack(<span class="hljs-variable">$selector</span>);</code></pre>
- </div>
-
- <p>Un-stacks the buttons in a button group.</p>
-
-
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$selector</code></td>
- <td>String</td>
- <td><code>$buttongroup-child-selector</code></td>
- <td><p>Selector for the buttons inside the button group.</p>
-</td>
- </tr>
- </table>
- </section>
-
-
-
-
-
- </section>
-
-
-</section>
-
-
-<!-- <hr> -->
-<!-- <section class="docs-building-blocks">
- <h2 id="building-blocks" class="docs-heading" data-magellan-target="building-blocks">Building Blocks<a class="docs-heading-icon" href="#building-blocks"></a></h2>
-
- <p><a href="http://zurb.com/building-blocks">Building Blocks</a> is a ZURB-curated resource with useful code snippets that use Foundation components. Here are a few for this component:</p>
-
- <div class="warning callout">
- <p>These are placeholder items. If you have ideas for building blocks for this component, <a href="https://github.com/zurb/foundation-sites-6/issues/118">we're taking ideas on GitHub</a>.</p>
- </div>
-
- <div data-building-blocks></div>
-</section> -->
-
-</div>
-
-<div class="large-3 columns" data-sticky-container>
- <nav class="columns docs-toc-wrap" data-sticky data-anchor="docs" data-sticky-on="large">
- <div class="docs-toc hide" id="docsTOC">
- <ul class="vertical menu" data-docs-toc>
- <li class="docs-nav-title">On this page:</li>
- </ul>
- </div>
- <div class="foundation-toc-ad-unit" id="TOCAdUnit">
- </div>
- </nav>
-</div>
-
-</div>
-
-</article>
-
- </div>
- <div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
- <ul class="vertical menu docs-nav" id="docs-menu">
- <p class="docs-nav-version">
- <span data-docs-version></span>
- <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">(Changelog)</a>
- </p>
-
- <li class="docs-nav-title">Getting Started</li>
- <li><a href="installation.html">Installation</a></li>
- <li><a href="starter-projects.html">Starter Projects</a></li>
- <li><a href="compatibility.html">Compatibility</a></li>
- <li><a href="accessibility.html">Accessibility</a></li>
- <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
-
- <li class="docs-nav-title">Setup</li>
- <li><a href="global.html">Global Styles</a></li>
- <li><a href="rtl.html">Right-to-Left Support</a></li>
- <li><a href="flexbox.html">Flexbox</a></li>
- <li><a href="sass.html">Sass</a></li>
- <li><a href="javascript.html">JavaScript</a></li>
- <li><a href="javascript-utilities.html">JavaScript Utilities</a></li>
- <li><a href="media-queries.html">Media Queries</a></li>
-
- <li class="docs-nav-title">General</li>
- <li><a href="grid.html">Grid</a></li>
- <li><a href="flex-grid.html">Flex Grid</a></li>
- <li><a href="forms.html">Forms</a></li>
- <li><a href="visibility.html">Visibility Classes</a></li>
- <li><a href="float-classes.html">Float Classes</a></li>
-
- <li class="docs-nav-title">Typography</li>
- <li><a href="typography-base.html">Base Styles</a></li>
- <li><a href="typography-helpers.html">Helper Classes</a></li>
-
- <li class="docs-nav-title">Controls</li>
- <li><a href="button.html">Button</a></li>
- <li class="current"><a href="button-group.html">Button Group</a></li>
- <li><a href="close-button.html">Close Button</a></li>
- <li><a href="slider.html">Slider <span class="label">JS</span></a></li>
- <li><a href="switch.html">Switch</a></li>
-
- <li class="docs-nav-title">Navigation</li>
- <li><a href="navigation.html">Overview</a></li>
- <li><a href="menu.html">Menu</a></li>
- <li><a href="dropdown-menu.html">Dropdown Menu <span class="label">JS</span></a></li>
- <li><a href="drilldown-menu.html">Drilldown Menu <span class="label">JS</span></a></li>
- <li><a href="accordion-menu.html">Accordion Menu <span class="label">JS</span></a></li>
- <li><a href="top-bar.html">Top Bar</a></li>
- <li><a href="responsive-navigation.html">Responsive Navigation</a></li>
- <li><a href="magellan.html">Magellan <span class="label">JS</span></a></li>
- <li><a href="pagination.html">Pagination</a></li>
- <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
-
- <li class="docs-nav-title">Containers</li>
- <li><a href="accordion.html">Accordion <span class="label">JS</span></a></li>
- <li><a href="callout.html">Callout</a></li>
- <li><a href="dropdown.html">Dropdown <span class="label">JS</span></a></li>
- <li><a href="media-object.html">Media Object</a></li>
- <li><a href="off-canvas.html">Off-canvas <span class="label">JS</span></a></li>
- <li><a href="reveal.html">Reveal <span class="label">JS</span> <small>Modal</small></a></li>
- <li><a href="table.html">Table</a></li>
- <li><a href="tabs.html">Tabs <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Media</li>
- <li><a href="badge.html">Badge</a></li>
- <li><a href="flex-video.html">Flex Video</a></li>
- <li><a href="label.html">Label</a></li>
- <li><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
- <li><a href="progress-bar.html">Progress Bar</a></li>
- <li><a href="thumbnail.html">Thumbnail</a></li>
- <li><a href="tooltip.html">Tooltip <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Plugins</li>
- <li><a href="abide.html">Abide <small>Form Validation</small></a></li>
- <li><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
- <li><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
- <li><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
- <li><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
-
- <li class="docs-nav-title">Sass</li>
- <li><a href="sass-functions.html">Functions</a></li>
- <li><a href="sass-mixins.html">Mixins</a></li>
-
- <li class="docs-nav-title">Libraries</li>
- <li><a href="motion-ui.html">Motion UI</a></li>
- <li><a href="panini.html">Panini</a></li>
- <li><a href="style-sherpa.html">Style Sherpa</a></li>
-
- <li class="docs-nav-title">Older Versions</li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
- <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
- <li><a href="https://get.foundation/sites/docs/v/3.2.5/">Foundation 3</a></li>
- <li><a href="https://get.foundation/sites/docs/v/2.2.1/">Foundation 2</a></li>
- </ul>
-
- </div>
- </div>
-
- <!-- Small Business(Docs) -->
- <section id="studiosCallout">
- <div class="row">
- <div class="medium-4 large-4 columns">
- <img src="https://get.foundation/assets/img/smallbiz-footer.svg" alt="">
- </div>
- <div class="medium-8 large-8 columns banner-info">
- <div class="row column property-label">ZURB Foundation</div>
- <h3 class="light">Yeah, we can help with that.</h3>
- <p class="lead"> We’ll collaborate with your team throughout the entire project life cycle. We’ll take your concept and move it through ideation, hi-fi wireframes, visual design and code, all while informing you on the whys and hows along the way.</p>
- <div class="course-buttons">
- <a href="https://get.foundation/get-involved/premium-support.html" class="studios button" data-zcom-event="studios_foundation_click" id="foundationSmallV1">Show Me How →</a>
- </div>
- </div>
- </div>
- </section>
-
- <div class="docs-newsletter">
- <div class="row">
- <div class="medium-7 large-8 columns">
- <a target="_blank" href="https://get.foundation/learn/responsive-reading.html">
- <h5 class="">Download ZURB’s 21 Responsive Trends That Will Shape 2017</h5>
- <p style="margin-bottom: 0;">Stay informed with amazing responsive trends each month from ZURB.</p>
- </a>
- </div>
- <div class="medium-5 large-4 footer-signup-form columns">
- <a style="margin-bottom: 0;" target="_blank" href="https://get.foundation/learn/responsive-reading.html" class="button expanded">Download the PDF</a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-top bg-fblue">
- <div class="row property">
- <div class="medium-4 columns">
- <div class="property-info">
- <h3>Foundation for Sites</h3>
- <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
- </p>
- </div>
- </div>
-
- <div class="medium-8 columns">
- <div class="row collapse">
- <div class="medium-4 columns">
- <div class="learn-links">
- <h4 class="hide-for-small">Want more?</h4>
- <ul>
- <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
- <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
- <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
- <li><a href="http://zurb.com/university/courses">Training</a></li>
- <li><a href="http://zurb.com/library">Design Resources</a></li>
- </ul>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="support-links">
- <h4 class="hide-for-small">Talk to us</h4>
- <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
- <p><a href="https://get.foundation/get-involved/contribute.html">Get involved in<br>our amazing community.</a></p>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="connect-links">
- <h4 class="hide-for-small">Stay Updated</h4>
- <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
- <a href="http://zurb.com/news" class="small button">Stay Connected</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="row global">
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/studios" class="footer-link-block services">
- <span class="title">Studios</span>
- <span>Helping more than 200 startups succeed since 1998.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="https://get.foundation/" class="footer-link-block foundation">
- <span class="title">Foundation</span>
- <span>The most advanced front-end framework in the world.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/notable" class="footer-link-block apps">
- <span class="title">Notable Design Apps</span>
- <span>Prototype, iterate and collect feedback on your products.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/university" class="footer-link-block expo">
- <span class="title">University</span>
- <span>Ideas, thoughts and design resources shared with you.</span>
- </a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-bottom">
- <div class="row">
- <div class="medium-4 medium-push-8 columns">
- <ul class="home-social">
- <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
- <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
- <li><a href="http://zurb.com/contact" class="mail"></a></li>
- </ul>
- </div>
- <div class="medium-8 medium-pull-4 columns">
- <a href="http://www.zurb.com" class="zurb-logo regular"></a>
- <ul class="zurb-links">
- <li><a href="http://zurb.com/about">About</a></li>
- <li><a href="http://zurb.com/blog">Blog</a></li>
- <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
- <li><a href="http://zurb.com/contact">Contact</a></li>
- <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
- </ul>
- <p class="copyright">© 1998‐2016 ZURB, Inc. All rights reserved.</p>
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- <script>
- var _gaq = _gaq || [];
- _gaq.push(
- ['_setAccount', 'UA-2195009-2'],
- ['_trackPageview'],
- ['b._setAccount', 'UA-2195009-27'],
- ['b._trackPageview']
- );
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
-
- <script src="assets/js/vendor.js?hash=0a364ae55b46905a0bb14831e38bdfb7"></script>
- <script src="assets/js/foundation.js?hash=1880c2bbbeb81125271f2638303ce818"></script>
- <script src="assets/js/docs.js?hash=bd3587dc8d297ec092c7afc589437bd0"></script>
- <script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
-</body>
-</html>
+++ /dev/null
-<!doctype html>
-<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
-<html class="no-js" lang="en" dir="ltr">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="Buttons are convenient tools when you need more traditional actions. To that end, Foundation has many easy to use button styles that you can customize or override to fit your needs.">
- <link rel="icon" href="assets/img/icons/foundation-favicon.ico" type="image/x-icon">
- <title>Foundation for Sites 6 Docs | Button</title>
- <link href="assets/css/docs.css?hash=6e42914322920305688e77ff2f1c4a88" rel="stylesheet" />
- <link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=b5380a75a3c5f45208fa8dfe65d23480" rel="stylesheet">
- <!-- <link rel="stylesheet" href="./node_modules/motion-ui/dist/motion-ui.css" /> -->
-</head>
-<body>
-
- <div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
-
- <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="mobile-ofc vertical menu">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
-
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/support.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/sort/unanswered">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
- </div>
-
- <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="vertical menu">
- <li><a href="#">Foundation</a></li>
- <li><a href="#">Dot</a></li>
- <li><a href="#">ZURB</a></li>
- <li><a href="#">Com</a></li>
- <li><a href="#">Slash</a></li>
- <li><a href="#">Sites</a></li>
- </ul>
- </div>
-
-
- <div class="off-canvas-content" data-off-canvas-content>
- <!-- Info Banner For Announcements or Links -->
- <!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
- <div class="info">
- <h5>Foundation 6 is here!</h5>
- </div>
- </a> -->
-
- <nav class="marketing-topbar show-for-medium">
-
- <ul class="menu">
- <li class="topbar-title"><a href="https://get.foundation/index.html"><img src="assets/img/logos/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
- </ul>
-
- <ul class="dropdown menu" data-dropdown-menu data-click-open="false">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/" target="_blank">F5 Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="https://get.foundation/emails/docs/" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
-
- </nav>
-
- <div class="title-bar hide-for-medium">
- <div class="title-bar-left">
- <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
- <span class="title-bar-title">Foundation</span>
- </div>
- </div>
-
-
- <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
-
- <div class="expanded row">
- <div class="medium-9 large-10 medium-push-3 large-push-2 columns">
-
-<article class="docs-component" id="docs-button">
-
-<a href="#docs-menu" class="small secondary expanded button hide-for-medium">Jump to Nav</a>
-
-<header>
- <h1 class="docs-page-title">Button</h1>
-
-
- <p class="lead docs-page-lead">Buttons are convenient tools when you need more traditional actions. To that end, Foundation has many easy to use button styles that you can customize or override to fit your needs.</p>
-
- <ul class="menu simple docs-contribute-menu">
- <li><a href="https://github.com/zurb/foundation-sites/edit/master/docs/pages/button.md" target="_blank"><i class="fi-pencil"></i>Edit this Page</a></li>
- <li><a href="https://github.com/zurb/foundation-sites/issues/new?title=%5BButton%5D%20ISSUE%20NAME%20HERE" target="_blank"><i class="fi-social-github"></i>Report a Bug</a></li>
- <li><a href="https://get.foundation/forum" target="_blank"><i class="fi-comment"></i>Get Help</a></li>
- </ul>
-</header>
-
-<hr>
-
-<div class="row">
-
-<div class="large-9 columns" id="docs">
-
-<h2 id="basics" class="docs-heading" data-magellan-target="basics">Basics<a class="docs-heading-icon" href="#basics"></a></h2><p>A basic button can be created with minimal markup. Because buttons can be used for many purposes, it's important to use the right tag.</p>
-<ul>
-<li>Use the <code><a></code> tag if the button is a link to another page, or a link to an anchor within a page. Generally anchors don't require JavaScript to work.</li>
-<li>Use the <code><button></code> tag if the button performs an action that changes something on the current page. <code><button></code> elements almost always require JavaScript to function.</li>
-</ul>
-<div class="primary callout">
- <p>Add the attribute <code>type="button"</code> to <code><button></code> elements, unless the button submits a form, in which case you use <code>type="submit"</code></p>
-</div>
-
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-comment"><!-- Anchors (links) --></span>
-<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"about.html"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button"</span>></span>Learn More<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#features"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button"</span>></span>View All Features<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
-
-<span class="hljs-comment"><!-- Buttons (actions) --></span>
-<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"success button"</span>></span>Save<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"alert button"</span>></span>Delete<span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></pre></div>
-
-<div class="docs-code-live"><!-- Anchors (links) -->
-<a href="about.html" class="button">Learn More</a>
-<a href="#features" class="button">View All Features</a>
-
-<!-- Buttons (actions) -->
-<button type="button" class="success button">Save</button>
-<button type="button" class="alert button">Delete</button></div><hr>
-<h2 id="sizing" class="docs-heading" data-magellan-target="sizing">Sizing<a class="docs-heading-icon" href="#sizing"></a></h2><p>Additional classes can be added to your button to change its size and shape.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tiny button"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>So Tiny<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small button"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>So Small<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>So Basic<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"large button"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>So Large<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"expanded button"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Such Expand<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small expanded button"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Wow, Small Expand<span class="hljs-tag"></<span class="hljs-name">a</span>></span></code></pre></div>
-
-<div class="docs-code-live"><a class="tiny button" href="#">So Tiny</a>
-<a class="small button" href="#">So Small</a>
-<a class="button" href="#">So Basic</a>
-<a class="large button" href="#">So Large</a>
-<a class="expanded button" href="#">Such Expand</a>
-<a class="small expanded button" href="#">Wow, Small Expand</a></div><hr>
-<h2 id="coloring" class="docs-heading" data-magellan-target="coloring">Coloring<a class="docs-heading-icon" href="#coloring"></a></h2><p>Give a button additional meaning by adding a coloring class, or <code>.disabled</code> to create a faded appearance.</p>
-<div class="primary callout">
- <p>The <code>.disabled</code> class is a purely visual style, and won't actually disable a control. For <code><button></code> elements, you can add the <code>disabled</code> attribute to disable it. If you want to disable a link, you should add the <code>aria-disabled</code> attribute to mark it as disabled for assistive technology.</p>
-</div>
-
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"secondary button"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Secondary Color<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"success button"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Success Color<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"alert button"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Alert Color<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"warning button"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Warning Color<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"disabled button"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Disabled Button<span class="hljs-tag"></<span class="hljs-name">a</span>></span></code></pre></div>
-
-<div class="docs-code-live"><a class="secondary button" href="#">Secondary Color</a>
-<a class="success button" href="#">Success Color</a>
-<a class="alert button" href="#">Alert Color</a>
-<a class="warning button" href="#">Warning Color</a>
-<a class="disabled button" href="#">Disabled Button</a></div><hr>
-<h2 id="hollow-style" class="docs-heading" data-magellan-target="hollow-style">Hollow Style<a class="docs-heading-icon" href="#hollow-style"></a></h2><p>Add the <code>.hollow</code> class to a button to give it a hollow style. Change the <code>$button-fill</code> variable in your settings file to <code>hollow</code> to make this the default style. Changing this setting will remove the <code>.hollow</code> class from your CSS.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hollow button"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Primary Color<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"secondary hollow button"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Secondary Color<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"success hollow button"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Success Color<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"alert hollow button"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Alert Color<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"warning hollow button"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Warning Color<span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></pre></div>
-
-<div class="docs-code-live"><button class="hollow button" href="#">Primary Color</button>
-<button class="secondary hollow button" href="#">Secondary Color</button>
-<button class="success hollow button" href="#">Success Color</button>
-<button class="alert hollow button" href="#">Alert Color</button>
-<button class="warning hollow button" href="#">Warning Color</button></div><hr>
-<h2 id="dropdown-arrows" class="docs-heading" data-magellan-target="dropdown-arrows">Dropdown Arrows<a class="docs-heading-icon" href="#dropdown-arrows"></a></h2><p>Add a dropdown arrow to your button with the <code>.dropdown</code> class.</p>
-<div class="primary callout">
- <p>This doesn't add dropdown functionality automatically. To do that, you can attach our <a href="dropdown.html">Dropdown plugin</a>.</p>
-</div>
-
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tiny dropdown button"</span>></span>Dropdown Button<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small dropdown button"</span>></span>Dropdown Button<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"dropdown button"</span>></span>Dropdown Button<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"large dropdown button"</span>></span>Dropdown Button<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"expanded dropdown button"</span>></span>Dropdown Button<span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></pre></div>
-
-<div class="docs-code-live"><button class="tiny dropdown button">Dropdown Button</button>
-<button class="small dropdown button">Dropdown Button</button>
-<button class="dropdown button">Dropdown Button</button>
-<button class="large dropdown button">Dropdown Button</button>
-<button class="expanded dropdown button">Dropdown Button</button></div><hr>
-<h2 id="accessibility" class="docs-heading" data-magellan-target="accessibility">Accessibility<a class="docs-heading-icon" href="#accessibility"></a></h2><p>Make sure that the text of the button is descriptive. If for some reason, your button contains no readable text (for example, just a symbol or icon), add screen reader-only text to the button to clarify it's purpose. The symbol or icon should be wrapped in an element with the attribute <code>aria-hidden="true"</code>, to prevent screen readers from trying to pronounce the symbol.</p>
-<p>Use the <code>.show-for-sr</code> class to define screen reader-only text.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span>></span>
- <span class="hljs-comment"><!-- Screen readers will see "close" --></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"show-for-sr"</span>></span>Close<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
- <span class="hljs-comment"><!-- Visual users will see the X, but not the "Close" text --></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">aria-hidden</span>=<span class="hljs-string">"true"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"fi-x"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></pre></div>
-
-<div class="docs-code-live"><button class="button" type="button">
- <!-- Screen readers will see "close" -->
- <span class="show-for-sr">Close</span>
- <!-- Visual users will see the X, but not the "Close" text -->
- <span aria-hidden="true"><i class="fi-x"></i></span>
-</button></div>
-
-<hr>
-<section>
- <h2 id="sass-reference" class="docs-heading" data-magellan-target="sass-reference">Sass Reference<a class="docs-heading-icon" href="#sass-reference"></a></h2>
-
- <section>
- <h3 id="sass-variables" class="docs-heading">Variables<a class="docs-heading-icon" href="#sass-variables"></a></h3>
-
- <p>The default styles of this component can be customized using these Sass variables in your project's <a href="sass.html#the-settings-file">settings file</a>.</p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td class="name"><code>$button-padding</code></td>
- <td>List</td>
- <td class="list"><code>0.85em 1em</code></td>
- <td><p>Padding inside buttons.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$button-margin</code></td>
- <td>List</td>
- <td class="list"><code>0 0 $global-margin 0</code></td>
- <td><p>Margin around buttons.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$button-fill</code></td>
- <td>Keyword</td>
- <td class="keyword"><code>solid</code></td>
- <td><p>Default fill for buttons. Can either be <code>solid</code> or <code>hollow</code>.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$button-background</code></td>
- <td>Color</td>
- <td class="color"><code>$primary-color</code></td>
- <td><p>Default background color for buttons.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$button-background-hover</code></td>
- <td>Color</td>
- <td class="color"><code>scale-color($button-background, $lightness: -15%)</code></td>
- <td><p>Background color on hover for buttons.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$button-color</code></td>
- <td>List</td>
- <td class="list"><code>$white</code></td>
- <td><p>Font color for buttons.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$button-color-alt</code></td>
- <td>List</td>
- <td class="list"><code>$black</code></td>
- <td><p>Font color for buttons, if the background is light.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$button-radius</code></td>
- <td>Number</td>
- <td class="number"><code>$global-radius</code></td>
- <td><p>Border radius for buttons, defaulted to global-radius.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$button-sizes</code></td>
- <td>Map</td>
- <td class="map"><code>
- tiny: 0.6rem<br>
- small: 0.75rem<br>
- default: 0.9rem<br>
- large: 1.25rem<br>
-</code></td>
- <td><p>Sizes for buttons.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$button-opacity-disabled</code></td>
- <td>List</td>
- <td class="list"><code>0.25</code></td>
- <td><p>opacity for a disabled button.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="sass-mixins" class="docs-heading">Mixins<a class="docs-heading-icon" href="#sass-mixins"></a></h3>
-
- <p>We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.</p>
-
-
- <section >
- <h4 id="button-expand" class="docs-heading">button-expand<a class="docs-heading-icon" href="#button-expand"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> button-expand(<span class="hljs-variable">$expand</span>);</code></pre>
- </div>
-
- <p>Expands a button to make it full-width.</p>
-
-
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$expand</code></td>
- <td>Boolean</td>
- <td><code>true</code></td>
- <td><p>Set to <code>true</code> to enable the expand behavior. Set to <code>false</code> to reverse this behavior.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="button-style" class="docs-heading">button-style<a class="docs-heading-icon" href="#button-style"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> button-style(<span class="hljs-variable">$background</span>, <span class="hljs-variable">$background-hover</span>, <span class="hljs-variable">$color</span>);</code></pre>
- </div>
-
- <p>Sets the visual style of a button.</p>
-
-
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$background</code></td>
- <td>Color</td>
- <td><code>$button-background</code></td>
- <td><p>Background color of the button.</p>
-</td>
- </tr>
- <tr>
- <td><code>$background-hover</code></td>
- <td>Color</td>
- <td><code>$button-background-hover</code></td>
- <td><p>Background color of the button on hover. Set to <code>auto</code> to have the mixin automatically generate a hover color.</p>
-</td>
- </tr>
- <tr>
- <td><code>$color</code></td>
- <td>Color</td>
- <td><code>$button-color</code></td>
- <td><p>Text color of the button. Set to <code>auto</code> to automatically generate a color based on the background color.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="button-hollow" class="docs-heading">button-hollow<a class="docs-heading-icon" href="#button-hollow"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> button-hollow;</code></pre>
- </div>
-
- <p>Removes background fill on hover and focus for hollow buttons.</p>
-
-
-
-
-
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="button-disabled" class="docs-heading">button-disabled<a class="docs-heading-icon" href="#button-disabled"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> button-disabled;</code></pre>
- </div>
-
- <p>Adds disabled styles to a button by fading the element, reseting the cursor, and disabling pointer events.</p>
-
-
-
-
-
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="button-dropdown" class="docs-heading">button-dropdown<a class="docs-heading-icon" href="#button-dropdown"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> button-dropdown(<span class="hljs-variable">$size</span>, <span class="hljs-variable">$color</span>, <span class="hljs-variable">$offset</span>);</code></pre>
- </div>
-
- <p>Adds a dropdown arrow to a button.</p>
-
-
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$size</code></td>
- <td>Number</td>
- <td><code>0.4em</code></td>
- <td><p>Size of the arrow. We recommend using an <code>em</code> value so the triangle scales when used inside different sizes of buttons.</p>
-</td>
- </tr>
- <tr>
- <td><code>$color</code></td>
- <td>Color</td>
- <td><code>white</code></td>
- <td><p>Color of the arrow.</p>
-</td>
- </tr>
- <tr>
- <td><code>$offset</code></td>
- <td>Number</td>
- <td><code>$button-padding</code></td>
- <td><p>Distance between the arrow and the text of the button. Defaults to whatever the right padding of a button is.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="button" class="docs-heading">button<a class="docs-heading-icon" href="#button"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> button(<span class="hljs-variable">$expand</span>, <span class="hljs-variable">$background</span>, <span class="hljs-variable">$background-hover</span>, <span class="hljs-variable">$color</span>, <span class="hljs-variable">$style</span>);</code></pre>
- </div>
-
- <p>Adds all styles for a button. For more granular control over styles, use the individual button mixins.</p>
-
-
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$expand</code></td>
- <td>Boolean</td>
- <td><code>false</code></td>
- <td><p>Set to <code>true</code> to make the button full-width.</p>
-</td>
- </tr>
- <tr>
- <td><code>$background</code></td>
- <td>Color</td>
- <td><code>$button-background</code></td>
- <td><p>Background color of the button.</p>
-</td>
- </tr>
- <tr>
- <td><code>$background-hover</code></td>
- <td>Color</td>
- <td><code>$button-background-hover</code></td>
- <td><p>Background color of the button on hover. Set to <code>auto</code> to have the mixin automatically generate a hover color.</p>
-</td>
- </tr>
- <tr>
- <td><code>$color</code></td>
- <td>Color</td>
- <td><code>$button-color</code></td>
- <td><p>Text color of the button. Set to <code>auto</code> to automatically generate a color based on the background color.</p>
-</td>
- </tr>
- <tr>
- <td><code>$style</code></td>
- <td>Keyword</td>
- <td><code>solid</code></td>
- <td><p>Set to <code>hollow</code> to create a hollow button. The color defined in <code>$background</code> will be used as the primary color of the button.</p>
-</td>
- </tr>
- </table>
- </section>
-
-
-
-
-
- </section>
-
-
-</section>
-
-
-<!-- <hr> -->
-<!-- <section class="docs-building-blocks">
- <h2 id="building-blocks" class="docs-heading" data-magellan-target="building-blocks">Building Blocks<a class="docs-heading-icon" href="#building-blocks"></a></h2>
-
- <p><a href="http://zurb.com/building-blocks">Building Blocks</a> is a ZURB-curated resource with useful code snippets that use Foundation components. Here are a few for this component:</p>
-
- <div class="warning callout">
- <p>These are placeholder items. If you have ideas for building blocks for this component, <a href="https://github.com/zurb/foundation-sites-6/issues/118">we're taking ideas on GitHub</a>.</p>
- </div>
-
- <div data-building-blocks></div>
-</section> -->
-
-</div>
-
-<div class="large-3 columns" data-sticky-container>
- <nav class="columns docs-toc-wrap" data-sticky data-anchor="docs" data-sticky-on="large">
- <div class="docs-toc hide" id="docsTOC">
- <ul class="vertical menu" data-docs-toc>
- <li class="docs-nav-title">On this page:</li>
- </ul>
- </div>
- <div class="foundation-toc-ad-unit" id="TOCAdUnit">
- </div>
- </nav>
-</div>
-
-</div>
-
-</article>
-
- </div>
- <div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
- <ul class="vertical menu docs-nav" id="docs-menu">
- <p class="docs-nav-version">
- <span data-docs-version></span>
- <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">(Changelog)</a>
- </p>
-
- <li class="docs-nav-title">Getting Started</li>
- <li><a href="installation.html">Installation</a></li>
- <li><a href="starter-projects.html">Starter Projects</a></li>
- <li><a href="compatibility.html">Compatibility</a></li>
- <li><a href="accessibility.html">Accessibility</a></li>
- <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
-
- <li class="docs-nav-title">Setup</li>
- <li><a href="global.html">Global Styles</a></li>
- <li><a href="rtl.html">Right-to-Left Support</a></li>
- <li><a href="flexbox.html">Flexbox</a></li>
- <li><a href="sass.html">Sass</a></li>
- <li><a href="javascript.html">JavaScript</a></li>
- <li><a href="javascript-utilities.html">JavaScript Utilities</a></li>
- <li><a href="media-queries.html">Media Queries</a></li>
-
- <li class="docs-nav-title">General</li>
- <li><a href="grid.html">Grid</a></li>
- <li><a href="flex-grid.html">Flex Grid</a></li>
- <li><a href="forms.html">Forms</a></li>
- <li><a href="visibility.html">Visibility Classes</a></li>
- <li><a href="float-classes.html">Float Classes</a></li>
-
- <li class="docs-nav-title">Typography</li>
- <li><a href="typography-base.html">Base Styles</a></li>
- <li><a href="typography-helpers.html">Helper Classes</a></li>
-
- <li class="docs-nav-title">Controls</li>
- <li class="current"><a href="button.html">Button</a></li>
- <li><a href="button-group.html">Button Group</a></li>
- <li><a href="close-button.html">Close Button</a></li>
- <li><a href="slider.html">Slider <span class="label">JS</span></a></li>
- <li><a href="switch.html">Switch</a></li>
-
- <li class="docs-nav-title">Navigation</li>
- <li><a href="navigation.html">Overview</a></li>
- <li><a href="menu.html">Menu</a></li>
- <li><a href="dropdown-menu.html">Dropdown Menu <span class="label">JS</span></a></li>
- <li><a href="drilldown-menu.html">Drilldown Menu <span class="label">JS</span></a></li>
- <li><a href="accordion-menu.html">Accordion Menu <span class="label">JS</span></a></li>
- <li><a href="top-bar.html">Top Bar</a></li>
- <li><a href="responsive-navigation.html">Responsive Navigation</a></li>
- <li><a href="magellan.html">Magellan <span class="label">JS</span></a></li>
- <li><a href="pagination.html">Pagination</a></li>
- <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
-
- <li class="docs-nav-title">Containers</li>
- <li><a href="accordion.html">Accordion <span class="label">JS</span></a></li>
- <li><a href="callout.html">Callout</a></li>
- <li><a href="dropdown.html">Dropdown <span class="label">JS</span></a></li>
- <li><a href="media-object.html">Media Object</a></li>
- <li><a href="off-canvas.html">Off-canvas <span class="label">JS</span></a></li>
- <li><a href="reveal.html">Reveal <span class="label">JS</span> <small>Modal</small></a></li>
- <li><a href="table.html">Table</a></li>
- <li><a href="tabs.html">Tabs <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Media</li>
- <li><a href="badge.html">Badge</a></li>
- <li><a href="flex-video.html">Flex Video</a></li>
- <li><a href="label.html">Label</a></li>
- <li><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
- <li><a href="progress-bar.html">Progress Bar</a></li>
- <li><a href="thumbnail.html">Thumbnail</a></li>
- <li><a href="tooltip.html">Tooltip <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Plugins</li>
- <li><a href="abide.html">Abide <small>Form Validation</small></a></li>
- <li><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
- <li><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
- <li><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
- <li><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
-
- <li class="docs-nav-title">Sass</li>
- <li><a href="sass-functions.html">Functions</a></li>
- <li><a href="sass-mixins.html">Mixins</a></li>
-
- <li class="docs-nav-title">Libraries</li>
- <li><a href="motion-ui.html">Motion UI</a></li>
- <li><a href="panini.html">Panini</a></li>
- <li><a href="style-sherpa.html">Style Sherpa</a></li>
-
- <li class="docs-nav-title">Older Versions</li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
- <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
- <li><a href="https://get.foundation/sites/docs/v/3.2.5/">Foundation 3</a></li>
- <li><a href="https://get.foundation/sites/docs/v/2.2.1/">Foundation 2</a></li>
- </ul>
-
- </div>
- </div>
-
- <!-- Small Business(Docs) -->
- <section id="studiosCallout">
- <div class="row">
- <div class="medium-4 large-4 columns">
- <img src="https://get.foundation/assets/img/smallbiz-footer.svg" alt="">
- </div>
- <div class="medium-8 large-8 columns banner-info">
- <div class="row column property-label">ZURB Foundation</div>
- <h3 class="light">Yeah, we can help with that.</h3>
- <p class="lead"> We’ll collaborate with your team throughout the entire project life cycle. We’ll take your concept and move it through ideation, hi-fi wireframes, visual design and code, all while informing you on the whys and hows along the way.</p>
- <div class="course-buttons">
- <a href="https://get.foundation/get-involved/premium-support.html" class="studios button" data-zcom-event="studios_foundation_click" id="foundationSmallV1">Show Me How →</a>
- </div>
- </div>
- </div>
- </section>
-
- <div class="docs-newsletter">
- <div class="row">
- <div class="medium-7 large-8 columns">
- <a target="_blank" href="https://get.foundation/learn/responsive-reading.html">
- <h5 class="">Download ZURB’s 21 Responsive Trends That Will Shape 2017</h5>
- <p style="margin-bottom: 0;">Stay informed with amazing responsive trends each month from ZURB.</p>
- </a>
- </div>
- <div class="medium-5 large-4 footer-signup-form columns">
- <a style="margin-bottom: 0;" target="_blank" href="https://get.foundation/learn/responsive-reading.html" class="button expanded">Download the PDF</a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-top bg-fblue">
- <div class="row property">
- <div class="medium-4 columns">
- <div class="property-info">
- <h3>Foundation for Sites</h3>
- <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
- </p>
- </div>
- </div>
-
- <div class="medium-8 columns">
- <div class="row collapse">
- <div class="medium-4 columns">
- <div class="learn-links">
- <h4 class="hide-for-small">Want more?</h4>
- <ul>
- <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
- <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
- <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
- <li><a href="http://zurb.com/university/courses">Training</a></li>
- <li><a href="http://zurb.com/library">Design Resources</a></li>
- </ul>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="support-links">
- <h4 class="hide-for-small">Talk to us</h4>
- <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
- <p><a href="https://get.foundation/get-involved/contribute.html">Get involved in<br>our amazing community.</a></p>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="connect-links">
- <h4 class="hide-for-small">Stay Updated</h4>
- <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
- <a href="http://zurb.com/news" class="small button">Stay Connected</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="row global">
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/studios" class="footer-link-block services">
- <span class="title">Studios</span>
- <span>Helping more than 200 startups succeed since 1998.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="https://get.foundation/" class="footer-link-block foundation">
- <span class="title">Foundation</span>
- <span>The most advanced front-end framework in the world.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/notable" class="footer-link-block apps">
- <span class="title">Notable Design Apps</span>
- <span>Prototype, iterate and collect feedback on your products.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/university" class="footer-link-block expo">
- <span class="title">University</span>
- <span>Ideas, thoughts and design resources shared with you.</span>
- </a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-bottom">
- <div class="row">
- <div class="medium-4 medium-push-8 columns">
- <ul class="home-social">
- <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
- <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
- <li><a href="http://zurb.com/contact" class="mail"></a></li>
- </ul>
- </div>
- <div class="medium-8 medium-pull-4 columns">
- <a href="http://www.zurb.com" class="zurb-logo regular"></a>
- <ul class="zurb-links">
- <li><a href="http://zurb.com/about">About</a></li>
- <li><a href="http://zurb.com/blog">Blog</a></li>
- <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
- <li><a href="http://zurb.com/contact">Contact</a></li>
- <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
- </ul>
- <p class="copyright">© 1998‐2016 ZURB, Inc. All rights reserved.</p>
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- <script>
- var _gaq = _gaq || [];
- _gaq.push(
- ['_setAccount', 'UA-2195009-2'],
- ['_trackPageview'],
- ['b._setAccount', 'UA-2195009-27'],
- ['b._trackPageview']
- );
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
-
- <script src="assets/js/vendor.js?hash=e8e217bef1aac500f67707ea4151fc71"></script>
- <script src="assets/js/foundation.js?hash=b9c290f0d8b33b4d591dc99f2599a59d"></script>
- <script src="assets/js/docs.js?hash=d547c43ab0d7ff657b31050b3864e536"></script>
- <script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
-</body>
-</html>
+++ /dev/null
-<!doctype html>
-<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
-<html class="no-js" lang="en" dir="ltr">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="Callouts combine panels and alerts from Foundation 5 into one generic container component.">
- <link rel="icon" href="assets/img/icons/foundation-favicon.ico" type="image/x-icon">
- <title>Foundation for Sites 6 Docs | Callout</title>
- <link href="assets/css/docs.css?hash=746b0bfa9938c40d3252b5ef127af4e1" rel="stylesheet" />
- <link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=8ae036cfddc3acd28a288e96ded21397" rel="stylesheet">
- <!-- <link rel="stylesheet" href="./node_modules/motion-ui/dist/motion-ui.css" /> -->
-</head>
-<body>
-
- <div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
-
- <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="mobile-ofc vertical menu">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
-
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/support.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/sort/unanswered">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
- </div>
-
- <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="vertical menu">
- <li><a href="#">Foundation</a></li>
- <li><a href="#">Dot</a></li>
- <li><a href="#">ZURB</a></li>
- <li><a href="#">Com</a></li>
- <li><a href="#">Slash</a></li>
- <li><a href="#">Sites</a></li>
- </ul>
- </div>
-
-
- <div class="off-canvas-content" data-off-canvas-content>
- <!-- Info Banner For Announcements or Links -->
- <!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
- <div class="info">
- <h5>Foundation 6 is here!</h5>
- </div>
- </a> -->
-
- <nav class="marketing-topbar show-for-medium">
-
- <ul class="menu">
- <li class="topbar-title"><a href="https://get.foundation/index.html"><img src="assets/img/logos/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
- </ul>
-
- <ul class="dropdown menu" data-dropdown-menu data-click-open="false">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/" target="_blank">F5 Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="https://get.foundation/emails/docs/" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
-
- </nav>
-
- <div class="title-bar hide-for-medium">
- <div class="title-bar-left">
- <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
- <span class="title-bar-title">Foundation</span>
- </div>
- </div>
-
-
- <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
-
- <div class="expanded row">
- <div class="medium-9 large-10 medium-push-3 large-push-2 columns">
-
-<article class="docs-component" id="docs-callout">
-
-<a href="#docs-menu" class="small secondary expanded button hide-for-medium">Jump to Nav</a>
-
-<header>
- <h1 class="docs-page-title">Callout</h1>
-
-
- <p class="lead docs-page-lead">Callouts combine panels and alerts from Foundation 5 into one generic container component.</p>
-
- <ul class="menu simple docs-contribute-menu">
- <li><a href="https://github.com/zurb/foundation-sites/edit/master/docs/pages/callout.md" target="_blank"><i class="fi-pencil"></i>Edit this Page</a></li>
- <li><a href="https://github.com/zurb/foundation-sites/issues/new?title=%5BCallout%5D%20ISSUE%20NAME%20HERE" target="_blank"><i class="fi-social-github"></i>Report a Bug</a></li>
- <li><a href="https://get.foundation/forum" target="_blank"><i class="fi-comment"></i>Get Help</a></li>
- </ul>
-</header>
-
-<hr>
-
-<div class="row">
-
-<div class="large-9 columns" id="docs">
-
-<h2 id="basics" class="docs-heading" data-magellan-target="basics">Basics<a class="docs-heading-icon" href="#basics"></a></h2><p>A callout is just an element with a <code>.callout</code> class applied. You can put any kind of content inside.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"callout"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">h5</span>></span>This is a callout.<span class="hljs-tag"></<span class="hljs-name">h5</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span>It has an easy to override visual style, and is appropriately subdued.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>It's dangerous to go alone, take this.<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="callout">
- <h5>This is a callout.</h5>
- <p>It has an easy to override visual style, and is appropriately subdued.</p>
- <a href="#">It's dangerous to go alone, take this.</a>
-</div></div><hr>
-<h2 id="coloring" class="docs-heading" data-magellan-target="coloring">Coloring<a class="docs-heading-icon" href="#coloring"></a></h2><p>Callouts can be colored using the <code>.secondary</code>, <code>.primary</code>, <code>.success</code>, <code>.warning</code>, or <code>.alert</code> classes. Links inside the callout will be tinted to match the color of the callout.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"callout secondary"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">h5</span>></span>This is a secondary callout<span class="hljs-tag"></<span class="hljs-name">h5</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span>It has an easy to override visual style, and is appropriately subdued.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>It's dangerous to go alone, take this.<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div><div class="callout secondary">
- <h5>This is a secondary callout</h5>
- <p>It has an easy to override visual style, and is appropriately subdued.</p>
- <a href="#">It's dangerous to go alone, take this.</a>
-</div>
-
-<div class="primary callout">
- <h5>This is a primary callout</h5>
- <p>It has an easy to override visual style, and is appropriately subdued.</p>
- <a href="#">It's dangerous to go alone, take this.</a>
-</div>
-
-<div class="success callout">
- <h5>This is a success callout</h5>
- <p>It has an easy to override visual style, and is appropriately subdued.</p>
- <a href="#">It's dangerous to go alone, take this.</a>
-</div>
-
-<div class="warning callout">
- <h5>This is a warning callout</h5>
- <p>It has an easy to override visual style, and is appropriately subdued.</p>
- <a href="#">It's dangerous to go alone, take this.</a>
-</div>
-
-<div class="alert callout">
- <h5>This is an alert callout</h5>
- <p>It has an easy to override visual style, and is appropriately subdued.</p>
- <a href="#">It's dangerous to go alone, take this.</a>
-</div>
-
-<hr>
-<h2 id="sizing" class="docs-heading" data-magellan-target="sizing">Sizing<a class="docs-heading-icon" href="#sizing"></a></h2><p>Callouts can be sized using the <code>.small</code> and <code>.large</code> classes. These will affect the padding around content to be smaller and larger respectively.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"callout small"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">h5</span>></span>This is a secondary panel<span class="hljs-tag"></<span class="hljs-name">h5</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span>It has an easy to override visual style, and is appropriately subdued.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>It's dangerous to go alone, take this.<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"callout large"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">h5</span>></span>This is a secondary panel<span class="hljs-tag"></<span class="hljs-name">h5</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span>It has an easy to override visual style, and is appropriately subdued.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>It's dangerous to go alone, take this.<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="callout small">
- <h5>This is a secondary panel</h5>
- <p>It has an easy to override visual style, and is appropriately subdued.</p>
- <a href="#">It's dangerous to go alone, take this.</a>
-</div>
-
-<div class="callout large">
- <h5>This is a secondary panel</h5>
- <p>It has an easy to override visual style, and is appropriately subdued.</p>
- <a href="#">It's dangerous to go alone, take this.</a>
-</div></div><hr>
-<h2 id="making-closable" class="docs-heading" data-magellan-target="making-closable">Making Closable<a class="docs-heading-icon" href="#making-closable"></a></h2><p>Pair the callout with the <a href="close-button.html">close button</a> component and <code>data-closable</code> attribute to create a dismissable alert box.</p>
-<div class="primary callout">
- <p>Any element can be used as a close trigger, not just close button. Adding the attribute <code>data-close</code> to any element within the callout will turn it into a close trigger.</p>
- <p>When using the <code>data-closable</code> attribute, you can optionally add <a href="https://get.foundation/sites/docs/motion-ui.html">Motion UI</a> classes to the attribute to change the closing animation. If no class is added, the plugin defaults to jQuery's <code>.fadeOut()</code> function.</p>
-</div>
-
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"alert callout"</span> <span class="hljs-attr">data-closable</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">h5</span>></span>This is Important!<span class="hljs-tag"></<span class="hljs-name">h5</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span>But when you're done reading it, click the close button in the corner to dismiss this alert.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span>I'm using the default <span class="hljs-tag"><<span class="hljs-name">code</span>></span>data-closable<span class="hljs-tag"></<span class="hljs-name">code</span>></span> parameters, and simply fade out.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"close-button"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Dismiss alert"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">data-close</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">aria-hidden</span>=<span class="hljs-string">"true"</span>></span>&times;<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">button</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"success callout"</span> <span class="hljs-attr">data-closable</span>=<span class="hljs-string">"slide-out-right"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">h5</span>></span>This a friendly message.<span class="hljs-tag"></<span class="hljs-name">h5</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span>And when you're done with me, I close using a Motion UI animation.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"close-button"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Dismiss alert"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">data-close</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">aria-hidden</span>=<span class="hljs-string">"true"</span>></span>&times;<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">button</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="alert callout" data-closable>
- <h5>This is Important!</h5>
- <p>But when you're done reading it, click the close button in the corner to dismiss this alert.</p>
- <p>I'm using the default <code>data-closable</code> parameters, and simply fade out.</p>
- <button class="close-button" aria-label="Dismiss alert" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
-</div>
-<div class="success callout" data-closable="slide-out-right">
- <h5>This a friendly message.</h5>
- <p>And when you're done with me, I close using a Motion UI animation.</p>
- <button class="close-button" aria-label="Dismiss alert" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
-</div></div>
-
-<hr>
-<section>
- <h2 id="sass-reference" class="docs-heading" data-magellan-target="sass-reference">Sass Reference<a class="docs-heading-icon" href="#sass-reference"></a></h2>
-
- <section>
- <h3 id="sass-variables" class="docs-heading">Variables<a class="docs-heading-icon" href="#sass-variables"></a></h3>
-
- <p>The default styles of this component can be customized using these Sass variables in your project's <a href="sass.html#the-settings-file">settings file</a>.</p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td class="name"><code>$callout-background</code></td>
- <td>Color</td>
- <td class="color"><code>$white</code></td>
- <td><p>Default background color.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$callout-background-fade</code></td>
- <td>Number</td>
- <td class="number"><code>85%</code></td>
- <td><p>Default fade value for callout backgrounds.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$callout-border</code></td>
- <td>List</td>
- <td class="list"><code>1px solid rgba($black, 0.25)</code></td>
- <td><p>Default border style for callouts.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$callout-margin</code></td>
- <td>Number</td>
- <td class="number"><code>0 0 1rem 0</code></td>
- <td><p>Default bottom margin for callouts.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$callout-padding</code></td>
- <td>Number</td>
- <td class="number"><code>1rem</code></td>
- <td><p>Default inner padding for callouts.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$callout-font-color</code></td>
- <td>Color</td>
- <td class="color"><code>$body-font-color</code></td>
- <td><p>Default font color for callouts.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$callout-font-color-alt</code></td>
- <td>Color</td>
- <td class="color"><code>$body-background</code></td>
- <td><p>Default font color for callouts, if the callout has a dark background.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$callout-radius</code></td>
- <td>Color</td>
- <td class="color"><code>$global-radius</code></td>
- <td><p>Default border radius for callouts.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$callout-link-tint</code></td>
- <td>Number or Boolean</td>
- <td class="number | boolean"><code>30%</code></td>
- <td><p>Amount to tint links used within colored panels. Set to <code>false</code> to disable this feature.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="sass-mixins" class="docs-heading">Mixins<a class="docs-heading-icon" href="#sass-mixins"></a></h3>
-
- <p>We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.</p>
-
-
- <section >
- <h4 id="callout-base" class="docs-heading">callout-base<a class="docs-heading-icon" href="#callout-base"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> callout-base;</code></pre>
- </div>
-
- <p>Adds basic styles for a callout, including padding and margin.</p>
-
-
-
-
-
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="callout-style" class="docs-heading">callout-style<a class="docs-heading-icon" href="#callout-style"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> callout-style(<span class="hljs-variable">$color</span>);</code></pre>
- </div>
-
- <p>Generate quick styles for a callout using a single color as a baseline.</p>
-
-
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$color</code></td>
- <td>Color</td>
- <td><code>$callout-background</code></td>
- <td><p>Color to use.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="callout" class="docs-heading">callout<a class="docs-heading-icon" href="#callout"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> callout(<span class="hljs-variable">$color</span>);</code></pre>
- </div>
-
- <p>Adds styles for a callout.</p>
-
-
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$color</code></td>
- <td>Color</td>
- <td><code>$callout-background</code></td>
- <td><p>Color to use.</p>
-</td>
- </tr>
- </table>
- </section>
-
-
-
-
-
- </section>
-
-
-</section>
-
-
-<!-- <hr> -->
-<!-- <section class="docs-building-blocks">
- <h2 id="building-blocks" class="docs-heading" data-magellan-target="building-blocks">Building Blocks<a class="docs-heading-icon" href="#building-blocks"></a></h2>
-
- <p><a href="http://zurb.com/building-blocks">Building Blocks</a> is a ZURB-curated resource with useful code snippets that use Foundation components. Here are a few for this component:</p>
-
- <div class="warning callout">
- <p>These are placeholder items. If you have ideas for building blocks for this component, <a href="https://github.com/zurb/foundation-sites-6/issues/118">we're taking ideas on GitHub</a>.</p>
- </div>
-
- <div data-building-blocks></div>
-</section> -->
-
-</div>
-
-<div class="large-3 columns" data-sticky-container>
- <nav class="columns docs-toc-wrap" data-sticky data-anchor="docs" data-sticky-on="large">
- <div class="docs-toc hide" id="docsTOC">
- <ul class="vertical menu" data-docs-toc>
- <li class="docs-nav-title">On this page:</li>
- </ul>
- </div>
- <div class="foundation-toc-ad-unit" id="TOCAdUnit">
- </div>
- </nav>
-</div>
-
-</div>
-
-</article>
-
- </div>
- <div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
- <ul class="vertical menu docs-nav" id="docs-menu">
- <p class="docs-nav-version">
- <span data-docs-version></span>
- <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">(Changelog)</a>
- </p>
-
- <li class="docs-nav-title">Getting Started</li>
- <li><a href="installation.html">Installation</a></li>
- <li><a href="starter-projects.html">Starter Projects</a></li>
- <li><a href="compatibility.html">Compatibility</a></li>
- <li><a href="accessibility.html">Accessibility</a></li>
- <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
-
- <li class="docs-nav-title">Setup</li>
- <li><a href="global.html">Global Styles</a></li>
- <li><a href="rtl.html">Right-to-Left Support</a></li>
- <li><a href="flexbox.html">Flexbox</a></li>
- <li><a href="sass.html">Sass</a></li>
- <li><a href="javascript.html">JavaScript</a></li>
- <li><a href="javascript-utilities.html">JavaScript Utilities</a></li>
- <li><a href="media-queries.html">Media Queries</a></li>
-
- <li class="docs-nav-title">General</li>
- <li><a href="grid.html">Grid</a></li>
- <li><a href="flex-grid.html">Flex Grid</a></li>
- <li><a href="forms.html">Forms</a></li>
- <li><a href="visibility.html">Visibility Classes</a></li>
- <li><a href="float-classes.html">Float Classes</a></li>
-
- <li class="docs-nav-title">Typography</li>
- <li><a href="typography-base.html">Base Styles</a></li>
- <li><a href="typography-helpers.html">Helper Classes</a></li>
-
- <li class="docs-nav-title">Controls</li>
- <li><a href="button.html">Button</a></li>
- <li><a href="button-group.html">Button Group</a></li>
- <li><a href="close-button.html">Close Button</a></li>
- <li><a href="slider.html">Slider <span class="label">JS</span></a></li>
- <li><a href="switch.html">Switch</a></li>
-
- <li class="docs-nav-title">Navigation</li>
- <li><a href="navigation.html">Overview</a></li>
- <li><a href="menu.html">Menu</a></li>
- <li><a href="dropdown-menu.html">Dropdown Menu <span class="label">JS</span></a></li>
- <li><a href="drilldown-menu.html">Drilldown Menu <span class="label">JS</span></a></li>
- <li><a href="accordion-menu.html">Accordion Menu <span class="label">JS</span></a></li>
- <li><a href="top-bar.html">Top Bar</a></li>
- <li><a href="responsive-navigation.html">Responsive Navigation</a></li>
- <li><a href="magellan.html">Magellan <span class="label">JS</span></a></li>
- <li><a href="pagination.html">Pagination</a></li>
- <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
-
- <li class="docs-nav-title">Containers</li>
- <li><a href="accordion.html">Accordion <span class="label">JS</span></a></li>
- <li class="current"><a href="callout.html">Callout</a></li>
- <li><a href="dropdown.html">Dropdown <span class="label">JS</span></a></li>
- <li><a href="media-object.html">Media Object</a></li>
- <li><a href="off-canvas.html">Off-canvas <span class="label">JS</span></a></li>
- <li><a href="reveal.html">Reveal <span class="label">JS</span> <small>Modal</small></a></li>
- <li><a href="table.html">Table</a></li>
- <li><a href="tabs.html">Tabs <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Media</li>
- <li><a href="badge.html">Badge</a></li>
- <li><a href="flex-video.html">Flex Video</a></li>
- <li><a href="label.html">Label</a></li>
- <li><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
- <li><a href="progress-bar.html">Progress Bar</a></li>
- <li><a href="thumbnail.html">Thumbnail</a></li>
- <li><a href="tooltip.html">Tooltip <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Plugins</li>
- <li><a href="abide.html">Abide <small>Form Validation</small></a></li>
- <li><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
- <li><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
- <li><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
- <li><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
-
- <li class="docs-nav-title">Sass</li>
- <li><a href="sass-functions.html">Functions</a></li>
- <li><a href="sass-mixins.html">Mixins</a></li>
-
- <li class="docs-nav-title">Libraries</li>
- <li><a href="motion-ui.html">Motion UI</a></li>
- <li><a href="panini.html">Panini</a></li>
- <li><a href="style-sherpa.html">Style Sherpa</a></li>
-
- <li class="docs-nav-title">Older Versions</li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
- <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
- <li><a href="https://get.foundation/sites/docs/v/3.2.5/">Foundation 3</a></li>
- <li><a href="https://get.foundation/sites/docs/v/2.2.1/">Foundation 2</a></li>
- </ul>
-
- </div>
- </div>
-
- <!-- Small Business(Docs) -->
- <section id="studiosCallout">
- <div class="row">
- <div class="medium-4 large-4 columns">
- <img src="https://get.foundation/assets/img/smallbiz-footer.svg" alt="">
- </div>
- <div class="medium-8 large-8 columns banner-info">
- <div class="row column property-label">ZURB Foundation</div>
- <h3 class="light">Yeah, we can help with that.</h3>
- <p class="lead"> We’ll collaborate with your team throughout the entire project life cycle. We’ll take your concept and move it through ideation, hi-fi wireframes, visual design and code, all while informing you on the whys and hows along the way.</p>
- <div class="course-buttons">
- <a href="https://get.foundation/get-involved/premium-support.html" class="studios button" data-zcom-event="studios_foundation_click" id="foundationSmallV1">Show Me How →</a>
- </div>
- </div>
- </div>
- </section>
-
- <div class="docs-newsletter">
- <div class="row">
- <div class="medium-7 large-8 columns">
- <a target="_blank" href="https://get.foundation/learn/responsive-reading.html">
- <h5 class="">Download ZURB’s 21 Responsive Trends That Will Shape 2017</h5>
- <p style="margin-bottom: 0;">Stay informed with amazing responsive trends each month from ZURB.</p>
- </a>
- </div>
- <div class="medium-5 large-4 footer-signup-form columns">
- <a style="margin-bottom: 0;" target="_blank" href="https://get.foundation/learn/responsive-reading.html" class="button expanded">Download the PDF</a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-top bg-fblue">
- <div class="row property">
- <div class="medium-4 columns">
- <div class="property-info">
- <h3>Foundation for Sites</h3>
- <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
- </p>
- </div>
- </div>
-
- <div class="medium-8 columns">
- <div class="row collapse">
- <div class="medium-4 columns">
- <div class="learn-links">
- <h4 class="hide-for-small">Want more?</h4>
- <ul>
- <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
- <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
- <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
- <li><a href="http://zurb.com/university/courses">Training</a></li>
- <li><a href="http://zurb.com/library">Design Resources</a></li>
- </ul>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="support-links">
- <h4 class="hide-for-small">Talk to us</h4>
- <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
- <p><a href="https://get.foundation/get-involved/contribute.html">Get involved in<br>our amazing community.</a></p>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="connect-links">
- <h4 class="hide-for-small">Stay Updated</h4>
- <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
- <a href="http://zurb.com/news" class="small button">Stay Connected</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="row global">
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/studios" class="footer-link-block services">
- <span class="title">Studios</span>
- <span>Helping more than 200 startups succeed since 1998.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="https://get.foundation/" class="footer-link-block foundation">
- <span class="title">Foundation</span>
- <span>The most advanced front-end framework in the world.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/notable" class="footer-link-block apps">
- <span class="title">Notable Design Apps</span>
- <span>Prototype, iterate and collect feedback on your products.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/university" class="footer-link-block expo">
- <span class="title">University</span>
- <span>Ideas, thoughts and design resources shared with you.</span>
- </a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-bottom">
- <div class="row">
- <div class="medium-4 medium-push-8 columns">
- <ul class="home-social">
- <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
- <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
- <li><a href="http://zurb.com/contact" class="mail"></a></li>
- </ul>
- </div>
- <div class="medium-8 medium-pull-4 columns">
- <a href="http://www.zurb.com" class="zurb-logo regular"></a>
- <ul class="zurb-links">
- <li><a href="http://zurb.com/about">About</a></li>
- <li><a href="http://zurb.com/blog">Blog</a></li>
- <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
- <li><a href="http://zurb.com/contact">Contact</a></li>
- <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
- </ul>
- <p class="copyright">© 1998‐2016 ZURB, Inc. All rights reserved.</p>
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- <script>
- var _gaq = _gaq || [];
- _gaq.push(
- ['_setAccount', 'UA-2195009-2'],
- ['_trackPageview'],
- ['b._setAccount', 'UA-2195009-27'],
- ['b._trackPageview']
- );
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
-
- <script src="assets/js/vendor.js?hash=d06be68ee9965bd4e5082826097f698b"></script>
- <script src="assets/js/foundation.js?hash=3e160ca3e52824def6261849fa1950bf"></script>
- <script src="assets/js/docs.js?hash=4ee10f6f57e175aa1947ff168fb5d832"></script>
- <script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
-</body>
-</html>
+++ /dev/null
-<!doctype html>
-<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
-<html class="no-js" lang="en" dir="ltr">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="The humble close button can be used anywhere you need something to go away on click.">
- <link rel="icon" href="assets/img/icons/foundation-favicon.ico" type="image/x-icon">
- <title>Foundation for Sites 6 Docs | Close Button</title>
- <link href="assets/css/docs.css?hash=d99b359cd714fe310d2b199f644c1528" rel="stylesheet" />
- <link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=b03e5567488dd123e3701c09fdca881c" rel="stylesheet">
- <!-- <link rel="stylesheet" href="./node_modules/motion-ui/dist/motion-ui.css" /> -->
-</head>
-<body>
-
- <div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
-
- <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="mobile-ofc vertical menu">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
-
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/support.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/sort/unanswered">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
- </div>
-
- <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="vertical menu">
- <li><a href="#">Foundation</a></li>
- <li><a href="#">Dot</a></li>
- <li><a href="#">ZURB</a></li>
- <li><a href="#">Com</a></li>
- <li><a href="#">Slash</a></li>
- <li><a href="#">Sites</a></li>
- </ul>
- </div>
-
-
- <div class="off-canvas-content" data-off-canvas-content>
- <!-- Info Banner For Announcements or Links -->
- <!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
- <div class="info">
- <h5>Foundation 6 is here!</h5>
- </div>
- </a> -->
-
- <nav class="marketing-topbar show-for-medium">
-
- <ul class="menu">
- <li class="topbar-title"><a href="https://get.foundation/index.html"><img src="assets/img/logos/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
- </ul>
-
- <ul class="dropdown menu" data-dropdown-menu data-click-open="false">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/" target="_blank">F5 Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="https://get.foundation/emails/docs/" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
-
- </nav>
-
- <div class="title-bar hide-for-medium">
- <div class="title-bar-left">
- <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
- <span class="title-bar-title">Foundation</span>
- </div>
- </div>
-
-
- <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
-
- <div class="expanded row">
- <div class="medium-9 large-10 medium-push-3 large-push-2 columns">
-
-<article class="docs-component" id="docs-close-button">
-
-<a href="#docs-menu" class="small secondary expanded button hide-for-medium">Jump to Nav</a>
-
-<header>
- <h1 class="docs-page-title">Close Button</h1>
-
-
- <p class="lead docs-page-lead">The humble close button can be used anywhere you need something to go away on click.</p>
-
- <ul class="menu simple docs-contribute-menu">
- <li><a href="https://github.com/zurb/foundation-sites/edit/master/docs/pages/close-button.md" target="_blank"><i class="fi-pencil"></i>Edit this Page</a></li>
- <li><a href="https://github.com/zurb/foundation-sites/issues/new?title=%5BClose%20Button%5D%20ISSUE%20NAME%20HERE" target="_blank"><i class="fi-social-github"></i>Report a Bug</a></li>
- <li><a href="https://get.foundation/forum" target="_blank"><i class="fi-comment"></i>Get Help</a></li>
- </ul>
-</header>
-
-<hr>
-
-<div class="row">
-
-<div class="large-9 columns" id="docs">
-
-<p>A close button is a <code><button></code> element with the class <code>.close-button</code>. We use the multiplication symbol (<code>&times;</code>) as the X icon. This icon is wrapped in a <code><span></code> with the attribute <code>aria-hidden="true"</code>, so screen readers don't read the X icon.</p>
-<p>The button is also labeled with <code>aria-label</code> to clarify what the button's purpose is.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"callout"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"close-button"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close alert"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">aria-hidden</span>=<span class="hljs-string">"true"</span>></span>&times;<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">button</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Look at this close button!<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="callout">
- <button class="close-button" aria-label="Close alert" type="button">
- <span aria-hidden="true">×</span>
- </button>
- <p>Look at this close button!</p>
-</div></div><hr>
-<h2 id="making-closable" class="docs-heading" data-magellan-target="making-closable">Making Closable<a class="docs-heading-icon" href="#making-closable"></a></h2><div class="callout primary">
- <p>The close button on its own doesn't close elements, but you can use it with <a href="toggler.html">Toggler</a>, <a href="reveal.html">Reveal</a>, <a href="off-canvas.html">Off-canvas</a>, and other plugins that have open and close behaviors.</p>
-</div>
-
-<div class="primary callout">
- <p>Any element can be used as a close trigger, not just close button. Adding the attribute <code>data-close</code> to any element within the callout will turn it into a close trigger.</p>
-</div>
-
-<p>The below example pairs the callout with the close button component and <code>data-closable</code> attribute to create a dismissible alert box.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"callout"</span> <span class="hljs-attr">data-closable</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span>You can so totally close this!<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"close-button"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Dismiss alert"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">data-close</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">aria-hidden</span>=<span class="hljs-string">"true"</span>></span>&times;<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">button</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"success callout"</span> <span class="hljs-attr">data-closable</span>=<span class="hljs-string">"slide-out-right"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span>You can close me too, and I close using a Motion UI animation.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"close-button"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Dismiss alert"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">data-close</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">aria-hidden</span>=<span class="hljs-string">"true"</span>></span>&times;<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">button</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="callout" data-closable>
- <p>You can so totally close this!</p>
- <button class="close-button" aria-label="Dismiss alert" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
-</div>
-<div class="success callout" data-closable="slide-out-right">
- <p>You can close me too, and I close using a Motion UI animation.</p>
- <button class="close-button" aria-label="Dismiss alert" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
-</div></div>
-
-<hr>
-<section>
- <h2 id="sass-reference" class="docs-heading" data-magellan-target="sass-reference">Sass Reference<a class="docs-heading-icon" href="#sass-reference"></a></h2>
-
- <section>
- <h3 id="sass-variables" class="docs-heading">Variables<a class="docs-heading-icon" href="#sass-variables"></a></h3>
-
- <p>The default styles of this component can be customized using these Sass variables in your project's <a href="sass.html#the-settings-file">settings file</a>.</p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td class="name"><code>$closebutton-position</code></td>
- <td>List</td>
- <td class="list"><code>right top</code></td>
- <td><p>Default position of the close button. The first value should be <code>right</code> or <code>left</code>, and the second value should be <code>top</code> or <code>bottom</code>.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$closebutton-offset-horizontal</code></td>
- <td>Number</td>
- <td class="number"><code>1rem</code></td>
- <td><p>Right (or left) offset for a close button.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$closebutton-offset-vertical</code></td>
- <td>Number</td>
- <td class="number"><code>0.5rem</code></td>
- <td><p>Top (or bottom) offset for a close button.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$closebutton-size</code></td>
- <td>Number</td>
- <td class="number"><code>2em</code></td>
- <td><p>Default font size of the close button.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$closebutton-lineheight</code></td>
- <td>Number</td>
- <td class="number"><code>1</code></td>
- <td><p>The line-height of the close button. It affects the spacing of the element.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$closebutton-color</code></td>
- <td>Color</td>
- <td class="color"><code>$dark-gray</code></td>
- <td><p>Default color of the close button.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$closebutton-color-hover</code></td>
- <td>Color</td>
- <td class="color"><code>$black</code></td>
- <td><p>Default color of the close button when being hovered on.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="sass-mixins" class="docs-heading">Mixins<a class="docs-heading-icon" href="#sass-mixins"></a></h3>
-
- <p>We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.</p>
-
-
- <section >
- <h4 id="close-button" class="docs-heading">close-button<a class="docs-heading-icon" href="#close-button"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> close-button;</code></pre>
- </div>
-
- <p>Adds styles for a close button, using the styles in the settings variables.</p>
-
-
-
-
-
- </section>
-
-
-
-
-
- </section>
-
-
-</section>
-
-
-<!-- <hr> -->
-<!-- <section class="docs-building-blocks">
- <h2 id="building-blocks" class="docs-heading" data-magellan-target="building-blocks">Building Blocks<a class="docs-heading-icon" href="#building-blocks"></a></h2>
-
- <p><a href="http://zurb.com/building-blocks">Building Blocks</a> is a ZURB-curated resource with useful code snippets that use Foundation components. Here are a few for this component:</p>
-
- <div class="warning callout">
- <p>These are placeholder items. If you have ideas for building blocks for this component, <a href="https://github.com/zurb/foundation-sites-6/issues/118">we're taking ideas on GitHub</a>.</p>
- </div>
-
- <div data-building-blocks></div>
-</section> -->
-
-</div>
-
-<div class="large-3 columns" data-sticky-container>
- <nav class="columns docs-toc-wrap" data-sticky data-anchor="docs" data-sticky-on="large">
- <div class="docs-toc hide" id="docsTOC">
- <ul class="vertical menu" data-docs-toc>
- <li class="docs-nav-title">On this page:</li>
- </ul>
- </div>
- <div class="foundation-toc-ad-unit" id="TOCAdUnit">
- </div>
- </nav>
-</div>
-
-</div>
-
-</article>
-
- </div>
- <div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
- <ul class="vertical menu docs-nav" id="docs-menu">
- <p class="docs-nav-version">
- <span data-docs-version></span>
- <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">(Changelog)</a>
- </p>
-
- <li class="docs-nav-title">Getting Started</li>
- <li><a href="installation.html">Installation</a></li>
- <li><a href="starter-projects.html">Starter Projects</a></li>
- <li><a href="compatibility.html">Compatibility</a></li>
- <li><a href="accessibility.html">Accessibility</a></li>
- <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
-
- <li class="docs-nav-title">Setup</li>
- <li><a href="global.html">Global Styles</a></li>
- <li><a href="rtl.html">Right-to-Left Support</a></li>
- <li><a href="flexbox.html">Flexbox</a></li>
- <li><a href="sass.html">Sass</a></li>
- <li><a href="javascript.html">JavaScript</a></li>
- <li><a href="javascript-utilities.html">JavaScript Utilities</a></li>
- <li><a href="media-queries.html">Media Queries</a></li>
-
- <li class="docs-nav-title">General</li>
- <li><a href="grid.html">Grid</a></li>
- <li><a href="flex-grid.html">Flex Grid</a></li>
- <li><a href="forms.html">Forms</a></li>
- <li><a href="visibility.html">Visibility Classes</a></li>
- <li><a href="float-classes.html">Float Classes</a></li>
-
- <li class="docs-nav-title">Typography</li>
- <li><a href="typography-base.html">Base Styles</a></li>
- <li><a href="typography-helpers.html">Helper Classes</a></li>
-
- <li class="docs-nav-title">Controls</li>
- <li><a href="button.html">Button</a></li>
- <li><a href="button-group.html">Button Group</a></li>
- <li class="current"><a href="close-button.html">Close Button</a></li>
- <li><a href="slider.html">Slider <span class="label">JS</span></a></li>
- <li><a href="switch.html">Switch</a></li>
-
- <li class="docs-nav-title">Navigation</li>
- <li><a href="navigation.html">Overview</a></li>
- <li><a href="menu.html">Menu</a></li>
- <li><a href="dropdown-menu.html">Dropdown Menu <span class="label">JS</span></a></li>
- <li><a href="drilldown-menu.html">Drilldown Menu <span class="label">JS</span></a></li>
- <li><a href="accordion-menu.html">Accordion Menu <span class="label">JS</span></a></li>
- <li><a href="top-bar.html">Top Bar</a></li>
- <li><a href="responsive-navigation.html">Responsive Navigation</a></li>
- <li><a href="magellan.html">Magellan <span class="label">JS</span></a></li>
- <li><a href="pagination.html">Pagination</a></li>
- <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
-
- <li class="docs-nav-title">Containers</li>
- <li><a href="accordion.html">Accordion <span class="label">JS</span></a></li>
- <li><a href="callout.html">Callout</a></li>
- <li><a href="dropdown.html">Dropdown <span class="label">JS</span></a></li>
- <li><a href="media-object.html">Media Object</a></li>
- <li><a href="off-canvas.html">Off-canvas <span class="label">JS</span></a></li>
- <li><a href="reveal.html">Reveal <span class="label">JS</span> <small>Modal</small></a></li>
- <li><a href="table.html">Table</a></li>
- <li><a href="tabs.html">Tabs <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Media</li>
- <li><a href="badge.html">Badge</a></li>
- <li><a href="flex-video.html">Flex Video</a></li>
- <li><a href="label.html">Label</a></li>
- <li><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
- <li><a href="progress-bar.html">Progress Bar</a></li>
- <li><a href="thumbnail.html">Thumbnail</a></li>
- <li><a href="tooltip.html">Tooltip <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Plugins</li>
- <li><a href="abide.html">Abide <small>Form Validation</small></a></li>
- <li><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
- <li><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
- <li><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
- <li><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
-
- <li class="docs-nav-title">Sass</li>
- <li><a href="sass-functions.html">Functions</a></li>
- <li><a href="sass-mixins.html">Mixins</a></li>
-
- <li class="docs-nav-title">Libraries</li>
- <li><a href="motion-ui.html">Motion UI</a></li>
- <li><a href="panini.html">Panini</a></li>
- <li><a href="style-sherpa.html">Style Sherpa</a></li>
-
- <li class="docs-nav-title">Older Versions</li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
- <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
- <li><a href="https://get.foundation/sites/docs/v/3.2.5/">Foundation 3</a></li>
- <li><a href="https://get.foundation/sites/docs/v/2.2.1/">Foundation 2</a></li>
- </ul>
-
- </div>
- </div>
-
- <!-- Small Business(Docs) -->
- <section id="studiosCallout">
- <div class="row">
- <div class="medium-4 large-4 columns">
- <img src="https://get.foundation/assets/img/smallbiz-footer.svg" alt="">
- </div>
- <div class="medium-8 large-8 columns banner-info">
- <div class="row column property-label">ZURB Foundation</div>
- <h3 class="light">Yeah, we can help with that.</h3>
- <p class="lead"> We’ll collaborate with your team throughout the entire project life cycle. We’ll take your concept and move it through ideation, hi-fi wireframes, visual design and code, all while informing you on the whys and hows along the way.</p>
- <div class="course-buttons">
- <a href="https://get.foundation/get-involved/premium-support.html" class="studios button" data-zcom-event="studios_foundation_click" id="foundationSmallV1">Show Me How →</a>
- </div>
- </div>
- </div>
- </section>
-
- <div class="docs-newsletter">
- <div class="row">
- <div class="medium-7 large-8 columns">
- <a target="_blank" href="https://get.foundation/learn/responsive-reading.html">
- <h5 class="">Download ZURB’s 21 Responsive Trends That Will Shape 2017</h5>
- <p style="margin-bottom: 0;">Stay informed with amazing responsive trends each month from ZURB.</p>
- </a>
- </div>
- <div class="medium-5 large-4 footer-signup-form columns">
- <a style="margin-bottom: 0;" target="_blank" href="https://get.foundation/learn/responsive-reading.html" class="button expanded">Download the PDF</a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-top bg-fblue">
- <div class="row property">
- <div class="medium-4 columns">
- <div class="property-info">
- <h3>Foundation for Sites</h3>
- <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
- </p>
- </div>
- </div>
-
- <div class="medium-8 columns">
- <div class="row collapse">
- <div class="medium-4 columns">
- <div class="learn-links">
- <h4 class="hide-for-small">Want more?</h4>
- <ul>
- <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
- <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
- <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
- <li><a href="http://zurb.com/university/courses">Training</a></li>
- <li><a href="http://zurb.com/library">Design Resources</a></li>
- </ul>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="support-links">
- <h4 class="hide-for-small">Talk to us</h4>
- <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
- <p><a href="https://get.foundation/get-involved/contribute.html">Get involved in<br>our amazing community.</a></p>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="connect-links">
- <h4 class="hide-for-small">Stay Updated</h4>
- <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
- <a href="http://zurb.com/news" class="small button">Stay Connected</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="row global">
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/studios" class="footer-link-block services">
- <span class="title">Studios</span>
- <span>Helping more than 200 startups succeed since 1998.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="https://get.foundation/" class="footer-link-block foundation">
- <span class="title">Foundation</span>
- <span>The most advanced front-end framework in the world.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/notable" class="footer-link-block apps">
- <span class="title">Notable Design Apps</span>
- <span>Prototype, iterate and collect feedback on your products.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/university" class="footer-link-block expo">
- <span class="title">University</span>
- <span>Ideas, thoughts and design resources shared with you.</span>
- </a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-bottom">
- <div class="row">
- <div class="medium-4 medium-push-8 columns">
- <ul class="home-social">
- <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
- <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
- <li><a href="http://zurb.com/contact" class="mail"></a></li>
- </ul>
- </div>
- <div class="medium-8 medium-pull-4 columns">
- <a href="http://www.zurb.com" class="zurb-logo regular"></a>
- <ul class="zurb-links">
- <li><a href="http://zurb.com/about">About</a></li>
- <li><a href="http://zurb.com/blog">Blog</a></li>
- <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
- <li><a href="http://zurb.com/contact">Contact</a></li>
- <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
- </ul>
- <p class="copyright">© 1998‐2016 ZURB, Inc. All rights reserved.</p>
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- <script>
- var _gaq = _gaq || [];
- _gaq.push(
- ['_setAccount', 'UA-2195009-2'],
- ['_trackPageview'],
- ['b._setAccount', 'UA-2195009-27'],
- ['b._trackPageview']
- );
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
-
- <script src="assets/js/vendor.js?hash=0f8b50a4c3621e1f4536a35bcf58bf35"></script>
- <script src="assets/js/foundation.js?hash=5ad84015267f01fa021d5b28cfb1de83"></script>
- <script src="assets/js/docs.js?hash=fba665b1e27ac730a9180de727f0b950"></script>
- <script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
-</body>
-</html>
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="Foundation is tested across many browsers and devices, and works back as far as IE9 and Android 2.">
- <link rel="icon" href="assets/img/icons/foundation-favicon.ico" type="image/x-icon">
- <title>Foundation for Sites 6 Docs | Compatibility</title>
- <link href="assets/css/docs.css?hash=35d40136722548d676ef62895b4f6b0d" rel="stylesheet" />
- <link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=adb9d00ddf6a524e852ccfef20e8e992" rel="stylesheet">
- <!-- <link rel="stylesheet" href="./node_modules/motion-ui/dist/motion-ui.css" /> -->
-</head>
-<body>
-
- <div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
-
- <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="mobile-ofc vertical menu">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
-
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/support.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/sort/unanswered">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
- </ul>
- </li>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <title>Compatibility | Foundation Docs</title>
+ <link rel="icon" href="assets/img/icons/oundation-favicon.ico" type="image/x-icon">
+ <!-- For third-generation iPad with high-resolution Retina display: -->
+ <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/img/icons/apple-touch-icon-144x144-precomposed.png">
+ <!-- For iPhone with high-resolution Retina display: -->
+ <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/img/icons/apple-touch-icon-114x114-precomposed.png">
+ <!-- For first- and second-generation iPad: -->
+ <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/img/icons/apple-touch-icon-72x72-precomposed.png">
+ <!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
+ <link rel="apple-touch-icon-precomposed" href="assets/img/icons/apple-touch-icon-precomposed.png">
+
+ <meta name="description" content="Documentation and reference library for ZURB Foundation. JavaScript, CSS, components, grid and more.">
+ <meta name="author" content="ZURB, inc. ZURB network also includes zurb.com">
+ <meta name="copyright" content="ZURB, inc. Copyright (c) 2014">
+
+ <link href="assets/css/docs.css" rel="stylesheet" />
+ <link href="http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" rel="stylesheet" />
+ <script src="assets/js/modernizr.js"></script>
+ </head>
+ <body class="antialiased hide-extras">
+
+ <!-- Info Banner For Announcements or Links -->
+ <!-- <a href="https://get.foundation" id="notice">
+ <div class="info">
+ <h5>Foundation 6 is here!</h5>
+ </div>
+ </a> -->
+
+
+ <div class="marketing off-canvas-wrap" data-offcanvas>
+ <div class="inner-wrap">
+
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
- </div>
-
- <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="vertical menu">
- <li><a href="#">Foundation</a></li>
- <li><a href="#">Dot</a></li>
- <li><a href="#">ZURB</a></li>
- <li><a href="#">Com</a></li>
- <li><a href="#">Slash</a></li>
- <li><a href="#">Sites</a></li>
- </ul>
- </div>
-
- <div class="off-canvas-content" data-off-canvas-content>
- <!-- Info Banner For Announcements or Links -->
- <!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
- <div class="info">
- <h5>Foundation 6 is here!</h5>
- </div>
- </a> -->
- <nav class="marketing-topbar show-for-medium">
-
- <ul class="menu">
- <li class="topbar-title"><a href="https://get.foundation/index.html"><img src="assets/img/logos/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
+<!-- <nav class="tab-bar show-for-small">
+ <a class="off-canvas-left-toggle menu-icon ">
+ <span></span>
+ </a>
+</nav> -->
+
+
+<nav class="top-bar docs-bar hide-for-small" data-topbar>
+ <ul class="title-area">
+ <li class="name">
+ <h1>
+ <a href="https://get.foundation/">
+ <span>Foundation</span>
+ </a>
+ </h1>
+ </li>
+ </ul>
+
+ <section class="top-bar-section">
+ <ul class="right">
+ <li class="divider"></li>
+ <li class="has-dropdown">
+ <a target="_blank" href="https://zurb.com/responsive">Showcase <i class="fa fa-external-link"></i></a>
+ <ul class="dropdown">
+ <li><a target="_blank" href="https://zurb.com/responsive">Showcase <i class="fa fa-external-link"></i></a></li>
+ <li><a href="https://get.foundation/showcase/brands.html">Brands</a></li>
+ <li><a href="https://get.foundation/showcase/case-studies.html">Case Studies</a></li>
+ <li><a href="https://get.foundation/showcase/blog.html">Blog</a></li>
+ <li><a href="https://get.foundation/showcase/buzz.html">Buzz</a></li>
+ <li><a href="https://get.foundation/showcase/about.html">About Foundation</a></li>
</ul>
-
- <ul class="dropdown menu" data-dropdown-menu data-click-open="false">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/" target="_blank">F5 Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="https://get.foundation/emails/docs/" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
+ </li>
+ <li class="divider"></li>
+ <li class="has-dropdown">
+ <a href="https://get.foundation/develop/getting-started.html" class="">Develop</a>
+ <ul class="dropdown">
+ <li class="title">Frameworks</li>
+ <li><a class="" href="https://get.foundation/sites.html">Foundation for Sites</a></li>
+ <li><a class="" href="https://get.foundation/apps.html">Foundation for Apps</a></li>
+ <li><a class="spaced-list-item" href="https://get.foundation/emails.html">Foundation for Emails</a></li>
+ <li class="spaced-divider"><hr></li>
+ <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
+ <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
+ <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
+ <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
</ul>
-
- </nav>
-
- <div class="title-bar hide-for-medium">
- <div class="title-bar-left">
- <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
- <span class="title-bar-title">Foundation</span>
- </div>
- </div>
-
+ </li>
+ <li class="divider"></li>
+ <li class="has-dropdown">
+ <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
+ <ul class="dropdown">
+ <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
+ <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
+ <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
+ <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
+ <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
+ </ul>
+ </li>
+ <li class="divider"></li>
+ <li class="has-dropdown">
+ <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
+ <ul class="dropdown">
+ <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
+ <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
+ <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
+ <li><a href="https://get.foundation/learn/events.html">Events</a></li>
+ <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
+ <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
+ <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
+ </ul>
+ </li>
+ <li class="divider"></li>
+ <li class="has-dropdown">
+ <a href="https://get.foundation/sites/docs/v/5.5.3/">Docs</a>
+ <ul class="dropdown">
+ <li><a href="https://get.foundation/sites/docs/v/5.5.3/">F5 Sites Docs</a></li>
+ <li><a href="https://get.foundation/sites/docs">F6 Sites Docs</a></li>
+ <li><a href="https://get.foundation/emails/docs">Emails Docs</a></li>
+ <li><a href="https://get.foundation/apps/docs">Apps Docs</a></li>
+ </ul>
+ </li>
+ <li class="divider"></li>
+ <li class="has-form">
+ <a href="https://get.foundation/sites/getting-started.html">Getting Started</a>
+ </ul>
+ </section>
+</nav>
+ <nav class="tab-bar show-for-small">
+ <a class="left-off-canvas-toggle menu-icon">
+ <span>Foundation</span>
+ </a>
+</nav>
- <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
+<aside class="marketing-left-off-canvas-menu">
- <div class="expanded row">
- <div class="medium-9 large-10 medium-push-3 large-push-2 columns">
+ <ul class="off-canvas-list">
+ <li><label class="first">Foundation</label></li>
+ <li><a href="https://get.foundation">Home</a></li>
+ </ul>
-<article class="docs-component" id="docs-compatibility">
+ <hr>
-<a href="#docs-menu" class="small secondary expanded button hide-for-medium">Jump to Nav</a>
+ <ul class="off-canvas-list">
+ <li><label>Setup</label></li>
-<header>
- <h1 class="docs-page-title">Compatibility</h1>
+ <li><a href="index.html" data-search="">Getting Started</a></li>
+ <li><a href="css.html" data-search="Styles">CSS</a></li>
+ <li><a href="sass.html" data-search="Sass">Sass</a></li>
+ <li><a href="sass-files.html" data-search="Sass,Sass - What You Get, How to Use Sass">Sass Files</a></li>
+ <li><a href="using-sass.html" data-search="Sass,Sass - What You Get, How to Use Sass">Using Sass</a></li>
+ <li><a href="applications.html" data-search="Rails,Gem">Applications</a></li>
+ <li><a href="javascript.html" data-search="">Javascript</a></li>
+ <li><a href="components/global.html" data-search="Global Styles,Global Mixins,Global Variables,Useful HTML Classes">Global Styles</a></li>
+ <li><a href="components/kitchen_sink.html" data-search="">Kitchen Sink</a></li>
+ <li><a href="upgrading.html" data-search="Migration">Upgrading</a></li>
+ <li class="divider"></li>
+ <li><label>Structure</label></li>
+ <li><a href="media-queries.html" data-search="Breakpoints">Media Queries</a></li>
+ <li><a href="components/visibility.html" data-search="">Visibility</a></li>
+ <li><a href="components/grid.html" data-search="">Grid</a></li>
+ <li><a href="components/block_grid.html" data-search="">Block Grid</a></li>
+ <li><a href="components/interchange.html" data-search="Responsive Images">Interchange Responsive Content <span class="label">JS</span></a></li>
+ <li><a href="utility-classes.html" data-search="">Utility Classes</a></li>
+ <li><a href="javascript-utilities.html" data-search="">Javascript Utilities</a></li>
+ <li><a href="components/rtl.html" data-search="RTL">Right-to-Left Support</a></li>
- <p class="lead docs-page-lead">Foundation is tested across many browsers and devices, and works back as far as IE9 and Android 2.</p>
+ <li class="divider"></li>
+ <li><label>Navigation</label></li>
+ <li><a href="components/offcanvas.html" data-search="Off Canvas">Off-canvas <span class="label">JS</span></a></li>
+ <li><a href="components/topbar.html" data-search="Nav Bar,Navigation,Sticky">Top Bar <span class="label">JS</span></a></li>
+ <li><a href="components/icon-bar.html" data-search="">Icon Bar</a></li>
+ <li><a href="components/sidenav.html" data-search="">Side Nav</a></li>
+ <li><a href="components/magellan.html" data-search="Scrollspy">Magellan Sticky Nav <span class="label">JS</span></a></li>
+ <li><a href="components/subnav.html" data-search="">Sub Nav</a></li>
+ <li><a href="components/breadcrumbs.html" data-search="Navigation Path,Cookie Crumb">Breadcrumbs</a></li>
+ <li><a href="components/pagination.html" data-search="">Pagination</a></li>
- <ul class="menu simple docs-contribute-menu">
- <li><a href="https://github.com/zurb/foundation-sites/edit/master/docs/pages/compatibility.md" target="_blank"><i class="fi-pencil"></i>Edit this Page</a></li>
- <li><a href="https://github.com/zurb/foundation-sites/issues/new?title=%5BCompatibility%5D%20ISSUE%20NAME%20HERE" target="_blank"><i class="fi-social-github"></i>Report a Bug</a></li>
- <li><a href="https://get.foundation/forum" target="_blank"><i class="fi-comment"></i>Get Help</a></li>
- </ul>
-</header>
+ <li class="divider"></li>
+ <li><label>Media</label></li>
+ <li><a href="components/orbit.html" data-search="Carousel,Slider,Slideshow">Orbit Slider <span class="label">JS</span></a></li>
+ <li><a href="components/thumbnails.html" data-search="Images">Thumbnails</a></li>
+ <li><a href="components/clearing.html" data-search="Responsive Lightbox,Lightbox">Clearing Lightbox <span class="label">JS</span></a></li>
+ <li><a href="components/flex_video.html" data-search="Responsive Video">Flex Video</a></li>
-<hr>
+ <li class="divider"></li>
+ <li><label>Forms</label></li>
+ <li><a href="components/forms.html" data-search="">Forms</a></li>
+ <li><a href="components/switch.html" data-search="">Switches</a></li>
+ <li><a href="components/range_slider.html" data-search="Range Slider">Sliders <span class="label">JS</span></a></li>
+ <li><a href="components/abide.html" data-search="Form Validation,Field Validation">Abide Validation <span class="label">JS</span></a></li>
-<div class="row">
-
-<div class="large-9 columns" id="docs">
-
-<h2 id="overview" class="docs-heading" data-magellan-target="overview">Overview<a class="docs-heading-icon" href="#overview"></a></h2><table class="docs-compat-table">
- <tr>
- <td>Chrome</td>
- <td class="works" rowspan="6">Last Two Versions</td>
- </tr>
- <tr><td>Firefox</td></tr>
- <tr><td>Safari</td></tr>
- <tr><td>Opera</td></tr>
- <tr><td>Mobile Safari</td></tr>
- <tr><td>IE Mobile</td></tr>
- <tr>
- <td>Internet Explorer</td>
- <td class="works">Versions 9+</td>
- </tr>
- <tr>
- <td>Android Browser</td>
- <td class="works">Versions 2.3+</td>
- </tr>
-</table>
+ <li class="divider"></li>
+ <li><label>Buttons</label></li>
+ <li><a href="components/buttons.html" data-search="">Buttons</a></li>
+ <li><a href="components/button_groups.html" data-search="Button Bar">Button Groups</a></li>
+ <li><a href="components/split_buttons.html" data-search="">Split Buttons <span class="label">JS</span></a></li>
+ <li><a href="components/dropdown_buttons.html" data-search="">Dropdown Buttons <span class="label">JS</span></a></li>
-<hr>
-<h2 id="what-won-t-work-" class="docs-heading" data-magellan-target="what-won-t-work-">What Won't Work?<a class="docs-heading-icon" href="#what-won-t-work-"></a></h2><ul>
-<li><strong>The Grid:</strong> Foundation's grid uses <code>box-sizing: border-box</code> to apply gutters to columns, but this property isn't supported in IE8.</li>
-<li><strong>Desktop Styles:</strong> Because the framework is written mobile-first, browsers that don't support media queries will display the mobile styles of the site.</li>
-<li><strong>JavaScript:</strong> Our plugins use a number of handy ECMAScript 5 features that aren't supported in IE8.</li>
-</ul>
+ <li class="divider"></li>
+ <li><label>Typography</label></li>
+ <li><a href="components/typography.html" data-search="Typography,Type-setting,Composition">Type</a></li>
+ <li><a href="components/inline_lists.html" data-search="Lists">Inline Lists</a></li>
+ <li><a href="components/labels.html" data-search="Tags">Labels</a></li>
+ <li><a href="components/keystrokes.html" data-search="">Keystrokes</a></li>
+
+ <li class="divider"></li>
+ <li class="heading"><label>Callouts & Prompts</label></li>
+ <li><a href="components/reveal.html" data-search="Modal">Reveal Modal <span class="label">JS</span></a></li>
+ <li><a href="components/alert_boxes.html" data-search="Error,Success,Warning">Alerts <span class="label">JS</span></a></li>
+ <li><a href="components/panels.html" data-search="Wells">Panels</a></li>
+ <li><a href="components/tooltips.html" data-search="Popover">Tooltips <span class="label">JS</span></a></li>
+ <li><a href="components/joyride.html" data-search="Tooltip Tour,Guider,Tooltip Walk-through">Joyride <span class="label">JS</span></a></li>
+
+ <li class="divider"></li>
+ <li><label>Content</label></li>
+ <li><a href="components/dropdown.html" data-search="">Dropdowns <span class="label">JS</span></a></li>
+ <li><a href="components/pricing_tables.html" data-search="">Pricing Tables</a></li>
+ <li><a href="components/progress_bars.html" data-search="">Progress Bars</a></li>
+ <li><a href="components/tables.html" data-search="">Tables</a></li>
+ <li><a href="components/accordion.html" data-search="">Accordion <span class="label">JS</span></a></li>
+ <li><a href="components/tabs.html" data-search="">Tabs <span class="label">JS</span></a></li>
+ <li><a href="components/equalizer.html" data-search="">Equalizer <span class="label">JS</span></a></li>
+ <li class="divider"></li>
+ <li><label>Support</label></li>
+ <li><a href="changelog.html" data-search="">Changelog</a></li>
+ <li><a href="compatibility.html" data-search="">Compatibility</a></li>
+ <li class="divider"></li>
+ <li class="heading"><label>Older Docs</label></li>
+ <li><a href="/docs/v/4.3.2/" data-search="">Foundation 4</a></li>
+ <li><a href="/docs/v/3.2.5/" data-search="">Foundation 3</a></li>
+ <li><a href="/docs/v/2.2.1/" data-search="">Foundation 2</a></li>
+ </ul>
+ <hr>
+ <div class="zurb-links">
+ <ul class="top">
+ <li class="logo"><a href="http://zurb.com"></a></li>
+ <li><a href="http://zurb.com/about">About</a></li>
+ <li><a href="http://zurb.com/blog">Blog</a></li>
+ <li><a href="http://zurb.com/contact">Contact</a></li>
+ </ul>
+ <ul class="pillars">
+ <li>
+ <a href="http://www.zurb.com/studios" class="footer-link-block services">
+ <span class="title">Studios</span>
+ <span>Helping startups win since '98.</span>
+ </a>
+ </li>
+ <li>
+ <a href="https://get.foundation/" class="footer-link-block foundation">
+ <span class="title">Foundation</span>
+ <span>World's most advanced responsive framework.</span>
+ </a>
+ </li>
+ <li>
+ <a href="http://zurb.com/notable" class="footer-link-block apps">
+ <span class="title">Notable</span>
+ <span>Tools to rapidly prototype and iterate.</span>
+ </a>
+ </li>
+ <li>
+ <a href="http://zurb.com/university" class="footer-link-block expo">
+ <span class="title">University</span>
+ <span>Online training for smarter product design.</span>
+ </a>
+ </li>
+ </ul>
</div>
-<div class="large-3 columns" data-sticky-container>
- <nav class="columns docs-toc-wrap" data-sticky data-anchor="docs" data-sticky-on="large">
- <div class="docs-toc hide" id="docsTOC">
- <ul class="vertical menu" data-docs-toc>
- <li class="docs-nav-title">On this page:</li>
- </ul>
- </div>
- <div class="foundation-toc-ad-unit" id="TOCAdUnit">
- </div>
+</aside>
+
+<a class="exit-off-canvas" href="#"></a>
+
+
+ <section role="main" class="scroll-container">
+
+ <div class="row">
+ <div class="large-3 medium-4 columns">
+ <div class="hide-for-small">
+ <div class="sidebar">
+ <h5>Foundation Documentation</h5>
+ <!-- <form>
+ <label>Search Documentation</label>
+ <input tabindex="1" id="autocomplete" type="search" placeholder="Search Docs: e.g. forms">
+ </form>
+
+ <a href="https://get.foundation/sites/download.html" class="download button expand">Download Foundation</a> -->
+
+ <nav>
+ <ul class="side-nav">
+ <li class="heading">Setup</li>
+
+ <li><a href="index.html" data-search="">Getting Started</a></li>
+ <li><a href="css.html" data-search="Styles">CSS</a></li>
+ <li><a href="sass.html" data-search="Sass">Sass</a></li>
+ <li><a href="sass-files.html" data-search="Sass,Sass - What You Get, How to Use Sass">Sass Files</a></li>
+ <li><a href="using-sass.html" data-search="Sass,Sass - What You Get, How to Use Sass">Using Sass</a></li>
+ <li><a href="applications.html" data-search="Rails,Gem">Applications</a></li>
+ <li><a href="javascript.html" data-search="">JavaScript</a></li>
+ <li><a href="components/global.html" data-search="Global Styles,Global Mixins,Global Variables,Useful HTML Classes">Global Styles</a></li>
+ <li><a href="components/kitchen_sink.html" data-search="">Kitchen Sink</a></li>
+ <li><a href="accessibility.html" data-search="accessibility">Accessibility</a></li>
+ <li><a href="upgrading.html" data-search="Migration">Upgrading</a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Structure</li>
+ <li><a href="media-queries.html" data-search="Breakpoints">Media Queries</a></li>
+ <li><a href="components/visibility.html" data-search="">Visibility</a></li>
+ <li><a href="components/grid.html" data-search="">Grid</a></li>
+ <li><a href="components/block_grid.html" data-search="">Block Grid</a></li>
+ <li><a href="components/interchange.html" data-search="Responsive Images">Interchange Responsive Content <span class="label">JS</span></a></li>
+ <li><a href="utility-classes.html" data-search="">Utility Classes</a></li>
+ <li><a href="javascript-utilities.html" data-search="">Javascript Utilities</a></li>
+ <li><a href="components/rtl.html" data-search="RTL">Right-to-Left Support</a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Navigation</li>
+ <li><a href="components/offcanvas.html" data-search="Off Canvas">Off-canvas <span class="label">JS</span></a></li>
+ <li><a href="components/topbar.html" data-search="Nav Bar,Navigation,Sticky">Top Bar <span class="label">JS</span></a></li>
+ <li><a href="components/icon-bar.html" data-search="">Icon Bar</a></li>
+ <li><a href="components/sidenav.html" data-search="">Side Nav</a></li>
+ <li><a href="components/magellan.html" data-search="Scrollspy">Magellan Sticky Nav <span class="label">JS</span></a></li>
+ <li><a href="components/subnav.html" data-search="">Sub Nav</a></li>
+ <li><a href="components/breadcrumbs.html" data-search="Navigation Path,Cookie Crumb">Breadcrumbs</a></li>
+ <li><a href="components/pagination.html" data-search="">Pagination</a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Media</li>
+ <li><a href="components/orbit.html" data-search="Carousel,Slider,Slideshow">Orbit Slider <span class="label">JS</span></a></li>
+ <li><a href="components/thumbnails.html" data-search="Images">Thumbnails</a></li>
+ <li><a href="components/clearing.html" data-search="Responsive Lightbox,Lightbox">Clearing Lightbox <span class="label">JS</span></a></li>
+ <li><a href="components/flex_video.html" data-search="Responsive Video">Flex Video</a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Forms</li>
+ <li><a href="components/forms.html" data-search="">Forms</a></li>
+ <li><a href="components/switch.html" data-search="">Switches</a></li>
+ <li><a href="components/range_slider.html" data-search="Range Slider">Range Sliders <span class="label">JS</span></a></li>
+ <li><a href="components/abide.html" data-search="Form Validation,Field Validation">Abide Validation <span class="label">JS</span></a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Buttons</li>
+ <li><a href="components/buttons.html" data-search="">Buttons</a></li>
+ <li><a href="components/button_groups.html" data-search="Button Bar">Button Groups</a></li>
+ <li><a href="components/split_buttons.html" data-search="">Split Buttons <span class="label">JS</span></a></li>
+ <li><a href="components/dropdown_buttons.html" data-search="">Dropdown Buttons <span class="label">JS</span></a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Typography</li>
+ <li><a href="components/typography.html" data-search="Typography,Type-setting,Composition">Type</a></li>
+ <li><a href="components/inline_lists.html" data-search="Lists">Inline Lists</a></li>
+ <li><a href="components/labels.html" data-search="Tags">Labels</a></li>
+ <li><a href="components/keystrokes.html" data-search="">Keystrokes</a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Callouts & Prompts</li>
+ <li><a href="components/reveal.html" data-search="Modal">Reveal Modal <span class="label">JS</span></a></li>
+ <li><a href="components/alert_boxes.html" data-search="Error,Success,Warning">Alerts <span class="label">JS</span></a></li>
+ <li><a href="components/panels.html" data-search="Wells">Panels</a></li>
+ <li><a href="components/tooltips.html" data-search="Popover">Tooltips <span class="label">JS</span></a></li>
+ <li><a href="components/joyride.html" data-search="Tooltip Tour,Guider,Tooltip Walk-through">Joyride <span class="label">JS</span></a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Content</li>
+ <li><a href="components/dropdown.html" data-search="">Dropdowns <span class="label">JS</span></a></li>
+ <li><a href="components/pricing_tables.html" data-search="">Pricing Tables</a></li>
+ <li><a href="components/progress_bars.html" data-search="">Progress Bars</a></li>
+ <li><a href="components/tables.html" data-search="">Tables</a></li>
+ <li><a href="components/accordion.html" data-search="">Accordion <span class="label">JS</span></a></li>
+ <li><a href="components/tabs.html" data-search="">Tabs <span class="label">JS</span></a></li>
+ <li><a href="components/equalizer.html" data-search="">Equalizer <span class="label">JS</span></a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Support</li>
+
+ <li><a href="changelog.html" data-search="">Changelog</a></li>
+ <li><a href="compatibility.html" data-search="">Compatibility</a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Older Docs</li>
+ <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html" data-search="">Foundation 4</a></li>
+ <li><a href="https://get.foundation/sites/docs/v/3.2.5/" data-search="">Foundation 3</a></li>
+ <li><a href="https://get.foundation/sites/docs/v/2.2.1/" data-search="">Foundation 2</a></li>
+
+ </ul>
</nav>
-</div>
</div>
+ </div>
+ </div>
+ <div class="large-9 medium-8 columns">
+ <h1 id="compatibility">Compatibility</h1>
+ <h3 class="subheader">Foundation was designed for and tested on numerous browsers and devices. Here's the rundown on what's tested, and what to do if something misbehaves.</h3>
-</article>
+<hr>
+<div class="row support">
+ <div class="small-3 columns"><h5>Browser/OS</h5></div>
+ <div class="small-3 columns"><h5>The Grid</h5></div>
+ <div class="small-3 columns"><h5>Layout/UI</h5></div>
+ <div class="small-3 columns"><h5>JS</h5></div>
+</div>
+<div class="row support">
+ <div class="small-3 columns">Chrome</div>
+ <div class="small-3 columns"><span class="win">✓</span></div>
+ <div class="small-3 columns"><span class="win">✓</span></div>
+ <div class="small-3 columns"><span class="win">✓</span></div>
+</div>
+<div class="row support">
+ <div class="small-3 columns">Firefox</div>
+ <div class="small-3 columns"><span class="win">✓</span></div>
+ <div class="small-3 columns"><span class="win">✓</span></div>
+ <div class="small-3 columns"><span class="win">✓</span></div>
+</div>
+<div class="row support">
+ <div class="small-3 columns">Safari</div>
+ <div class="small-3 columns"><span class="win">✓</span></div>
+ <div class="small-3 columns"><span class="win">✓</span></div>
+ <div class="small-3 columns"><span class="win">✓</span></div>
+</div>
+<div class="row support">
+ <div class="small-3 columns">IE10</div>
+ <div class="small-3 columns"><span class="win">✓</span></div>
+ <div class="small-3 columns"><span class="win">✓</span></div>
+ <div class="small-3 columns"><span class="win">✓</span></div>
+</div>
+<div class="row support">
+ <div class="small-3 columns">IE11</div>
+ <div class="small-3 columns"><span class="win">✓</span></div>
+ <div class="small-3 columns"><span class="win">✓</span></div>
+ <div class="small-3 columns"><span class="win">✓</span></div>
+</div>
+<div class="row support">
+ <div class="small-3 columns">IE9</div>
+ <div class="small-3 columns"><span class="win">✓</span></div>
+ <div class="small-3 columns"><span class="win">✓</span></div>
+ <div class="small-3 columns"><span class="win">✓</span></div>
+</div>
+<div class="row support">
+ <div class="small-3 columns">IE8</div>
+ <div class="small-3 columns"><span class="fail">✗</span></div>
+ <div class="small-3 columns"><span class="fail">✗</span></div>
+ <div class="small-3 columns"><span class="fail">✗</span></div>
+</div>
+<div class="row support">
+ <div class="small-3 columns">IE7</div>
+ <div class="small-3 columns"><span class="fail">✗</span></div>
+ <div class="small-3 columns"><span class="fail">✗</span></div>
+ <div class="small-3 columns"><span class="fail">✗</span></div>
+</div>
- </div>
- <div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
- <ul class="vertical menu docs-nav" id="docs-menu">
- <p class="docs-nav-version">
- <span data-docs-version></span>
- <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">(Changelog)</a>
- </p>
-
- <li class="docs-nav-title">Getting Started</li>
- <li><a href="installation.html">Installation</a></li>
- <li><a href="starter-projects.html">Starter Projects</a></li>
- <li class="current"><a href="compatibility.html">Compatibility</a></li>
- <li><a href="accessibility.html">Accessibility</a></li>
- <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
-
- <li class="docs-nav-title">Setup</li>
- <li><a href="global.html">Global Styles</a></li>
- <li><a href="rtl.html">Right-to-Left Support</a></li>
- <li><a href="flexbox.html">Flexbox</a></li>
- <li><a href="sass.html">Sass</a></li>
- <li><a href="javascript.html">JavaScript</a></li>
- <li><a href="javascript-utilities.html">JavaScript Utilities</a></li>
- <li><a href="media-queries.html">Media Queries</a></li>
-
- <li class="docs-nav-title">General</li>
- <li><a href="grid.html">Grid</a></li>
- <li><a href="flex-grid.html">Flex Grid</a></li>
- <li><a href="forms.html">Forms</a></li>
- <li><a href="visibility.html">Visibility Classes</a></li>
- <li><a href="float-classes.html">Float Classes</a></li>
-
- <li class="docs-nav-title">Typography</li>
- <li><a href="typography-base.html">Base Styles</a></li>
- <li><a href="typography-helpers.html">Helper Classes</a></li>
-
- <li class="docs-nav-title">Controls</li>
- <li><a href="button.html">Button</a></li>
- <li><a href="button-group.html">Button Group</a></li>
- <li><a href="close-button.html">Close Button</a></li>
- <li><a href="slider.html">Slider <span class="label">JS</span></a></li>
- <li><a href="switch.html">Switch</a></li>
-
- <li class="docs-nav-title">Navigation</li>
- <li><a href="navigation.html">Overview</a></li>
- <li><a href="menu.html">Menu</a></li>
- <li><a href="dropdown-menu.html">Dropdown Menu <span class="label">JS</span></a></li>
- <li><a href="drilldown-menu.html">Drilldown Menu <span class="label">JS</span></a></li>
- <li><a href="accordion-menu.html">Accordion Menu <span class="label">JS</span></a></li>
- <li><a href="top-bar.html">Top Bar</a></li>
- <li><a href="responsive-navigation.html">Responsive Navigation</a></li>
- <li><a href="magellan.html">Magellan <span class="label">JS</span></a></li>
- <li><a href="pagination.html">Pagination</a></li>
- <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
-
- <li class="docs-nav-title">Containers</li>
- <li><a href="accordion.html">Accordion <span class="label">JS</span></a></li>
- <li><a href="callout.html">Callout</a></li>
- <li><a href="dropdown.html">Dropdown <span class="label">JS</span></a></li>
- <li><a href="media-object.html">Media Object</a></li>
- <li><a href="off-canvas.html">Off-canvas <span class="label">JS</span></a></li>
- <li><a href="reveal.html">Reveal <span class="label">JS</span> <small>Modal</small></a></li>
- <li><a href="table.html">Table</a></li>
- <li><a href="tabs.html">Tabs <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Media</li>
- <li><a href="badge.html">Badge</a></li>
- <li><a href="flex-video.html">Flex Video</a></li>
- <li><a href="label.html">Label</a></li>
- <li><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
- <li><a href="progress-bar.html">Progress Bar</a></li>
- <li><a href="thumbnail.html">Thumbnail</a></li>
- <li><a href="tooltip.html">Tooltip <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Plugins</li>
- <li><a href="abide.html">Abide <small>Form Validation</small></a></li>
- <li><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
- <li><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
- <li><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
- <li><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
-
- <li class="docs-nav-title">Sass</li>
- <li><a href="sass-functions.html">Functions</a></li>
- <li><a href="sass-mixins.html">Mixins</a></li>
-
- <li class="docs-nav-title">Libraries</li>
- <li><a href="motion-ui.html">Motion UI</a></li>
- <li><a href="panini.html">Panini</a></li>
- <li><a href="style-sherpa.html">Style Sherpa</a></li>
-
- <li class="docs-nav-title">Older Versions</li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
- <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
- <li><a href="https://get.foundation/sites/docs/v/3.2.5/">Foundation 3</a></li>
- <li><a href="https://get.foundation/sites/docs/v/2.2.1/">Foundation 2</a></li>
- </ul>
-
- </div>
- </div>
+<div class="row support">
+ <div class="small-3 columns">iOS (iPhone)</div>
+ <div class="small-3 columns"><span class="win">✓</span></div>
+ <div class="small-3 columns"><span class="win">✓</span></div>
+ <div class="small-3 columns"><span class="win">✓</span></div>
+</div>
+<div class="row support">
+ <div class="small-3 columns">iOS (iPad)</div>
+ <div class="small-3 columns"><span class="win">✓</span></div>
+ <div class="small-3 columns"><span class="win">✓</span></div>
+ <div class="small-3 columns"><span class="win">✓</span></div>
+</div>
+<div class="row support">
+ <div class="small-3 columns">Android 2, 4 (Phone)</div>
+ <div class="small-3 columns"><span class="win">✓</span></div>
+ <div class="small-3 columns"><span class="win">✓</span></div>
+ <div class="small-3 columns"><span class="win">✓</span></div>
+</div>
+<div class="row support">
+ <div class="small-3 columns">Android 2, 4 (Tablet)</div>
+ <div class="small-3 columns"><span class="win">✓</span></div>
+ <div class="small-3 columns"><span class="win">✓</span></div>
+ <div class="small-3 columns"><span class="win">✓</span></div>
+</div>
+<div class="row support">
+ <div class="small-3 columns">Windows Phone 7+</div>
+ <div class="small-3 columns"><span class="win">✓</span></div>
+ <div class="small-3 columns"><span class="win">✓</span></div>
+ <div class="small-3 columns"><span class="win">✓</span></div>
+</div>
+<div class="row support">
+ <div class="small-3 columns">Surface</div>
+ <div class="small-3 columns"><span class="win">✓</span></div>
+ <div class="small-3 columns"><span class="win">✓</span></div>
+ <div class="small-3 columns"><span class="win">✓</span></div>
+</div>
- <!-- Small Business(Docs) -->
- <section id="studiosCallout">
- <div class="row">
- <div class="medium-4 large-4 columns">
- <img src="https://get.foundation/assets/img/smallbiz-footer.svg" alt="">
- </div>
- <div class="medium-8 large-8 columns banner-info">
- <div class="row column property-label">ZURB Foundation</div>
- <h3 class="light">Yeah, we can help with that.</h3>
- <p class="lead"> We’ll collaborate with your team throughout the entire project life cycle. We’ll take your concept and move it through ideation, hi-fi wireframes, visual design and code, all while informing you on the whys and hows along the way.</p>
- <div class="course-buttons">
- <a href="https://get.foundation/get-involved/premium-support.html" class="studios button" data-zcom-event="studios_foundation_click" id="foundationSmallV1">Show Me How →</a>
</div>
</div>
- </div>
- </section>
-
- <div class="docs-newsletter">
- <div class="row">
- <div class="medium-7 large-8 columns">
- <a target="_blank" href="https://get.foundation/learn/responsive-reading.html">
- <h5 class="">Download ZURB’s 21 Responsive Trends That Will Shape 2017</h5>
- <p style="margin-bottom: 0;">Stay informed with amazing responsive trends each month from ZURB.</p>
- </a>
+ <!-- <section id="courses-banner-large">
+ <div class="row">
+ <div class="large-5 medium-5 columns banner-image">
+ <img src="https://get.foundation/assets/img/responsive-banner-main.svg" alt="responsive design">
+ </div>
+ <div class="large-7 medium-7 columns banner-info">
+ <h3>Get a running start with Foundation</h3>
+ <p>Learn the fundamentals of the world's most advanced responsive framework in our <strong>Intro to Foundation class.</strong> You'll learn from the creators themselves on how to use Foundation and jumpstart your next project. <a href="http://zurb.com/university/courses" class="inline-hide">Learn more about classes »</a></p>
+ <a href="http://zurb.com/university/foundation-intro?utm_source=Foundation%20Docs&utm_medium=Large%20Banner&utm_campaign=Intro%20to%20Foundation" class="button">Learn More</a>
+ <a href="http://zurb.com/university/courses" class="learn-more hide-for-medium-up">Learn more about classes »</a>
+ </div>
+ </div>
+</section> -->
+ <div id="newsletter">
+ <div class="row">
+ <div class="medium-8 columns">
+ <h5>Stay on top of what’s happening in <a href="http://zurb.com/responsive">responsive design</a>.</h5>
+ <p>Sign up to receive monthly Responsive Reading highlights. <a href="http://zurb.com/responsive/reading">Read Last Month's Edition »</a></p>
+ </div>
+ <div class="medium-4 columns">
+ <form action="http://zurb.createsend.com/t/y/s/xlitlu/" method="post" id="subForm">
+ <div class="row collapse margintop-20px">
+ <div class="small-8 medium-8 columns">
+ <input id="fieldEmail" name="cm-xlitlu-xlitlu" type="email" placeholder="signup@example.com">
</div>
- <div class="medium-5 large-4 footer-signup-form columns">
- <a style="margin-bottom: 0;" target="_blank" href="https://get.foundation/learn/responsive-reading.html" class="button expanded">Download the PDF</a>
+ <div class="small-4 medium-4 columns">
+ <input type="submit" href="#" class="postfix button" value="Sign Up">
</div>
</div>
+ </form>
+ </div>
+ </div>
+</div>
+
+
+<div class="zurb-footer-top bg-fblue">
+ <div class="row property">
+ <div class="medium-4 columns">
+ <div class="property-info">
+ <h3>Foundation for Sites</h3>
+ <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
+ </p>
</div>
-
- <div class="zurb-footer-top bg-fblue">
- <div class="row property">
- <div class="medium-4 columns">
- <div class="property-info">
- <h3>Foundation for Sites</h3>
- <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
- </p>
- </div>
- </div>
-
- <div class="medium-8 columns">
- <div class="row collapse">
- <div class="medium-4 columns">
- <div class="learn-links">
- <h4 class="hide-for-small">Want more?</h4>
- <ul>
- <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
- <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
- <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
- <li><a href="http://zurb.com/university/courses">Training</a></li>
- <li><a href="http://zurb.com/library">Design Resources</a></li>
- </ul>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="support-links">
- <h4 class="hide-for-small">Talk to us</h4>
- <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
- <p><a href="https://get.foundation/get-involved/contribute.html">Get involved in<br>our amazing community.</a></p>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="connect-links">
- <h4 class="hide-for-small">Stay Updated</h4>
- <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
- <a href="http://zurb.com/news" class="small button">Stay Connected</a>
- </div>
- </div>
- </div>
+ </div>
+
+ <div class="medium-8 columns">
+ <div class="row collapse">
+ <div class="medium-4 columns">
+ <div class="learn-links">
+ <h4 class="hide-for-small">Want more?</h4>
+ <ul>
+ <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
+ <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
+ <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
+ <li><a href="http://zurb.com/university/courses">Training</a></li>
+ <li><a href="http://zurb.com/library">Design Resources</a></li>
+ </ul>
</div>
</div>
- <div class="row global">
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/studios" class="footer-link-block services">
- <span class="title">Studios</span>
- <span>Helping more than 200 startups succeed since 1998.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="https://get.foundation/" class="footer-link-block foundation">
- <span class="title">Foundation</span>
- <span>The most advanced front-end framework in the world.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/notable" class="footer-link-block apps">
- <span class="title">Notable Design Apps</span>
- <span>Prototype, iterate and collect feedback on your products.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/university" class="footer-link-block expo">
- <span class="title">University</span>
- <span>Ideas, thoughts and design resources shared with you.</span>
- </a>
+ <div class="medium-4 columns">
+ <div class="support-links">
+ <h4 class="hide-for-small">Talk to us</h4>
+ <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
+ <p><a href="https://get.foundation/business/business-support.html">Business Support</a></p>
+ <p>Or check our <a href="https://get.foundation/support/support.html">support page</a></p>
+ </div>
</div>
- </div>
- </div>
-
- <div class="zurb-footer-bottom">
- <div class="row">
- <div class="medium-4 medium-push-8 columns">
- <ul class="home-social">
- <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
- <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
- <li><a href="http://zurb.com/contact" class="mail"></a></li>
- </ul>
- </div>
- <div class="medium-8 medium-pull-4 columns">
- <a href="http://www.zurb.com" class="zurb-logo regular"></a>
- <ul class="zurb-links">
- <li><a href="http://zurb.com/about">About</a></li>
- <li><a href="http://zurb.com/blog">Blog</a></li>
- <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
- <li><a href="http://zurb.com/contact">Contact</a></li>
- <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
- </ul>
- <p class="copyright">© 1998‐2016 ZURB, Inc. All rights reserved.</p>
+ <div class="medium-4 columns">
+ <div class="connect-links">
+ <h4 class="hide-for-small">Stay Updated</h4>
+ <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
+ <a href="http://zurb.com/news" class="small button">Stay Connected</a>
</div>
</div>
</div>
-
</div>
</div>
+ <div class="row global">
+ <div class="medium-3 small-6 columns">
+ <a href="http://zurb.com/studios" class="footer-link-block services">
+ <span class="title">Studios</span>
+ <span>Helping more than 200 startups succeed since 1998.</span>
+ </a>
+ </div>
+ <div class="medium-3 small-6 columns">
+ <a href="https://get.foundation/" class="footer-link-block foundation">
+ <span class="title">Foundation</span>
+ <span>The most advanced front-end framework in the world.</span>
+ </a>
+ </div>
+ <div class="medium-3 small-6 columns">
+ <a href="http://zurb.com/notable" class="footer-link-block apps">
+ <span class="title">Notable Design Apps</span>
+ <span>Prototype, iterate and collect feedback on your products.</span>
+ </a>
+ </div>
+ <div class="medium-3 small-6 columns">
+ <a href="http://zurb.com/university" class="footer-link-block expo">
+ <span class="title">University</span>
+ <span>Ideas, thoughts and design resources shared with you.</span>
+ </a>
+ </div>
+ </div>
+</div>
+
+<div class="zurb-footer-bottom">
+ <div class="row">
+ <div class="medium-4 medium-4 push-8 columns">
+ <ul class="home-social">
+ <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
+ <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
+ <li><a href="http://zurb.com/contact" class="mail"></a></li>
+ </ul>
+ </div>
+ <div class="medium-8 medium-8 pull-4 columns">
+ <a href="http://www.zurb.com" class="zurb-logo regular"></a>
+ <ul class="zurb-links">
+ <li><a href="http://zurb.com/about">About</a></li>
+ <li><a href="http://zurb.com/blog">Blog</a></li>
+ <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
+ <li><a href="http://zurb.com/contact">Contact</a></li>
+ <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
+ </ul>
+ <p class="copyright">© 1998‐2015 ZURB, Inc. All rights reserved.</p>
+ </div>
+ </div>
+</div>
+
+ </section>
+
+ </div>
+ </div>
+
+ <script src="assets/js/templates.js"></script>
+ <script src="assets/js/all.js"></script>
+ <script>
+ var _gaq = _gaq || [];
+ _gaq.push(
+ ['_setAccount', 'UA-2195009-2'],
+ ['_trackPageview'],
+ ['b._setAccount', 'UA-2195009-27'],
+ ['b._trackPageview']
+ );
+
+ (function() {
+ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+ })();
+ </script>
+ <script>
+ $(document).foundation().foundation('joyride', 'start');
+ </script>
+ </body>
+
- <script>
- var _gaq = _gaq || [];
- _gaq.push(
- ['_setAccount', 'UA-2195009-2'],
- ['_trackPageview'],
- ['b._setAccount', 'UA-2195009-27'],
- ['b._trackPageview']
- );
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
-
- <script src="assets/js/vendor.js?hash=eea56a9bbd481f5fb589c795278c937e"></script>
- <script src="assets/js/foundation.js?hash=27883adfc099331fb834a321f5f562f6"></script>
- <script src="assets/js/docs.js?hash=b638832d7cc98c6c1590415668539123"></script>
- <script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
-</body>
</html>
+++ /dev/null
-[
- {
- "type": "old version",
- "name": "Foundation 2",
- "description": "Documentation for Foundation 2.2.1",
- "link": "https://get.foundation/sites/docs/v/2.2.1/",
- "tags": [
- "old",
- "previous"
- ]
- },
- {
- "type": "old version",
- "name": "Foundation 5",
- "description": "Documentation for Foundation 5.5.3",
- "link": "https://get.foundation/sites/docs/v/5.5.3/index.html",
- "tags": [
- "old",
- "previous"
- ]
- },
- {
- "type": "library",
- "name": "Panini",
- "description": "A flat file compiler that powers our prototyping template. Create pages with consistent layouts and reusable partials with ease.",
- "link": "panini.html",
- "tags": []
- },
- {
- "type": "library",
- "name": "Style Sherpa",
- "description": "Bundled with the ZURB Template, Style Sherpa makes it easy to create a style guide for your codebase, with just two files.",
- "link": "style-sherpa.html",
- "tags": []
- },
- {
- "type": "library",
- "name": "Motion UI",
- "description": "A Sass library for creating flexible UI transitions and animations.",
- "link": "motion-ui.html",
- "tags": []
- },
- {
- "type": "old version",
- "name": "Foundation 3",
- "description": "Documentation for Foundation 3.2.5",
- "link": "https://get.foundation/sites/docs/v/3.2.5/",
- "tags": [
- "old",
- "previous"
- ]
- },
- {
- "type": "old version",
- "name": "Foundation 4",
- "description": "Documentation for Foundation 4.3.2",
- "link": "https://get.foundation/sites/docs/v/4.3.2/index.html",
- "tags": [
- "old",
- "previous"
- ]
- },
- {
- "type": "page",
- "name": "Navigation",
- "description": "Foundation is bundled with many simple navigation patterns, which can be combined to form more complex, robust responsive navigation solutions.",
- "link": "navigation.html",
- "tags": []
- },
- {
- "type": "page",
- "name": "Sass",
- "description": "Foundation is written in Sass, which allows us to make the codebase customizable and flexible.",
- "link": "sass.html",
- "tags": []
- },
- {
- "type": "page",
- "name": "Starter Projects",
- "description": "We have a few starter project templates that can be installed with the Foundation CLI. You can also download them manually!",
- "link": "starter-projects.html",
- "tags": []
- },
- {
- "type": "page",
- "name": "Kitchen Sink",
- "description": "Everything but.",
- "link": "kitchen-sink.html",
- "tags": []
- },
- {
- "type": "page",
- "name": "JavaScript",
- "description": "Our JavaScript is easy to set up and only requires jQuery to get going.",
- "link": "javascript.html",
- "tags": []
- },
- {
- "type": "page",
- "name": "JavaScript Utilities",
- "description": "Our JavaScript Utility Libraries are easy to use and super helpful.",
- "link": "javascript-utilities.html",
- "tags": []
- },
- {
- "type": "page",
- "name": "Installation",
- "description": "There are many ways to install Foundation, but if you're just getting started, we have a few suggestions.",
- "link": "installation.html",
- "tags": []
- },
- {
- "type": "page",
- "name": "Foundation for Sites",
- "description": "We built Foundation for Sites to be the most advanced responsive front-end framework in the world.",
- "link": "index.html",
- "tags": [
- "index",
- "home"
- ]
- },
- {
- "type": "page",
- "name": "Float Classes",
- "description": "Foundation includes a handful of helpful float classes to add common positioning behaviors to elements.",
- "link": "float-classes.html",
- "tags": []
- },
- {
- "type": "page",
- "name": "Right-to-Left Support",
- "description": "Foundation can easily adapt its components to work with languages that read from right to left.",
- "link": "rtl.html",
- "tags": []
- },
- {
- "type": "page",
- "name": "Compatibility",
- "description": "Foundation is tested across many browsers and devices, and works back as far as IE9 and Android 2.",
- "link": "compatibility.html",
- "tags": [
- "support",
- "browser"
- ]
- },
- {
- "type": "page",
- "name": "Accessibility",
- "description": "Foundation for Sites is a fully-accessible framework. Here are some general guidelines to keep in mind as you make your pages accessible.",
- "link": "accessibility.html",
- "tags": []
- },
- {
- "type": "component",
- "name": "Forms",
- "description": "We set out to create an easy, powerful and versatile form layout system. A combination of form styles and the Foundation grid means you can do almost anything.",
- "link": "forms.html",
- "tags": [
- "input",
- "select",
- "radio",
- "checkbox"
- ]
- },
- {
- "type": "component",
- "name": "Flex Grid",
- "description": "New in Foundation 6 is a Flexbox-powered grid, which you can use instead of the traditional float grid.",
- "link": "flex-grid.html",
- "tags": []
- },
- {
- "type": "component",
- "name": "Sass Functions",
- "description": "Behind the scenes, Foundation is powered by a set of utility Sass functions that help us work with colors, units, selectors, and more.",
- "link": "sass-functions.html",
- "tags": []
- },
- {
- "type": "component",
- "name": "Reveal",
- "description": "Modal dialogs, or pop-up windows, are handy for prototyping and production. Foundation includes Reveal, our jQuery modal plugin, to make this easy for you.",
- "link": "reveal.html",
- "tags": [
- "modal"
- ]
- },
- {
- "type": "component",
- "name": "Sass Mixins",
- "link": "sass-mixins.html",
- "tags": []
- },
- {
- "type": "component",
- "name": "Responsive Navigation",
- "description": "Our three Menu patterns form like Voltron into one responsive Menu plugin, which allows you to switch between patterns at different screen sizes.",
- "link": "responsive-navigation.html",
- "tags": []
- },
- {
- "type": "component",
- "name": "Progress Bar",
- "description": "Show your progress. A simple way to add progress bars to your layouts. You only need two HTML elements to make them and they're easy to customize.",
- "link": "progress-bar.html",
- "tags": []
- },
- {
- "type": "component",
- "name": "Abide",
- "description": "Abide is a form validation library that extends the HTML5 validation API with custom validators.",
- "link": "abide.html",
- "tags": [
- "forms",
- "validation"
- ]
- },
- {
- "type": "component",
- "name": "Pagination",
- "description": "Pagination is a type of navigation that lets users click through pages of search results, products, or other related items.",
- "link": "pagination.html",
- "tags": []
- },
- {
- "type": "component",
- "name": "Slider",
- "description": "This handy lil slider is perfect for setting specific values within a range.",
- "link": "slider.html",
- "tags": [
- "range"
- ]
- },
- {
- "type": "component",
- "name": "Sticky",
- "description": "Stick nearly anything, anywhere you like!",
- "link": "sticky.html",
- "tags": []
- },
- {
- "type": "component",
- "name": "Switch",
- "description": "Now you can tell your users to flip the switch or switch off.",
- "link": "switch.html",
- "tags": []
- },
- {
- "type": "component",
- "name": "Orbit",
- "description": "An image and content carousel with animation support and many customizable options.",
- "link": "orbit.html",
- "tags": [
- "slider",
- "carousel"
- ]
- },
- {
- "type": "component",
- "name": "Off-canvas",
- "description": "Off-canvas menus are positioned outside of the viewport and slide in when activated. Setting up an off-canvas layout in Foundation is super easy.",
- "link": "off-canvas.html",
- "tags": [
- "navigation"
- ]
- },
- {
- "type": "component",
- "name": "Menu",
- "description": "Our flexible menu component makes it easy to build many common navigation patterns, all with the same markup.",
- "link": "menu.html",
- "tags": [
- "navigation",
- "side nav",
- "sub nav",
- "icon bar",
- "top bar"
- ]
- },
- {
- "type": "component",
- "name": "Accordion Menu",
- "description": "Change a basic vertical Menu into a expandable accordion menu with the Accordion Menu plugin.",
- "link": "accordion-menu.html",
- "tags": []
- },
- {
- "type": "component",
- "name": "Tables",
- "description": "Okay, they're not the sexiest things ever, but tables get the job done (for tabular data, of course). They have responsive modifiers to help solve some of your layout issues based on your tables needs.",
- "link": "table.html",
- "tags": []
- },
- {
- "type": "component",
- "name": "Media Queries",
- "description": "CSS media queries allow us to adjust the display and orientation of content at different screen sizes.",
- "link": "media-queries.html",
- "tags": [
- "breakpoints"
- ]
- },
- {
- "type": "component",
- "name": "Media Object",
- "description": "Media objects are super useful components for displaying an item, usually an image, alongside some content, usually text. You could put lists, grids, or even other media objects inside.",
- "link": "media-object.html",
- "tags": []
- },
- {
- "type": "component",
- "name": "Magellan",
- "description": "Magellan allows you to create navigation that tracks the active section of a page your user is in. Pair it with our Sticky plugin to create a fixed navigation element.",
- "link": "magellan.html",
- "tags": [
- "navigation"
- ]
- },
- {
- "type": "component",
- "name": "Label",
- "description": "Labels are useful inline styles that can be dropped into body copy to call out certain sections or to attach metadata. For example, you can attach a label that notes when something was updated.",
- "link": "label.html",
- "tags": []
- },
- {
- "type": "component",
- "name": "Visibility Classes",
- "description": "Visibility classes let you show or hide elements based on screen size or device orientation. You can also use visibility classes to control which elements users see depending on their browsing environment.",
- "link": "visibility.html",
- "tags": [
- "hide",
- "show"
- ]
- },
- {
- "type": "component",
- "name": "Tabs",
- "description": "Tabs are elements that help you organize and navigate multiple documents in a single container. They can be used for switching between items in the container.",
- "link": "tabs.html",
- "tags": []
- },
- {
- "type": "component",
- "name": "Interchange",
- "description": "Interchange uses media queries to dynamically load responsive content that is appropriate for the user's device.",
- "link": "interchange.html",
- "tags": []
- },
- {
- "type": "component",
- "name": "The Grid",
- "description": "Create powerful multi-device layouts quickly and easily with the default 12-column, nestable Foundation grid. If you're familiar with grid systems, you'll feel right at home. If not, you'll learn quickly.",
- "link": "grid.html",
- "tags": [
- "block grid"
- ]
- },
- {
- "type": "component",
- "name": "Global Styles",
- "description": "Our global CSS includes helpful resets to ensure consistent styling across browsers.",
- "link": "global.html",
- "tags": []
- },
- {
- "type": "component",
- "name": "Typography Helpers",
- "description": "Our helper classes allow you to scaffold certain typographic styles faster.",
- "link": "typography-helpers.html",
- "tags": [
- "alignment",
- "subheader",
- "lead",
- "statistic"
- ]
- },
- {
- "type": "component",
- "name": "Flexbox",
- "description": "For browsers with cutting-edge support, some of Foundation's key components can be converted to flexbox.",
- "link": "flexbox.html",
- "tags": []
- },
- {
- "type": "component",
- "name": "Accordion",
- "description": "Accordions are elements that help you organize and navigate multiple documents in a single container. They can be used for switching between items in the container.",
- "link": "accordion.html",
- "tags": []
- },
- {
- "type": "component",
- "name": "Flex Video",
- "description": "Wrap embedded videos from YouTube, Vimeo, and others in a flex video container to ensure they maintain the correct aspect ratio regardless of screen size.",
- "link": "flex-video.html",
- "tags": []
- },
- {
- "type": "component",
- "name": "Thumbnail",
- "description": "If you're going to use an image as an anchor, we've got you covered. All you gotta do is add one class to your image and voilà!",
- "link": "thumbnail.html",
- "tags": []
- },
- {
- "type": "component",
- "name": "Equalizer",
- "description": "Equalizer makes it dead simple to give multiple items equal height.",
- "link": "equalizer.html",
- "tags": []
- },
- {
- "type": "component",
- "name": "Toggler",
- "description": "Toggler makes it easy to toggle CSS or animate any element with a click.",
- "link": "toggler.html",
- "tags": []
- },
- {
- "type": "component",
- "name": "Tooltip",
- "description": "Tooltips? More like <em>Cooltips</em>. But really though, tooltips are nifty for displaying extended information for a term or action on a page.",
- "link": "tooltip.html",
- "tags": []
- },
- {
- "type": "component",
- "name": "Dropdown",
- "description": "Dropdown panes are little happy sprites which can be revealed on click or hover.",
- "link": "dropdown.html",
- "tags": []
- },
- {
- "type": "component",
- "name": "Top Bar",
- "description": "The new top bar is a simpler wrapper around our flexible menu components.",
- "link": "top-bar.html",
- "tags": []
- },
- {
- "type": "component",
- "name": "Base Typography",
- "description": "Typography in Foundation 6 is meant to make your life easier by providing clean, attractive, simple default styles for all of the most basic typographical elements.",
- "link": "typography-base.html",
- "tags": [
- "paragraph",
- "heading",
- "link",
- "definition",
- "blockquote",
- "abbreviation",
- "acronym",
- "code",
- "keystroke"
- ]
- },
- {
- "type": "component",
- "name": "Dropdown Menu",
- "description": "Change a basic Menu into an expandable dropdown menu with the Dropdown Menu plugin.",
- "link": "dropdown-menu.html",
- "tags": []
- },
- {
- "type": "component",
- "name": "Drilldown Menu",
- "description": "Drilldown is one of Foundation's three menu patterns, which converts a series of nested lists into a vertical drilldown menu.",
- "link": "drilldown-menu.html",
- "tags": []
- },
- {
- "type": "component",
- "name": "Close Button",
- "description": "The humble close button can be used anywhere you need something to go away on click.",
- "link": "close-button.html",
- "tags": []
- },
- {
- "type": "component",
- "name": "Callout",
- "description": "Callouts combine panels and alerts from Foundation 5 into one generic container component.",
- "link": "callout.html",
- "tags": [
- "panel",
- "alert"
- ]
- },
- {
- "type": "component",
- "name": "Button",
- "description": "Buttons are convenient tools when you need more traditional actions. To that end, Foundation has many easy to use button styles that you can customize or override to fit your needs.",
- "link": "button.html",
- "tags": [
- "dropdown button"
- ]
- },
- {
- "type": "component",
- "name": "Button Group",
- "description": "Button groups are containers for related action items. They're great when you need to display a group of actions in a bar. These build off the button styles and work perfectly with the grid.",
- "link": "button-group.html",
- "tags": [
- "split button"
- ]
- },
- {
- "type": "component",
- "name": "Breadcrumbs",
- "description": "Breadcrumbs come in handy to show a navigation trail for users clicking through your site.",
- "link": "breadcrumbs.html",
- "tags": []
- },
- {
- "type": "component",
- "name": "Base Typography",
- "description": "Typography in Foundation 6 is meant to make your life easier by providing clean, attractive, simple default styles for all of the most basic typographical elements.",
- "link": "base-typography.html",
- "tags": [
- "paragraph",
- "heading",
- "link",
- "definition",
- "blockquote",
- "abbreviation",
- "acronym",
- "code",
- "keystroke"
- ]
- },
- {
- "type": "component",
- "name": "Badge",
- "description": "The badge is a basic component that displays a number. It's useful for calling out a number of unread items.",
- "link": "badge.html",
- "tags": []
- },
- {
- "name": "$input-font-size",
- "type": "sass variable",
- "description": "Font size of text inputs.",
- "link": "forms.html#sass-variables"
- },
- {
- "name": "$code-font-weight",
- "type": "sass variable",
- "description": "Font weight of text in code samples.",
- "link": "typography-base.html#sass-variables"
- },
- {
- "name": "$code-background",
- "type": "sass variable",
- "description": "Background color of code samples.",
- "link": "typography-base.html#sass-variables"
- },
- {
- "name": "$badge-background",
- "type": "sass variable",
- "description": "Default background color for badges.",
- "link": "badge.html#sass-variables"
- },
- {
- "name": "$badge-color",
- "type": "sass variable",
- "description": "Default text color for badges.",
- "link": "badge.html#sass-variables"
- },
- {
- "name": "$badge-padding",
- "type": "sass variable",
- "description": "Default padding inside badges.",
- "link": "badge.html#sass-variables"
- },
- {
- "name": "$badge-minwidth",
- "type": "sass variable",
- "description": "Minimum width of a badge.",
- "link": "badge.html#sass-variables"
- },
- {
- "name": "$badge-font-size",
- "type": "sass variable",
- "description": "Default font size for badges.",
- "link": "badge.html#sass-variables"
- },
- {
- "name": "$code-border",
- "type": "sass variable",
- "description": "Border around code samples.",
- "link": "typography-base.html#sass-variables"
- },
- {
- "name": "$print-transparent-backgrounds",
- "type": "sass variable",
- "description": "If true`, all elements will have transparent backgrounds when printed, to save on ink.\n",
- "link": "base-typography.html#sass-variables"
- },
- {
- "name": "$header-font-family",
- "type": "sass variable",
- "description": "Font family for header elements.",
- "link": "base-typography.html#sass-variables"
- },
- {
- "name": "$header-font-weight",
- "type": "sass variable",
- "description": "Font weight of headers.",
- "link": "base-typography.html#sass-variables"
- },
- {
- "name": "$header-font-style",
- "type": "sass variable",
- "description": "Font style (e.g. italicized) of headers.",
- "link": "base-typography.html#sass-variables"
- },
- {
- "name": "$font-family-monospace",
- "type": "sass variable",
- "description": "Font stack used for elements that use monospaced type, such as code samples",
- "link": "base-typography.html#sass-variables"
- },
- {
- "name": "$header-sizes",
- "type": "sass variable",
- "description": "Sizes of headings at various screen sizes. Each key is a breakpoint, and each value is a map of heading sizes.",
- "link": "base-typography.html#sass-variables"
- },
- {
- "name": "$header-color",
- "type": "sass variable",
- "description": "Color of headers.",
- "link": "base-typography.html#sass-variables"
- },
- {
- "name": "$header-lineheight",
- "type": "sass variable",
- "description": "Line height of headers.",
- "link": "base-typography.html#sass-variables"
- },
- {
- "name": "$header-margin-bottom",
- "type": "sass variable",
- "description": "Bottom margin of headers.",
- "link": "base-typography.html#sass-variables"
- },
- {
- "name": "$header-text-rendering",
- "type": "sass variable",
- "description": "Text rendering method of headers.",
- "link": "base-typography.html#sass-variables"
- },
- {
- "name": "$small-font-size",
- "type": "sass variable",
- "description": "Font size of <small>` elements.\n",
- "link": "base-typography.html#sass-variables"
- },
- {
- "name": "$header-small-font-color",
- "type": "sass variable",
- "description": "Color of <small>` elements when placed inside headers.\n",
- "link": "base-typography.html#sass-variables"
- },
- {
- "name": "$paragraph-lineheight",
- "type": "sass variable",
- "description": "Line height of text inside <p>` elements.\n",
- "link": "base-typography.html#sass-variables"
- },
- {
- "name": "$paragraph-margin-bottom",
- "type": "sass variable",
- "description": "Bottom margin of paragraphs.",
- "link": "base-typography.html#sass-variables"
- },
- {
- "name": "$paragraph-text-rendering",
- "type": "sass variable",
- "description": "Text rendering method for paragraph text.",
- "link": "base-typography.html#sass-variables"
- },
- {
- "name": "$code-color",
- "type": "sass variable",
- "description": "Text color of code samples.",
- "link": "base-typography.html#sass-variables"
- },
- {
- "name": "$code-font-family",
- "type": "sass variable",
- "description": "Font family of code samples.",
- "link": "base-typography.html#sass-variables"
- },
- {
- "name": "$code-font-weight",
- "type": "sass variable",
- "description": "Font weight of text in code samples.",
- "link": "base-typography.html#sass-variables"
- },
- {
- "name": "$code-background",
- "type": "sass variable",
- "description": "Background color of code samples.",
- "link": "base-typography.html#sass-variables"
- },
- {
- "name": "$code-border",
- "type": "sass variable",
- "description": "Border around code samples.",
- "link": "base-typography.html#sass-variables"
- },
- {
- "name": "$code-padding",
- "type": "sass variable",
- "description": "Padding around text of code samples.",
- "link": "base-typography.html#sass-variables"
- },
- {
- "name": "$anchor-color",
- "type": "sass variable",
- "description": "Default color for links.",
- "link": "base-typography.html#sass-variables"
- },
- {
- "name": "$anchor-color-hover",
- "type": "sass variable",
- "description": "Default color for links on hover.",
- "link": "base-typography.html#sass-variables"
- },
- {
- "name": "$anchor-text-decoration",
- "type": "sass variable",
- "description": "Default text deocration for links.",
- "link": "base-typography.html#sass-variables"
- },
- {
- "name": "$anchor-text-decoration-hover",
- "type": "sass variable",
- "description": "Default text decoration for links on hover.",
- "link": "base-typography.html#sass-variables"
- },
- {
- "name": "$hr-width",
- "type": "sass variable",
- "description": "Maximum width of a divider.",
- "link": "base-typography.html#sass-variables"
- },
- {
- "name": "$hr-border",
- "type": "sass variable",
- "description": "Default border for a divider.",
- "link": "base-typography.html#sass-variables"
- },
- {
- "name": "$hr-margin",
- "type": "sass variable",
- "description": "Default margin for a divider.",
- "link": "base-typography.html#sass-variables"
- },
- {
- "name": "$list-lineheight",
- "type": "sass variable",
- "description": "Line height for items in a list.",
- "link": "base-typography.html#sass-variables"
- },
- {
- "name": "$list-margin-bottom",
- "type": "sass variable",
- "description": "Bottom margin for items in a list.",
- "link": "base-typography.html#sass-variables"
- },
- {
- "name": "$list-style-type",
- "type": "sass variable",
- "description": "Bullet type to use for unordered lists (e.g., square`, `circle`, `disc`).\n",
- "link": "base-typography.html#sass-variables"
- },
- {
- "name": "$list-style-position",
- "type": "sass variable",
- "description": "Positioning for bullets on unordered list items.",
- "link": "base-typography.html#sass-variables"
- },
- {
- "name": "$list-side-margin",
- "type": "sass variable",
- "description": "Left (or right) margin for lists.",
- "link": "base-typography.html#sass-variables"
- },
- {
- "name": "$list-nested-side-margin",
- "type": "sass variable",
- "description": "Left (or right) margin for a list inside a list.",
- "link": "base-typography.html#sass-variables"
- },
- {
- "name": "$defnlist-margin-bottom",
- "type": "sass variable",
- "description": "Bottom margin for <dl>` elements.\n",
- "link": "base-typography.html#sass-variables"
- },
- {
- "name": "$defnlist-term-weight",
- "type": "sass variable",
- "description": "Font weight for <dt>` elements.\n",
- "link": "base-typography.html#sass-variables"
- },
- {
- "name": "$defnlist-term-margin-bottom",
- "type": "sass variable",
- "description": "Spacing between <dt>` and `<dd>` elements.\n",
- "link": "base-typography.html#sass-variables"
- },
- {
- "name": "$blockquote-color",
- "type": "sass variable",
- "description": "Text color of <blockquote>` elements.\n",
- "link": "base-typography.html#sass-variables"
- },
- {
- "name": "$blockquote-padding",
- "type": "sass variable",
- "description": "Padding inside a <blockquote>` element.\n",
- "link": "base-typography.html#sass-variables"
- },
- {
- "name": "$blockquote-border",
- "type": "sass variable",
- "description": "Side border for <blockquote>` elements.\n",
- "link": "base-typography.html#sass-variables"
- },
- {
- "name": "$cite-font-size",
- "type": "sass variable",
- "description": "Font size for <cite>` elements.\n",
- "link": "base-typography.html#sass-variables"
- },
- {
- "name": "$cite-color",
- "type": "sass variable",
- "description": "Text color for <cite>` elements.\n",
- "link": "base-typography.html#sass-variables"
- },
- {
- "name": "$keystroke-font",
- "type": "sass variable",
- "description": "Font family for <kbd>` elements.\n",
- "link": "base-typography.html#sass-variables"
- },
- {
- "name": "$keystroke-color",
- "type": "sass variable",
- "description": "Text color for <kbd>` elements.\n",
- "link": "base-typography.html#sass-variables"
- },
- {
- "name": "$keystroke-background",
- "type": "sass variable",
- "description": "Background color for <kbd>` elements.\n",
- "link": "base-typography.html#sass-variables"
- },
- {
- "name": "$keystroke-padding",
- "type": "sass variable",
- "description": "Padding for <kbd>` elements.\n",
- "link": "base-typography.html#sass-variables"
- },
- {
- "name": "$keystroke-radius",
- "type": "sass variable",
- "description": "Border radius for <kbd>` elements.\n",
- "link": "base-typography.html#sass-variables"
- },
- {
- "name": "$abbr-underline",
- "type": "sass variable",
- "description": "Bottom border style for <abbr>` elements.\n",
- "link": "base-typography.html#sass-variables"
- },
- {
- "name": "$code-padding",
- "type": "sass variable",
- "description": "Padding around text of code samples.",
- "link": "typography-base.html#sass-variables"
- },
- {
- "name": "$breadcrumbs-margin",
- "type": "sass variable",
- "description": "Margin around a breadcrumbs container.",
- "link": "breadcrumbs.html#sass-variables"
- },
- {
- "name": "$breadcrumbs-item-font-size",
- "type": "sass variable",
- "description": "Font size of breadcrumb links.",
- "link": "breadcrumbs.html#sass-variables"
- },
- {
- "name": "$breadcrumbs-item-color",
- "type": "sass variable",
- "description": "Color of breadcrumb links.",
- "link": "breadcrumbs.html#sass-variables"
- },
- {
- "name": "$breadcrumbs-item-color-current",
- "type": "sass variable",
- "description": "Color of the active breadcrumb link.",
- "link": "breadcrumbs.html#sass-variables"
- },
- {
- "name": "$breadcrumbs-item-color-disabled",
- "type": "sass variable",
- "description": "Opacity of disabled breadcrumb links.",
- "link": "breadcrumbs.html#sass-variables"
- },
- {
- "name": "$breadcrumbs-item-margin",
- "type": "sass variable",
- "description": "Margin between breadcrumb items.",
- "link": "breadcrumbs.html#sass-variables"
- },
- {
- "name": "$breadcrumbs-item-uppercase",
- "type": "sass variable",
- "description": "If true`, makes breadcrumb links uppercase.\n",
- "link": "breadcrumbs.html#sass-variables"
- },
- {
- "name": "$breadcrumbs-item-slash",
- "type": "sass variable",
- "description": "If true`, adds a slash between breadcrumb links.\n",
- "link": "breadcrumbs.html#sass-variables"
- },
- {
- "name": "$anchor-color",
- "type": "sass variable",
- "description": "Default color for links.",
- "link": "typography-base.html#sass-variables"
- },
- {
- "name": "$buttongroup-margin",
- "type": "sass variable",
- "description": "Margin for button groups.",
- "link": "button-group.html#sass-variables"
- },
- {
- "name": "$buttongroup-spacing",
- "type": "sass variable",
- "description": "Margin between buttons in a button group.",
- "link": "button-group.html#sass-variables"
- },
- {
- "name": "$buttongroup-child-selector",
- "type": "sass variable",
- "description": "Selector for the buttons inside a button group.",
- "link": "button-group.html#sass-variables"
- },
- {
- "name": "$buttongroup-expand-max",
- "type": "sass variable",
- "description": "Maximum number of buttons that can be in an even-width button group.",
- "link": "button-group.html#sass-variables"
- },
- {
- "name": "$anchor-color-hover",
- "type": "sass variable",
- "description": "Default color for links on hover.",
- "link": "typography-base.html#sass-variables"
- },
- {
- "name": "$button-padding",
- "type": "sass variable",
- "description": "Padding inside buttons.",
- "link": "button.html#sass-variables"
- },
- {
- "name": "$button-margin",
- "type": "sass variable",
- "description": "Margin around buttons.",
- "link": "button.html#sass-variables"
- },
- {
- "name": "$button-fill",
- "type": "sass variable",
- "description": "Default fill for buttons. Can either be solid` or `hollow`.\n",
- "link": "button.html#sass-variables"
- },
- {
- "name": "$button-background",
- "type": "sass variable",
- "description": "Default background color for buttons.",
- "link": "button.html#sass-variables"
- },
- {
- "name": "$button-background-hover",
- "type": "sass variable",
- "description": "Background color on hover for buttons.",
- "link": "button.html#sass-variables"
- },
- {
- "name": "$button-color",
- "type": "sass variable",
- "description": "Font color for buttons.",
- "link": "button.html#sass-variables"
- },
- {
- "name": "$button-color-alt",
- "type": "sass variable",
- "description": "Font color for buttons, if the background is light.",
- "link": "button.html#sass-variables"
- },
- {
- "name": "$button-radius",
- "type": "sass variable",
- "description": "Border radius for buttons, defaulted to global-radius.",
- "link": "button.html#sass-variables"
- },
- {
- "name": "$button-sizes",
- "type": "sass variable",
- "description": "Sizes for buttons.",
- "link": "button.html#sass-variables"
- },
- {
- "name": "$button-opacity-disabled",
- "type": "sass variable",
- "description": "opacity for a disabled button.",
- "link": "button.html#sass-variables"
- },
- {
- "name": "$anchor-text-decoration",
- "type": "sass variable",
- "description": "Default text deocration for links.",
- "link": "typography-base.html#sass-variables"
- },
- {
- "name": "$callout-background",
- "type": "sass variable",
- "description": "Default background color.",
- "link": "callout.html#sass-variables"
- },
- {
- "name": "$callout-background-fade",
- "type": "sass variable",
- "description": "Default fade value for callout backgrounds.",
- "link": "callout.html#sass-variables"
- },
- {
- "name": "$callout-border",
- "type": "sass variable",
- "description": "Default border style for callouts.",
- "link": "callout.html#sass-variables"
- },
- {
- "name": "$callout-margin",
- "type": "sass variable",
- "description": "Default bottom margin for callouts.",
- "link": "callout.html#sass-variables"
- },
- {
- "name": "$callout-padding",
- "type": "sass variable",
- "description": "Default inner padding for callouts.",
- "link": "callout.html#sass-variables"
- },
- {
- "name": "$callout-font-color",
- "type": "sass variable",
- "description": "Default font color for callouts.",
- "link": "callout.html#sass-variables"
- },
- {
- "name": "$callout-font-color-alt",
- "type": "sass variable",
- "description": "Default font color for callouts, if the callout has a dark background.",
- "link": "callout.html#sass-variables"
- },
- {
- "name": "$callout-radius",
- "type": "sass variable",
- "description": "Default border radius for callouts.",
- "link": "callout.html#sass-variables"
- },
- {
- "name": "$callout-link-tint",
- "type": "sass variable",
- "description": "Amount to tint links used within colored panels. Set to false` to disable this feature.\n",
- "link": "callout.html#sass-variables"
- },
- {
- "name": "$anchor-text-decoration-hover",
- "type": "sass variable",
- "description": "Default text decoration for links on hover.",
- "link": "typography-base.html#sass-variables"
- },
- {
- "name": "$closebutton-position",
- "type": "sass variable",
- "description": "Default position of the close button. The first value should be right` or `left`, and the second value should be `top` or `bottom`.\n",
- "link": "close-button.html#sass-variables"
- },
- {
- "name": "$closebutton-offset-horizontal",
- "type": "sass variable",
- "description": "Right (or left) offset for a close button.",
- "link": "close-button.html#sass-variables"
- },
- {
- "name": "$closebutton-offset-vertical",
- "type": "sass variable",
- "description": "Top (or bottom) offset for a close button.",
- "link": "close-button.html#sass-variables"
- },
- {
- "name": "$closebutton-size",
- "type": "sass variable",
- "description": "Default font size of the close button.",
- "link": "close-button.html#sass-variables"
- },
- {
- "name": "$closebutton-lineheight",
- "type": "sass variable",
- "description": "The line-height of the close button. It affects the spacing of the element.",
- "link": "close-button.html#sass-variables"
- },
- {
- "name": "$closebutton-color",
- "type": "sass variable",
- "description": "Default color of the close button.",
- "link": "close-button.html#sass-variables"
- },
- {
- "name": "$closebutton-color-hover",
- "type": "sass variable",
- "description": "Default color of the close button when being hovered on.",
- "link": "close-button.html#sass-variables"
- },
- {
- "name": "$subheader-lineheight",
- "type": "sass variable",
- "description": "Default line height for subheaders.",
- "link": "typography-helpers.html#sass-variables"
- },
- {
- "name": "$hr-width",
- "type": "sass variable",
- "description": "Maximum width of a divider.",
- "link": "typography-base.html#sass-variables"
- },
- {
- "name": "$code-color",
- "type": "sass variable",
- "description": "Text color of code samples.",
- "link": "typography-base.html#sass-variables"
- },
- {
- "name": "$paragraph-text-rendering",
- "type": "sass variable",
- "description": "Text rendering method for paragraph text.",
- "link": "typography-base.html#sass-variables"
- },
- {
- "name": "$paragraph-margin-bottom",
- "type": "sass variable",
- "description": "Bottom margin of paragraphs.",
- "link": "typography-base.html#sass-variables"
- },
- {
- "name": "$paragraph-lineheight",
- "type": "sass variable",
- "description": "Line height of text inside <p>` elements.\n",
- "link": "typography-base.html#sass-variables"
- },
- {
- "name": "$header-small-font-color",
- "type": "sass variable",
- "description": "Color of <small>` elements when placed inside headers.\n",
- "link": "typography-base.html#sass-variables"
- },
- {
- "name": "$small-font-size",
- "type": "sass variable",
- "description": "Font size of <small>` elements.\n",
- "link": "typography-base.html#sass-variables"
- },
- {
- "name": "$header-text-rendering",
- "type": "sass variable",
- "description": "Text rendering method of headers.",
- "link": "typography-base.html#sass-variables"
- },
- {
- "name": "$header-margin-bottom",
- "type": "sass variable",
- "description": "Bottom margin of headers.",
- "link": "typography-base.html#sass-variables"
- },
- {
- "name": "$header-lineheight",
- "type": "sass variable",
- "description": "Line height of headers.",
- "link": "typography-base.html#sass-variables"
- },
- {
- "name": "$header-color",
- "type": "sass variable",
- "description": "Color of headers.",
- "link": "typography-base.html#sass-variables"
- },
- {
- "name": "$header-sizes",
- "type": "sass variable",
- "description": "Sizes of headings at various screen sizes. Each key is a breakpoint, and each value is a map of heading sizes.",
- "link": "typography-base.html#sass-variables"
- },
- {
- "name": "$font-family-monospace",
- "type": "sass variable",
- "description": "Font stack used for elements that use monospaced type, such as code samples",
- "link": "typography-base.html#sass-variables"
- },
- {
- "name": "$header-font-style",
- "type": "sass variable",
- "description": "Font style (e.g. italicized) of headers.",
- "link": "typography-base.html#sass-variables"
- },
- {
- "name": "$accordion-content-padding",
- "type": "sass variable",
- "description": "Default padding for tab content.",
- "link": "accordion.html#sass-variables"
- },
- {
- "name": "$dropdownmenu-arrows",
- "type": "sass variable",
- "description": "Enables arrows for items with dropdown menus.",
- "link": "dropdown-menu.html#sass-variables"
- },
- {
- "name": "$dropdownmenu-arrow-color",
- "type": "sass variable",
- "description": "Sets dropdown menu arrow color if arrow is used.",
- "link": "dropdown-menu.html#sass-variables"
- },
- {
- "name": "$dropdownmenu-min-width",
- "type": "sass variable",
- "description": "Minimum width of dropdown sub-menus.",
- "link": "dropdown-menu.html#sass-variables"
- },
- {
- "name": "$dropdownmenu-background",
- "type": "sass variable",
- "description": "Background color for dropdowns.",
- "link": "dropdown-menu.html#sass-variables"
- },
- {
- "name": "$dropdownmenu-border",
- "type": "sass variable",
- "description": "Border for dropdown sub-menus.",
- "link": "dropdown-menu.html#sass-variables"
- },
- {
- "name": "$header-font-weight",
- "type": "sass variable",
- "description": "Font weight of headers.",
- "link": "typography-base.html#sass-variables"
- },
- {
- "name": "$header-font-family",
- "type": "sass variable",
- "description": "Font family for header elements.",
- "link": "typography-base.html#sass-variables"
- },
- {
- "name": "$print-transparent-backgrounds",
- "type": "sass variable",
- "description": "If true`, all elements will have transparent backgrounds when printed, to save on ink.\n",
- "link": "typography-base.html#sass-variables"
- },
- {
- "name": "$accordion-content-color",
- "type": "sass variable",
- "description": "Default text color of tab content.",
- "link": "accordion.html#sass-variables"
- },
- {
- "name": "$topbar-unstack-breakpoint",
- "type": "sass variable",
- "description": "Breakpoint at which top bar switches from mobile to desktop view.",
- "link": "top-bar.html#sass-variables"
- },
- {
- "name": "$topbar-input-width",
- "type": "sass variable",
- "description": "Maximum width of <input>` elements inside the top bar.\n",
- "link": "top-bar.html#sass-variables"
- },
- {
- "name": "$topbar-title-spacing",
- "type": "sass variable",
- "description": "Spacing for the top bar title.",
- "link": "top-bar.html#sass-variables"
- },
- {
- "name": "$topbar-submenu-background",
- "type": "sass variable",
- "description": "Background color submenus within the top bar. Usefull if $topbar-background is transparent.",
- "link": "top-bar.html#sass-variables"
- },
- {
- "name": "$topbar-background",
- "type": "sass variable",
- "description": "Background color for the top bar. This color also cascades to menus within the top bar.",
- "link": "top-bar.html#sass-variables"
- },
- {
- "name": "$topbar-padding",
- "type": "sass variable",
- "description": "Padding for the top bar.",
- "link": "top-bar.html#sass-variables"
- },
- {
- "name": "$accordion-content-border",
- "type": "sass variable",
- "description": "Default border color of tab content.",
- "link": "accordion.html#sass-variables"
- },
- {
- "name": "$accordion-content-background",
- "type": "sass variable",
- "description": "Default background color of tab content.",
- "link": "accordion.html#sass-variables"
- },
- {
- "name": "$dropdown-padding",
- "type": "sass variable",
- "description": "Padding for dropdown panes.",
- "link": "dropdown.html#sass-variables"
- },
- {
- "name": "$dropdown-border",
- "type": "sass variable",
- "description": "Border for dropdown panes.",
- "link": "dropdown.html#sass-variables"
- },
- {
- "name": "$dropdown-font-size",
- "type": "sass variable",
- "description": "Font size for dropdown panes.",
- "link": "dropdown.html#sass-variables"
- },
- {
- "name": "$dropdown-width",
- "type": "sass variable",
- "description": "Width for dropdown panes.",
- "link": "dropdown.html#sass-variables"
- },
- {
- "name": "$dropdown-radius",
- "type": "sass variable",
- "description": "Border radius dropdown panes.",
- "link": "dropdown.html#sass-variables"
- },
- {
- "name": "$dropdown-sizes",
- "type": "sass variable",
- "description": "Sizes for dropdown panes. Each size is a CSS class you can apply.",
- "link": "dropdown.html#sass-variables"
- },
- {
- "name": "$tooltip-radius",
- "type": "sass variable",
- "description": "Default radius for tooltips.",
- "link": "tooltip.html#sass-variables"
- },
- {
- "name": "$tooltip-pip-height",
- "type": "sass variable",
- "description": "Default pip height for tooltips. This is helpful for calculating the distance of the tooltip from the tooltip word.",
- "link": "tooltip.html#sass-variables"
- },
- {
- "name": "$tooltip-pip-width",
- "type": "sass variable",
- "description": "Default pip width for tooltips.",
- "link": "tooltip.html#sass-variables"
- },
- {
- "name": "$tooltip-font-size",
- "type": "sass variable",
- "description": "Default font size of the tooltip text. By default, we recommend a smaller font size than the body copy.",
- "link": "tooltip.html#sass-variables"
- },
- {
- "name": "$tooltip-padding",
- "type": "sass variable",
- "description": "Default padding of the tooltip background.",
- "link": "tooltip.html#sass-variables"
- },
- {
- "name": "$tooltip-color",
- "type": "sass variable",
- "description": "Default color of the tooltip font.",
- "link": "tooltip.html#sass-variables"
- },
- {
- "name": "$tooltip-background-color",
- "type": "sass variable",
- "description": "Default color of the tooltip background.",
- "link": "tooltip.html#sass-variables"
- },
- {
- "name": "$has-tip-border-bottom",
- "type": "sass variable",
- "description": "Default border bottom of the defined term.",
- "link": "tooltip.html#sass-variables"
- },
- {
- "name": "$has-tip-font-weight",
- "type": "sass variable",
- "description": "Default font weight of the defined term.",
- "link": "tooltip.html#sass-variables"
- },
- {
- "name": "$accordion-item-padding",
- "type": "sass variable",
- "description": "Default padding of an accordion item.",
- "link": "accordion.html#sass-variables"
- },
- {
- "name": "$accordion-item-background-hover",
- "type": "sass variable",
- "description": "Default background color on hover for items in a Menu.",
- "link": "accordion.html#sass-variables"
- },
- {
- "name": "$thumbnail-radius",
- "type": "sass variable",
- "description": "Default radius for thumbnail images.",
- "link": "thumbnail.html#sass-variables"
- },
- {
- "name": "$thumbnail-transition",
- "type": "sass variable",
- "description": "Transition proprties for thumbnail images.",
- "link": "thumbnail.html#sass-variables"
- },
- {
- "name": "$thumbnail-shadow-hover",
- "type": "sass variable",
- "description": "Box shadow under thumbnail images.",
- "link": "thumbnail.html#sass-variables"
- },
- {
- "name": "$thumbnail-shadow",
- "type": "sass variable",
- "description": "Box shadow under thumbnail images.",
- "link": "thumbnail.html#sass-variables"
- },
- {
- "name": "$thumbnail-margin-bottom",
- "type": "sass variable",
- "description": "Bottom margin for thumbnail images.",
- "link": "thumbnail.html#sass-variables"
- },
- {
- "name": "$accordion-item-color",
- "type": "sass variable",
- "description": "Default text color for items in a Menu.",
- "link": "accordion.html#sass-variables"
- },
- {
- "name": "$thumbnail-border",
- "type": "sass variable",
- "description": "Border around thumbnail images.",
- "link": "thumbnail.html#sass-variables"
- },
- {
- "name": "$accordion-plusminus",
- "type": "sass variable",
- "description": "If true`, adds plus and minus icons to the side of each accordion title.\n",
- "link": "accordion.html#sass-variables"
- },
- {
- "name": "$tab-content-padding",
- "type": "sass variable",
- "description": "Default padding for tab content.",
- "link": "tabs.html#sass-variables"
- },
- {
- "name": "$tab-content-color",
- "type": "sass variable",
- "description": "Default text color of tab content.",
- "link": "tabs.html#sass-variables"
- },
- {
- "name": "$tab-content-border",
- "type": "sass variable",
- "description": "Default border color of tab content.",
- "link": "tabs.html#sass-variables"
- },
- {
- "name": "$tab-content-background",
- "type": "sass variable",
- "description": "Default background color of tab content.",
- "link": "tabs.html#sass-variables"
- },
- {
- "name": "$tab-expand-max",
- "type": "sass variable",
- "description": "Maximum number of expand-n` classes to include in the CSS.\n",
- "link": "tabs.html#sass-variables"
- },
- {
- "name": "$subheader-color",
- "type": "sass variable",
- "description": "Default font color for subheaders.",
- "link": "typography-helpers.html#sass-variables"
- },
- {
- "name": "$tab-item-padding",
- "type": "sass variable",
- "description": "Default padding of a tab item.",
- "link": "tabs.html#sass-variables"
- },
- {
- "name": "$accordion-background",
- "type": "sass variable",
- "description": "Default background color of an accordion group.",
- "link": "accordion.html#sass-variables"
- },
- {
- "name": "$flexvideo-margin-bottom",
- "type": "sass variable",
- "description": "Margin below a flex video container.",
- "link": "flex-video.html#sass-variables"
- },
- {
- "name": "$flexvideo-ratio",
- "type": "sass variable",
- "description": "Padding used to create a 4:3 aspect ratio.",
- "link": "flex-video.html#sass-variables"
- },
- {
- "name": "$flexvideo-ratio-widescreen",
- "type": "sass variable",
- "description": "Padding used to create a 16:9 aspect ratio.",
- "link": "flex-video.html#sass-variables"
- },
- {
- "name": "$tab-item-background-hover",
- "type": "sass variable",
- "description": "Default background color on hover for items in a Menu.",
- "link": "tabs.html#sass-variables"
- },
- {
- "name": "$hr-border",
- "type": "sass variable",
- "description": "Default border for a divider.",
- "link": "typography-base.html#sass-variables"
- },
- {
- "name": "$subheader-font-weight",
- "type": "sass variable",
- "description": "Default font weight for subheaders.",
- "link": "typography-helpers.html#sass-variables"
- },
- {
- "name": "$hr-margin",
- "type": "sass variable",
- "description": "Default margin for a divider.",
- "link": "typography-base.html#sass-variables"
- },
- {
- "name": "$fieldset-border",
- "type": "sass variable",
- "description": "Default border around custom fieldsets.",
- "link": "forms.html#sass-variables"
- },
- {
- "name": "$fieldset-padding",
- "type": "sass variable",
- "description": "Default padding inside custom fieldsets.",
- "link": "forms.html#sass-variables"
- },
- {
- "name": "$fieldset-margin",
- "type": "sass variable",
- "description": "Default margin around custom fieldsets.",
- "link": "forms.html#sass-variables"
- },
- {
- "name": "$legend-padding",
- "type": "sass variable",
- "description": "Default padding between the legend text and fieldset border.",
- "link": "forms.html#sass-variables"
- },
- {
- "name": "$form-spacing",
- "type": "sass variable",
- "description": "Global spacing for form elements.",
- "link": "forms.html#sass-variables"
- },
- {
- "name": "$helptext-color",
- "type": "sass variable",
- "description": "Default color for help text.",
- "link": "forms.html#sass-variables"
- },
- {
- "name": "$helptext-font-size",
- "type": "sass variable",
- "description": "Default font size for help text.",
- "link": "forms.html#sass-variables"
- },
- {
- "name": "$helptext-font-style",
- "type": "sass variable",
- "description": "Default font style for help text.",
- "link": "forms.html#sass-variables"
- },
- {
- "name": "$input-prefix-color",
- "type": "sass variable",
- "description": "Color of labels prefixed to an input.",
- "link": "forms.html#sass-variables"
- },
- {
- "name": "$input-prefix-background",
- "type": "sass variable",
- "description": "Background color of labels prefixed to an input.",
- "link": "forms.html#sass-variables"
- },
- {
- "name": "$input-prefix-border",
- "type": "sass variable",
- "description": "Border around labels prefixed to an input.",
- "link": "forms.html#sass-variables"
- },
- {
- "name": "$input-prefix-padding",
- "type": "sass variable",
- "description": "Left/right padding of an pre/postfixed input label",
- "link": "forms.html#sass-variables"
- },
- {
- "name": "$form-label-color",
- "type": "sass variable",
- "description": "Color for form labels.",
- "link": "forms.html#sass-variables"
- },
- {
- "name": "$form-label-font-size",
- "type": "sass variable",
- "description": "Font size for form labels.",
- "link": "forms.html#sass-variables"
- },
- {
- "name": "$form-label-font-weight",
- "type": "sass variable",
- "description": "Font weight for form labels.",
- "link": "forms.html#sass-variables"
- },
- {
- "name": "$form-label-line-height",
- "type": "sass variable",
- "description": "Line height for form labels. The higher the number, the more space between the label and its input field.",
- "link": "forms.html#sass-variables"
- },
- {
- "name": "$select-background",
- "type": "sass variable",
- "description": "Background color for select menus.",
- "link": "forms.html#sass-variables"
- },
- {
- "name": "$select-triangle-color",
- "type": "sass variable",
- "description": "Color of the dropdown triangle inside select menus. Set to transparent` to remove it entirely.\n",
- "link": "forms.html#sass-variables"
- },
- {
- "name": "$select-radius",
- "type": "sass variable",
- "description": "Default radius for select menus.",
- "link": "forms.html#sass-variables"
- },
- {
- "name": "$input-color",
- "type": "sass variable",
- "description": "Font color of text inputs.",
- "link": "forms.html#sass-variables"
- },
- {
- "name": "$input-placeholder-color",
- "type": "sass variable",
- "description": "Font color of placeholder text within text inputs.",
- "link": "forms.html#sass-variables"
- },
- {
- "name": "$input-font-family",
- "type": "sass variable",
- "description": "Font family of text inputs.",
- "link": "forms.html#sass-variables"
- },
- {
- "name": "$code-font-family",
- "type": "sass variable",
- "description": "Font family of code samples.",
- "link": "typography-base.html#sass-variables"
- },
- {
- "name": "$input-background",
- "type": "sass variable",
- "description": "Background color of text inputs.",
- "link": "forms.html#sass-variables"
- },
- {
- "name": "$input-background-focus",
- "type": "sass variable",
- "description": "Background color of focused of text inputs.",
- "link": "forms.html#sass-variables"
- },
- {
- "name": "$input-background-disabled",
- "type": "sass variable",
- "description": "Background color of disabled text inputs.",
- "link": "forms.html#sass-variables"
- },
- {
- "name": "$input-border",
- "type": "sass variable",
- "description": "Border around text inputs.",
- "link": "forms.html#sass-variables"
- },
- {
- "name": "$input-border-focus",
- "type": "sass variable",
- "description": "Border around focused text inputs.",
- "link": "forms.html#sass-variables"
- },
- {
- "name": "$input-shadow",
- "type": "sass variable",
- "description": "Box shadow inside text inputs when not focused.",
- "link": "forms.html#sass-variables"
- },
- {
- "name": "$input-shadow-focus",
- "type": "sass variable",
- "description": "Box shadow outside text inputs when focused.",
- "link": "forms.html#sass-variables"
- },
- {
- "name": "$input-cursor-disabled",
- "type": "sass variable",
- "description": "Cursor to use when hovering over a disabled text input.",
- "link": "forms.html#sass-variables"
- },
- {
- "name": "$input-transition",
- "type": "sass variable",
- "description": "Properties to transition on text inputs.",
- "link": "forms.html#sass-variables"
- },
- {
- "name": "$input-number-spinners",
- "type": "sass variable",
- "description": "Enables the up/down buttons that Chrome and Firefox add to <input type='number'>` elements.\n",
- "link": "forms.html#sass-variables"
- },
- {
- "name": "$input-radius",
- "type": "sass variable",
- "description": "Radius for text inputs.",
- "link": "forms.html#sass-variables"
- },
- {
- "name": "$meter-height",
- "type": "sass variable",
- "description": "Height of a <meter>` element.\n",
- "link": "forms.html#sass-variables"
- },
- {
- "name": "$meter-radius",
- "type": "sass variable",
- "description": "Border radius of a <meter>` element.\n",
- "link": "forms.html#sass-variables"
- },
- {
- "name": "$meter-background",
- "type": "sass variable",
- "description": "Background color of a <meter>` element.\n",
- "link": "forms.html#sass-variables"
- },
- {
- "name": "$meter-fill-good",
- "type": "sass variable",
- "description": "Meter fill for an optimal value in a <meter>` element.\n",
- "link": "forms.html#sass-variables"
- },
- {
- "name": "$meter-fill-medium",
- "type": "sass variable",
- "description": "Meter fill for an average value in a <meter>` element.\n",
- "link": "forms.html#sass-variables"
- },
- {
- "name": "$meter-fill-bad",
- "type": "sass variable",
- "description": "Meter fill for a suboptimal value in a <meter>` element.\n",
- "link": "forms.html#sass-variables"
- },
- {
- "name": "$progress-height",
- "type": "sass variable",
- "description": "Height of a progress bar.",
- "link": "forms.html#sass-variables"
- },
- {
- "name": "$progress-background",
- "type": "sass variable",
- "description": "Background color of a progress bar.",
- "link": "forms.html#sass-variables"
- },
- {
- "name": "$progress-margin-bottom",
- "type": "sass variable",
- "description": "Bottom margin of a progress bar.",
- "link": "forms.html#sass-variables"
- },
- {
- "name": "$progress-meter-background",
- "type": "sass variable",
- "description": "Default color of a progress bar's meter.",
- "link": "forms.html#sass-variables"
- },
- {
- "name": "$progress-radius",
- "type": "sass variable",
- "description": "Default radius of a progress bar.",
- "link": "forms.html#sass-variables"
- },
- {
- "name": "$slider-height",
- "type": "sass variable",
- "description": "Default height of the slider.",
- "link": "forms.html#sass-variables"
- },
- {
- "name": "$slider-background",
- "type": "sass variable",
- "description": "Default background color of the slider's track.",
- "link": "forms.html#sass-variables"
- },
- {
- "name": "$slider-fill-background",
- "type": "sass variable",
- "description": "Default color of the active fill color of the slider.",
- "link": "forms.html#sass-variables"
- },
- {
- "name": "$slider-handle-height",
- "type": "sass variable",
- "description": "Default height of the handle of the slider.",
- "link": "forms.html#sass-variables"
- },
- {
- "name": "$slider-handle-width",
- "type": "sass variable",
- "description": "Default width of the handle of the slider.",
- "link": "forms.html#sass-variables"
- },
- {
- "name": "$slider-handle-background",
- "type": "sass variable",
- "description": "Default color of the handle for the slider.",
- "link": "forms.html#sass-variables"
- },
- {
- "name": "$slider-opacity-disabled",
- "type": "sass variable",
- "description": "Default fade amount of a disabled slider.",
- "link": "forms.html#sass-variables"
- },
- {
- "name": "$slider-radius",
- "type": "sass variable",
- "description": "Default radius for slider.",
- "link": "forms.html#sass-variables"
- },
- {
- "name": "$list-lineheight",
- "type": "sass variable",
- "description": "Line height for items in a list.",
- "link": "typography-base.html#sass-variables"
- },
- {
- "name": "$global-font-size",
- "type": "sass variable",
- "description": "Font size attribute applied to <html>` and `<body>`. We use 100% by default so the value is inherited from the user's browser settings.\n",
- "link": "global.html#sass-variables"
- },
- {
- "name": "$global-width",
- "type": "sass variable",
- "description": "Global width of your site. Used by the grid to determine row width.",
- "link": "global.html#sass-variables"
- },
- {
- "name": "$global-lineheight",
- "type": "sass variable",
- "description": "Default line height for all type. $global-lineheight` is 24px while `$global-font-size` is 16px\n",
- "link": "global.html#sass-variables"
- },
- {
- "name": "$foundation-palette",
- "type": "sass variable",
- "description": "Colors used for buttons, callouts, links, etc. There must always be a color called primary`.\n",
- "link": "global.html#sass-variables"
- },
- {
- "name": "$light-gray",
- "type": "sass variable",
- "description": "Color used for light gray UI items.",
- "link": "global.html#sass-variables"
- },
- {
- "name": "$medium-gray",
- "type": "sass variable",
- "description": "Color used for medium gray UI items.",
- "link": "global.html#sass-variables"
- },
- {
- "name": "$dark-gray",
- "type": "sass variable",
- "description": "Color used for dark gray UI items.",
- "link": "global.html#sass-variables"
- },
- {
- "name": "$black",
- "type": "sass variable",
- "description": "Color used for black ui items.",
- "link": "global.html#sass-variables"
- },
- {
- "name": "$white",
- "type": "sass variable",
- "description": "Color used for white ui items.",
- "link": "global.html#sass-variables"
- },
- {
- "name": "$body-background",
- "type": "sass variable",
- "description": "Background color of the body.",
- "link": "global.html#sass-variables"
- },
- {
- "name": "$body-font-color",
- "type": "sass variable",
- "description": "Text color of the body.",
- "link": "global.html#sass-variables"
- },
- {
- "name": "$body-font-family",
- "type": "sass variable",
- "description": "Font stack of the body.",
- "link": "global.html#sass-variables"
- },
- {
- "name": "$body-antialiased",
- "type": "sass variable",
- "description": "Set to true` to enable antialiased type, using the `-webkit-font-smoothing` and `-moz-osx-font-smoothing` CSS properties.\n",
- "link": "global.html#sass-variables"
- },
- {
- "name": "$global-margin",
- "type": "sass variable",
- "description": "Global value used for margin on components.",
- "link": "global.html#sass-variables"
- },
- {
- "name": "$global-padding",
- "type": "sass variable",
- "description": "Global value used for padding on components.",
- "link": "global.html#sass-variables"
- },
- {
- "name": "$global-weight-normal",
- "type": "sass variable",
- "description": "Global font weight used for normal type.",
- "link": "global.html#sass-variables"
- },
- {
- "name": "$global-weight-bold",
- "type": "sass variable",
- "description": "Global font weight used for bold type.",
- "link": "global.html#sass-variables"
- },
- {
- "name": "$global-radius",
- "type": "sass variable",
- "description": "Global value used for all elements that have a border radius.",
- "link": "global.html#sass-variables"
- },
- {
- "name": "$global-text-direction",
- "type": "sass variable",
- "description": "Sets the text direction of the CSS. Can be either ltr` or `rtl`.\n",
- "link": "global.html#sass-variables"
- },
- {
- "name": "$global-flexbox",
- "type": "sass variable",
- "description": "Enables flexbox for components that support it.",
- "link": "global.html#sass-variables"
- },
- {
- "name": "$list-margin-bottom",
- "type": "sass variable",
- "description": "Bottom margin for items in a list.",
- "link": "typography-base.html#sass-variables"
- },
- {
- "name": "$grid-row-width",
- "type": "sass variable",
- "description": "The maximum width of a row.",
- "link": "grid.html#sass-variables"
- },
- {
- "name": "$grid-column-count",
- "type": "sass variable",
- "description": "The default column count of a grid. Changing this value affects the logic of the grid mixins, and the number of CSS classes output.",
- "link": "grid.html#sass-variables"
- },
- {
- "name": "$grid-column-gutter",
- "type": "sass variable",
- "description": "The amount of space between columns at different screen sizes. To use just one size, set the variable to a number instead of a map.",
- "link": "grid.html#sass-variables"
- },
- {
- "name": "$grid-column-align-edge",
- "type": "sass variable",
- "description": "If true`, the last column in a row will align to the opposite edge of the row.\n",
- "link": "grid.html#sass-variables"
- },
- {
- "name": "$block-grid-max",
- "type": "sass variable",
- "description": "The highest number of .x-up` classes available when using the block grid CSS.\n",
- "link": "grid.html#sass-variables"
- },
- {
- "name": "$tab-item-font-size",
- "type": "sass variable",
- "description": "Font size of tab items.",
- "link": "tabs.html#sass-variables"
- },
- {
- "name": "$tab-background-active",
- "type": "sass variable",
- "description": "active background color of a tab bar.",
- "link": "tabs.html#sass-variables"
- },
- {
- "name": "$subheader-margin-top",
- "type": "sass variable",
- "description": "Default top margin for subhheaders.",
- "link": "typography-helpers.html#sass-variables"
- },
- {
- "name": "$subheader-margin-bottom",
- "type": "sass variable",
- "description": "Default bottom margin for subheaders.",
- "link": "typography-helpers.html#sass-variables"
- },
- {
- "name": "$list-style-type",
- "type": "sass variable",
- "description": "Bullet type to use for unordered lists (e.g., square`, `circle`, `disc`).\n",
- "link": "typography-base.html#sass-variables"
- },
- {
- "name": "$tab-background",
- "type": "sass variable",
- "description": "Default background color of a tab bar.",
- "link": "tabs.html#sass-variables"
- },
- {
- "name": "$tab-margin",
- "type": "sass variable",
- "description": "Default margin of the tab bar.",
- "link": "tabs.html#sass-variables"
- },
- {
- "name": "$list-style-position",
- "type": "sass variable",
- "description": "Positioning for bullets on unordered list items.",
- "link": "typography-base.html#sass-variables"
- },
- {
- "name": "$stat-font-size",
- "type": "sass variable",
- "description": "Default font size for statistic numbers.",
- "link": "typography-helpers.html#sass-variables"
- },
- {
- "name": "$list-side-margin",
- "type": "sass variable",
- "description": "Left (or right) margin for lists.",
- "link": "typography-base.html#sass-variables"
- },
- {
- "name": "$input-error-font-weight",
- "type": "sass variable",
- "description": "Default font weight for form error text.",
- "link": "abide.html#sass-variables"
- },
- {
- "name": "$list-nested-side-margin",
- "type": "sass variable",
- "description": "Left (or right) margin for a list inside a list.",
- "link": "typography-base.html#sass-variables"
- },
- {
- "name": "$label-background",
- "type": "sass variable",
- "description": "Default background color for labels.",
- "link": "label.html#sass-variables"
- },
- {
- "name": "$label-color",
- "type": "sass variable",
- "description": "Default text color for labels.",
- "link": "label.html#sass-variables"
- },
- {
- "name": "$label-font-size",
- "type": "sass variable",
- "description": "Default font size for labels.",
- "link": "label.html#sass-variables"
- },
- {
- "name": "$label-padding",
- "type": "sass variable",
- "description": "Default padding inside labels.",
- "link": "label.html#sass-variables"
- },
- {
- "name": "$label-radius",
- "type": "sass variable",
- "description": "Default radius of labels.",
- "link": "label.html#sass-variables"
- },
- {
- "name": "$defnlist-margin-bottom",
- "type": "sass variable",
- "description": "Bottom margin for <dl>` elements.\n",
- "link": "typography-base.html#sass-variables"
- },
- {
- "name": "$show-header-for-stacked",
- "type": "sass variable",
- "description": "Default value for showing the header when using stacked tables.",
- "link": "table.html#sass-variables"
- },
- {
- "name": "$table-head-font-color",
- "type": "sass variable",
- "description": "Default font color for header.",
- "link": "table.html#sass-variables"
- },
- {
- "name": "$table-foot-background",
- "type": "sass variable",
- "description": "Default color for footer background.",
- "link": "table.html#sass-variables"
- },
- {
- "name": "$table-head-background",
- "type": "sass variable",
- "description": "Default color for header background.",
- "link": "table.html#sass-variables"
- },
- {
- "name": "$table-stripe",
- "type": "sass variable",
- "description": "Default value for showing the stripe on rows of the tables, excluding the header and footer. If even, the even rows will have a background color. If odd, the odd rows will have a background color. If empty, or any other value, the table rows will have no striping.",
- "link": "table.html#sass-variables"
- },
- {
- "name": "$table-striped-background",
- "type": "sass variable",
- "description": "Default background color for striped rows.",
- "link": "table.html#sass-variables"
- },
- {
- "name": "$table-row-stripe-hover",
- "type": "sass variable",
- "description": "Default color of striped rows on hover.",
- "link": "table.html#sass-variables"
- },
- {
- "name": "$table-row-hover",
- "type": "sass variable",
- "description": "Default color of standard rows on hover.",
- "link": "table.html#sass-variables"
- },
- {
- "name": "$table-hover-scale",
- "type": "sass variable",
- "description": "Default scale for darkening the table rows on hover.",
- "link": "table.html#sass-variables"
- },
- {
- "name": "$table-padding",
- "type": "sass variable",
- "description": "Default padding for table.",
- "link": "table.html#sass-variables"
- },
- {
- "name": "$defnlist-term-weight",
- "type": "sass variable",
- "description": "Font weight for <dt>` elements.\n",
- "link": "typography-base.html#sass-variables"
- },
- {
- "name": "$mediaobject-margin-bottom",
- "type": "sass variable",
- "description": "Bottom margin of a media object.",
- "link": "media-object.html#sass-variables"
- },
- {
- "name": "$mediaobject-section-padding",
- "type": "sass variable",
- "description": "Left and right padding on sections within a media object.",
- "link": "media-object.html#sass-variables"
- },
- {
- "name": "$mediaobject-image-width-stacked",
- "type": "sass variable",
- "description": "Width of images within a media object, when the object is stacked vertically. Set to 'auto' to use the image's natural width.",
- "link": "media-object.html#sass-variables"
- },
- {
- "name": "$accordionmenu-arrow-color",
- "type": "sass variable",
- "description": "Sets accordion menu arrow color if arrow is used.",
- "link": "accordion-menu.html#sass-variables"
- },
- {
- "name": "$breakpoints",
- "type": "sass variable",
- "description": "A list of named breakpoints. You can use these with the breakpoint()` mixin to quickly create media queries.\n",
- "link": "media-queries.html#sass-variables"
- },
- {
- "name": "$breakpoint-classes",
- "type": "sass variable",
- "description": "All of the names in this list will be output as classes in your CSS, like .small-12`, `.medium-6`, and so on. Each value in this list must also be in the `$breakpoints` map.\n",
- "link": "media-queries.html#sass-variables"
- },
- {
- "name": "$table-border",
- "type": "sass variable",
- "description": "Default style for table border.",
- "link": "table.html#sass-variables"
- },
- {
- "name": "$table-color-scale",
- "type": "sass variable",
- "description": "Default scale for darkening the striped table rows and the table border.",
- "link": "table.html#sass-variables"
- },
- {
- "name": "$input-error-font-size",
- "type": "sass variable",
- "description": "Default font size for form error text.",
- "link": "abide.html#sass-variables"
- },
- {
- "name": "$table-background",
- "type": "sass variable",
- "description": "Default color for table background.",
- "link": "table.html#sass-variables"
- },
- {
- "name": "$accordionmenu-arrows",
- "type": "sass variable",
- "description": "Sets if accordion menus have the default arrow styles.",
- "link": "accordion-menu.html#sass-variables"
- },
- {
- "name": "$lead-lineheight",
- "type": "sass variable",
- "description": "Default line height for lead paragraphs.",
- "link": "typography-helpers.html#sass-variables"
- },
- {
- "name": "$menu-margin",
- "type": "sass variable",
- "description": "Margin of a menu.",
- "link": "menu.html#sass-variables"
- },
- {
- "name": "$menu-margin-nested",
- "type": "sass variable",
- "description": "Left-hand margin of a nested menu.",
- "link": "menu.html#sass-variables"
- },
- {
- "name": "$menu-item-padding",
- "type": "sass variable",
- "description": "Padding for items in a menu.",
- "link": "menu.html#sass-variables"
- },
- {
- "name": "$menu-item-color-active",
- "type": "sass variable",
- "description": "Text color of an active menu item.",
- "link": "menu.html#sass-variables"
- },
- {
- "name": "$menu-item-background-active",
- "type": "sass variable",
- "description": "Background color of an active menu item.",
- "link": "menu.html#sass-variables"
- },
- {
- "name": "$menu-icon-spacing",
- "type": "sass variable",
- "description": "Spacing between an icon and text in a menu item.",
- "link": "menu.html#sass-variables"
- },
- {
- "name": "$input-error-color",
- "type": "sass variable",
- "description": "Default font color for form error text.",
- "link": "abide.html#sass-variables"
- },
- {
- "name": "$form-label-color-invalid",
- "type": "sass variable",
- "description": "Color to use for labels of invalid inputs.",
- "link": "abide.html#sass-variables"
- },
- {
- "name": "$defnlist-term-margin-bottom",
- "type": "sass variable",
- "description": "Spacing between <dt>` and `<dd>` elements.\n",
- "link": "typography-base.html#sass-variables"
- },
- {
- "name": "$offcanvas-size",
- "type": "sass variable",
- "description": "Width of an off-canvas menu.",
- "link": "off-canvas.html#sass-variables"
- },
- {
- "name": "$offcanvas-background",
- "type": "sass variable",
- "description": "Background color of an off-canvas menu.",
- "link": "off-canvas.html#sass-variables"
- },
- {
- "name": "$offcanvas-zindex",
- "type": "sass variable",
- "description": "Z-index of an off-canvas menu.",
- "link": "off-canvas.html#sass-variables"
- },
- {
- "name": "$offcanvas-transition-length",
- "type": "sass variable",
- "description": "Length of the animation on an off-canvas menu.",
- "link": "off-canvas.html#sass-variables"
- },
- {
- "name": "$offcanvas-transition-timing",
- "type": "sass variable",
- "description": "Timing function of the animation on an off-canvas menu.",
- "link": "off-canvas.html#sass-variables"
- },
- {
- "name": "$offcanvas-fixed-reveal",
- "type": "sass variable",
- "description": "If true`, a revealed off-canvas will be fixed-position, and scroll with the screen.\n",
- "link": "off-canvas.html#sass-variables"
- },
- {
- "name": "$offcanvas-exit-background",
- "type": "sass variable",
- "description": "Background color for the overlay that appears when an off-canvas menu is open.",
- "link": "off-canvas.html#sass-variables"
- },
- {
- "name": "$maincontent-class",
- "type": "sass variable",
- "description": "CSS class used for the main content area. The off-canvas mixins use this to target the page body.",
- "link": "off-canvas.html#sass-variables"
- },
- {
- "name": "$maincontent-shadow",
- "type": "sass variable",
- "description": "Box shadow to place under the main content area. This shadow overlaps the off-canvas menus.",
- "link": "off-canvas.html#sass-variables"
- },
- {
- "name": "$titlebar-background",
- "type": "sass variable",
- "description": "Background color of a title bar.",
- "link": "off-canvas.html#sass-variables"
- },
- {
- "name": "$titlebar-color",
- "type": "sass variable",
- "description": "Color of text inside a title bar.",
- "link": "off-canvas.html#sass-variables"
- },
- {
- "name": "$titlebar-padding",
- "type": "sass variable",
- "description": "Padding inside a title bar.",
- "link": "off-canvas.html#sass-variables"
- },
- {
- "name": "$titlebar-text-font-weight",
- "type": "sass variable",
- "description": "Font weight of text inside a title bar.",
- "link": "off-canvas.html#sass-variables"
- },
- {
- "name": "$titlebar-icon-color",
- "type": "sass variable",
- "description": "Color of menu icons inside a title bar.",
- "link": "off-canvas.html#sass-variables"
- },
- {
- "name": "$titlebar-icon-color-hover",
- "type": "sass variable",
- "description": "Color of menu icons inside a title bar on hover.",
- "link": "off-canvas.html#sass-variables"
- },
- {
- "name": "$titlebar-icon-spacing",
- "type": "sass variable",
- "description": "Spacing between the menu icon and text inside a title bar.",
- "link": "off-canvas.html#sass-variables"
- },
- {
- "name": "$switch-paddle-transition",
- "type": "sass variable",
- "description": "switch transition.",
- "link": "switch.html#sass-variables"
- },
- {
- "name": "$switch-paddle-radius",
- "type": "sass variable",
- "description": "border radius of the switch paddle",
- "link": "switch.html#sass-variables"
- },
- {
- "name": "$switch-paddle-offset",
- "type": "sass variable",
- "description": "Spacing between a switch paddle and the edge of the body.",
- "link": "switch.html#sass-variables"
- },
- {
- "name": "$switch-paddle-background",
- "type": "sass variable",
- "description": "Background color for the switch container and paddle.",
- "link": "switch.html#sass-variables"
- },
- {
- "name": "$switch-margin",
- "type": "sass variable",
- "description": "border around a modal.",
- "link": "switch.html#sass-variables"
- },
- {
- "name": "$switch-radius",
- "type": "sass variable",
- "description": "Border radius of the switch",
- "link": "switch.html#sass-variables"
- },
- {
- "name": "$switch-height-large",
- "type": "sass variable",
- "description": "Height of a switch with .large class.",
- "link": "switch.html#sass-variables"
- },
- {
- "name": "$switch-height-small",
- "type": "sass variable",
- "description": "Height of a switch with .small class.",
- "link": "switch.html#sass-variables"
- },
- {
- "name": "$switch-height-tiny",
- "type": "sass variable",
- "description": "Height of a switch with .tiny class.",
- "link": "switch.html#sass-variables"
- },
- {
- "name": "$switch-height",
- "type": "sass variable",
- "description": "Height of a switch, with no class applied.",
- "link": "switch.html#sass-variables"
- },
- {
- "name": "$switch-background-active",
- "type": "sass variable",
- "description": "Background active color of a switch.",
- "link": "switch.html#sass-variables"
- },
- {
- "name": "$blockquote-color",
- "type": "sass variable",
- "description": "Text color of <blockquote>` elements.\n",
- "link": "typography-base.html#sass-variables"
- },
- {
- "name": "$orbit-bullet-background",
- "type": "sass variable",
- "description": "Default color for Orbit's bullets.",
- "link": "orbit.html#sass-variables"
- },
- {
- "name": "$orbit-bullet-background-active",
- "type": "sass variable",
- "description": "Default active color for Orbit's bullets.",
- "link": "orbit.html#sass-variables"
- },
- {
- "name": "$orbit-bullet-diameter",
- "type": "sass variable",
- "description": "Default diameter for Orbit's bullets.",
- "link": "orbit.html#sass-variables"
- },
- {
- "name": "$orbit-bullet-margin",
- "type": "sass variable",
- "description": "Default margin between Orbit's bullets.",
- "link": "orbit.html#sass-variables"
- },
- {
- "name": "$orbit-bullet-margin-top",
- "type": "sass variable",
- "description": "Default distance from slide region for Orbit's bullets.",
- "link": "orbit.html#sass-variables"
- },
- {
- "name": "$orbit-bullet-margin-bottom",
- "type": "sass variable",
- "description": "Default bottom margin from Orbit's bullets to whatever content may lurk below it.",
- "link": "orbit.html#sass-variables"
- },
- {
- "name": "$orbit-caption-background",
- "type": "sass variable",
- "description": "Default background color for Orbit's caption.",
- "link": "orbit.html#sass-variables"
- },
- {
- "name": "$orbit-caption-padding",
- "type": "sass variable",
- "description": "Default padding for Orbit's caption.",
- "link": "orbit.html#sass-variables"
- },
- {
- "name": "$orbit-control-background-hover",
- "type": "sass variable",
- "description": "Default background color for Orbit's controls when hovered.",
- "link": "orbit.html#sass-variables"
- },
- {
- "name": "$orbit-control-padding",
- "type": "sass variable",
- "description": "Default padding for Orbit's controls.",
- "link": "orbit.html#sass-variables"
- },
- {
- "name": "$orbit-control-zindex",
- "type": "sass variable",
- "description": "Default z-index for Orbit's controls.",
- "link": "orbit.html#sass-variables"
- },
- {
- "name": "$switch-background",
- "type": "sass variable",
- "description": "Background color of a switch.",
- "link": "switch.html#sass-variables"
- },
- {
- "name": "$blockquote-padding",
- "type": "sass variable",
- "description": "Padding inside a <blockquote>` element.\n",
- "link": "typography-base.html#sass-variables"
- },
- {
- "name": "$input-background-invalid",
- "type": "sass variable",
- "description": "Background color to use for invalid text inputs.",
- "link": "abide.html#sass-variables"
- },
- {
- "name": "$blockquote-border",
- "type": "sass variable",
- "description": "Side border for <blockquote>` elements.\n",
- "link": "typography-base.html#sass-variables"
- },
- {
- "name": "$abide-labels",
- "type": "sass variable",
- "description": "Sets if error styles should be added to labels.",
- "link": "abide.html#sass-variables"
- },
- {
- "name": "$slider-transition",
- "type": "sass variable",
- "description": "Transition properties to apply to the slider handle and fill. (Doesn't apply to the native slider.)",
- "link": "slider.html#sass-variables"
- },
- {
- "name": "$slider-width-vertical",
- "type": "sass variable",
- "description": "Default slider width of a vertical slider. (Doesn't apply to the native slider.)",
- "link": "slider.html#sass-variables"
- },
- {
- "name": "$cite-font-size",
- "type": "sass variable",
- "description": "Font size for <cite>` elements.\n",
- "link": "typography-base.html#sass-variables"
- },
- {
- "name": "$abide-inputs",
- "type": "sass variable",
- "description": "Sets if error styles should be added to inputs.",
- "link": "abide.html#sass-variables"
- },
- {
- "name": "$cite-color",
- "type": "sass variable",
- "description": "Text color for <cite>` elements.\n",
- "link": "typography-base.html#sass-variables"
- },
- {
- "name": "$pagination-font-size",
- "type": "sass variable",
- "description": "Font size of pagination items.",
- "link": "pagination.html#sass-variables"
- },
- {
- "name": "$pagination-margin-bottom",
- "type": "sass variable",
- "description": "Default bottom margin of the pagination object.",
- "link": "pagination.html#sass-variables"
- },
- {
- "name": "$pagination-item-color",
- "type": "sass variable",
- "description": "Text color of pagination items.",
- "link": "pagination.html#sass-variables"
- },
- {
- "name": "$pagination-item-padding",
- "type": "sass variable",
- "description": "Padding inside of pagination items.",
- "link": "pagination.html#sass-variables"
- },
- {
- "name": "$pagination-item-spacing",
- "type": "sass variable",
- "description": "Right margin to separate pagination items.",
- "link": "pagination.html#sass-variables"
- },
- {
- "name": "$pagination-radius",
- "type": "sass variable",
- "description": "Default radius for pagination items.",
- "link": "pagination.html#sass-variables"
- },
- {
- "name": "$pagination-item-background-hover",
- "type": "sass variable",
- "description": "Background color of pagination items on hover.",
- "link": "pagination.html#sass-variables"
- },
- {
- "name": "$pagination-item-background-current",
- "type": "sass variable",
- "description": "Background color of pagination item for the current page.",
- "link": "pagination.html#sass-variables"
- },
- {
- "name": "$pagination-item-color-current",
- "type": "sass variable",
- "description": "Text color of the pagination item for the current page.",
- "link": "pagination.html#sass-variables"
- },
- {
- "name": "$pagination-item-color-disabled",
- "type": "sass variable",
- "description": "Text color of a disabled pagination item.",
- "link": "pagination.html#sass-variables"
- },
- {
- "name": "$pagination-ellipsis-color",
- "type": "sass variable",
- "description": "Color of the ellipsis in a pagination menu.",
- "link": "pagination.html#sass-variables"
- },
- {
- "name": "$pagination-mobile-items",
- "type": "sass variable",
- "description": "If false`, don't display page number links on mobile, only next/previous links.\n",
- "link": "pagination.html#sass-variables"
- },
- {
- "name": "$pagination-arrows",
- "type": "sass variable",
- "description": "If true`, arrows are added to the next and previous links of pagination.\n",
- "link": "pagination.html#sass-variables"
- },
- {
- "name": "$keystroke-font",
- "type": "sass variable",
- "description": "Font family for <kbd>` elements.\n",
- "link": "typography-base.html#sass-variables"
- },
- {
- "name": "$keystroke-color",
- "type": "sass variable",
- "description": "Text color for <kbd>` elements.\n",
- "link": "typography-base.html#sass-variables"
- },
- {
- "name": "$meter-height",
- "type": "sass variable",
- "description": "Height of a <meter>` element.\n",
- "link": "progress-bar.html#sass-variables"
- },
- {
- "name": "$meter-radius",
- "type": "sass variable",
- "description": "Border radius of a <meter>` element.\n",
- "link": "progress-bar.html#sass-variables"
- },
- {
- "name": "$meter-background",
- "type": "sass variable",
- "description": "Background color of a <meter>` element.\n",
- "link": "progress-bar.html#sass-variables"
- },
- {
- "name": "$meter-fill-good",
- "type": "sass variable",
- "description": "Meter fill for an optimal value in a <meter>` element.\n",
- "link": "progress-bar.html#sass-variables"
- },
- {
- "name": "$meter-fill-medium",
- "type": "sass variable",
- "description": "Meter fill for an average value in a <meter>` element.\n",
- "link": "progress-bar.html#sass-variables"
- },
- {
- "name": "$meter-fill-bad",
- "type": "sass variable",
- "description": "Meter fill for a suboptimal value in a <meter>` element.\n",
- "link": "progress-bar.html#sass-variables"
- },
- {
- "name": "$progress-height",
- "type": "sass variable",
- "description": "Height of a progress bar.",
- "link": "progress-bar.html#sass-variables"
- },
- {
- "name": "$progress-background",
- "type": "sass variable",
- "description": "Background color of a progress bar.",
- "link": "progress-bar.html#sass-variables"
- },
- {
- "name": "$progress-margin-bottom",
- "type": "sass variable",
- "description": "Bottom margin of a progress bar.",
- "link": "progress-bar.html#sass-variables"
- },
- {
- "name": "$progress-meter-background",
- "type": "sass variable",
- "description": "Default color of a progress bar's meter.",
- "link": "progress-bar.html#sass-variables"
- },
- {
- "name": "$progress-radius",
- "type": "sass variable",
- "description": "Default radius of a progress bar.",
- "link": "progress-bar.html#sass-variables"
- },
- {
- "name": "$keystroke-background",
- "type": "sass variable",
- "description": "Background color for <kbd>` elements.\n",
- "link": "typography-base.html#sass-variables"
- },
- {
- "name": "$keystroke-padding",
- "type": "sass variable",
- "description": "Padding for <kbd>` elements.\n",
- "link": "typography-base.html#sass-variables"
- },
- {
- "name": "$keystroke-radius",
- "type": "sass variable",
- "description": "Border radius for <kbd>` elements.\n",
- "link": "typography-base.html#sass-variables"
- },
- {
- "name": "$reveal-background",
- "type": "sass variable",
- "description": "Default background color of a modal.",
- "link": "reveal.html#sass-variables"
- },
- {
- "name": "$reveal-width",
- "type": "sass variable",
- "description": "Default width of a modal, with no class applied.",
- "link": "reveal.html#sass-variables"
- },
- {
- "name": "$reveal-max-width",
- "type": "sass variable",
- "description": "Default maximum width of a modal.",
- "link": "reveal.html#sass-variables"
- },
- {
- "name": "$reveal-padding",
- "type": "sass variable",
- "description": "Default padding inside a modal.",
- "link": "reveal.html#sass-variables"
- },
- {
- "name": "$reveal-border",
- "type": "sass variable",
- "description": "Default border around a modal.",
- "link": "reveal.html#sass-variables"
- },
- {
- "name": "$reveal-radius",
- "type": "sass variable",
- "description": "Default radius for modal.",
- "link": "reveal.html#sass-variables"
- },
- {
- "name": "$reveal-zindex",
- "type": "sass variable",
- "description": "z-index for modals. The overlay uses this value, while the modal itself uses this value plus one.",
- "link": "reveal.html#sass-variables"
- },
- {
- "name": "$reveal-overlay-background",
- "type": "sass variable",
- "description": "Background color of modal overlays.",
- "link": "reveal.html#sass-variables"
- },
- {
- "name": "$abbr-underline",
- "type": "sass variable",
- "description": "Bottom border style for <abbr>` elements.\n",
- "link": "typography-base.html#sass-variables"
- },
- {
- "name": "$lead-font-size",
- "type": "sass variable",
- "description": "Default font size for lead paragraphs.",
- "link": "typography-helpers.html#sass-variables"
- },
- {
- "name": "foundation-grid()",
- "type": "sass mixin",
- "description": "Outputs CSS classes for the grid.",
- "link": "grid.html#foundation-grid"
- },
- {
- "name": "grid-column()",
- "type": "sass mixin",
- "description": "Creates a grid column.\n",
- "link": "grid.html#grid-column"
- },
- {
- "name": "grid-column-row()",
- "type": "sass mixin",
- "description": "Creates a grid column row. This is the equivalent of adding .row` and `.column` to the same element.\n\n",
- "link": "grid.html#grid-column-row"
- },
- {
- "name": "grid-col()",
- "type": "sass mixin",
- "description": "Shorthand for grid-column()`.\n",
- "link": "grid.html#grid-col"
- },
- {
- "name": "grid-col-row()",
- "type": "sass mixin",
- "description": "Shorthand for grid-column-row()`.\n",
- "link": "grid.html#grid-col-row"
- },
- {
- "name": "grid-column-collapse()",
- "type": "sass mixin",
- "description": "Collapse the gutters on a column by removing the padding. **Note:** only use this mixin within a breakpoint. To collapse a column's gutters on all screen sizes, use the $gutter` parameter of the `grid-column()` mixin instead.\n",
- "link": "grid.html#grid-column-collapse"
- },
- {
- "name": "grid-column-uncollapse()",
- "type": "sass mixin",
- "description": "Un-collapse the gutters on a column by re-adding the padding.\n",
- "link": "grid.html#grid-column-uncollapse"
- },
- {
- "name": "grid-col-collapse()",
- "type": "sass mixin",
- "description": "Shorthand for grid-column-collapse()`.\n",
- "link": "grid.html#grid-col-collapse"
- },
- {
- "name": "grid-col-uncollapse()",
- "type": "sass mixin",
- "description": "Shorthand for grid-column-uncollapse()`.\n",
- "link": "grid.html#grid-col-uncollapse"
- },
- {
- "name": "grid-layout()",
- "type": "sass mixin",
- "description": "Sizes child elements so that $n` number of items appear on each row.\n\n",
- "link": "grid.html#grid-layout"
- },
- {
- "name": "grid-layout-center-last()",
- "type": "sass mixin",
- "description": "Adds extra CSS to block grid children so the last items in the row center automatically. Apply this to the columns, not the row.\n",
- "link": "grid.html#grid-layout-center-last"
- },
- {
- "name": "grid-column-position()",
- "type": "sass mixin",
- "description": "Reposition a column.\n",
- "link": "grid.html#grid-column-position"
- },
- {
- "name": "grid-column-unposition()",
- "type": "sass mixin",
- "description": "Reset a position definition.",
- "link": "grid.html#grid-column-unposition"
- },
- {
- "name": "grid-column-offset()",
- "type": "sass mixin",
- "description": "Offsets a column to the right by $n` columns.\n",
- "link": "grid.html#grid-column-offset"
- },
- {
- "name": "grid-column-end()",
- "type": "sass mixin",
- "description": "Disable the default behavior of the last column in a row aligning to the opposite edge.",
- "link": "grid.html#grid-column-end"
- },
- {
- "name": "grid-col-pos()",
- "type": "sass mixin",
- "description": "Shorthand for grid-column-position()`.\n",
- "link": "grid.html#grid-col-pos"
- },
- {
- "name": "grid-col-unpos()",
- "type": "sass mixin",
- "description": "Shorthand for grid-column-unposition()`.\n",
- "link": "grid.html#grid-col-unpos"
- },
- {
- "name": "off-canvas-basics()",
- "type": "sass mixin",
- "description": "Adds baseline styles for off-canvas. This CSS is required to make the other pieces work.",
- "link": "off-canvas.html#off-canvas-basics"
- },
- {
- "name": "off-canvas-base()",
- "type": "sass mixin",
- "description": "Adds basic styles for an off-canvas menu.",
- "link": "off-canvas.html#off-canvas-base"
- },
- {
- "name": "off-canvas-reveal()",
- "type": "sass mixin",
- "description": "Adds styles that reveal an off-canvas menu.",
- "link": "off-canvas.html#off-canvas-reveal"
- },
- {
- "name": "switch-text-inactive()",
- "type": "sass mixin",
- "description": "Adds styles for the inactive state text within a switch.",
- "link": "switch.html#switch-text-inactive"
- },
- {
- "name": "switch-text-active()",
- "type": "sass mixin",
- "description": "Adds styles for the active state text within a switch.",
- "link": "switch.html#switch-text-active"
- },
- {
- "name": "switch-text()",
- "type": "sass mixin",
- "description": "Adds base styles for active/inactive text inside a switch. Apply this to text elements inside the switch <label>`.\n",
- "link": "switch.html#switch-text"
- },
- {
- "name": "switch-paddle()",
- "type": "sass mixin",
- "description": "Adds styles for the background and paddle of a switch. Apply this to a <label>` within a switch.\n",
- "link": "switch.html#switch-paddle"
- },
- {
- "name": "switch-input()",
- "type": "sass mixin",
- "description": "Adds styles for a switch input. Apply this to an <input>` within a switch.\n",
- "link": "switch.html#switch-input"
- },
- {
- "name": "switch-container()",
- "type": "sass mixin",
- "description": "Adds styles for a switch container. Apply this to a container class.",
- "link": "switch.html#switch-container"
- },
- {
- "name": "grid-col-off()",
- "type": "sass mixin",
- "description": "Shorthand for grid-column-offset()`.\n",
- "link": "grid.html#grid-col-off"
- },
- {
- "name": "grid-col-end()",
- "type": "sass mixin",
- "description": "Shorthand for grid-column-end()`.\n",
- "link": "grid.html#grid-col-end"
- },
- {
- "name": "grid-context()",
- "type": "sass mixin",
- "description": "Change the behavior of columns defined inside this mixin to use a different column count.",
- "link": "grid.html#grid-context"
- },
- {
- "name": "grid-row()",
- "type": "sass mixin",
- "description": "Creates a grid row.",
- "link": "grid.html#grid-row"
- },
- {
- "name": "grid-row-nest()",
- "type": "sass mixin",
- "description": "Inverts the margins of a row to nest it inside of a column.\n",
- "link": "grid.html#grid-row-nest"
- },
- {
- "name": "grid-column-size()",
- "type": "sass mixin",
- "description": "Set the width of a grid column.\n",
- "link": "grid.html#grid-column-size"
- },
- {
- "name": "grid-col-size()",
- "type": "sass mixin",
- "description": "Shorthand for grid-column-size()`.\n",
- "link": "grid.html#grid-col-size"
- },
- {
- "name": "flex-grid-row-align()",
- "type": "sass mixin",
- "description": "Horizontally or vertically aligns the columns within a flex row. Apply this mixin to a flex row.\n",
- "link": "flex-grid.html#flex-grid-row-align"
- },
- {
- "name": "flex-grid-column-align()",
- "type": "sass mixin",
- "description": "Vertically align a single column within a flex row. Apply this mixin to a flex column.\n",
- "link": "flex-grid.html#flex-grid-column-align"
- },
- {
- "name": "form-error()",
- "type": "sass mixin",
- "description": "Adds error styles to a form element, using the values in the settings file.",
- "link": "abide.html#form-error"
- },
- {
- "name": "hide-for()",
- "type": "sass mixin",
- "description": "Show an element by default, and hide it above a certain screen size.",
- "link": "visibility.html#hide-for"
- },
- {
- "name": "badge()",
- "type": "sass mixin",
- "description": "Generates the base styles for a badge.",
- "link": "badge.html#badge"
- },
- {
- "name": "accordion-container()",
- "type": "sass mixin",
- "description": "Adds styles for an accordion container. Apply this to the same element that gets data-accordion`.\n",
- "link": "accordion.html#accordion-container"
- },
- {
- "name": "dropdown-container()",
- "type": "sass mixin",
- "description": "Applies styles for a basic dropdown.",
- "link": "dropdown.html#dropdown-container"
- },
- {
- "name": "flex-video()",
- "type": "sass mixin",
- "description": "Creates a flex video container.",
- "link": "flex-video.html#flex-video"
- },
- {
- "name": "table-stack()",
- "type": "sass mixin",
- "description": "Adds styles for a stacked table. Useful for small-screen layouts.",
- "link": "table.html#table-stack"
- },
- {
- "name": "table-hover()",
- "type": "sass mixin",
- "description": "Slightly darkens the table rows on hover.",
- "link": "table.html#table-hover"
- },
- {
- "name": "accordion-item()",
- "type": "sass mixin",
- "description": "Adds styles for the accordion item. Apply this to the list item within an accordion ul.",
- "link": "accordion.html#accordion-item"
- },
- {
- "name": "callout-base()",
- "type": "sass mixin",
- "description": "Adds basic styles for a callout, including padding and margin.",
- "link": "callout.html#callout-base"
- },
- {
- "name": "flex()",
- "type": "sass mixin",
- "description": "Enables flexbox by adding display: flex` to the element.\n",
- "link": "flexbox.html#flex"
- },
- {
- "name": "flex-align()",
- "type": "sass mixin",
- "description": "Horizontally or vertically aligns the items within a flex container.\n",
- "link": "flexbox.html#flex-align"
- },
- {
- "name": "flex-align-self()",
- "type": "sass mixin",
- "description": "Vertically align a single column within a flex row. Apply this mixin to a flex column.\n",
- "link": "flexbox.html#flex-align-self"
- },
- {
- "name": "flex-order()",
- "type": "sass mixin",
- "description": "Changes the source order of a flex child. Children with lower numbers appear first in the layout.",
- "link": "flexbox.html#flex-order"
- },
- {
- "name": "orbit-wrapper()",
- "type": "sass mixin",
- "description": "Adds styles for the outer Orbit wrapper. These styles are used on the .orbit` class.\n",
- "link": "orbit.html#orbit-wrapper"
- },
- {
- "name": "orbit-container()",
- "type": "sass mixin",
- "description": "Adds styles for the inner Orbit slide container. These styles are used on the .orbit-container` class.\n",
- "link": "orbit.html#orbit-container"
- },
- {
- "name": "orbit-slide()",
- "type": "sass mixin",
- "description": "Adds styles for the individual slides of an Orbit slider. These styles are used on the .orbit-slide` class.\n",
- "link": "orbit.html#orbit-slide"
- },
- {
- "name": "orbit-image()",
- "type": "sass mixin",
- "description": "Adds styles for a slide containing an image. These styles are used on the .orbit-image` class.\n",
- "link": "orbit.html#orbit-image"
- },
- {
- "name": "orbit-caption()",
- "type": "sass mixin",
- "description": "Adds styles for an orbit slide caption. These styles are used on the .orbit-caption` class.\n",
- "link": "orbit.html#orbit-caption"
- },
- {
- "name": "orbit-control()",
- "type": "sass mixin",
- "description": "Adds base styles for the next/previous buttons in an Orbit slider. These styles are shared between the .orbit-next` and `.orbit-previous` classes in the default CSS.\n",
- "link": "orbit.html#orbit-control"
- },
- {
- "name": "orbit-previous()",
- "type": "sass mixin",
- "description": "Adds styles for the Orbit previous button. These styles are used on the .orbit-previous` class.\n",
- "link": "orbit.html#orbit-previous"
- },
- {
- "name": "orbit-next()",
- "type": "sass mixin",
- "description": "Adds styles for the Orbit next button. These styles are used on the .orbit-next` class.\n",
- "link": "orbit.html#orbit-next"
- },
- {
- "name": "orbit-bullets()",
- "type": "sass mixin",
- "description": "Adds styles for a container of Orbit bullets. Adds styles for the Orbit previous button. These styles are used on the .orbit-bullets` class.\n",
- "link": "orbit.html#orbit-bullets"
- },
- {
- "name": "callout-style()",
- "type": "sass mixin",
- "description": "Generate quick styles for a callout using a single color as a baseline.",
- "link": "callout.html#callout-style"
- },
- {
- "name": "callout()",
- "type": "sass mixin",
- "description": "Adds styles for a callout.",
- "link": "callout.html#callout"
- },
- {
- "name": "accordion-title()",
- "type": "sass mixin",
- "description": "Adds styles for the title of an accordion item. Apply this to the link within an accordion item.",
- "link": "accordion.html#accordion-title"
- },
- {
- "name": "label()",
- "type": "sass mixin",
- "description": "Generates base styles for a label.",
- "link": "label.html#label"
- },
- {
- "name": "breadcrumbs-container()",
- "type": "sass mixin",
- "description": "Adds styles for a breadcrumbs container, along with the styles for the <li>` and `<a>` elements inside of it.\n",
- "link": "breadcrumbs.html#breadcrumbs-container"
- },
- {
- "name": "slider-handle()",
- "type": "sass mixin",
- "description": "Adds the general styles for the slider handles.",
- "link": "slider.html#slider-handle"
- },
- {
- "name": "slider-fill()",
- "type": "sass mixin",
- "description": "Adds the general styles for active fill for sliders.",
- "link": "slider.html#slider-fill"
- },
- {
- "name": "slider-container()",
- "type": "sass mixin",
- "description": "Adds the general styles for sliders.",
- "link": "slider.html#slider-container"
- },
- {
- "name": "table-scroll()",
- "type": "sass mixin",
- "description": "Adds the ability to horizontally scroll the table when the content overflows horizontally.",
- "link": "table.html#table-scroll"
- },
- {
- "name": "table()",
- "type": "sass mixin",
- "description": "Adds the general styles for tables.",
- "link": "table.html#table"
- },
- {
- "name": "accordion-content()",
- "type": "sass mixin",
- "description": "Adds styles for accordion content. Apply this to the content pane below an accordion item's title.",
- "link": "accordion.html#accordion-content"
- },
- {
- "name": "show-for-only()",
- "type": "sass mixin",
- "description": "Hide an element by default, only displaying it within a certain breakpoint.",
- "link": "visibility.html#show-for-only"
- },
- {
- "name": "-zf-each-breakpoint()",
- "type": "sass mixin",
- "description": "Iterates through breakpoints defined in $breakpoint-classes` and prints the CSS inside the mixin at each breakpoint's media query. Use this with the grid, or any other component that has responsive classes.\n\n",
- "link": "sass-mixins.html#-zf-each-breakpoint"
- },
- {
- "name": "absolute-center()",
- "type": "sass mixin",
- "description": "Absolutely centers the element inside of its first non-static parent,",
- "link": "sass-mixins.html#absolute-center"
- },
- {
- "name": "horizontal-center()",
- "type": "sass mixin",
- "description": "Horizontally centers the element inside of its first non-static parent,",
- "link": "sass-mixins.html#horizontal-center"
- },
- {
- "name": "vertical-center()",
- "type": "sass mixin",
- "description": "Vertically centers the element inside of its first non-static parent,",
- "link": "sass-mixins.html#vertical-center"
- },
- {
- "name": "element-invisible-off()",
- "type": "sass mixin",
- "description": "Reverses the CSS output created by the element-invisible()` mixin.\n",
- "link": "sass-mixins.html#element-invisible-off"
- },
- {
- "name": "element-invisible()",
- "type": "sass mixin",
- "description": "Makes an element visually hidden, but still accessible to keyboards and assistive devices.",
- "link": "sass-mixins.html#element-invisible"
- },
- {
- "name": "disable-mouse-outline()",
- "type": "sass mixin",
- "description": "Removes the focus ring around an element when a mouse input is detected.",
- "link": "sass-mixins.html#disable-mouse-outline"
- },
- {
- "name": "auto-width()",
- "type": "sass mixin",
- "description": "Adds CSS for a "quantity query" selector that automatically sizes elements based on how many there are inside a container.",
- "link": "sass-mixins.html#auto-width"
- },
- {
- "name": "clearfix()",
- "type": "sass mixin",
- "description": "Applies the micro clearfix hack popularized by Nicolas Gallagher. Include this mixin on a container if its children are all floated, to give the container a proper height.The clearfix is augmented with specific styles to prevent borders in flexbox environments\n",
- "link": "sass-mixins.html#clearfix"
- },
- {
- "name": "background-triangle()",
- "type": "sass mixin",
- "description": "Adds a downward-facing triangle as a background image to an element. The image is formatted as an SVG, making it easy to change the color. Because Internet Explorer doesn't support encoded SVGs as background images, a PNG fallback is also included.There are two PNG fallbacks: a black triangle and a white triangle. The one used depends on the lightness of the input color.\n\n",
- "link": "sass-mixins.html#background-triangle"
- },
- {
- "name": "hamburger()",
- "type": "sass mixin",
- "description": "Creates a menu icon with a set width, height, number of bars, and colors. The mixin uses the height of the icon and the weight of the bars to determine spacing. <div class="docs-example-burger"></div>\n",
- "link": "sass-mixins.html#hamburger"
- },
- {
- "name": "show-for()",
- "type": "sass mixin",
- "description": "Hide an element by default, only displaying it above a certain screen size.",
- "link": "visibility.html#show-for"
- },
- {
- "name": "hide-for-only()",
- "type": "sass mixin",
- "description": "Show an element by default, and hide it above a certain screen size.",
- "link": "visibility.html#hide-for-only"
- },
- {
- "name": "button-expand()",
- "type": "sass mixin",
- "description": "Expands a button to make it full-width.",
- "link": "button.html#button-expand"
- },
- {
- "name": "thumbnail()",
- "type": "sass mixin",
- "description": "Adds thumbnail styles to an element.",
- "link": "thumbnail.html#thumbnail"
- },
- {
- "name": "button-style()",
- "type": "sass mixin",
- "description": "Sets the visual style of a button.",
- "link": "button.html#button-style"
- },
- {
- "name": "top-bar-unstack()",
- "type": "sass mixin",
- "description": "Undoes the CSS applied by the top-bar-stacked()` mixin.\n",
- "link": "top-bar.html#top-bar-unstack"
- },
- {
- "name": "top-bar-stacked()",
- "type": "sass mixin",
- "description": "Makes sections of a top bar stack on top of each other.",
- "link": "top-bar.html#top-bar-stacked"
- },
- {
- "name": "top-bar-container()",
- "type": "sass mixin",
- "description": "Adds styles for a top bar container.",
- "link": "top-bar.html#top-bar-container"
- },
- {
- "name": "close-button()",
- "type": "sass mixin",
- "description": "Adds styles for a close button, using the styles in the settings variables.",
- "link": "close-button.html#close-button"
- },
- {
- "name": "button-hollow()",
- "type": "sass mixin",
- "description": "Removes background fill on hover and focus for hollow buttons.",
- "link": "button.html#button-hollow"
- },
- {
- "name": "button-disabled()",
- "type": "sass mixin",
- "description": "Adds disabled styles to a button by fading the element, reseting the cursor, and disabling pointer events.",
- "link": "button.html#button-disabled"
- },
- {
- "name": "button-dropdown()",
- "type": "sass mixin",
- "description": "Adds a dropdown arrow to a button.",
- "link": "button.html#button-dropdown"
- },
- {
- "name": "media-object-container()",
- "type": "sass mixin",
- "description": "Adds styles for a media object container.",
- "link": "media-object.html#media-object-container"
- },
- {
- "name": "media-object-section()",
- "type": "sass mixin",
- "description": "Adds styles for sections within a media object.",
- "link": "media-object.html#media-object-section"
- },
- {
- "name": "pagination-container()",
- "type": "sass mixin",
- "description": "Adds styles for a pagination container. Apply this to a <ul>`.\n",
- "link": "pagination.html#pagination-container"
- },
- {
- "name": "pagination-item-current()",
- "type": "sass mixin",
- "description": "Adds styles for the current pagination item. Apply this to an <a>`.\n",
- "link": "pagination.html#pagination-item-current"
- },
- {
- "name": "pagination-item-disabled()",
- "type": "sass mixin",
- "description": "Adds styles for a disabled pagination item. Apply this to an <a>`.\n",
- "link": "pagination.html#pagination-item-disabled"
- },
- {
- "name": "pagination-ellipsis()",
- "type": "sass mixin",
- "description": "Adds styles for an ellipsis for use in a pagination list.",
- "link": "pagination.html#pagination-ellipsis"
- },
- {
- "name": "media-object-stack()",
- "type": "sass mixin",
- "description": "Adds styles to stack sections of a media object. Apply this to the section elements, not the container.",
- "link": "media-object.html#media-object-stack"
- },
- {
- "name": "tabs-panel()",
- "type": "sass mixin",
- "description": "Adds styles for an individual tab content panel within the tab content container.",
- "link": "tabs.html#tabs-panel"
- },
- {
- "name": "tabs-content-vertical()",
- "type": "sass mixin",
- "description": "Augments a tab content container to have a vertical style, by shifting the border around. Use this in conjunction with tabs-content()`.\n",
- "link": "tabs.html#tabs-content-vertical"
- },
- {
- "name": "tabs-content()",
- "type": "sass mixin",
- "description": "Adds styles for the wrapper that surrounds a tab group's content panes.",
- "link": "tabs.html#tabs-content"
- },
- {
- "name": "breakpoint()",
- "type": "sass mixin",
- "description": "Wraps a media query around the content you put inside the mixin. This mixin accepts a number of values: - If a string is passed, the mixin will look for it in the `$breakpoints` map, and use a media query there.\n - If a pixel value is passed, it will be converted to an em value using `$global-font-size` as the base.\n - If a rem value is passed, the unit will be changed to em.\n - If an em value is passed, the value will be used as-is.\n\n",
- "link": "media-queries.html#breakpoint"
- },
- {
- "name": "tabs-title()",
- "type": "sass mixin",
- "description": "Adds styles for the links within a tab container. Apply this to the <li>` elements inside a tab container.\n",
- "link": "tabs.html#tabs-title"
- },
- {
- "name": "tabs-container-vertical()",
- "type": "sass mixin",
- "description": "Augments a tab container to have vertical tabs. Use this in conjunction with tabs-container()`.\n",
- "link": "tabs.html#tabs-container-vertical"
- },
- {
- "name": "tabs-container()",
- "type": "sass mixin",
- "description": "Adds styles for a tab container. Apply this to a <ul>`.\n",
- "link": "tabs.html#tabs-container"
- },
- {
- "name": "button()",
- "type": "sass mixin",
- "description": "Adds all styles for a button. For more granular control over styles, use the individual button mixins.",
- "link": "button.html#button"
- },
- {
- "name": "form-input-error()",
- "type": "sass mixin",
- "description": "Styles the background and border of an input field to have an error state.\n",
- "link": "abide.html#form-input-error"
- },
- {
- "name": "switch-size()",
- "type": "sass mixin",
- "description": "Changes the size of a switch by modifying the size of the body and paddle. Apply this to a switch container.",
- "link": "switch.html#switch-size"
- },
- {
- "name": "button-group()",
- "type": "sass mixin",
- "description": "Add styles for a button group container.",
- "link": "button-group.html#button-group"
- },
- {
- "name": "button-group-expand()",
- "type": "sass mixin",
- "description": "Creates a full-width button group, making each button equal width.",
- "link": "button-group.html#button-group-expand"
- },
- {
- "name": "progress-container()",
- "type": "sass mixin",
- "description": "Adds styles for a progress bar container.",
- "link": "progress-bar.html#progress-container"
- },
- {
- "name": "progress-meter()",
- "type": "sass mixin",
- "description": "Adds styles for the inner meter of a progress bar.",
- "link": "progress-bar.html#progress-meter"
- },
- {
- "name": "progress-meter-text()",
- "type": "sass mixin",
- "description": "Adds styles for text in the progress meter.",
- "link": "progress-bar.html#progress-meter-text"
- },
- {
- "name": "-zf-normalize()",
- "type": "sass mixin",
- "description": "Loads normalize.css.",
- "link": "global.html#-zf-normalize"
- },
- {
- "name": "css-triangle()",
- "type": "sass mixin",
- "description": "Creates a CSS triangle, which can be used for dropdown arrows, dropdown pips, and more. Use this mixin inside a &::before` or `&::after` selector, to attach the triangle to an existing element.\n\n",
- "link": "sass-mixins.html#css-triangle"
- },
- {
- "name": "button-group-stack()",
- "type": "sass mixin",
- "description": "Stacks the buttons in a button group.",
- "link": "button-group.html#button-group-stack"
- },
- {
- "name": "flex-order()",
- "type": "sass mixin",
- "description": "Changes the source order of a flex child. Children with lower numbers appear first in the layout.",
- "link": "sass-functions.html#flex-order"
- },
- {
- "name": "flex-align-self()",
- "type": "sass mixin",
- "description": "Vertically align a single column within a flex row. Apply this mixin to a flex column.\n",
- "link": "sass-functions.html#flex-align-self"
- },
- {
- "name": "button-group-unstack()",
- "type": "sass mixin",
- "description": "Un-stacks the buttons in a button group.",
- "link": "button-group.html#button-group-unstack"
- },
- {
- "name": "flex-grid-row()",
- "type": "sass mixin",
- "description": "Creates a container for a flex grid row.\n",
- "link": "flex-grid.html#flex-grid-row"
- },
- {
- "name": "flex-grid-column()",
- "type": "sass mixin",
- "description": "Creates a column for a flex grid. By default, the column will stretch to the full width of its container, but this can be overridden with sizing classes, or by using the unstack` class on the parent flex row.\n\n",
- "link": "flex-grid.html#flex-grid-column"
- },
- {
- "name": "menu-base()",
- "type": "sass mixin",
- "description": "Creates the base styles for a Menu.",
- "link": "menu.html#menu-base"
- },
- {
- "name": "menu-expand()",
- "type": "sass mixin",
- "description": "Expands the items of a Menu, so each item is the same width.",
- "link": "menu.html#menu-expand"
- },
- {
- "name": "menu-direction()",
- "type": "sass mixin",
- "description": "Sets the direction of a Menu.",
- "link": "menu.html#menu-direction"
- },
- {
- "name": "menu-simple()",
- "type": "sass mixin",
- "description": "Creates a simple Menu, which has no padding or hover state.",
- "link": "menu.html#menu-simple"
- },
- {
- "name": "menu-nested()",
- "type": "sass mixin",
- "description": "Adds styles for a nested Menu, by adding margin-left` to the menu.\n",
- "link": "menu.html#menu-nested"
- },
- {
- "name": "menu-icons()",
- "type": "sass mixin",
- "description": "Adds support for icons to Menu items.",
- "link": "menu.html#menu-icons"
- },
- {
- "name": "reveal-overlay()",
- "type": "sass mixin",
- "description": "Adds styles for a modal overlay.",
- "link": "reveal.html#reveal-overlay"
- },
- {
- "name": "reveal-modal-base()",
- "type": "sass mixin",
- "description": "Adds base styles for a modal.",
- "link": "reveal.html#reveal-modal-base"
- },
- {
- "name": "reveal-modal-width()",
- "type": "sass mixin",
- "description": "Adjusts the width of a modal.",
- "link": "reveal.html#reveal-modal-width"
- },
- {
- "name": "reveal-modal-fullscreen()",
- "type": "sass mixin",
- "description": "Creates a full-screen modal, which stretches the full width and height of the window.",
- "link": "reveal.html#reveal-modal-fullscreen"
- },
- {
- "name": "flex-align()",
- "type": "sass mixin",
- "description": "Horizontally or vertically aligns the items within a flex container.\n",
- "link": "sass-functions.html#flex-align"
- },
- {
- "name": "flex()",
- "type": "sass mixin",
- "description": "Enables flexbox by adding display: flex` to the element.\n",
- "link": "sass-functions.html#flex"
- },
- {
- "name": "add-foundation-colors()",
- "type": "sass mixin",
- "description": "Transfers the colors in the $foundation-palette` variable into the legacy color variables, such as `$primary-color` and `$secondary-color`. Call this mixin below the Global section of your settings file to properly migrate your codebase.\n",
- "link": "sass-functions.html#add-foundation-colors"
- },
- {
- "name": "flex-grid-layout()",
- "type": "sass mixin",
- "description": "Creates a block grid for a flex grid row.\n",
- "link": "flex-grid.html#flex-grid-layout"
- },
- {
- "name": "flex-grid-order()",
- "type": "sass mixin",
- "description": "Changes the source order of a flex grid column. Columns with lower numbers appear first in the layout.",
- "link": "flex-grid.html#flex-grid-order"
- },
- {
- "name": "-zf-bp-serialize()",
- "type": "sass function",
- "description": "Convers the breakpoints map to a URL-encoded string, like this: key1=value1&key2=value2`. The value is then dropped into the CSS for a special `<meta>` tag, which is read by the Foundation JavaScript. This is how we transfer values from Sass to JavaScript, so they can be defined in one place.\n",
- "link": "media-queries.html#-zf-bp-serialize"
- },
- {
- "name": "-zf-map-next()",
- "type": "sass function",
- "description": "Find the next key in a map.",
- "link": "media-queries.html#-zf-map-next"
- },
- {
- "name": "foreground()",
- "type": "sass function",
- "description": "Checks the lightness of $color`, and if it passes the `$threshold` of lightness, it returns the `$yes` color. Otherwise, it returns the `$no` color. Use this function to dynamically output a foreground color based on a given background color.\n\n",
- "link": "sass-functions.html#foreground"
- },
- {
- "name": "smart-scale()",
- "type": "sass function",
- "description": "Scales a color to be lighter if it's light, or darker if it's dark. Use this function to tint a color appropriate to its lightness.\n",
- "link": "sass-functions.html#smart-scale"
- },
- {
- "name": "text-inputs()",
- "type": "sass function",
- "description": "Generates a selector with every text input type. You can also filter the list to only output a subset of those selectors.\n",
- "link": "sass-functions.html#text-inputs"
- },
- {
- "name": "strip-unit()",
- "type": "sass function",
- "description": "Removes the unit (e.g. px, em, rem) from a value, returning the number only.\n",
- "link": "sass-functions.html#strip-unit"
- },
- {
- "name": "rem-calc()",
- "type": "sass function",
- "description": "Converts one or more pixel values into matching rem values.\n",
- "link": "sass-functions.html#rem-calc"
- },
- {
- "name": "-zf-to-rem()",
- "type": "sass function",
- "description": "Converts a pixel value to matching rem value. *Any* value passed, regardless of unit, is assumed to be a pixel value. By default, the base pixel value used to calculate the rem value is taken from the $global-font-size` variable.\n",
- "link": "sass-functions.html#-zf-to-rem"
- },
- {
- "name": "has-value()",
- "type": "sass function",
- "description": "Determine if a value is not falsey, in CSS terms. Falsey values are null`, `none`, `0` with any unit, or an empty list.\n\n",
- "link": "sass-functions.html#has-value"
- },
- {
- "name": "get-side()",
- "type": "sass function",
- "description": "Determine a top/right/bottom/right value on a padding, margin, etc. property, no matter how many values were passed in. Use this function if you need to know the specific side of a value, but don't know if the value is using a shorthand format.\n",
- "link": "sass-functions.html#get-side"
- },
- {
- "name": "get-border-value()",
- "type": "sass function",
- "description": "Given border $val, find a specific element of the border, which is $elem. The possible values for $elem are width, style, and color.\n",
- "link": "sass-functions.html#get-border-value"
- },
- {
- "name": "map-deep-get()",
- "type": "sass function",
- "description": "Finds a value in a nested map.",
- "link": "sass-functions.html#map-deep-get"
- },
- {
- "name": "flex-grid-column()",
- "type": "sass function",
- "description": "Calculates the flex` property for a flex grid column. It accepts all of the same values as the basic `grid-column()` function, along with two extras:\n - `null` (the default) will make the column expand to fill space.\n - `shrink` will make the column contract, so it only takes up the horizontal space it needs.\n\n",
- "link": "flex-grid.html#flex-grid-column"
- },
- {
- "name": "flex-video()",
- "type": "sass function",
- "description": "Creates a percentage height that can be used as padding in a flex video container.",
- "link": "flex-video.html#flex-video"
- },
- {
- "name": "grid-column()",
- "type": "sass function",
- "description": "Calculates the width of a column based on a number of factors.\n",
- "link": "grid.html#grid-column"
- },
- {
- "name": "grid-col()",
- "type": "sass function",
- "description": "Shorthand for grid-column()`.\n",
- "link": "grid.html#grid-col"
- },
- {
- "name": "breakpoint()",
- "type": "sass function",
- "description": "Generates a media query string matching the input value. Refer to the documentation for the breakpoint()` mixin to see what the possible inputs are.\n\n",
- "link": "media-queries.html#breakpoint"
- },
- {
- "name": "-zf-get-bp-val()",
- "type": "sass function",
- "description": "Get a value for a breakpoint from a responsive config map. If the config map has the key $value`, the exact breakpoint value is returned. If the config map does *not* have the breakpoint, the value matching the next lowest breakpoint in the config map is returned.\n",
- "link": "media-queries.html#-zf-get-bp-val"
- },
- {
- "type": "js class",
- "name": "Tabs()",
- "description": "Creates a new instance of tabs.",
- "link": "tabs.html#js-class"
- },
- {
- "type": "js class",
- "name": "Reveal()",
- "description": "Creates a new instance of Reveal.",
- "link": "reveal.html#js-class"
- },
- {
- "type": "js class",
- "name": "Magellan()",
- "description": "Creates a new instance of Magellan.",
- "link": "magellan.html#js-class"
- },
- {
- "type": "js class",
- "name": "Abide()",
- "description": "Creates a new instance of Abide.",
- "link": "abide.html#js-class"
- },
- {
- "type": "js class",
- "name": "Interchange()",
- "description": "Creates a new instance of Interchange.",
- "link": "interchange.html#js-class"
- },
- {
- "type": "js class",
- "name": "Orbit()",
- "description": "Creates a new instance of an orbit carousel.",
- "link": "orbit.html#js-class"
- },
- {
- "type": "js class",
- "name": "Sticky()",
- "description": "Creates a new instance of a sticky thing.",
- "link": "sticky.html#js-class"
- },
- {
- "type": "js class",
- "name": "Slider()",
- "description": "Creates a new instance of a drilldown menu.",
- "link": "slider.html#js-class"
- },
- {
- "type": "js class",
- "name": "ResponsiveToggle()",
- "description": "Creates a new instance of Tab Bar.",
- "link": "responsive-navigation.html#js-class"
- },
- {
- "type": "js class",
- "name": "OffCanvas()",
- "description": "Creates a new instance of an off-canvas wrapper.",
- "link": "off-canvas.html#js-class"
- },
- {
- "type": "js class",
- "name": "Equalizer()",
- "description": "Creates a new instance of Equalizer.",
- "link": "equalizer.html#js-class"
- },
- {
- "type": "js class",
- "name": "Toggler()",
- "description": "Creates a new instance of Toggler.",
- "link": "toggler.html#js-class"
- },
- {
- "type": "js class",
- "name": "Dropdown()",
- "description": "Creates a new instance of a dropdown.",
- "link": "dropdown.html#js-class"
- },
- {
- "type": "js class",
- "name": "Tooltip()",
- "description": "Creates a new instance of a Tooltip.",
- "link": "tooltip.html#js-class"
- },
- {
- "type": "js class",
- "name": "AccordionMenu()",
- "description": "Creates a new instance of an accordion menu.",
- "link": "accordion-menu.html#js-class"
- },
- {
- "type": "js class",
- "name": "DropdownMenu()",
- "description": "Creates a new instance of DropdownMenu.",
- "link": "dropdown-menu.html#js-class"
- },
- {
- "type": "js class",
- "name": "Drilldown()",
- "description": "Creates a new instance of a drilldown menu.",
- "link": "drilldown-menu.html#js-class"
- },
- {
- "type": "js class",
- "name": "Accordion()",
- "description": "Creates a new instance of an accordion.",
- "link": "accordion.html#js-class"
- },
- {
- "type": "js function",
- "name": "Abide#removeErrorClasses()",
- "description": "Removes CSS error class as specified by the Abide settings from the label, input, and the form",
- "link": "abide.html#undefined"
- },
- {
- "type": "js function",
- "name": "Abide#validateInput()",
- "description": "Goes through a form to find inputs and proceeds to validate them in ways specific to their type",
- "link": "abide.html#undefined"
- },
- {
- "type": "js function",
- "name": "OffCanvas#destroy()",
- "description": "Destroys the offcanvas plugin.",
- "link": "off-canvas.html#undefined"
- },
- {
- "type": "js function",
- "name": "OffCanvas#toggle()",
- "description": "Toggles the off-canvas menu open or closed.",
- "link": "off-canvas.html#undefined"
- },
- {
- "type": "js function",
- "name": "OffCanvas#close()",
- "description": "Closes the off-canvas menu.",
- "link": "off-canvas.html#undefined"
- },
- {
- "type": "js function",
- "name": "OffCanvas#open()",
- "description": "Opens the off-canvas menu.",
- "link": "off-canvas.html#undefined"
- },
- {
- "type": "js function",
- "name": "OffCanvas#reveal()",
- "description": "Handles the revealing/hiding the off-canvas at breakpoints, not the same as open.",
- "link": "off-canvas.html#undefined"
- },
- {
- "type": "js function",
- "name": "Reveal#close()",
- "description": "Closes the modal.",
- "link": "reveal.html#undefined"
- },
- {
- "type": "js function",
- "name": "get()",
- "description": "Gets the media query of a breakpoint.",
- "link": "media-queries.html#undefined"
- },
- {
- "type": "js function",
- "name": "atLeast()",
- "description": "Checks if the screen is at least as wide as a breakpoint.",
- "link": "media-queries.html#undefined"
- },
- {
- "type": "js function",
- "name": "Reveal#open()",
- "description": "Opens the modal controlled by `this.$anchor`, and closes all others by default.",
- "link": "reveal.html#undefined"
- },
- {
- "type": "js function",
- "name": "ResponsiveToggle#toggleMenu()",
- "description": "Toggles the element attached to the tab bar. The toggle only happens if the screen is small enough to allow it.",
- "link": "responsive-navigation.html#undefined"
- },
- {
- "type": "js function",
- "name": "Accordion#toggle()",
- "description": "Toggles the selected content pane's open/close state.",
- "link": "accordion.html#undefined"
- },
- {
- "type": "js function",
- "name": "Abide#validateForm()",
- "description": "Goes through a form and if there are any invalid inputs, it will display the form error element",
- "link": "abide.html#undefined"
- },
- {
- "type": "js function",
- "name": "Magellan#destroy()",
- "description": "Destroys an instance of Magellan and resets the url of the window.",
- "link": "magellan.html#undefined"
- },
- {
- "type": "js function",
- "name": "Magellan#reflow()",
- "description": "Calls necessary functions to update Magellan upon DOM change",
- "link": "magellan.html#undefined"
- },
- {
- "type": "js function",
- "name": "Magellan#scrollToLoc()",
- "description": "Function to scroll to a given location on the page.",
- "link": "magellan.html#undefined"
- },
- {
- "type": "js function",
- "name": "Magellan#calcPoints()",
- "description": "Calculates an array of pixel values that are the demarcation lines between locations on the page.Can be invoked if new elements are added or the size of a location changes.",
- "link": "magellan.html#undefined"
- },
- {
- "type": "js function",
- "name": "Abide#requiredCheck()",
- "description": "Checks whether or not a form element has the required attribute and if it's checked or not",
- "link": "abide.html#undefined"
- },
- {
- "type": "js function",
- "name": "Slider#destroy()",
- "description": "Destroys the slider plugin.",
- "link": "slider.html#undefined"
- },
- {
- "type": "js function",
- "name": "Interchange#destroy()",
- "description": "Destroys an instance of interchange.",
- "link": "interchange.html#undefined"
- },
- {
- "type": "js function",
- "name": "Interchange#replace()",
- "description": "Update the `src` property of an image, or change the HTML of a container, to the specified path.",
- "link": "interchange.html#undefined"
- },
- {
- "type": "js function",
- "name": "Abide#findFormError()",
- "description": "Based on $el, get the first element with selector in this order:1. The element's direct sibling('s).\n3. The element's parent's children.\n\nThis allows for multiple form errors per input, though if none are found, no form errors will be shown.",
- "link": "abide.html#undefined"
- },
- {
- "type": "js function",
- "name": "Abide#findLabel()",
- "description": "Get the first element in this order:2. The <label> with the attribute `[for="someInputId"]`\n3. The `.closest()` <label>",
- "link": "abide.html#undefined"
- },
- {
- "type": "js function",
- "name": "Abide#findRadioLabels()",
- "description": "Get the set of labels associated with a set of radio els in this order2. The <label> with the attribute `[for="someInputId"]`\n3. The `.closest()` <label>",
- "link": "abide.html#undefined"
- },
- {
- "type": "js function",
- "name": "Orbit#destroy()",
- "description": "Destroys the carousel and hides the element.",
- "link": "orbit.html#undefined"
- },
- {
- "type": "js function",
- "name": "Reveal#destroy()",
- "description": "Destroys an instance of a modal.",
- "link": "reveal.html#undefined"
- },
- {
- "type": "js function",
- "name": "Abide#validateRadio()",
- "description": "Determines whether or a not a radio input is valid based on whether or not it is required and selected. Although the function targets a single `<input>`, it validates by checking the `required` and `checked` properties of all radio buttons in its group.",
- "link": "abide.html#undefined"
- },
- {
- "type": "js function",
- "name": "Abide#matchValidation()",
- "description": "Determines if a selected input passes a custom validation function. Multiple validations can be used, if passed to the element with `data-validator="foo bar baz"` in a space separated listed.",
- "link": "abide.html#undefined"
- },
- {
- "type": "js function",
- "name": "Abide#resetForm()",
- "description": "Resets form inputs and styles",
- "link": "abide.html#undefined"
- },
- {
- "type": "js function",
- "name": "Abide#destroy()",
- "description": "Destroys an instance of Abide.Removes error styles and classes from elements, without resetting their values.",
- "link": "abide.html#undefined"
- },
- {
- "type": "js function",
- "name": "Equalizer#destroy()",
- "description": "Destroys an instance of Equalizer.",
- "link": "equalizer.html#undefined"
- },
- {
- "type": "js function",
- "name": "Equalizer#applyHeightByRow()",
- "description": "Changes the CSS height property of each child in an Equalizer parent to match the tallest by row",
- "link": "equalizer.html#undefined"
- },
- {
- "type": "js function",
- "name": "Equalizer#applyHeight()",
- "description": "Changes the CSS height property of each child in an Equalizer parent to match the tallest",
- "link": "equalizer.html#undefined"
- },
- {
- "type": "js function",
- "name": "Equalizer#getHeightsByRow()",
- "description": "Finds the outer heights of children contained within an Equalizer parent and returns them in an array",
- "link": "equalizer.html#undefined"
- },
- {
- "type": "js function",
- "name": "Sticky#_pauseListeners()",
- "description": "Removes event handlers for scroll and change events on anchor.",
- "link": "sticky.html#undefined"
- },
- {
- "type": "js function",
- "name": "Tabs#_handleTabChange()",
- "description": "Opens the tab `$targetContent` defined by `$target`.",
- "link": "tabs.html#undefined"
- },
- {
- "type": "js function",
- "name": "Tabs#selectTab()",
- "description": "Public method for selecting a content pane to display.",
- "link": "tabs.html#undefined"
- },
- {
- "type": "js function",
- "name": "Tabs#destroy()",
- "description": "Destroys an instance of an tabs.",
- "link": "tabs.html#undefined"
- },
- {
- "type": "js function",
- "name": "Equalizer#getHeights()",
- "description": "Finds the outer heights of children contained within an Equalizer parent and returns them in an array",
- "link": "equalizer.html#undefined"
- },
- {
- "type": "js function",
- "name": "Sticky#_calc()",
- "description": "Called on every `scroll` event and on `_init`fires functions based on booleans and cached values",
- "link": "sticky.html#undefined"
- },
- {
- "type": "js function",
- "name": "Sticky#destroy()",
- "description": "Destroys the current sticky element.Resets the element to the top position first.\nRemoves event listeners, JS-added css properties and classes, and unwraps the $element if the JS added the $container.",
- "link": "sticky.html#undefined"
- },
- {
- "type": "js function",
- "name": "Toggler#toggle()",
- "description": "Toggles the target class on the target element. An event is fired from the original trigger depending on if the resultant state was "on" or "off".",
- "link": "toggler.html#undefined"
- },
- {
- "type": "js function",
- "name": "Toggler#destroy()",
- "description": "Destroys the instance of Toggler on the element.",
- "link": "toggler.html#undefined"
- },
- {
- "type": "js function",
- "name": "Dropdown#destroy()",
- "description": "Destroys the dropdown.",
- "link": "dropdown.html#undefined"
- },
- {
- "type": "js function",
- "name": "Dropdown#toggle()",
- "description": "Toggles the dropdown pane's visibility.",
- "link": "dropdown.html#undefined"
- },
- {
- "type": "js function",
- "name": "Dropdown#close()",
- "description": "Closes the open dropdown pane.",
- "link": "dropdown.html#undefined"
- },
- {
- "type": "js function",
- "name": "Dropdown#open()",
- "description": "Opens the dropdown pane, and fires a bubbling event to close other dropdowns.",
- "link": "dropdown.html#undefined"
- },
- {
- "type": "js function",
- "name": "Dropdown#getPositionClass()",
- "description": "Helper function to determine current orientation of dropdown pane.",
- "link": "dropdown.html#undefined"
- },
- {
- "type": "js function",
- "name": "emCalc()",
- "description": "Helper function to calculate em values",
- "link": "sticky.html#undefined"
- },
- {
- "type": "js function",
- "name": "Abide#addErrorClasses()",
- "description": "Adds the CSS error class as specified by the Abide settings to the label, input, and the form",
- "link": "abide.html#undefined"
- },
- {
- "type": "js function",
- "name": "Tooltip#show()",
- "description": "reveals the tooltip, and fires an event to close any other open tooltips on the page",
- "link": "tooltip.html#undefined"
- },
- {
- "type": "js function",
- "name": "Tooltip#hide()",
- "description": "Hides the current tooltip, and resets the positioning class if it was changed due to collision",
- "link": "tooltip.html#undefined"
- },
- {
- "type": "js function",
- "name": "Tooltip#toggle()",
- "description": "adds a toggle method, in addition to the static show() & hide() functions",
- "link": "tooltip.html#undefined"
- },
- {
- "type": "js function",
- "name": "Tooltip#destroy()",
- "description": "Destroys an instance of tooltip, removes template element from the view.",
- "link": "tooltip.html#undefined"
- },
- {
- "type": "js function",
- "name": "Abide#removeRadioErrorClasses()",
- "description": "Remove CSS error classes etc from an entire radio button group",
- "link": "abide.html#undefined"
- },
- {
- "type": "js function",
- "name": "AccordionMenu#hideAll()",
- "description": "Closes all panes of the menu.",
- "link": "accordion-menu.html#undefined"
- },
- {
- "type": "js function",
- "name": "AccordionMenu#toggle()",
- "description": "Toggles the open/close state of a submenu.",
- "link": "accordion-menu.html#undefined"
- },
- {
- "type": "js function",
- "name": "AccordionMenu#down()",
- "description": "Opens the sub-menu defined by `$target`.",
- "link": "accordion-menu.html#undefined"
- },
- {
- "type": "js function",
- "name": "DropdownMenu#destroy()",
- "description": "Destroys the plugin.",
- "link": "dropdown-menu.html#undefined"
- },
- {
- "type": "js function",
- "name": "Orbit#changeSlide()",
- "description": "Changes the current slide to a new one.",
- "link": "orbit.html#undefined"
- },
- {
- "type": "js function",
- "name": "AccordionMenu#up()",
- "description": "Closes the sub-menu defined by `$target`. All sub-menus inside the target will be closed as well.",
- "link": "accordion-menu.html#undefined"
- },
- {
- "type": "js function",
- "name": "AccordionMenu#destroy()",
- "description": "Destroys an instance of accordion menu.",
- "link": "accordion-menu.html#undefined"
- },
- {
- "type": "js function",
- "name": "Drilldown#destroy()",
- "description": "Destroys the Drilldown Menu",
- "link": "drilldown-menu.html#undefined"
- },
- {
- "type": "js function",
- "name": "Drilldown#_hide()",
- "description": "Hides a submenu",
- "link": "drilldown-menu.html#undefined"
- },
- {
- "type": "js function",
- "name": "Drilldown#_show()",
- "description": "Opens a submenu.",
- "link": "drilldown-menu.html#undefined"
- },
- {
- "type": "js function",
- "name": "Drilldown#_back()",
- "description": "Adds event listener for each `back` button, and closes open menus.",
- "link": "drilldown-menu.html#undefined"
- },
- {
- "type": "js function",
- "name": "Drilldown#_hideAll()",
- "description": "Closes all open elements, and returns to root menu.",
- "link": "drilldown-menu.html#undefined"
- },
- {
- "type": "js function",
- "name": "Orbit#geoSync()",
- "description": "Sets a `timer` object on the orbit, and starts the counter for the next slide.",
- "link": "orbit.html#undefined"
- },
- {
- "type": "js function",
- "name": "Reveal#toggle()",
- "description": "Toggles the open/closed state of a modal.",
- "link": "reveal.html#undefined"
- },
- {
- "type": "js function",
- "name": "Accordion#destroy()",
- "description": "Destroys an instance of an accordion.",
- "link": "accordion.html#undefined"
- },
- {
- "type": "js function",
- "name": "Accordion#up()",
- "description": "Closes the tab defined by `$target`.",
- "link": "accordion.html#undefined"
- },
- {
- "type": "js function",
- "name": "Accordion#down()",
- "description": "Opens the accordion tab defined by `$target`.",
- "link": "accordion.html#undefined"
- },
- {
- "type": "js function",
- "name": "Abide#validateText()",
- "description": "Determines whether or a not a text input is valid based on the pattern specified in the attribute. If no matching pattern is found, returns true.",
- "link": "abide.html#undefined"
- },
- {
- "type": "js plugin option",
- "name": "slideClass",
- "description": "Class applied to individual slides.",
- "link": "orbit.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "containerClass",
- "description": "Class applied to the container of Orbit",
- "link": "orbit.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "accessible",
- "description": "Allows Orbit to bind keyboard events to the slider, to animate frames with arrow keys",
- "link": "orbit.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "pauseOnHover",
- "description": "Allows the timing function to pause animation on hover.",
- "link": "orbit.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "swipe",
- "description": "Allows the Orbit slides to bind to swipe events for mobile, requires an additional util library",
- "link": "orbit.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "infiniteWrap",
- "description": "Allows Orbit to infinitely loop through the slides",
- "link": "orbit.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "timerDelay",
- "description": "Amount of time, in ms, between slide transitions",
- "link": "orbit.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "autoPlay",
- "description": "Allows Orbit to automatically animate on page load.",
- "link": "orbit.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "animOutToLeft",
- "description": "motion-ui animation class to apply",
- "link": "orbit.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "barOffset",
- "description": "Number of pixels to offset the scroll of the page on item click if using a sticky nav bar.",
- "link": "magellan.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "deepLinking",
- "description": "Allows the script to manipulate the url of the current page, and if supported, alter the history.",
- "link": "magellan.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "activeClass",
- "description": "Class applied to the active locations link on the magellan container.",
- "link": "magellan.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "threshold",
- "description": "Number of pixels to use as a marker for location changes.",
- "link": "magellan.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "animationEasing",
- "description": "Animation style to use when scrolling between locations.",
- "link": "magellan.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "animationDuration",
- "description": "Amount of time, in ms, the animated scrolling should take between locations.",
- "link": "magellan.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "animInFromLeft",
- "description": "motion-ui animation class to apply",
- "link": "orbit.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "animOutToRight",
- "description": "motion-ui animation class to apply",
- "link": "orbit.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "animInFromRight",
- "description": "motion-ui animation class to apply",
- "link": "orbit.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "navButtons",
- "description": "Tells the JS to apply event listeners to nav buttons",
- "link": "orbit.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "bullets",
- "description": "Tells the JS to look for and loadBullets.",
- "link": "orbit.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "showDelay",
- "description": "Time, in ms, to delay the opening of a modal after a click if no animation used.",
- "link": "reveal.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "rules",
- "description": "Rules to be applied to Interchange elements. Set with the `data-interchange` array notation.",
- "link": "interchange.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "hideDelay",
- "description": "Time, in ms, to delay the closing of a modal after a click if no animation used.",
- "link": "reveal.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "hideFor",
- "description": "The breakpoint after which the menu is always shown, and the tab bar is hidden.",
- "link": "responsive-navigation.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "closeOnClick",
- "description": "Allows a click on the body/overlay to close the modal.",
- "link": "reveal.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "start",
- "description": "Minimum value for the slider scale.",
- "link": "slider.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "end",
- "description": "Maximum value for the slider scale.",
- "link": "slider.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "step",
- "description": "Minimum value change per change event.",
- "link": "slider.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "initialStart",
- "description": "Value at which the handle/input *(left handle/first input)* should be set to on initialization.",
- "link": "slider.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "initialEnd",
- "description": "Value at which the right handle/second input should be set to on initialization.",
- "link": "slider.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "binding",
- "description": "Allows the input to be located outside the container and visible. Set to by the JS",
- "link": "slider.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "equalizeByRow",
- "description": "Enable height equalization row by row.",
- "link": "equalizer.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "equalizeOnStack",
- "description": "Enable height equalization when stacked on smaller screens.",
- "link": "equalizer.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "clickSelect",
- "description": "Allows the user to click/tap on the slider bar to select a value.",
- "link": "slider.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "vertical",
- "description": "Set to true and use the `vertical` class to change alignment to vertical.",
- "link": "slider.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "draggable",
- "description": "Allows the user to drag the slider handle(s) to select a value.",
- "link": "slider.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "validateOn",
- "description": "The default event to validate inputs. Checkboxes and radios validate immediately.Remove or change this value for manual validation.",
- "link": "abide.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "disabled",
- "description": "Disables the slider and prevents event listeners from being applied. Double checked by JS with `disabledClass`.",
- "link": "slider.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "doubleSided",
- "description": "Allows the use of two handles. Double checked by the JS. Changes some logic handling.",
- "link": "slider.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "decimal",
- "description": "Number of decimal places the plugin should go to for floating point precision.",
- "link": "slider.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "moveTime",
- "description": "Time, in ms, to animate the movement of a slider handle if user clicks/taps on the bar. Needs to be manually set if updating the transition time in the Sass settings.",
- "link": "slider.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "disabledClass",
- "description": "Class applied to disabled sliders.",
- "link": "slider.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "invertVertical",
- "description": "Will invert the default layout for a vertical<span data-tooltip title="who would do this???"> </span>slider.",
- "link": "slider.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "changedDelay",
- "description": "Milliseconds before the `changed.zf-slider` event is triggered after value change.",
- "link": "slider.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "closeOnEsc",
- "description": "Allows the modal to close if the user presses the `ESCAPE` key.",
- "link": "reveal.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "labelErrorClass",
- "description": "Class to be applied to input labels on failed validation.",
- "link": "abide.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "autoFocus",
- "description": "Allows the window to scroll to content of active pane on load if set to true.",
- "link": "tabs.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "wrapOnKeys",
- "description": "Allows keyboard input to 'wrap' around the tab links.",
- "link": "tabs.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "matchHeight",
- "description": "Allows the tab content panes to match heights if set to true.",
- "link": "tabs.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "linkClass",
- "description": "Class applied to `li`'s in tab link list.",
- "link": "tabs.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "panelClass",
- "description": "Class applied to the content containers.",
- "link": "tabs.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "multipleOpened",
- "description": "If true, allows multiple modals to be displayed at once.",
- "link": "reveal.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "vOffset",
- "description": "Distance, in pixels, the modal should push down from the top of the screen.",
- "link": "reveal.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "closeOnClick",
- "description": "Allows a click on the body to close the dropdown.",
- "link": "dropdown.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "autoFocus",
- "description": "Allow the plugin to set focus to the first focusable element within the pane, regardless of method of opening.",
- "link": "dropdown.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "trapFocus",
- "description": "Allow the plugin to trap focus to the dropdown pane if opened with keyboard commands.",
- "link": "dropdown.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "positionClass",
- "description": "Class applied to adjust open position. JS will test and fill this in.",
- "link": "dropdown.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "hOffset",
- "description": "Number of pixels between the dropdown pane and the triggering element on open.",
- "link": "dropdown.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "vOffset",
- "description": "Number of pixels between the dropdown pane and the triggering element on open.",
- "link": "dropdown.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "hoverPane",
- "description": "Don't close dropdown when hovering over dropdown pane",
- "link": "dropdown.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "hOffset",
- "description": "Distance, in pixels, the modal should push in from the side of the screen.",
- "link": "reveal.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "fullScreen",
- "description": "Allows the modal to be fullscreen, completely blocking out the rest of the view. JS checks for this as well.",
- "link": "reveal.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "btmOffsetPct",
- "description": "Percentage of screen height the modal should push up from the bottom of the view.",
- "link": "reveal.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "inputErrorClass",
- "description": "Class to be applied to inputs on failed validation.",
- "link": "abide.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "formErrorSelector",
- "description": "Class selector to use to target Form Errors for show/hide.",
- "link": "abide.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "animate",
- "description": "Tells the plugin if the element should animated when toggled.",
- "link": "toggler.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "hover",
- "description": "Allow submenus to open on hover events",
- "link": "dropdown.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "hoverDelay",
- "description": "Amount of time to delay opening a submenu on hover event.",
- "link": "dropdown.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "formErrorClass",
- "description": "Class added to Form Errors on failed validation.",
- "link": "abide.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "liveValidate",
- "description": "Set to true to validate text inputs on any value change.",
- "link": "abide.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "overlay",
- "description": "Allows the modal to generate an overlay div, which will cover the view when modal opens.",
- "link": "reveal.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "resetOnClose",
- "description": "Allows the modal to remove and reinject markup on close. Should be true if using video elements w/o using provider's api, otherwise, videos will continue to play in the background.",
- "link": "reveal.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "deepLink",
- "description": "Allows the modal to alter the url on open/close, and allows the use of the `back` button to close modals. ALSO, allows a modal to auto-maniacally open on page load IF the hash === the modal's user-set id.",
- "link": "reveal.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "container",
- "description": "Customizable container template. Add your own classes for styling and sizing.",
- "link": "sticky.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "stickTo",
- "description": "Location in the view the element sticks to.",
- "link": "sticky.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "anchor",
- "description": "If anchored to a single element, the id of that element.",
- "link": "sticky.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "topAnchor",
- "description": "If using more than one element as anchor points, the id of the top anchor.",
- "link": "sticky.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "btmAnchor",
- "description": "If using more than one element as anchor points, the id of the bottom anchor.",
- "link": "sticky.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "marginTop",
- "description": "Margin, in `em`'s to apply to the top of the element when it becomes sticky.",
- "link": "sticky.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "marginBottom",
- "description": "Margin, in `em`'s to apply to the bottom of the element when it becomes sticky.",
- "link": "sticky.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "stickyOn",
- "description": "Breakpoint string that is the minimum screen size an element should become sticky.",
- "link": "sticky.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "validators",
- "description": "Optional validation functions to be used. `equalTo` being the only default included function.Functions should return only a boolean if the input is valid or not. Functions are given the following arguments:\nel : The jQuery element to validate.\nrequired : Boolean value of the required attribute be present or not.\nparent : The direct parent of the input.",
- "link": "abide.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "stickyClass",
- "description": "Class applied to sticky element, and removed on destruction. Foundation defaults to `sticky`.",
- "link": "sticky.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "containerClass",
- "description": "Class applied to sticky container. Foundation defaults to `sticky-container`.",
- "link": "sticky.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "hoverDelay",
- "description": "Time, in ms, before a tooltip should open on hover.",
- "link": "tooltip.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "fadeInDuration",
- "description": "Time, in ms, a tooltip should take to fade into view.",
- "link": "tooltip.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "fadeOutDuration",
- "description": "Time, in ms, a tooltip should take to fade out of view.",
- "link": "tooltip.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "disableHover",
- "description": "Disables hover events from opening the tooltip if set to true",
- "link": "tooltip.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "templateClasses",
- "description": "Optional addtional classes to apply to the tooltip template on init.",
- "link": "tooltip.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "tooltipClass",
- "description": "Non-optional class added to tooltip templates. Foundation default is 'tooltip'.",
- "link": "tooltip.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "triggerClass",
- "description": "Class applied to the tooltip anchor element.",
- "link": "tooltip.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "showOn",
- "description": "Minimum breakpoint size at which to open the tooltip.",
- "link": "tooltip.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "template",
- "description": "Custom template to be used to generate markup for tooltip.",
- "link": "tooltip.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "tipText",
- "description": "Text displayed in the tooltip template on open.",
- "link": "tooltip.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "clickOpen",
- "description": "Allows the tooltip to remain open if triggered with a click or touch event.",
- "link": "tooltip.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "positionClass",
- "description": "Additional positioning classes, set by the JS",
- "link": "tooltip.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "vOffset",
- "description": "Distance, in pixels, the template should push away from the anchor on the Y axis.",
- "link": "tooltip.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "hOffset",
- "description": "Distance, in pixels, the template should push away from the anchor on the X axis, if aligned to a side.",
- "link": "tooltip.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "forceFollow",
- "description": "Boolean to force overide the clicking of links to perform default action, on second touch event for mobile.",
- "link": "dropdown-menu.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "rightClass",
- "description": "Class applied to right-side oriented menus, Foundation default is `align-right`. Update this if using your own class.",
- "link": "dropdown-menu.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "verticalClass",
- "description": "Class applied to vertical oriented menus, Foundation default is `vertical`. Update this if using your own class.",
- "link": "dropdown-menu.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "closeOnClick",
- "description": "Allow clicks on the body to close any open submenus.",
- "link": "dropdown-menu.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "alignment",
- "description": "Position of the menu relative to what direction the submenus should open. Handled by JS.",
- "link": "dropdown-menu.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "closingTime",
- "description": "Amount of time to delay closing a submenu on a mouseleave event.",
- "link": "dropdown-menu.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "clickOpen",
- "description": "Allow a submenu to open/remain open on parent click event. Allows cursor to move away from menu.",
- "link": "dropdown-menu.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "hoverDelay",
- "description": "Amount of time to delay opening a submenu on hover event.",
- "link": "dropdown-menu.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "autoclose",
- "description": "Allow a submenu to automatically close on a mouseleave event, if not clicked open.",
- "link": "dropdown-menu.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "disableHover",
- "description": "Disallows hover events from opening submenus",
- "link": "dropdown-menu.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "checkEvery",
- "description": "Number of scroll events between the plugin's recalculating sticky points. Setting it to `0` will cause it to recalc every scroll event, setting it to `-1` will prevent recalc on scroll.",
- "link": "sticky.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "equalizeOn",
- "description": "String representing the minimum breakpoint size the plugin should equalize heights on.",
- "link": "equalizer.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "animationIn",
- "description": "Motion-UI class to use for animated elements. If none used, defaults to simple show/hide.",
- "link": "reveal.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "animationOut",
- "description": "Motion-UI class to use for animated elements. If none used, defaults to simple show/hide.",
- "link": "reveal.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "closeOnClick",
- "description": "Allow the menu to return to root list on body click.",
- "link": "drilldown-menu.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "parentLink",
- "description": "Adds the parent link to the submenu.",
- "link": "drilldown-menu.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "wrapper",
- "description": "Markup used to wrap drilldown menu. Use a class name for independent styling; the JS applied class: `is-drilldown` is required. Remove the backslash (`\\`) if copy and pasting.",
- "link": "drilldown-menu.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "backButton",
- "description": "Markup used for JS generated back button. Prepended to submenu lists and deleted on `destroy` method, 'js-drilldown-back' class required. Remove the backslash (`\\`) if copy and pasting.",
- "link": "drilldown-menu.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "trapFocus",
- "description": "Triggers optional focus trapping when opening an offcanvas. Sets tabindex of [data-off-canvas-content] to -1 for accessibility purposes.",
- "link": "off-canvas.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "revealClass",
- "description": "Class used to force an offcanvas to remain open. Foundation defaults for this are `reveal-for-large` & `reveal-for-medium`.",
- "link": "off-canvas.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "slideSpeed",
- "description": "Amount of time to animate the opening of a submenu in ms.",
- "link": "accordion-menu.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "autoFocus",
- "description": "Force focus to the offcanvas on open. If true, will focus the opening trigger on close.",
- "link": "off-canvas.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "revealOn",
- "description": "Breakpoint at which to reveal. JS will use a RegExp to target standard classes, if changing classnames, pass your class with the `revealClass` option.",
- "link": "off-canvas.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "isRevealed",
- "description": "Allow the offcanvas to remain open for certain breakpoints.",
- "link": "off-canvas.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "forceTop",
- "description": "Force the page to scroll to top on open.",
- "link": "off-canvas.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "position",
- "description": "Direction the offcanvas opens from. Determines class applied to body.",
- "link": "off-canvas.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "transitionTime",
- "description": "Amount of time in ms the open and close transition requires. If none selected, pulls from body style.",
- "link": "off-canvas.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "allowAllClosed",
- "description": "Allow the accordion to close all panes.",
- "link": "accordion.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "multiExpand",
- "description": "Allow the accordion to have multiple open panes.",
- "link": "accordion.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "slideSpeed",
- "description": "Amount of time to animate the opening of an accordion pane.",
- "link": "accordion.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "multiOpen",
- "description": "Allow the menu to have multiple open panes.",
- "link": "accordion-menu.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "closeOnClick",
- "description": "Allow the user to click outside of the menu to close it.",
- "link": "off-canvas.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "useMUI",
- "description": "Boolean to flag the js to use motion ui classes or not. Default to true for backwards compatability.",
- "link": "orbit.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "prevClass",
- "description": "Class applied to the `previous` navigation button.",
- "link": "orbit.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "nextClass",
- "description": "Class applied to the `next` navigation button.",
- "link": "orbit.html#js-members"
- },
- {
- "type": "js plugin option",
- "name": "boxOfBullets",
- "description": "Class applied to the bullet container. You're welcome.",
- "link": "orbit.html#js-members"
- },
- {
- "type": "js event",
- "name": "formreset",
- "description": "Fires when the form has been reset.",
- "link": "abide.html#js-events"
- },
- {
- "type": "js event",
- "name": "down",
- "description": "Fires when the tab is done opening.",
- "link": "accordion.html#js-events"
- },
- {
- "type": "js event",
- "name": "closed",
- "description": "Fires when the menu is fully closed.",
- "link": "drilldown-menu.html#js-events"
- },
- {
- "type": "js event",
- "name": "up",
- "description": "Fires when the menu is done collapsing up.",
- "link": "accordion-menu.html#js-events"
- },
- {
- "type": "js event",
- "name": "down",
- "description": "Fires when the menu is done opening.",
- "link": "accordion-menu.html#js-events"
- },
- {
- "type": "js event",
- "name": "open",
- "description": "Fires when the submenu has opened.",
- "link": "drilldown-menu.html#js-events"
- },
- {
- "type": "js event",
- "name": "hide",
- "description": "Fires when the submenu has closed.",
- "link": "drilldown-menu.html#js-events"
- },
- {
- "type": "js event",
- "name": "show",
- "description": "Fires when the new dropdown pane is visible.",
- "link": "dropdown-menu.html#js-events"
- },
- {
- "type": "js event",
- "name": "hide",
- "description": "Fires when the open menus are closed.",
- "link": "dropdown-menu.html#js-events"
- },
- {
- "type": "js event",
- "name": "hide",
- "description": "fires when the tooltip is hidden",
- "link": "tooltip.html#js-events"
- },
- {
- "type": "js event",
- "name": "show",
- "description": "Fires when the tooltip is shown",
- "link": "tooltip.html#js-events"
- },
- {
- "type": "js event",
- "name": "tooltip",
- "description": "Fires to close all other open tooltips on the page",
- "link": "tooltip.html#js-events"
- },
- {
- "type": "js event",
- "name": "closeme",
- "description": "Fires to close other open dropdowns",
- "link": "dropdown.html#js-events"
- },
- {
- "type": "js event",
- "name": "show",
- "description": "Fires once the dropdown is visible.",
- "link": "dropdown.html#js-events"
- },
- {
- "type": "js event",
- "name": "off",
- "description": "Fires if the target element does not have the class after a toggle.",
- "link": "toggler.html#js-events"
- },
- {
- "type": "js event",
- "name": "on",
- "description": "Fires if the target element has the class after a toggle.",
- "link": "toggler.html#js-events"
- },
- {
- "type": "js event",
- "name": "change",
- "description": "Fires when the plugin has successfully changed tabs.",
- "link": "tabs.html#js-events"
- },
- {
- "type": "js event",
- "name": "preequalized",
- "description": "Fires before the heights are applied",
- "link": "equalizer.html#js-events"
- },
- {
- "type": "js event",
- "name": "up",
- "description": "Fires when the tab is done collapsing up.",
- "link": "accordion.html#js-events"
- },
- {
- "type": "js event",
- "name": "forminvalid",
- "description": "Fires when the form is finished validating. Event trigger is either `formvalid.zf.abide` or `forminvalid.zf.abide`.Trigger includes the element of the form.",
- "link": "abide.html#js-events"
- },
- {
- "type": "js event",
- "name": "invalid",
- "description": "Fires when the input is done checking for validation. Event trigger is either `valid.zf.abide` or `invalid.zf.abide`Trigger includes the DOM element of the input.",
- "link": "abide.html#js-events"
- },
- {
- "type": "js event",
- "name": "postequalized",
- "description": "Fires when the heights have been applied",
- "link": "equalizer.html#js-events"
- },
- {
- "type": "js event",
- "name": "preequalizedRow",
- "description": "Fires before the heights per row are applied",
- "link": "equalizer.html#js-events"
- },
- {
- "type": "js event",
- "name": "postequalizedRow",
- "description": "Fires when the heights per row have been applied",
- "link": "equalizer.html#js-events"
- },
- {
- "type": "js event",
- "name": "open",
- "description": "Fires when the modal has successfully opened.",
- "link": "reveal.html#js-events"
- },
- {
- "type": "js event",
- "name": "replaced",
- "description": "Fires when content in an Interchange element is done being loaded.",
- "link": "interchange.html#js-events"
- },
- {
- "type": "js event",
- "name": "update",
- "description": "Fires when magellan is finished updating to the new active element.",
- "link": "magellan.html#js-events"
- },
- {
- "type": "js event",
- "name": "opened",
- "description": "Fires when the off-canvas menu opens.",
- "link": "off-canvas.html#js-events"
- },
- {
- "type": "js event",
- "name": "closed",
- "description": "Fires when the off-canvas menu opens.",
- "link": "off-canvas.html#js-events"
- },
- {
- "type": "js event",
- "name": "unstuckfrom",
- "description": "Fires when the $element has become anchored.Namespaced to `top` or `bottom`, e.g. `sticky.zf.unstuckfrom:bottom`",
- "link": "sticky.html#js-events"
- },
- {
- "type": "js event",
- "name": "stuckto",
- "description": "Fires when the $element has become `position: fixed;`Namespaced to `top` or `bottom`, e.g. `sticky.zf.stuckto:top`",
- "link": "sticky.html#js-events"
- },
- {
- "type": "js event",
- "name": "slidechange",
- "description": "Triggers when the slide has finished animating in.",
- "link": "orbit.html#js-events"
- },
- {
- "type": "js event",
- "name": "changed",
- "description": "Fires when the value has not been change for a given time.",
- "link": "slider.html#js-events"
- },
- {
- "type": "js event",
- "name": "moved",
- "description": "Fires when the handle is done moving.",
- "link": "slider.html#js-events"
- },
- {
- "type": "js event",
- "name": "toggled",
- "description": "Fires when the element attached to the tab bar toggles.",
- "link": "responsive-navigation.html#js-events"
- },
- {
- "type": "js event",
- "name": "closed",
- "description": "Fires when the modal is done closing.",
- "link": "reveal.html#js-events"
- },
- {
- "type": "js event",
- "name": "closeme",
- "description": "Fires immediately before the modal opens.Closes any other modals that are currently open",
- "link": "reveal.html#js-events"
- }
-]
\ No newline at end of file
+++ /dev/null
-<!doctype html>
-<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
-<html class="no-js" lang="en" dir="ltr">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="Drilldown is one of Foundation's three menu patterns, which converts a series of nested lists into a vertical drilldown menu.">
- <link rel="icon" href="assets/img/icons/foundation-favicon.ico" type="image/x-icon">
- <title>Foundation for Sites 6 Docs | Drilldown Menu</title>
- <link href="assets/css/docs.css?hash=fb7d53fe9b02bd50b2d89206ebdeea3b" rel="stylesheet" />
- <link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=dd2ea63d4c1a52b95332942362f7427c" rel="stylesheet">
- <!-- <link rel="stylesheet" href="./node_modules/motion-ui/dist/motion-ui.css" /> -->
-</head>
-<body>
-
- <div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
-
- <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="mobile-ofc vertical menu">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
-
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/support.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/sort/unanswered">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
- </div>
-
- <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="vertical menu">
- <li><a href="#">Foundation</a></li>
- <li><a href="#">Dot</a></li>
- <li><a href="#">ZURB</a></li>
- <li><a href="#">Com</a></li>
- <li><a href="#">Slash</a></li>
- <li><a href="#">Sites</a></li>
- </ul>
- </div>
-
-
- <div class="off-canvas-content" data-off-canvas-content>
- <!-- Info Banner For Announcements or Links -->
- <!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
- <div class="info">
- <h5>Foundation 6 is here!</h5>
- </div>
- </a> -->
-
- <nav class="marketing-topbar show-for-medium">
-
- <ul class="menu">
- <li class="topbar-title"><a href="https://get.foundation/index.html"><img src="assets/img/logos/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
- </ul>
-
- <ul class="dropdown menu" data-dropdown-menu data-click-open="false">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/" target="_blank">F5 Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="https://get.foundation/emails/docs/" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
-
- </nav>
-
- <div class="title-bar hide-for-medium">
- <div class="title-bar-left">
- <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
- <span class="title-bar-title">Foundation</span>
- </div>
- </div>
-
-
- <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
-
- <div class="expanded row">
- <div class="medium-9 large-10 medium-push-3 large-push-2 columns">
-
-<article class="docs-component" id="docs-drilldown-menu">
-
-<a href="#docs-menu" class="small secondary expanded button hide-for-medium">Jump to Nav</a>
-
-<header>
- <h1 class="docs-page-title">Drilldown Menu</h1>
-
- <span data-tooltip title="Requires a JavaScript library." class="docs-js label">JavaScript</span>
-
- <p class="lead docs-page-lead">Drilldown is one of Foundation's three menu patterns, which converts a series of nested lists into a vertical drilldown menu.</p>
-
- <ul class="menu simple docs-contribute-menu">
- <li><a href="https://github.com/zurb/foundation-sites/edit/master/docs/pages/drilldown-menu.md" target="_blank"><i class="fi-pencil"></i>Edit this Page</a></li>
- <li><a href="https://github.com/zurb/foundation-sites/issues/new?title=%5BDrilldown%20Menu%5D%20ISSUE%20NAME%20HERE" target="_blank"><i class="fi-social-github"></i>Report a Bug</a></li>
- <li><a href="https://get.foundation/forum" target="_blank"><i class="fi-comment"></i>Get Help</a></li>
- </ul>
-</header>
-
-<hr>
-
-<div class="row">
-
-<div class="large-9 columns" id="docs">
-
-<h2 id="basics" class="docs-heading" data-magellan-target="basics">Basics<a class="docs-heading-icon" href="#basics"></a></h2><p>Drilldowns use the standard <a href="menu.html#nested-style">Menu</a> syntax, using <code><ul></code>, <code><li></code>, and <code><a></code>. Add <code>data-drilldown</code> to the root menu to set up the drilldown.</p>
-<p>To create sub-menus, place a <code><ul></code> <em>next to</em> an <code><a></code>. Clicking that <code><a></code> will then open the <code><ul></code> that it's next to.</p>
-<p>Any <code><a></code> without a submenu will function like a normal link.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"vertical menu"</span> <span class="hljs-attr">data-drilldown</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#Item-1"</span>></span>Item 1<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"vertical menu"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#Item-1A"</span>></span>Item 1A<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-comment"><!-- ... --></span>
- <span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#Item-2"</span>></span>Item 2<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">ul</span>></span></code></pre></div><div class="primary callout">
- <p>The drilldown menu takes on the height of the tallest menu in the hierarchy, so the menu doesn't change height as the user navigates it.</p>
-</div>
-
-<ul class="menu" data-drilldown style="width: 200px" id="m1">
- <li>
- <a href="#">Item 1</a>
- <ul class="menu">
- <li>
- <a href="#">Item 1A</a>
- <ul class="menu">
- <li><a href="#Item-1Aa">Item 1Aa</a></li>
- <li><a href="#Item-1Ba">Item 1Ba</a></li>
- <li><a href="#Item-1Ca">Item 1Ca</a></li>
- <li><a href="#Item-1Da">Item 1Da</a></li>
- <li><a href="#Item-1Ea">Item 1Ea</a></li>
- </ul>
- </li>
- <li><a href="#Item-1B">Item 1B</a></li>
- <li><a href="#Item-1C">Item 1C</a></li>
- <li><a href="#Item-1D">Item 1D</a></li>
- <li><a href="#Item-1E">Item 1E</a></li>
- </ul>
- </li>
- <li>
- <a href="#">Item 2</a>
- <ul class="menu">
- <li><a href="#Item-2A">Item 2A</a></li>
- <li><a href="#Item-2B">Item 2B</a></li>
- <li><a href="#Item-2C">Item 2C</a></li>
- <li><a href="#Item-2D">Item 2D</a></li>
- <li><a href="#Item-2E">Item 2E</a></li>
- </ul>
- </li>
- <li>
- <a href="#">Item 3</a>
- <ul class="menu">
- <li><a href="#Item-3A">Item 3A</a></li>
- <li><a href="#Item-3B">Item 3B</a></li>
- <li><a href="#Item-3C">Item 3C</a></li>
- <li><a href="#Item-3D">Item 3D</a></li>
- <li><a href="#Item-3E">Item 3E</a></li>
- </ul>
- </li>
- <li><a href="#Item-4"> Item 4</a></li>
-</ul>
-
-<hr>
-<h2 id="custom-styling" class="docs-heading" data-magellan-target="custom-styling">Custom Styling<a class="docs-heading-icon" href="#custom-styling"></a></h2><p>The drilldown plugin automatically adds a back button to the top of each nested menu. To style this control, target the <code>.js-drilldown-back</code> class:</p>
-<div class="docs-code" data-docs-code><pre><code class="css">.js-drilldown-back {
- // ...
-}</code></pre></div>
-
-
-<hr>
-<section>
- <h2 id="javascript-reference" class="docs-heading" data-magellan-target="javascript-reference">JavaScript Reference<a class="docs-heading-icon" href="#javascript-reference"></a></h2>
-
-
- <section>
- <h3 id="js-module" class="docs-heading">Initializing<a class="docs-heading-icon" href="#js-module"></a></h3>
-
- <p>The file <code>foundation.drilldown.js</code> must be included in your JavaScript to use this plugin, along with <code>foundation.core.js</code>. <strong>This plugin also requires these utility libraries:</strong></p>
-
-
- <ul>
- <li><code>foundation.util.keyboard.js</code></li>
- </ul>
-
- <ul>
- <li><code>foundation.util.motion.js</code></li>
- </ul>
-
- <ul>
- <li><code>foundation.util.nest.js</code></li>
- </ul>
-
-
- </section>
-
-
- <section>
- <h3 id="js-class" class="docs-heading">Foundation.Drilldown<a class="docs-heading-icon" href="#js-class"></a></h3>
-
- <p>Creates a new instance of a drilldown menu.</p>
-
-
- <div class="docs-code"><pre><code><span class="hljs-keyword">var</span> elem = <span class="hljs-keyword">new</span> Foundation.Drilldown(element, options);</code></pre></div>
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>element</code></td>
- <td>jQuery</td>
- <td>jQuery object to make into an accordion menu.</td>
- </tr>
- <tr>
- <td><code>options</code></td>
- <td>Object</td>
- <td>Overrides to the default plugin settings.</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="js-options" class="docs-heading">Plugin Options<a class="docs-heading-icon" href="#js-options"></a></h3>
-
- <p>Use these options to customize an instance of Drilldown Menu. Plugin options can be set as individual data attributes, one combined <code>data-options</code> attribute, or as an object passed to the plugin's constructor. <a href="javascript.html#initializing">Learn more about how JavaScript plugins are initialized.</a></p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Default</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>data-back-button</code></td>
- <td><code><\li><\a>Back<\/a><\/li></code></td>
- <td>Markup used for JS generated back button. Prepended to submenu lists and deleted on `destroy` method, 'js-drilldown-back' class required. Remove the backslash (`\`) if copy and pasting.</td>
- </tr>
- <tr>
- <td><code>data-wrapper</code></td>
- <td><code><\div class="is-drilldown"><\/div></code></td>
- <td>Markup used to wrap drilldown menu. Use a class name for independent styling; the JS applied class: `is-drilldown` is required. Remove the backslash (`\`) if copy and pasting.</td>
- </tr>
- <tr>
- <td><code>data-parent-link</code></td>
- <td><code>false</code></td>
- <td>Adds the parent link to the submenu.</td>
- </tr>
- <tr>
- <td><code>data-close-on-click</code></td>
- <td><code>false</code></td>
- <td>Allow the menu to return to root list on body click.</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="js-events" class="docs-heading">Events<a class="docs-heading-icon" href="#js-events"></a></h3>
-
- <p>These events will fire from any element with a Drilldown Menu plugin attached.</p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>closed.zf.drilldownMenu</code></td>
- <td>Fires when the menu is fully closed.</td>
- </tr>
- <tr>
- <td><code>open.zf.drilldownMenu</code></td>
- <td>Fires when the submenu has opened.</td>
- </tr>
- <tr>
- <td><code>hide.zf.drilldownMenu</code></td>
- <td>Fires when the submenu has closed.</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="js-functions" class="docs-heading">Methods<a class="docs-heading-icon" href="#js-functions"></a></h3>
-
- <section>
- <h4 id="_hideall" class="docs-heading">_hideAll<a class="docs-heading-icon" href="#_hideall"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'_hideAll'</span>);</code></pre>
- </div>
-
- <p>Closes all open elements, and returns to root menu.</p>
-
-
- <p><strong>Fires these events:</strong>
- Drilldown#event:closed
- </p>
-
-
- <hr>
- </section>
- <section>
- <h4 id="_back" class="docs-heading">_back<a class="docs-heading-icon" href="#_back"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'_back'</span>, $elem);</code></pre>
- </div>
-
- <p>Adds event listener for each <code>back</code> button, and closes open menus.</p>
-
-
- <p><strong>Fires these events:</strong>
- Drilldown#event:back
- </p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$elem</code></td>
- <td>jQuery</td>
- <td>the current sub-menu to add `back` event.</td>
- </tr>
- </table>
-
- <hr>
- </section>
- <section>
- <h4 id="_show" class="docs-heading">_show<a class="docs-heading-icon" href="#_show"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'_show'</span>, $elem);</code></pre>
- </div>
-
- <p>Opens a submenu.</p>
-
-
- <p><strong>Fires these events:</strong>
- Drilldown#event:open
- </p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$elem</code></td>
- <td>jQuery</td>
- <td>the current element with a submenu to open, i.e. the `li` tag.</td>
- </tr>
- </table>
-
- <hr>
- </section>
- <section>
- <h4 id="_hide" class="docs-heading">_hide<a class="docs-heading-icon" href="#_hide"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'_hide'</span>, $elem);</code></pre>
- </div>
-
- <p>Hides a submenu</p>
-
-
- <p><strong>Fires these events:</strong>
- Drilldown#event:hide
- </p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$elem</code></td>
- <td>jQuery</td>
- <td>the current sub-menu to hide, i.e. the `ul` tag.</td>
- </tr>
- </table>
-
- <hr>
- </section>
- <section>
- <h4 id="destroy" class="docs-heading">destroy<a class="docs-heading-icon" href="#destroy"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'destroy'</span>);</code></pre>
- </div>
-
- <p>Destroys the Drilldown Menu</p>
-
-
-
-
-
- </section>
- </section>
-</section>
-
-
-</div>
-
-<div class="large-3 columns" data-sticky-container>
- <nav class="columns docs-toc-wrap" data-sticky data-anchor="docs" data-sticky-on="large">
- <div class="docs-toc hide" id="docsTOC">
- <ul class="vertical menu" data-docs-toc>
- <li class="docs-nav-title">On this page:</li>
- </ul>
- </div>
- <div class="foundation-toc-ad-unit" id="TOCAdUnit">
- </div>
- </nav>
-</div>
-
-</div>
-
-</article>
-
- </div>
- <div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
- <ul class="vertical menu docs-nav" id="docs-menu">
- <p class="docs-nav-version">
- <span data-docs-version></span>
- <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">(Changelog)</a>
- </p>
-
- <li class="docs-nav-title">Getting Started</li>
- <li><a href="installation.html">Installation</a></li>
- <li><a href="starter-projects.html">Starter Projects</a></li>
- <li><a href="compatibility.html">Compatibility</a></li>
- <li><a href="accessibility.html">Accessibility</a></li>
- <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
-
- <li class="docs-nav-title">Setup</li>
- <li><a href="global.html">Global Styles</a></li>
- <li><a href="rtl.html">Right-to-Left Support</a></li>
- <li><a href="flexbox.html">Flexbox</a></li>
- <li><a href="sass.html">Sass</a></li>
- <li><a href="javascript.html">JavaScript</a></li>
- <li><a href="javascript-utilities.html">JavaScript Utilities</a></li>
- <li><a href="media-queries.html">Media Queries</a></li>
-
- <li class="docs-nav-title">General</li>
- <li><a href="grid.html">Grid</a></li>
- <li><a href="flex-grid.html">Flex Grid</a></li>
- <li><a href="forms.html">Forms</a></li>
- <li><a href="visibility.html">Visibility Classes</a></li>
- <li><a href="float-classes.html">Float Classes</a></li>
-
- <li class="docs-nav-title">Typography</li>
- <li><a href="typography-base.html">Base Styles</a></li>
- <li><a href="typography-helpers.html">Helper Classes</a></li>
-
- <li class="docs-nav-title">Controls</li>
- <li><a href="button.html">Button</a></li>
- <li><a href="button-group.html">Button Group</a></li>
- <li><a href="close-button.html">Close Button</a></li>
- <li><a href="slider.html">Slider <span class="label">JS</span></a></li>
- <li><a href="switch.html">Switch</a></li>
-
- <li class="docs-nav-title">Navigation</li>
- <li><a href="navigation.html">Overview</a></li>
- <li><a href="menu.html">Menu</a></li>
- <li><a href="dropdown-menu.html">Dropdown Menu <span class="label">JS</span></a></li>
- <li class="current"><a href="drilldown-menu.html">Drilldown Menu <span class="label">JS</span></a></li>
- <li><a href="accordion-menu.html">Accordion Menu <span class="label">JS</span></a></li>
- <li><a href="top-bar.html">Top Bar</a></li>
- <li><a href="responsive-navigation.html">Responsive Navigation</a></li>
- <li><a href="magellan.html">Magellan <span class="label">JS</span></a></li>
- <li><a href="pagination.html">Pagination</a></li>
- <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
-
- <li class="docs-nav-title">Containers</li>
- <li><a href="accordion.html">Accordion <span class="label">JS</span></a></li>
- <li><a href="callout.html">Callout</a></li>
- <li><a href="dropdown.html">Dropdown <span class="label">JS</span></a></li>
- <li><a href="media-object.html">Media Object</a></li>
- <li><a href="off-canvas.html">Off-canvas <span class="label">JS</span></a></li>
- <li><a href="reveal.html">Reveal <span class="label">JS</span> <small>Modal</small></a></li>
- <li><a href="table.html">Table</a></li>
- <li><a href="tabs.html">Tabs <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Media</li>
- <li><a href="badge.html">Badge</a></li>
- <li><a href="flex-video.html">Flex Video</a></li>
- <li><a href="label.html">Label</a></li>
- <li><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
- <li><a href="progress-bar.html">Progress Bar</a></li>
- <li><a href="thumbnail.html">Thumbnail</a></li>
- <li><a href="tooltip.html">Tooltip <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Plugins</li>
- <li><a href="abide.html">Abide <small>Form Validation</small></a></li>
- <li><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
- <li><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
- <li><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
- <li><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
-
- <li class="docs-nav-title">Sass</li>
- <li><a href="sass-functions.html">Functions</a></li>
- <li><a href="sass-mixins.html">Mixins</a></li>
-
- <li class="docs-nav-title">Libraries</li>
- <li><a href="motion-ui.html">Motion UI</a></li>
- <li><a href="panini.html">Panini</a></li>
- <li><a href="style-sherpa.html">Style Sherpa</a></li>
-
- <li class="docs-nav-title">Older Versions</li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
- <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
- <li><a href="https://get.foundation/sites/docs/v/3.2.5/">Foundation 3</a></li>
- <li><a href="https://get.foundation/sites/docs/v/2.2.1/">Foundation 2</a></li>
- </ul>
-
- </div>
- </div>
-
- <!-- Small Business(Docs) -->
- <section id="studiosCallout">
- <div class="row">
- <div class="medium-4 large-4 columns">
- <img src="https://get.foundation/assets/img/smallbiz-footer.svg" alt="">
- </div>
- <div class="medium-8 large-8 columns banner-info">
- <div class="row column property-label">ZURB Foundation</div>
- <h3 class="light">Yeah, we can help with that.</h3>
- <p class="lead"> We’ll collaborate with your team throughout the entire project life cycle. We’ll take your concept and move it through ideation, hi-fi wireframes, visual design and code, all while informing you on the whys and hows along the way.</p>
- <div class="course-buttons">
- <a href="https://get.foundation/get-involved/premium-support.html" class="studios button" data-zcom-event="studios_foundation_click" id="foundationSmallV1">Show Me How →</a>
- </div>
- </div>
- </div>
- </section>
-
- <div class="docs-newsletter">
- <div class="row">
- <div class="medium-7 large-8 columns">
- <a target="_blank" href="https://get.foundation/learn/responsive-reading.html">
- <h5 class="">Download ZURB’s 21 Responsive Trends That Will Shape 2017</h5>
- <p style="margin-bottom: 0;">Stay informed with amazing responsive trends each month from ZURB.</p>
- </a>
- </div>
- <div class="medium-5 large-4 footer-signup-form columns">
- <a style="margin-bottom: 0;" target="_blank" href="https://get.foundation/learn/responsive-reading.html" class="button expanded">Download the PDF</a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-top bg-fblue">
- <div class="row property">
- <div class="medium-4 columns">
- <div class="property-info">
- <h3>Foundation for Sites</h3>
- <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
- </p>
- </div>
- </div>
-
- <div class="medium-8 columns">
- <div class="row collapse">
- <div class="medium-4 columns">
- <div class="learn-links">
- <h4 class="hide-for-small">Want more?</h4>
- <ul>
- <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
- <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
- <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
- <li><a href="http://zurb.com/university/courses">Training</a></li>
- <li><a href="http://zurb.com/library">Design Resources</a></li>
- </ul>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="support-links">
- <h4 class="hide-for-small">Talk to us</h4>
- <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
- <p><a href="https://get.foundation/get-involved/contribute.html">Get involved in<br>our amazing community.</a></p>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="connect-links">
- <h4 class="hide-for-small">Stay Updated</h4>
- <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
- <a href="http://zurb.com/news" class="small button">Stay Connected</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="row global">
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/studios" class="footer-link-block services">
- <span class="title">Studios</span>
- <span>Helping more than 200 startups succeed since 1998.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="https://get.foundation/" class="footer-link-block foundation">
- <span class="title">Foundation</span>
- <span>The most advanced front-end framework in the world.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/notable" class="footer-link-block apps">
- <span class="title">Notable Design Apps</span>
- <span>Prototype, iterate and collect feedback on your products.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/university" class="footer-link-block expo">
- <span class="title">University</span>
- <span>Ideas, thoughts and design resources shared with you.</span>
- </a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-bottom">
- <div class="row">
- <div class="medium-4 medium-push-8 columns">
- <ul class="home-social">
- <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
- <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
- <li><a href="http://zurb.com/contact" class="mail"></a></li>
- </ul>
- </div>
- <div class="medium-8 medium-pull-4 columns">
- <a href="http://www.zurb.com" class="zurb-logo regular"></a>
- <ul class="zurb-links">
- <li><a href="http://zurb.com/about">About</a></li>
- <li><a href="http://zurb.com/blog">Blog</a></li>
- <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
- <li><a href="http://zurb.com/contact">Contact</a></li>
- <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
- </ul>
- <p class="copyright">© 1998‐2016 ZURB, Inc. All rights reserved.</p>
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- <script>
- var _gaq = _gaq || [];
- _gaq.push(
- ['_setAccount', 'UA-2195009-2'],
- ['_trackPageview'],
- ['b._setAccount', 'UA-2195009-27'],
- ['b._trackPageview']
- );
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
-
- <script src="assets/js/vendor.js?hash=f3e5ade17774365040f4fd88f0c4e0e8"></script>
- <script src="assets/js/foundation.js?hash=7adac287a05a58a3010caf2f7c21bbfe"></script>
- <script src="assets/js/docs.js?hash=1de153f879ab6e0551ee5f41ef502648"></script>
- <script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
-</body>
-</html>
+++ /dev/null
-<!doctype html>
-<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
-<html class="no-js" lang="en" dir="ltr">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="Change a basic Menu into an expandable dropdown menu with the Dropdown Menu plugin.">
- <link rel="icon" href="assets/img/icons/foundation-favicon.ico" type="image/x-icon">
- <title>Foundation for Sites 6 Docs | Dropdown Menu</title>
- <link href="assets/css/docs.css?hash=56580c9fe86363ab321ea181e0b3dc99" rel="stylesheet" />
- <link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=644065c79f42c03c6dc16cad7c3d8f48" rel="stylesheet">
- <!-- <link rel="stylesheet" href="./node_modules/motion-ui/dist/motion-ui.css" /> -->
-</head>
-<body>
-
- <div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
-
- <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="mobile-ofc vertical menu">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
-
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/support.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/sort/unanswered">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
- </div>
-
- <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="vertical menu">
- <li><a href="#">Foundation</a></li>
- <li><a href="#">Dot</a></li>
- <li><a href="#">ZURB</a></li>
- <li><a href="#">Com</a></li>
- <li><a href="#">Slash</a></li>
- <li><a href="#">Sites</a></li>
- </ul>
- </div>
-
-
- <div class="off-canvas-content" data-off-canvas-content>
- <!-- Info Banner For Announcements or Links -->
- <!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
- <div class="info">
- <h5>Foundation 6 is here!</h5>
- </div>
- </a> -->
-
- <nav class="marketing-topbar show-for-medium">
-
- <ul class="menu">
- <li class="topbar-title"><a href="https://get.foundation/index.html"><img src="assets/img/logos/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
- </ul>
-
- <ul class="dropdown menu" data-dropdown-menu data-click-open="false">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/" target="_blank">F5 Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="https://get.foundation/emails/docs/" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
-
- </nav>
-
- <div class="title-bar hide-for-medium">
- <div class="title-bar-left">
- <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
- <span class="title-bar-title">Foundation</span>
- </div>
- </div>
-
-
- <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
-
- <div class="expanded row">
- <div class="medium-9 large-10 medium-push-3 large-push-2 columns">
-
-<article class="docs-component" id="docs-dropdown-menu">
-
-<a href="#docs-menu" class="small secondary expanded button hide-for-medium">Jump to Nav</a>
-
-<header>
- <h1 class="docs-page-title">Dropdown Menu</h1>
-
- <span data-tooltip title="Requires a JavaScript library." class="docs-js label">JavaScript</span>
-
- <p class="lead docs-page-lead">Change a basic Menu into an expandable dropdown menu with the Dropdown Menu plugin.</p>
-
- <ul class="menu simple docs-contribute-menu">
- <li><a href="https://github.com/zurb/foundation-sites/edit/master/docs/pages/dropdown-menu.md" target="_blank"><i class="fi-pencil"></i>Edit this Page</a></li>
- <li><a href="https://github.com/zurb/foundation-sites/issues/new?title=%5BDropdown%20Menu%5D%20ISSUE%20NAME%20HERE" target="_blank"><i class="fi-social-github"></i>Report a Bug</a></li>
- <li><a href="https://get.foundation/forum" target="_blank"><i class="fi-comment"></i>Get Help</a></li>
- </ul>
-</header>
-
-<hr>
-
-<div class="row">
-
-<div class="large-9 columns" id="docs">
-
-<h2 id="horizontal" class="docs-heading" data-magellan-target="horizontal">Horizontal<a class="docs-heading-icon" href="#horizontal"></a></h2><p>Dropdown menus build on the <a href="menu.html">Menu</a> component's syntax. Add the class <code>.dropdown</code> and the attribute <code>data-dropdown-menu</code> to the menu container to set up the dropdown.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"dropdown menu"</span> <span class="hljs-attr">data-dropdown-menu</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 1<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 2<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 3<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 4<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">ul</span>></span></code></pre></div><p>To create dropdown menus, nest a new <code><ul></code> inside an <code><li></code>. You can nest further to create more levels of dropdowns.</p>
-<div class="primary callout">
- <p>Note that the <code><ul></code> goes <em>after</em> the <code><a></code>, and not inside of it.</p>
-</div>
-
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"dropdown menu"</span> <span class="hljs-attr">data-dropdown-menu</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 1<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 1A<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-comment"><!-- ... --></span>
- <span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 2<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 3<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 4<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">ul</span>></span></code></pre></div><ul class="dropdown menu" data-dropdown-menu>
- <li>
- <a>Item 1</a>
- <ul class="menu">
- <li><a href="#Item-1A">Item 1A</a></li>
- <li>
- <a href="#Item-1B">Item 1B</a>
- <ul class="menu">
- <li><a href="#Item-1Bi">Item 1B i</a></li>
- <li><a href="#Item-1Bii">Item 1B ii</a></li>
- <li>
- <a href="#Item-1Biii">Item 1B iii</a>
- <ul class="menu">
- <li><a href="#Item-1Biiialpha">Item 1B iii alpha</a></li>
- <li><a href="#Item-1Biiiomega">Item 1B iii omega</a></li>
- </ul>
- </li>
- <li>
- <a href="#Item-1Biv">Item 1B iv</a>
- <ul class="menu">
- <li><a href="#Item-1Bivalpha">Item 1B iv alpha</a></li>
- </ul>
- </li>
- </ul>
- </li>
- <li><a href="#Item-1C">Item 1C</a></li>
- </ul>
- </li>
- <li>
- <a href="#Item-2">Item 2</a>
- <ul class="menu">
- <li><a href="#Item-2A">Item 2A</a></li>
- <li><a href="#Item-2B">Item 2B</a></li>
- </ul>
- </li>
- <li><a href="#Item-3">Item 3</a></li>
- <li><a href="#Item-4">Item 4</a></li>
-</ul>
-
-<hr>
-<h2 id="vertical" class="docs-heading" data-magellan-target="vertical">Vertical<a class="docs-heading-icon" href="#vertical"></a></h2><p>Add the <code>.vertical</code> class to the top-level menu to make it vertical. Sub-menus are automatically vertical, regardless of the orientation of the top-level menu.</p>
-<div class="primary callout">
- <p>Menus are block-level elements, which means they stretch to fill the width of their container. To make the below example less goofy, we've hard-coded a <code>max-width</code> on the menu.</p>
-</div>
-
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"vertical dropdown menu"</span> <span class="hljs-attr">data-dropdown-menu</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"max-width: 300px;"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 1<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-comment"><!-- ... --></span>
-<span class="hljs-tag"></<span class="hljs-name">ul</span>></span></code></pre></div><ul class="vertical dropdown menu" data-dropdown-menu style="max-width: 300px;">
- <li>
- <a>Item 1</a>
- <ul class="menu">
- <li><a href="#Item-1A">Item 1A</a></li>
- <li>
- <a href="#Item-1B">Item 1B</a>
- <ul class="menu">
- <li><a href="#Item-1Bi">Item 1B i</a></li>
- <li><a href="#Item-1Bii">Item 1B ii</a></li>
- <li>
- <a href="#Item-1Biii">Item 1B iii</a>
- <ul class="menu">
- <li><a href="#Item-1Biiialpha">Item 1B iii alpha</a></li>
- <li><a href="#Item-1Biiiomega">Item 1B iii omega</a></li>
- </ul>
- </li>
- <li>
- <a href="#Item-1Biv">Item 1B iv</a>
- <ul class="menu">
- <li><a href="#Item-1Bivalpha">Item 1B iv alpha</a></li>
- </ul>
- </li>
- </ul>
- </li>
- <li><a href="#Item-1C">Item 1C</a></li>
- </ul>
- </li>
- <li>
- <a href="#Item-2">Item 2</a>
- <ul class="menu">
- <li><a href="#Item-2A">Item 2A</a></li>
- <li><a href="#Item-2B">Item 2B</a></li>
- </ul>
- </li>
- <li><a href="#Item-3">Item 3</a></li>
- <li><a href="#Item-4">Item 4</a></li>
-</ul>
-
-<hr>
-<h2 id="sticky-navigation" class="docs-heading" data-magellan-target="sticky-navigation">Sticky Navigation<a class="docs-heading-icon" href="#sticky-navigation"></a></h2><p>See the documentation for the <a href="sticky.html#sticky-navigation">Sticky</a> plugin to see how to easily make a sticky nav bar. </p>
-<hr>
-<h3 id="preventing-fouc" class="docs-heading">Preventing FOUC<a class="docs-heading-icon" href="#preventing-fouc"></a></h3><p>Before the JavaScript on your page loads, the dropdown menus will not have arrows. However, once the JavaScript file has loaded, the arrows will appear causing a <a href="https://en.wikipedia.org/wiki/Flash_of_unstyled_content">flash of unstyled content</a>. You can prevent this by adding the <code>is-dropdown-submenu-parent</code> class manually. </p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"dropdown menu"</span> <span class="hljs-attr">data-dropdown-menu</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"is-dropdown-submenu-parent"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 1<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 1A<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-comment"><!-- ... --></span>
- <span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 2<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 3<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 4<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">ul</span>></span></code></pre></div>
-
-<hr>
-<section>
- <h2 id="sass-reference" class="docs-heading" data-magellan-target="sass-reference">Sass Reference<a class="docs-heading-icon" href="#sass-reference"></a></h2>
-
- <section>
- <h3 id="sass-variables" class="docs-heading">Variables<a class="docs-heading-icon" href="#sass-variables"></a></h3>
-
- <p>The default styles of this component can be customized using these Sass variables in your project's <a href="sass.html#the-settings-file">settings file</a>.</p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td class="name"><code>$dropdownmenu-arrows</code></td>
- <td>Boolean</td>
- <td class="boolean"><code>true</code></td>
- <td><p>Enables arrows for items with dropdown menus.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$dropdownmenu-arrow-color</code></td>
- <td>Color</td>
- <td class="color"><code>$anchor-color</code></td>
- <td><p>Sets dropdown menu arrow color if arrow is used.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$dropdownmenu-min-width</code></td>
- <td>Length</td>
- <td class="length"><code>200px</code></td>
- <td><p>Minimum width of dropdown sub-menus.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$dropdownmenu-background</code></td>
- <td>Color</td>
- <td class="color"><code>$white</code></td>
- <td><p>Background color for dropdowns.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$dropdownmenu-border</code></td>
- <td>List</td>
- <td class="list"><code>1px solid $medium-gray</code></td>
- <td><p>Border for dropdown sub-menus.</p>
-</td>
- </tr>
- </table>
- </section>
-
-
-
-</section>
-
-<hr>
-<section>
- <h2 id="javascript-reference" class="docs-heading" data-magellan-target="javascript-reference">JavaScript Reference<a class="docs-heading-icon" href="#javascript-reference"></a></h2>
-
-
- <section>
- <h3 id="js-module" class="docs-heading">Initializing<a class="docs-heading-icon" href="#js-module"></a></h3>
-
- <p>The file <code>foundation.dropdownMenu.js</code> must be included in your JavaScript to use this plugin, along with <code>foundation.core.js</code>. <strong>This plugin also requires these utility libraries:</strong></p>
-
-
- <ul>
- <li><code>foundation.util.keyboard.js</code></li>
- </ul>
-
- <ul>
- <li><code>foundation.util.box.js</code></li>
- </ul>
-
- <ul>
- <li><code>foundation.util.nest.js</code></li>
- </ul>
-
-
- </section>
-
-
- <section>
- <h3 id="js-class" class="docs-heading">Foundation.DropdownMenu<a class="docs-heading-icon" href="#js-class"></a></h3>
-
- <p>Creates a new instance of DropdownMenu.</p>
-
-
- <div class="docs-code"><pre><code><span class="hljs-keyword">var</span> elem = <span class="hljs-keyword">new</span> Foundation.DropdownMenu(element, options);</code></pre></div>
-
- <p><strong>Fires these events:</strong>
- DropdownMenu#event:init
- </p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>element</code></td>
- <td>jQuery</td>
- <td>jQuery object to make into a dropdown menu.</td>
- </tr>
- <tr>
- <td><code>options</code></td>
- <td>Object</td>
- <td>Overrides to the default plugin settings.</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="js-options" class="docs-heading">Plugin Options<a class="docs-heading-icon" href="#js-options"></a></h3>
-
- <p>Use these options to customize an instance of Dropdown Menu. Plugin options can be set as individual data attributes, one combined <code>data-options</code> attribute, or as an object passed to the plugin's constructor. <a href="javascript.html#initializing">Learn more about how JavaScript plugins are initialized.</a></p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Default</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>data-disable-hover</code></td>
- <td><code>false</code></td>
- <td>Disallows hover events from opening submenus</td>
- </tr>
- <tr>
- <td><code>data-autoclose</code></td>
- <td><code>true</code></td>
- <td>Allow a submenu to automatically close on a mouseleave event, if not clicked open.</td>
- </tr>
- <tr>
- <td><code>data-hover-delay</code></td>
- <td><code>50</code></td>
- <td>Amount of time to delay opening a submenu on hover event.</td>
- </tr>
- <tr>
- <td><code>data-click-open</code></td>
- <td><code>true</code></td>
- <td>Allow a submenu to open/remain open on parent click event. Allows cursor to move away from menu.</td>
- </tr>
- <tr>
- <td><code>data-closing-time</code></td>
- <td><code>500</code></td>
- <td>Amount of time to delay closing a submenu on a mouseleave event.</td>
- </tr>
- <tr>
- <td><code>data-alignment</code></td>
- <td><code>left</code></td>
- <td>Position of the menu relative to what direction the submenus should open. Handled by JS.</td>
- </tr>
- <tr>
- <td><code>data-close-on-click</code></td>
- <td><code>true</code></td>
- <td>Allow clicks on the body to close any open submenus.</td>
- </tr>
- <tr>
- <td><code>data-vertical-class</code></td>
- <td><code>vertical</code></td>
- <td>Class applied to vertical oriented menus, Foundation default is `vertical`. Update this if using your own class.</td>
- </tr>
- <tr>
- <td><code>data-right-class</code></td>
- <td><code>align-right</code></td>
- <td>Class applied to right-side oriented menus, Foundation default is `align-right`. Update this if using your own class.</td>
- </tr>
- <tr>
- <td><code>data-force-follow</code></td>
- <td><code>false</code></td>
- <td>Boolean to force overide the clicking of links to perform default action, on second touch event for mobile.</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="js-events" class="docs-heading">Events<a class="docs-heading-icon" href="#js-events"></a></h3>
-
- <p>These events will fire from any element with a Dropdown Menu plugin attached.</p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>show.zf.dropdownMenu</code></td>
- <td>Fires when the new dropdown pane is visible.</td>
- </tr>
- <tr>
- <td><code>hide.zf.dropdownMenu</code></td>
- <td>Fires when the open menus are closed.</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="js-functions" class="docs-heading">Methods<a class="docs-heading-icon" href="#js-functions"></a></h3>
-
- <section>
- <h4 id="destroy" class="docs-heading">destroy<a class="docs-heading-icon" href="#destroy"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'destroy'</span>);</code></pre>
- </div>
-
- <p>Destroys the plugin.</p>
-
-
-
-
-
- </section>
- </section>
-</section>
-
-<!-- <hr> -->
-<!-- <section class="docs-building-blocks">
- <h2 id="building-blocks" class="docs-heading" data-magellan-target="building-blocks">Building Blocks<a class="docs-heading-icon" href="#building-blocks"></a></h2>
-
- <p><a href="http://zurb.com/building-blocks">Building Blocks</a> is a ZURB-curated resource with useful code snippets that use Foundation components. Here are a few for this component:</p>
-
- <div class="warning callout">
- <p>These are placeholder items. If you have ideas for building blocks for this component, <a href="https://github.com/zurb/foundation-sites-6/issues/118">we're taking ideas on GitHub</a>.</p>
- </div>
-
- <div data-building-blocks></div>
-</section> -->
-
-</div>
-
-<div class="large-3 columns" data-sticky-container>
- <nav class="columns docs-toc-wrap" data-sticky data-anchor="docs" data-sticky-on="large">
- <div class="docs-toc hide" id="docsTOC">
- <ul class="vertical menu" data-docs-toc>
- <li class="docs-nav-title">On this page:</li>
- </ul>
- </div>
- <div class="foundation-toc-ad-unit" id="TOCAdUnit">
- </div>
- </nav>
-</div>
-
-</div>
-
-</article>
-
- </div>
- <div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
- <ul class="vertical menu docs-nav" id="docs-menu">
- <p class="docs-nav-version">
- <span data-docs-version></span>
- <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">(Changelog)</a>
- </p>
-
- <li class="docs-nav-title">Getting Started</li>
- <li><a href="installation.html">Installation</a></li>
- <li><a href="starter-projects.html">Starter Projects</a></li>
- <li><a href="compatibility.html">Compatibility</a></li>
- <li><a href="accessibility.html">Accessibility</a></li>
- <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
-
- <li class="docs-nav-title">Setup</li>
- <li><a href="global.html">Global Styles</a></li>
- <li><a href="rtl.html">Right-to-Left Support</a></li>
- <li><a href="flexbox.html">Flexbox</a></li>
- <li><a href="sass.html">Sass</a></li>
- <li><a href="javascript.html">JavaScript</a></li>
- <li><a href="javascript-utilities.html">JavaScript Utilities</a></li>
- <li><a href="media-queries.html">Media Queries</a></li>
-
- <li class="docs-nav-title">General</li>
- <li><a href="grid.html">Grid</a></li>
- <li><a href="flex-grid.html">Flex Grid</a></li>
- <li><a href="forms.html">Forms</a></li>
- <li><a href="visibility.html">Visibility Classes</a></li>
- <li><a href="float-classes.html">Float Classes</a></li>
-
- <li class="docs-nav-title">Typography</li>
- <li><a href="typography-base.html">Base Styles</a></li>
- <li><a href="typography-helpers.html">Helper Classes</a></li>
-
- <li class="docs-nav-title">Controls</li>
- <li><a href="button.html">Button</a></li>
- <li><a href="button-group.html">Button Group</a></li>
- <li><a href="close-button.html">Close Button</a></li>
- <li><a href="slider.html">Slider <span class="label">JS</span></a></li>
- <li><a href="switch.html">Switch</a></li>
-
- <li class="docs-nav-title">Navigation</li>
- <li><a href="navigation.html">Overview</a></li>
- <li><a href="menu.html">Menu</a></li>
- <li class="current"><a href="dropdown-menu.html">Dropdown Menu <span class="label">JS</span></a></li>
- <li><a href="drilldown-menu.html">Drilldown Menu <span class="label">JS</span></a></li>
- <li><a href="accordion-menu.html">Accordion Menu <span class="label">JS</span></a></li>
- <li><a href="top-bar.html">Top Bar</a></li>
- <li><a href="responsive-navigation.html">Responsive Navigation</a></li>
- <li><a href="magellan.html">Magellan <span class="label">JS</span></a></li>
- <li><a href="pagination.html">Pagination</a></li>
- <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
-
- <li class="docs-nav-title">Containers</li>
- <li><a href="accordion.html">Accordion <span class="label">JS</span></a></li>
- <li><a href="callout.html">Callout</a></li>
- <li><a href="dropdown.html">Dropdown <span class="label">JS</span></a></li>
- <li><a href="media-object.html">Media Object</a></li>
- <li><a href="off-canvas.html">Off-canvas <span class="label">JS</span></a></li>
- <li><a href="reveal.html">Reveal <span class="label">JS</span> <small>Modal</small></a></li>
- <li><a href="table.html">Table</a></li>
- <li><a href="tabs.html">Tabs <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Media</li>
- <li><a href="badge.html">Badge</a></li>
- <li><a href="flex-video.html">Flex Video</a></li>
- <li><a href="label.html">Label</a></li>
- <li><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
- <li><a href="progress-bar.html">Progress Bar</a></li>
- <li><a href="thumbnail.html">Thumbnail</a></li>
- <li><a href="tooltip.html">Tooltip <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Plugins</li>
- <li><a href="abide.html">Abide <small>Form Validation</small></a></li>
- <li><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
- <li><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
- <li><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
- <li><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
-
- <li class="docs-nav-title">Sass</li>
- <li><a href="sass-functions.html">Functions</a></li>
- <li><a href="sass-mixins.html">Mixins</a></li>
-
- <li class="docs-nav-title">Libraries</li>
- <li><a href="motion-ui.html">Motion UI</a></li>
- <li><a href="panini.html">Panini</a></li>
- <li><a href="style-sherpa.html">Style Sherpa</a></li>
-
- <li class="docs-nav-title">Older Versions</li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
- <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
- <li><a href="https://get.foundation/sites/docs/v/3.2.5/">Foundation 3</a></li>
- <li><a href="https://get.foundation/sites/docs/v/2.2.1/">Foundation 2</a></li>
- </ul>
-
- </div>
- </div>
-
- <!-- Small Business(Docs) -->
- <section id="studiosCallout">
- <div class="row">
- <div class="medium-4 large-4 columns">
- <img src="https://get.foundation/assets/img/smallbiz-footer.svg" alt="">
- </div>
- <div class="medium-8 large-8 columns banner-info">
- <div class="row column property-label">ZURB Foundation</div>
- <h3 class="light">Yeah, we can help with that.</h3>
- <p class="lead"> We’ll collaborate with your team throughout the entire project life cycle. We’ll take your concept and move it through ideation, hi-fi wireframes, visual design and code, all while informing you on the whys and hows along the way.</p>
- <div class="course-buttons">
- <a href="https://get.foundation/get-involved/premium-support.html" class="studios button" data-zcom-event="studios_foundation_click" id="foundationSmallV1">Show Me How →</a>
- </div>
- </div>
- </div>
- </section>
-
- <div class="docs-newsletter">
- <div class="row">
- <div class="medium-7 large-8 columns">
- <a target="_blank" href="https://get.foundation/learn/responsive-reading.html">
- <h5 class="">Download ZURB’s 21 Responsive Trends That Will Shape 2017</h5>
- <p style="margin-bottom: 0;">Stay informed with amazing responsive trends each month from ZURB.</p>
- </a>
- </div>
- <div class="medium-5 large-4 footer-signup-form columns">
- <a style="margin-bottom: 0;" target="_blank" href="https://get.foundation/learn/responsive-reading.html" class="button expanded">Download the PDF</a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-top bg-fblue">
- <div class="row property">
- <div class="medium-4 columns">
- <div class="property-info">
- <h3>Foundation for Sites</h3>
- <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
- </p>
- </div>
- </div>
-
- <div class="medium-8 columns">
- <div class="row collapse">
- <div class="medium-4 columns">
- <div class="learn-links">
- <h4 class="hide-for-small">Want more?</h4>
- <ul>
- <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
- <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
- <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
- <li><a href="http://zurb.com/university/courses">Training</a></li>
- <li><a href="http://zurb.com/library">Design Resources</a></li>
- </ul>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="support-links">
- <h4 class="hide-for-small">Talk to us</h4>
- <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
- <p><a href="https://get.foundation/get-involved/contribute.html">Get involved in<br>our amazing community.</a></p>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="connect-links">
- <h4 class="hide-for-small">Stay Updated</h4>
- <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
- <a href="http://zurb.com/news" class="small button">Stay Connected</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="row global">
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/studios" class="footer-link-block services">
- <span class="title">Studios</span>
- <span>Helping more than 200 startups succeed since 1998.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="https://get.foundation/" class="footer-link-block foundation">
- <span class="title">Foundation</span>
- <span>The most advanced front-end framework in the world.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/notable" class="footer-link-block apps">
- <span class="title">Notable Design Apps</span>
- <span>Prototype, iterate and collect feedback on your products.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/university" class="footer-link-block expo">
- <span class="title">University</span>
- <span>Ideas, thoughts and design resources shared with you.</span>
- </a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-bottom">
- <div class="row">
- <div class="medium-4 medium-push-8 columns">
- <ul class="home-social">
- <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
- <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
- <li><a href="http://zurb.com/contact" class="mail"></a></li>
- </ul>
- </div>
- <div class="medium-8 medium-pull-4 columns">
- <a href="http://www.zurb.com" class="zurb-logo regular"></a>
- <ul class="zurb-links">
- <li><a href="http://zurb.com/about">About</a></li>
- <li><a href="http://zurb.com/blog">Blog</a></li>
- <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
- <li><a href="http://zurb.com/contact">Contact</a></li>
- <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
- </ul>
- <p class="copyright">© 1998‐2016 ZURB, Inc. All rights reserved.</p>
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- <script>
- var _gaq = _gaq || [];
- _gaq.push(
- ['_setAccount', 'UA-2195009-2'],
- ['_trackPageview'],
- ['b._setAccount', 'UA-2195009-27'],
- ['b._trackPageview']
- );
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
-
- <script src="assets/js/vendor.js?hash=0e1e5adfd184dfbdbe483eed5e64279b"></script>
- <script src="assets/js/foundation.js?hash=bac6cfe1485162d5e689af1cc0251054"></script>
- <script src="assets/js/docs.js?hash=b0d8ddc5af4453937be11216491b35d5"></script>
- <script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
-</body>
-</html>
+++ /dev/null
-<!doctype html>
-<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
-<html class="no-js" lang="en" dir="ltr">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="Dropdown panes are little happy sprites which can be revealed on click or hover.">
- <link rel="icon" href="assets/img/icons/foundation-favicon.ico" type="image/x-icon">
- <title>Foundation for Sites 6 Docs | Dropdown</title>
- <link href="assets/css/docs.css?hash=62a98b207272e8d7747d5eee33313356" rel="stylesheet" />
- <link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=1402c36139739f334df1c10144bf3878" rel="stylesheet">
- <!-- <link rel="stylesheet" href="./node_modules/motion-ui/dist/motion-ui.css" /> -->
-</head>
-<body>
-
- <div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
-
- <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="mobile-ofc vertical menu">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
-
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/support.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/sort/unanswered">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
- </div>
-
- <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="vertical menu">
- <li><a href="#">Foundation</a></li>
- <li><a href="#">Dot</a></li>
- <li><a href="#">ZURB</a></li>
- <li><a href="#">Com</a></li>
- <li><a href="#">Slash</a></li>
- <li><a href="#">Sites</a></li>
- </ul>
- </div>
-
-
- <div class="off-canvas-content" data-off-canvas-content>
- <!-- Info Banner For Announcements or Links -->
- <!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
- <div class="info">
- <h5>Foundation 6 is here!</h5>
- </div>
- </a> -->
-
- <nav class="marketing-topbar show-for-medium">
-
- <ul class="menu">
- <li class="topbar-title"><a href="https://get.foundation/index.html"><img src="assets/img/logos/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
- </ul>
-
- <ul class="dropdown menu" data-dropdown-menu data-click-open="false">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/" target="_blank">F5 Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="https://get.foundation/emails/docs/" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
-
- </nav>
-
- <div class="title-bar hide-for-medium">
- <div class="title-bar-left">
- <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
- <span class="title-bar-title">Foundation</span>
- </div>
- </div>
-
-
- <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
-
- <div class="expanded row">
- <div class="medium-9 large-10 medium-push-3 large-push-2 columns">
-
-<article class="docs-component" id="docs-dropdown">
-
-<a href="#docs-menu" class="small secondary expanded button hide-for-medium">Jump to Nav</a>
-
-<header>
- <h1 class="docs-page-title">Dropdown</h1>
-
- <span data-tooltip title="Requires a JavaScript library." class="docs-js label">JavaScript</span>
-
- <p class="lead docs-page-lead">Dropdown panes are little happy sprites which can be revealed on click or hover.</p>
-
- <ul class="menu simple docs-contribute-menu">
- <li><a href="https://github.com/zurb/foundation-sites/edit/master/docs/pages/dropdown.md" target="_blank"><i class="fi-pencil"></i>Edit this Page</a></li>
- <li><a href="https://github.com/zurb/foundation-sites/issues/new?title=%5BDropdown%5D%20ISSUE%20NAME%20HERE" target="_blank"><i class="fi-social-github"></i>Report a Bug</a></li>
- <li><a href="https://get.foundation/forum" target="_blank"><i class="fi-comment"></i>Get Help</a></li>
- </ul>
-</header>
-
-<hr>
-
-<div class="row">
-
-<div class="large-9 columns" id="docs">
-
-<div class="primary callout">
- <p>You might be looking for <a href="dropdown-menu.html">dropdown menus</a>, which are a separate plugin.</p>
-</div>
-
-<h2 id="basics" class="docs-heading" data-magellan-target="basics">Basics<a class="docs-heading-icon" href="#basics"></a></h2><p>To create a dropdown pane, add the class <code>.dropdown-pane</code> and the attribute <code>data-dropdown</code> to an element. Give the dropdown a unique ID as well.</p>
-<p>To create the dropdown trigger, add <code>data-toggle</code> to a <code><button></code>. The value of <code>data-toggle</code> is the ID of the dropdown.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">data-toggle</span>=<span class="hljs-string">"example-dropdown"</span>></span>Toggle Dropdown<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"dropdown-pane"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example-dropdown"</span> <span class="hljs-attr">data-dropdown</span> <span class="hljs-attr">data-auto-focus</span>=<span class="hljs-string">"true"</span>></span>
- Example form in a dropdown.
- <span class="hljs-tag"><<span class="hljs-name">form</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"medium-6 columns"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Name
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Kirk, James T."</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"medium-6 columns"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Rank
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Captain"</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">form</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
-
-<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">data-toggle</span>=<span class="hljs-string">"example-dropdown-1"</span>></span>Hoverable Dropdown<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"dropdown-pane"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example-dropdown-1"</span> <span class="hljs-attr">data-dropdown</span> <span class="hljs-attr">data-hover</span>=<span class="hljs-string">"true"</span> <span class="hljs-attr">data-hover-pane</span>=<span class="hljs-string">"true"</span>></span>
- Just some junk that needs to be said. Or not. Your choice.
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><button class="button" type="button" data-toggle="example-dropdown">Toggle Dropdown</button>
-<div class="dropdown-pane" id="example-dropdown" data-dropdown data-auto-focus="true">
- Example form in a dropdown.
- <form>
- <div class="row">
- <div class="medium-6 columns">
- <label>Name
- <input type="text" placeholder="Kirk, James T.">
- </label>
- </div>
- <div class="medium-6 columns">
- <label>Rank
- <input type="text" placeholder="Captain">
- </label>
- </div>
- </div>
- </form>
-</div>
-
-
-<button class="button" type="button" data-toggle="example-dropdown-1">Hoverable Dropdown</button>
-<div class="dropdown-pane" id="example-dropdown-1" data-dropdown data-hover="true" data-hover-pane="true">
- Just some junk that needs to be said. Or not. Your choice.
-</div></div><hr>
-<h2 id="positioning" class="docs-heading" data-magellan-target="positioning">Positioning<a class="docs-heading-icon" href="#positioning"></a></h2><p>By default, a dropdown anchors below the button that opened it. Add the class <code>.top</code>, <code>.right</code>, or <code>.bottom</code> to the dropdown to change this.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">data-toggle</span>=<span class="hljs-string">"example-dropdown2"</span>></span>Top Aligned<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
-
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"dropdown-pane top"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example-dropdown2"</span> <span class="hljs-attr">data-dropdown</span>></span>
- Just some junk that needs to be said. Or not. Your choice.
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><button class="button" type="button" data-toggle="example-dropdown2">Top Aligned</button>
-
-<div class="dropdown-pane top" id="example-dropdown2" data-dropdown>
- Just some junk that needs to be said. Or not. Your choice.
-</div></div><p><button class="button" type="button" data-toggle="example-dropdown3" style="float: right;">Left Aligned</button></p>
-<div class="dropdown-pane left" id="example-dropdown3" data-dropdown>
- Just some junk that needs to be said. Or not. Your choice.
-</div>
-
-<p><button class="button" type="button" data-toggle="example-dropdown4">Right Aligned</button></p>
-<div class="dropdown-pane right" id="example-dropdown4" data-dropdown>
- Just some junk that needs to be said. Or not. Your choice.
-</div>
-
-
-<p>Adding <code>.float-right</code> or <code>.float-left</code> to the anchor will change the direction of the dropdown as well.</p>
-<p><button class="button float-right" type="button" data-toggle="example-dropdown5">Bottom-right Aligned</button></p>
-<div class="dropdown-pane bottom" id="example-dropdown5" data-dropdown>
- Just some junk that needs to be said. Or not. Your choice.
-</div>
-
-<p><button class="button float-left" type="button" data-toggle="example-dropdown6">Bottom-left Aligned</button></p>
-<div class="dropdown-pane bottom" id="example-dropdown6" data-dropdown>
- Just some junk that needs to be said. Or not. Your choice.
-</div>
-
-<hr>
-<section>
- <h2 id="sass-reference" class="docs-heading" data-magellan-target="sass-reference">Sass Reference<a class="docs-heading-icon" href="#sass-reference"></a></h2>
-
- <section>
- <h3 id="sass-variables" class="docs-heading">Variables<a class="docs-heading-icon" href="#sass-variables"></a></h3>
-
- <p>The default styles of this component can be customized using these Sass variables in your project's <a href="sass.html#the-settings-file">settings file</a>.</p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td class="name"><code>$dropdown-padding</code></td>
- <td>List</td>
- <td class="list"><code>1rem</code></td>
- <td><p>Padding for dropdown panes.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$dropdown-border</code></td>
- <td>List</td>
- <td class="list"><code>1px solid $medium-gray</code></td>
- <td><p>Border for dropdown panes.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$dropdown-font-size</code></td>
- <td>List</td>
- <td class="list"><code>1rem</code></td>
- <td><p>Font size for dropdown panes.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$dropdown-width</code></td>
- <td>Number</td>
- <td class="number"><code>300px</code></td>
- <td><p>Width for dropdown panes.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$dropdown-radius</code></td>
- <td>Number</td>
- <td class="number"><code>$global-radius</code></td>
- <td><p>Border radius dropdown panes.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$dropdown-sizes</code></td>
- <td>Map</td>
- <td class="map"><code>
- tiny: 100px<br>
- small: 200px<br>
- large: 400px<br>
-</code></td>
- <td><p>Sizes for dropdown panes. Each size is a CSS class you can apply.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="sass-mixins" class="docs-heading">Mixins<a class="docs-heading-icon" href="#sass-mixins"></a></h3>
-
- <p>We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.</p>
-
-
- <section >
- <h4 id="dropdown-container" class="docs-heading">dropdown-container<a class="docs-heading-icon" href="#dropdown-container"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> dropdown-container;</code></pre>
- </div>
-
- <p>Applies styles for a basic dropdown.</p>
-
-
-
-
-
- </section>
-
-
-
-
-
- </section>
-
-
-</section>
-
-<hr>
-<section>
- <h2 id="javascript-reference" class="docs-heading" data-magellan-target="javascript-reference">JavaScript Reference<a class="docs-heading-icon" href="#javascript-reference"></a></h2>
-
-
- <section>
- <h3 id="js-module" class="docs-heading">Initializing<a class="docs-heading-icon" href="#js-module"></a></h3>
-
- <p>The file <code>foundation.dropdown.js</code> must be included in your JavaScript to use this plugin, along with <code>foundation.core.js</code>. <strong>This plugin also requires these utility libraries:</strong></p>
-
-
- <ul>
- <li><code>foundation.util.keyboard.js</code></li>
- </ul>
-
- <ul>
- <li><code>foundation.util.box.js</code></li>
- </ul>
-
- <ul>
- <li><code>foundation.util.triggers.js</code></li>
- </ul>
-
-
- </section>
-
-
- <section>
- <h3 id="js-class" class="docs-heading">Foundation.Dropdown<a class="docs-heading-icon" href="#js-class"></a></h3>
-
- <p>Creates a new instance of a dropdown.</p>
-
-
- <div class="docs-code"><pre><code><span class="hljs-keyword">var</span> elem = <span class="hljs-keyword">new</span> Foundation.Dropdown(element, options);</code></pre></div>
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>element</code></td>
- <td>jQuery</td>
- <td>jQuery object to make into a dropdown.
- Object should be of the dropdown panel, rather than its anchor.</td>
- </tr>
- <tr>
- <td><code>options</code></td>
- <td>Object</td>
- <td>Overrides to the default plugin settings.</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="js-options" class="docs-heading">Plugin Options<a class="docs-heading-icon" href="#js-options"></a></h3>
-
- <p>Use these options to customize an instance of Dropdown. Plugin options can be set as individual data attributes, one combined <code>data-options</code> attribute, or as an object passed to the plugin's constructor. <a href="javascript.html#initializing">Learn more about how JavaScript plugins are initialized.</a></p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Default</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>data-hover-delay</code></td>
- <td><code>250</code></td>
- <td>Amount of time to delay opening a submenu on hover event.</td>
- </tr>
- <tr>
- <td><code>data-hover</code></td>
- <td><code>false</code></td>
- <td>Allow submenus to open on hover events</td>
- </tr>
- <tr>
- <td><code>data-hover-pane</code></td>
- <td><code>true</code></td>
- <td>Don't close dropdown when hovering over dropdown pane</td>
- </tr>
- <tr>
- <td><code>data-v-offset</code></td>
- <td><code>1</code></td>
- <td>Number of pixels between the dropdown pane and the triggering element on open.</td>
- </tr>
- <tr>
- <td><code>data-h-offset</code></td>
- <td><code>1</code></td>
- <td>Number of pixels between the dropdown pane and the triggering element on open.</td>
- </tr>
- <tr>
- <td><code>data-position-class</code></td>
- <td><code>top</code></td>
- <td>Class applied to adjust open position. JS will test and fill this in.</td>
- </tr>
- <tr>
- <td><code>data-trap-focus</code></td>
- <td><code>false</code></td>
- <td>Allow the plugin to trap focus to the dropdown pane if opened with keyboard commands.</td>
- </tr>
- <tr>
- <td><code>data-auto-focus</code></td>
- <td><code>true</code></td>
- <td>Allow the plugin to set focus to the first focusable element within the pane, regardless of method of opening.</td>
- </tr>
- <tr>
- <td><code>data-close-on-click</code></td>
- <td><code>false</code></td>
- <td>Allows a click on the body to close the dropdown.</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="js-events" class="docs-heading">Events<a class="docs-heading-icon" href="#js-events"></a></h3>
-
- <p>These events will fire from any element with a Dropdown plugin attached.</p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>closeme.zf.dropdown</code></td>
- <td>Fires to close other open dropdowns</td>
- </tr>
- <tr>
- <td><code>show.zf.dropdown</code></td>
- <td>Fires once the dropdown is visible.</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="js-functions" class="docs-heading">Methods<a class="docs-heading-icon" href="#js-functions"></a></h3>
-
- <section>
- <h4 id="getpositionclass" class="docs-heading">getPositionClass<a class="docs-heading-icon" href="#getpositionclass"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'getPositionClass'</span>);</code></pre>
- </div>
-
- <p>Helper function to determine current orientation of dropdown pane.</p>
-
-
-
-
- <hr>
- </section>
- <section>
- <h4 id="open" class="docs-heading">open<a class="docs-heading-icon" href="#open"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'open'</span>);</code></pre>
- </div>
-
- <p>Opens the dropdown pane, and fires a bubbling event to close other dropdowns.</p>
-
-
- <p><strong>Fires these events:</strong>
- Dropdown#event:closeme
- Dropdown#event:show
- </p>
-
-
- <hr>
- </section>
- <section>
- <h4 id="close" class="docs-heading">close<a class="docs-heading-icon" href="#close"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'close'</span>);</code></pre>
- </div>
-
- <p>Closes the open dropdown pane.</p>
-
-
- <p><strong>Fires these events:</strong>
- Dropdown#event:hide
- </p>
-
-
- <hr>
- </section>
- <section>
- <h4 id="toggle" class="docs-heading">toggle<a class="docs-heading-icon" href="#toggle"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'toggle'</span>);</code></pre>
- </div>
-
- <p>Toggles the dropdown pane's visibility.</p>
-
-
-
-
- <hr>
- </section>
- <section>
- <h4 id="destroy" class="docs-heading">destroy<a class="docs-heading-icon" href="#destroy"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'destroy'</span>);</code></pre>
- </div>
-
- <p>Destroys the dropdown.</p>
-
-
-
-
-
- </section>
- </section>
-</section>
-
-<!-- <hr> -->
-<!-- <section class="docs-building-blocks">
- <h2 id="building-blocks" class="docs-heading" data-magellan-target="building-blocks">Building Blocks<a class="docs-heading-icon" href="#building-blocks"></a></h2>
-
- <p><a href="http://zurb.com/building-blocks">Building Blocks</a> is a ZURB-curated resource with useful code snippets that use Foundation components. Here are a few for this component:</p>
-
- <div class="warning callout">
- <p>These are placeholder items. If you have ideas for building blocks for this component, <a href="https://github.com/zurb/foundation-sites-6/issues/118">we're taking ideas on GitHub</a>.</p>
- </div>
-
- <div data-building-blocks></div>
-</section> -->
-
-</div>
-
-<div class="large-3 columns" data-sticky-container>
- <nav class="columns docs-toc-wrap" data-sticky data-anchor="docs" data-sticky-on="large">
- <div class="docs-toc hide" id="docsTOC">
- <ul class="vertical menu" data-docs-toc>
- <li class="docs-nav-title">On this page:</li>
- </ul>
- </div>
- <div class="foundation-toc-ad-unit" id="TOCAdUnit">
- </div>
- </nav>
-</div>
-
-</div>
-
-</article>
-
- </div>
- <div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
- <ul class="vertical menu docs-nav" id="docs-menu">
- <p class="docs-nav-version">
- <span data-docs-version></span>
- <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">(Changelog)</a>
- </p>
-
- <li class="docs-nav-title">Getting Started</li>
- <li><a href="installation.html">Installation</a></li>
- <li><a href="starter-projects.html">Starter Projects</a></li>
- <li><a href="compatibility.html">Compatibility</a></li>
- <li><a href="accessibility.html">Accessibility</a></li>
- <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
-
- <li class="docs-nav-title">Setup</li>
- <li><a href="global.html">Global Styles</a></li>
- <li><a href="rtl.html">Right-to-Left Support</a></li>
- <li><a href="flexbox.html">Flexbox</a></li>
- <li><a href="sass.html">Sass</a></li>
- <li><a href="javascript.html">JavaScript</a></li>
- <li><a href="javascript-utilities.html">JavaScript Utilities</a></li>
- <li><a href="media-queries.html">Media Queries</a></li>
-
- <li class="docs-nav-title">General</li>
- <li><a href="grid.html">Grid</a></li>
- <li><a href="flex-grid.html">Flex Grid</a></li>
- <li><a href="forms.html">Forms</a></li>
- <li><a href="visibility.html">Visibility Classes</a></li>
- <li><a href="float-classes.html">Float Classes</a></li>
-
- <li class="docs-nav-title">Typography</li>
- <li><a href="typography-base.html">Base Styles</a></li>
- <li><a href="typography-helpers.html">Helper Classes</a></li>
-
- <li class="docs-nav-title">Controls</li>
- <li><a href="button.html">Button</a></li>
- <li><a href="button-group.html">Button Group</a></li>
- <li><a href="close-button.html">Close Button</a></li>
- <li><a href="slider.html">Slider <span class="label">JS</span></a></li>
- <li><a href="switch.html">Switch</a></li>
-
- <li class="docs-nav-title">Navigation</li>
- <li><a href="navigation.html">Overview</a></li>
- <li><a href="menu.html">Menu</a></li>
- <li><a href="dropdown-menu.html">Dropdown Menu <span class="label">JS</span></a></li>
- <li><a href="drilldown-menu.html">Drilldown Menu <span class="label">JS</span></a></li>
- <li><a href="accordion-menu.html">Accordion Menu <span class="label">JS</span></a></li>
- <li><a href="top-bar.html">Top Bar</a></li>
- <li><a href="responsive-navigation.html">Responsive Navigation</a></li>
- <li><a href="magellan.html">Magellan <span class="label">JS</span></a></li>
- <li><a href="pagination.html">Pagination</a></li>
- <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
-
- <li class="docs-nav-title">Containers</li>
- <li><a href="accordion.html">Accordion <span class="label">JS</span></a></li>
- <li><a href="callout.html">Callout</a></li>
- <li class="current"><a href="dropdown.html">Dropdown <span class="label">JS</span></a></li>
- <li><a href="media-object.html">Media Object</a></li>
- <li><a href="off-canvas.html">Off-canvas <span class="label">JS</span></a></li>
- <li><a href="reveal.html">Reveal <span class="label">JS</span> <small>Modal</small></a></li>
- <li><a href="table.html">Table</a></li>
- <li><a href="tabs.html">Tabs <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Media</li>
- <li><a href="badge.html">Badge</a></li>
- <li><a href="flex-video.html">Flex Video</a></li>
- <li><a href="label.html">Label</a></li>
- <li><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
- <li><a href="progress-bar.html">Progress Bar</a></li>
- <li><a href="thumbnail.html">Thumbnail</a></li>
- <li><a href="tooltip.html">Tooltip <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Plugins</li>
- <li><a href="abide.html">Abide <small>Form Validation</small></a></li>
- <li><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
- <li><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
- <li><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
- <li><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
-
- <li class="docs-nav-title">Sass</li>
- <li><a href="sass-functions.html">Functions</a></li>
- <li><a href="sass-mixins.html">Mixins</a></li>
-
- <li class="docs-nav-title">Libraries</li>
- <li><a href="motion-ui.html">Motion UI</a></li>
- <li><a href="panini.html">Panini</a></li>
- <li><a href="style-sherpa.html">Style Sherpa</a></li>
-
- <li class="docs-nav-title">Older Versions</li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
- <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
- <li><a href="https://get.foundation/sites/docs/v/3.2.5/">Foundation 3</a></li>
- <li><a href="https://get.foundation/sites/docs/v/2.2.1/">Foundation 2</a></li>
- </ul>
-
- </div>
- </div>
-
- <!-- Small Business(Docs) -->
- <section id="studiosCallout">
- <div class="row">
- <div class="medium-4 large-4 columns">
- <img src="https://get.foundation/assets/img/smallbiz-footer.svg" alt="">
- </div>
- <div class="medium-8 large-8 columns banner-info">
- <div class="row column property-label">ZURB Foundation</div>
- <h3 class="light">Yeah, we can help with that.</h3>
- <p class="lead"> We’ll collaborate with your team throughout the entire project life cycle. We’ll take your concept and move it through ideation, hi-fi wireframes, visual design and code, all while informing you on the whys and hows along the way.</p>
- <div class="course-buttons">
- <a href="https://get.foundation/get-involved/premium-support.html" class="studios button" data-zcom-event="studios_foundation_click" id="foundationSmallV1">Show Me How →</a>
- </div>
- </div>
- </div>
- </section>
-
- <div class="docs-newsletter">
- <div class="row">
- <div class="medium-7 large-8 columns">
- <a target="_blank" href="https://get.foundation/learn/responsive-reading.html">
- <h5 class="">Download ZURB’s 21 Responsive Trends That Will Shape 2017</h5>
- <p style="margin-bottom: 0;">Stay informed with amazing responsive trends each month from ZURB.</p>
- </a>
- </div>
- <div class="medium-5 large-4 footer-signup-form columns">
- <a style="margin-bottom: 0;" target="_blank" href="https://get.foundation/learn/responsive-reading.html" class="button expanded">Download the PDF</a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-top bg-fblue">
- <div class="row property">
- <div class="medium-4 columns">
- <div class="property-info">
- <h3>Foundation for Sites</h3>
- <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
- </p>
- </div>
- </div>
-
- <div class="medium-8 columns">
- <div class="row collapse">
- <div class="medium-4 columns">
- <div class="learn-links">
- <h4 class="hide-for-small">Want more?</h4>
- <ul>
- <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
- <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
- <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
- <li><a href="http://zurb.com/university/courses">Training</a></li>
- <li><a href="http://zurb.com/library">Design Resources</a></li>
- </ul>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="support-links">
- <h4 class="hide-for-small">Talk to us</h4>
- <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
- <p><a href="https://get.foundation/get-involved/contribute.html">Get involved in<br>our amazing community.</a></p>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="connect-links">
- <h4 class="hide-for-small">Stay Updated</h4>
- <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
- <a href="http://zurb.com/news" class="small button">Stay Connected</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="row global">
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/studios" class="footer-link-block services">
- <span class="title">Studios</span>
- <span>Helping more than 200 startups succeed since 1998.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="https://get.foundation/" class="footer-link-block foundation">
- <span class="title">Foundation</span>
- <span>The most advanced front-end framework in the world.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/notable" class="footer-link-block apps">
- <span class="title">Notable Design Apps</span>
- <span>Prototype, iterate and collect feedback on your products.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/university" class="footer-link-block expo">
- <span class="title">University</span>
- <span>Ideas, thoughts and design resources shared with you.</span>
- </a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-bottom">
- <div class="row">
- <div class="medium-4 medium-push-8 columns">
- <ul class="home-social">
- <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
- <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
- <li><a href="http://zurb.com/contact" class="mail"></a></li>
- </ul>
- </div>
- <div class="medium-8 medium-pull-4 columns">
- <a href="http://www.zurb.com" class="zurb-logo regular"></a>
- <ul class="zurb-links">
- <li><a href="http://zurb.com/about">About</a></li>
- <li><a href="http://zurb.com/blog">Blog</a></li>
- <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
- <li><a href="http://zurb.com/contact">Contact</a></li>
- <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
- </ul>
- <p class="copyright">© 1998‐2016 ZURB, Inc. All rights reserved.</p>
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- <script>
- var _gaq = _gaq || [];
- _gaq.push(
- ['_setAccount', 'UA-2195009-2'],
- ['_trackPageview'],
- ['b._setAccount', 'UA-2195009-27'],
- ['b._trackPageview']
- );
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
-
- <script src="assets/js/vendor.js?hash=0af45869be115d2f5a1e65c919500e3d"></script>
- <script src="assets/js/foundation.js?hash=9ff0ddb62deec3d81659c0e811e1d049"></script>
- <script src="assets/js/docs.js?hash=561bc3767307e041dea13096e86bafda"></script>
- <script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
-</body>
-</html>
+++ /dev/null
-<!doctype html>
-<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
-<html class="no-js" lang="en" dir="ltr">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="Equalizer makes it dead simple to give multiple items equal height.">
- <link rel="icon" href="assets/img/icons/foundation-favicon.ico" type="image/x-icon">
- <title>Foundation for Sites 6 Docs | Equalizer</title>
- <link href="assets/css/docs.css?hash=7ad7e52c10993f21ce8e3ce7ddf5f3e6" rel="stylesheet" />
- <link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=f557c4f68f4b59ce21853bd8a3f907ee" rel="stylesheet">
- <!-- <link rel="stylesheet" href="./node_modules/motion-ui/dist/motion-ui.css" /> -->
-</head>
-<body>
-
- <div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
-
- <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="mobile-ofc vertical menu">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
-
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/support.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/sort/unanswered">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
- </div>
-
- <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="vertical menu">
- <li><a href="#">Foundation</a></li>
- <li><a href="#">Dot</a></li>
- <li><a href="#">ZURB</a></li>
- <li><a href="#">Com</a></li>
- <li><a href="#">Slash</a></li>
- <li><a href="#">Sites</a></li>
- </ul>
- </div>
-
-
- <div class="off-canvas-content" data-off-canvas-content>
- <!-- Info Banner For Announcements or Links -->
- <!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
- <div class="info">
- <h5>Foundation 6 is here!</h5>
- </div>
- </a> -->
-
- <nav class="marketing-topbar show-for-medium">
-
- <ul class="menu">
- <li class="topbar-title"><a href="https://get.foundation/index.html"><img src="assets/img/logos/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
- </ul>
-
- <ul class="dropdown menu" data-dropdown-menu data-click-open="false">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/" target="_blank">F5 Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="https://get.foundation/emails/docs/" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
-
- </nav>
-
- <div class="title-bar hide-for-medium">
- <div class="title-bar-left">
- <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
- <span class="title-bar-title">Foundation</span>
- </div>
- </div>
-
-
- <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
-
- <div class="expanded row">
- <div class="medium-9 large-10 medium-push-3 large-push-2 columns">
-
-<article class="docs-component" id="docs-equalizer">
-
-<a href="#docs-menu" class="small secondary expanded button hide-for-medium">Jump to Nav</a>
-
-<header>
- <h1 class="docs-page-title">Equalizer</h1>
-
- <span data-tooltip title="Requires a JavaScript library." class="docs-js label">JavaScript</span>
-
- <p class="lead docs-page-lead">Equalizer makes it dead simple to give multiple items equal height.</p>
-
- <ul class="menu simple docs-contribute-menu">
- <li><a href="https://github.com/zurb/foundation-sites/edit/master/docs/pages/equalizer.md" target="_blank"><i class="fi-pencil"></i>Edit this Page</a></li>
- <li><a href="https://github.com/zurb/foundation-sites/issues/new?title=%5BEqualizer%5D%20ISSUE%20NAME%20HERE" target="_blank"><i class="fi-social-github"></i>Report a Bug</a></li>
- <li><a href="https://get.foundation/forum" target="_blank"><i class="fi-comment"></i>Get Help</a></li>
- </ul>
-</header>
-
-<hr>
-
-<div class="row">
-
-<div class="large-9 columns" id="docs">
-
-<h2 id="basics" class="docs-heading" data-magellan-target="basics">Basics<a class="docs-heading-icon" href="#basics"></a></h2><p>To set up an Equalizer group, you need a container, which gets the attribute <code>data-equalizer</code>, and then a series of child elements, which get the attribute <code>data-equalizer-watch</code>. The child elements will all be resized to have the same height.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span> <span class="hljs-attr">data-equalizer</span> <span class="hljs-attr">data-equalize-on</span>=<span class="hljs-string">"medium"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"test-eq"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"medium-4 columns"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"callout"</span> <span class="hljs-attr">data-equalizer-watch</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>= <span class="hljs-string">"assets/img/generic/square-1.jpg"</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"medium-4 columns"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"callout"</span> <span class="hljs-attr">data-equalizer-watch</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Pellentesque habitant morbi tristique senectus et netus et, ante.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"medium-4 columns"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"callout"</span> <span class="hljs-attr">data-equalizer-watch</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>= <span class="hljs-string">"assets/img/generic/rectangle-1.jpg"</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="row" data-equalizer data-equalize-on="medium" id="test-eq">
- <div class="medium-4 columns">
- <div class="callout" data-equalizer-watch>
- <img src= "assets/img/generic/square-1.jpg">
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="callout" data-equalizer-watch>
- <p>Pellentesque habitant morbi tristique senectus et netus et, ante.</p>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="callout" data-equalizer-watch>
- <img src= "assets/img/generic/rectangle-1.jpg">
- </div>
- </div>
-</div></div><hr>
-<h2 id="nesting" class="docs-heading" data-magellan-target="nesting">Nesting<a class="docs-heading-icon" href="#nesting"></a></h2><p>To use one Equalizer inside another, each container needs a unique ID, assigned with the <code>data-equalizer</code> attribute. Each <code>data-equalizer-watch</code> element should then have a value that matches its parent.</p>
-<p>In the below example, the first set of Equalizer elements have the value <code>foo</code>, while the inside elements have the value <code>bar</code>. In the live example, we've also set the <code>equalizeOn</code> option to 'medium' for the parent elements, and the child Equalizer contained in the first div equalizes on stack, and maintains equal height.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span> <span class="hljs-attr">data-equalizer</span>=<span class="hljs-string">"foo"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"medium-4 columns"</span> <span class="hljs-attr">data-equalizer-watch</span>=<span class="hljs-string">"foo"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"callout"</span> <span class="hljs-attr">data-equalizer</span>=<span class="hljs-string">"bar"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">h3</span>></span>Parent panel<span class="hljs-tag"></<span class="hljs-name">h3</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"callout"</span> <span class="hljs-attr">data-equalizer-watch</span>=<span class="hljs-string">"bar"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"callout"</span> <span class="hljs-attr">data-equalizer-watch</span>=<span class="hljs-string">"bar"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"callout"</span> <span class="hljs-attr">data-equalizer-watch</span>=<span class="hljs-string">"bar"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"medium-4 columns"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"callout panel"</span> <span class="hljs-attr">data-equalizer-watch</span>=<span class="hljs-string">"foo"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"medium-4 columns"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"callout"</span> <span class="hljs-attr">data-equalizer-watch</span>=<span class="hljs-string">"foo"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div><div class="row" data-equalize-on="medium" data-equalizer="foo">
- <div class="medium-4 columns" >
- <div class="callout" data-equalizer-watch="foo" data-equalizer="bar">
- <h3>Parent panel</h3>
- <div class="callout" data-equalizer-watch="bar">
- <p>The three callouts in this panel will equalize, even when stacked.</p>
- </div>
- <div class="callout" data-equalizer-watch="bar">
- <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
- </div>
- <div class="callout" data-equalizer-watch="bar">
- <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
- </div>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="callout panel" data-equalizer-watch="foo">
- <p>Where these panels will not equalize on stack, and instead equalize on medium up.</p>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="callout" data-equalizer-watch="foo">
- <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
- </div>
- </div>
-</div>
-
-<hr>
-<h2 id="equalize-by-row" class="docs-heading" data-magellan-target="equalize-by-row">Equalize By Row<a class="docs-heading-icon" href="#equalize-by-row"></a></h2><p>If you have a gallery of items that wrap multiple times, Equalizer can be configured to match each row's items in height. Works great with the block grid!</p>
-<div class="callout primary">
- <p><strong>Under the Hood:</strong></p>
- <p>Equalizer splits the <code>data-equalizer-watch</code> elements into groups by checking their vertical offsets, and grouping ones with the same offset into a "row".</p>
- <p>Be aware on what you set <code>data-equalizer-watch</code>, if the top position is different, Equalizer will interpret that as a new "row" and equalize accordingly.</p>
-</div>
-
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row small-up-1 medium-up-2 large-up-4"</span> <span class="hljs-attr">data-equalizer</span> <span class="hljs-attr">data-equalize-by-row</span>=<span class="hljs-string">"true"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-comment"><!-- ... --></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div><div class="row small-up-1 medium-up-2 large-up-4" data-equalizer data-equalize-by-row="true">
- <div class="column">
- <div class="callout" data-equalizer-watch>
- <img src="//placehold.it/180x200" class="thumbnail" alt="">
- <p>Lorem ipsum dolor sit amet<p>
- </div>
- </div>
- <div class="column">
- <div class="callout" data-equalizer-watch>
- <p>Lorem ipsum dolor sit amet<p>
- </div>
- </div>
- <div class="column">
- <div class="callout" data-equalizer-watch>
- <p>Lorem ipsum dolor sit amet<p>
- </div>
- </div>
- <div class="column">
- <div class="callout" data-equalizer-watch>
- <img src="//placehold.it/180x180" class="thumbnail" alt="">
- </div>
- </div>
- <div class="column">
- <div class="callout" data-equalizer-watch>
- <p>Lorem ipsum dolor sit amet<p>
- </div>
- </div>
- <div class="column">
- <div class="callout" data-equalizer-watch>
- <p>Lorem ipsum dolor sit amet<p>
- </div>
- </div>
- <div class="column">
- <div class="callout" data-equalizer-watch>
- <img src="//placehold.it/180x400" class="thumbnail" alt="">
- </div>
- </div>
- <div class="column">
- <div class="callout" data-equalizer-watch>
- <img src="//placehold.it/180x200" class="thumbnail" alt="">
- <p>Lorem ipsum dolor sit amet<p>
- </div>
- </div>
- <div class="column">
- <div class="callout" data-equalizer-watch>
- <p>Lorem ipsum dolor sit amet<p>
- </div>
- </div>
- <div class="column">
- <div class="callout" data-equalizer-watch>
- <p>Lorem ipsum dolor sit amet<p>
- </div>
- </div>
- <div class="column">
- <div class="callout" data-equalizer-watch>
- <img src="//placehold.it/180x180" class="thumbnail" alt="">
- </div>
- </div>
- <div class="column">
- <div class="callout" data-equalizer-watch>
- <p>Lorem ipsum dolor sit amet<p>
- </div>
- </div>
- <div class="column">
- <div class="callout" data-equalizer-watch>
- <p>Lorem ipsum dolor sit amet<p>
- </div>
- </div>
- <div class="column">
- <div class="callout" data-equalizer-watch>
- <p>Lorem ipsum dolor sit amet<p>
- </div>
- </div>
- <div class="column">
- <div class="callout" data-equalizer-watch>
- <p>Lorem ipsum dolor sit amet<p>
- </div>
- </div>
- <div class="column">
- <div class="callout" data-equalizer-watch>
- <p>Lorem ipsum dolor sit amet<p>
- </div>
- </div>
- <div class="column">
- <div class="callout" data-equalizer-watch>
- <p>Lorem ipsum dolor sit amet<p>
- </div>
- </div>
- <div class="column">
- <div class="callout" data-equalizer-watch>
- <img src="//placehold.it/180x400" class="thumbnail" alt="">
- </div>
- </div>
-</div>
-
-
-
-<hr>
-<section>
- <h2 id="javascript-reference" class="docs-heading" data-magellan-target="javascript-reference">JavaScript Reference<a class="docs-heading-icon" href="#javascript-reference"></a></h2>
-
-
- <section>
- <h3 id="js-module" class="docs-heading">Initializing<a class="docs-heading-icon" href="#js-module"></a></h3>
-
- <p>The file <code>foundation.equalizer.js</code> must be included in your JavaScript to use this plugin, along with <code>foundation.core.js</code>.</p>
-
-
-
- </section>
-
-
- <section>
- <h3 id="js-class" class="docs-heading">Foundation.Equalizer<a class="docs-heading-icon" href="#js-class"></a></h3>
-
- <p>Creates a new instance of Equalizer.</p>
-
-
- <div class="docs-code"><pre><code><span class="hljs-keyword">var</span> elem = <span class="hljs-keyword">new</span> Foundation.Equalizer(element, options);</code></pre></div>
-
- <p><strong>Fires these events:</strong>
- Equalizer#event:init
- </p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>element</code></td>
- <td>Object</td>
- <td>jQuery object to add the trigger to.</td>
- </tr>
- <tr>
- <td><code>options</code></td>
- <td>Object</td>
- <td>Overrides to the default plugin settings.</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="js-options" class="docs-heading">Plugin Options<a class="docs-heading-icon" href="#js-options"></a></h3>
-
- <p>Use these options to customize an instance of Equalizer. Plugin options can be set as individual data attributes, one combined <code>data-options</code> attribute, or as an object passed to the plugin's constructor. <a href="javascript.html#initializing">Learn more about how JavaScript plugins are initialized.</a></p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Default</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>data-equalize-on-stack</code></td>
- <td><code>true</code></td>
- <td>Enable height equalization when stacked on smaller screens.</td>
- </tr>
- <tr>
- <td><code>data-equalize-by-row</code></td>
- <td><code>false</code></td>
- <td>Enable height equalization row by row.</td>
- </tr>
- <tr>
- <td><code>data-equalize-on</code></td>
- <td><code>medium</code></td>
- <td>String representing the minimum breakpoint size the plugin should equalize heights on.</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="js-events" class="docs-heading">Events<a class="docs-heading-icon" href="#js-events"></a></h3>
-
- <p>These events will fire from any element with a Equalizer plugin attached.</p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>preequalized.zf.equalizer</code></td>
- <td>Fires before the heights are applied</td>
- </tr>
- <tr>
- <td><code>postequalized.zf.equalizer</code></td>
- <td>Fires when the heights have been applied</td>
- </tr>
- <tr>
- <td><code>preequalizedRow.zf.equalizer</code></td>
- <td>Fires before the heights per row are applied</td>
- </tr>
- <tr>
- <td><code>postequalizedRow.zf.equalizer</code></td>
- <td>Fires when the heights per row have been applied</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="js-functions" class="docs-heading">Methods<a class="docs-heading-icon" href="#js-functions"></a></h3>
-
- <section>
- <h4 id="getheights" class="docs-heading">getHeights<a class="docs-heading-icon" href="#getheights"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'getHeights'</span>, cb);</code></pre>
- </div>
-
- <p>Finds the outer heights of children contained within an Equalizer parent and returns them in an array</p>
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>cb</code></td>
- <td>function</td>
- <td>A non-optional callback to return the heights array to.</td>
- </tr>
- </table>
-
- <hr>
- </section>
- <section>
- <h4 id="getheightsbyrow" class="docs-heading">getHeightsByRow<a class="docs-heading-icon" href="#getheightsbyrow"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'getHeightsByRow'</span>, cb);</code></pre>
- </div>
-
- <p>Finds the outer heights of children contained within an Equalizer parent and returns them in an array</p>
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>cb</code></td>
- <td>function</td>
- <td>A non-optional callback to return the heights array to.</td>
- </tr>
- </table>
-
- <hr>
- </section>
- <section>
- <h4 id="applyheight" class="docs-heading">applyHeight<a class="docs-heading-icon" href="#applyheight"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'applyHeight'</span>, heights);</code></pre>
- </div>
-
- <p>Changes the CSS height property of each child in an Equalizer parent to match the tallest</p>
-
-
- <p><strong>Fires these events:</strong>
- Equalizer#event:preequalized
- Equalizer#event:postequalized
- </p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>heights</code></td>
- <td>array</td>
- <td>An array of heights of children within Equalizer container</td>
- </tr>
- </table>
-
- <hr>
- </section>
- <section>
- <h4 id="applyheightbyrow" class="docs-heading">applyHeightByRow<a class="docs-heading-icon" href="#applyheightbyrow"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'applyHeightByRow'</span>, groups);</code></pre>
- </div>
-
- <p>Changes the CSS height property of each child in an Equalizer parent to match the tallest by row</p>
-
-
- <p><strong>Fires these events:</strong>
- Equalizer#event:preequalized
- Equalizer#event:preequalizedRow
- Equalizer#event:postequalizedRow
- Equalizer#event:postequalized
- </p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>groups</code></td>
- <td>array</td>
- <td>An array of heights of children within Equalizer container grouped by row with element,height and max as last child</td>
- </tr>
- </table>
-
- <hr>
- </section>
- <section>
- <h4 id="destroy" class="docs-heading">destroy<a class="docs-heading-icon" href="#destroy"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'destroy'</span>);</code></pre>
- </div>
-
- <p>Destroys an instance of Equalizer.</p>
-
-
-
-
-
- </section>
- </section>
-</section>
-
-
-</div>
-
-<div class="large-3 columns" data-sticky-container>
- <nav class="columns docs-toc-wrap" data-sticky data-anchor="docs" data-sticky-on="large">
- <div class="docs-toc hide" id="docsTOC">
- <ul class="vertical menu" data-docs-toc>
- <li class="docs-nav-title">On this page:</li>
- </ul>
- </div>
- <div class="foundation-toc-ad-unit" id="TOCAdUnit">
- </div>
- </nav>
-</div>
-
-</div>
-
-</article>
-
- </div>
- <div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
- <ul class="vertical menu docs-nav" id="docs-menu">
- <p class="docs-nav-version">
- <span data-docs-version></span>
- <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">(Changelog)</a>
- </p>
-
- <li class="docs-nav-title">Getting Started</li>
- <li><a href="installation.html">Installation</a></li>
- <li><a href="starter-projects.html">Starter Projects</a></li>
- <li><a href="compatibility.html">Compatibility</a></li>
- <li><a href="accessibility.html">Accessibility</a></li>
- <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
-
- <li class="docs-nav-title">Setup</li>
- <li><a href="global.html">Global Styles</a></li>
- <li><a href="rtl.html">Right-to-Left Support</a></li>
- <li><a href="flexbox.html">Flexbox</a></li>
- <li><a href="sass.html">Sass</a></li>
- <li><a href="javascript.html">JavaScript</a></li>
- <li><a href="javascript-utilities.html">JavaScript Utilities</a></li>
- <li><a href="media-queries.html">Media Queries</a></li>
-
- <li class="docs-nav-title">General</li>
- <li><a href="grid.html">Grid</a></li>
- <li><a href="flex-grid.html">Flex Grid</a></li>
- <li><a href="forms.html">Forms</a></li>
- <li><a href="visibility.html">Visibility Classes</a></li>
- <li><a href="float-classes.html">Float Classes</a></li>
-
- <li class="docs-nav-title">Typography</li>
- <li><a href="typography-base.html">Base Styles</a></li>
- <li><a href="typography-helpers.html">Helper Classes</a></li>
-
- <li class="docs-nav-title">Controls</li>
- <li><a href="button.html">Button</a></li>
- <li><a href="button-group.html">Button Group</a></li>
- <li><a href="close-button.html">Close Button</a></li>
- <li><a href="slider.html">Slider <span class="label">JS</span></a></li>
- <li><a href="switch.html">Switch</a></li>
-
- <li class="docs-nav-title">Navigation</li>
- <li><a href="navigation.html">Overview</a></li>
- <li><a href="menu.html">Menu</a></li>
- <li><a href="dropdown-menu.html">Dropdown Menu <span class="label">JS</span></a></li>
- <li><a href="drilldown-menu.html">Drilldown Menu <span class="label">JS</span></a></li>
- <li><a href="accordion-menu.html">Accordion Menu <span class="label">JS</span></a></li>
- <li><a href="top-bar.html">Top Bar</a></li>
- <li><a href="responsive-navigation.html">Responsive Navigation</a></li>
- <li><a href="magellan.html">Magellan <span class="label">JS</span></a></li>
- <li><a href="pagination.html">Pagination</a></li>
- <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
-
- <li class="docs-nav-title">Containers</li>
- <li><a href="accordion.html">Accordion <span class="label">JS</span></a></li>
- <li><a href="callout.html">Callout</a></li>
- <li><a href="dropdown.html">Dropdown <span class="label">JS</span></a></li>
- <li><a href="media-object.html">Media Object</a></li>
- <li><a href="off-canvas.html">Off-canvas <span class="label">JS</span></a></li>
- <li><a href="reveal.html">Reveal <span class="label">JS</span> <small>Modal</small></a></li>
- <li><a href="table.html">Table</a></li>
- <li><a href="tabs.html">Tabs <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Media</li>
- <li><a href="badge.html">Badge</a></li>
- <li><a href="flex-video.html">Flex Video</a></li>
- <li><a href="label.html">Label</a></li>
- <li><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
- <li><a href="progress-bar.html">Progress Bar</a></li>
- <li><a href="thumbnail.html">Thumbnail</a></li>
- <li><a href="tooltip.html">Tooltip <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Plugins</li>
- <li><a href="abide.html">Abide <small>Form Validation</small></a></li>
- <li class="current"><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
- <li><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
- <li><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
- <li><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
-
- <li class="docs-nav-title">Sass</li>
- <li><a href="sass-functions.html">Functions</a></li>
- <li><a href="sass-mixins.html">Mixins</a></li>
-
- <li class="docs-nav-title">Libraries</li>
- <li><a href="motion-ui.html">Motion UI</a></li>
- <li><a href="panini.html">Panini</a></li>
- <li><a href="style-sherpa.html">Style Sherpa</a></li>
-
- <li class="docs-nav-title">Older Versions</li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
- <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
- <li><a href="https://get.foundation/sites/docs/v/3.2.5/">Foundation 3</a></li>
- <li><a href="https://get.foundation/sites/docs/v/2.2.1/">Foundation 2</a></li>
- </ul>
-
- </div>
- </div>
-
- <!-- Small Business(Docs) -->
- <section id="studiosCallout">
- <div class="row">
- <div class="medium-4 large-4 columns">
- <img src="https://get.foundation/assets/img/smallbiz-footer.svg" alt="">
- </div>
- <div class="medium-8 large-8 columns banner-info">
- <div class="row column property-label">ZURB Foundation</div>
- <h3 class="light">Yeah, we can help with that.</h3>
- <p class="lead"> We’ll collaborate with your team throughout the entire project life cycle. We’ll take your concept and move it through ideation, hi-fi wireframes, visual design and code, all while informing you on the whys and hows along the way.</p>
- <div class="course-buttons">
- <a href="https://get.foundation/get-involved/premium-support.html" class="studios button" data-zcom-event="studios_foundation_click" id="foundationSmallV1">Show Me How →</a>
- </div>
- </div>
- </div>
- </section>
-
- <div class="docs-newsletter">
- <div class="row">
- <div class="medium-7 large-8 columns">
- <a target="_blank" href="https://get.foundation/learn/responsive-reading.html">
- <h5 class="">Download ZURB’s 21 Responsive Trends That Will Shape 2017</h5>
- <p style="margin-bottom: 0;">Stay informed with amazing responsive trends each month from ZURB.</p>
- </a>
- </div>
- <div class="medium-5 large-4 footer-signup-form columns">
- <a style="margin-bottom: 0;" target="_blank" href="https://get.foundation/learn/responsive-reading.html" class="button expanded">Download the PDF</a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-top bg-fblue">
- <div class="row property">
- <div class="medium-4 columns">
- <div class="property-info">
- <h3>Foundation for Sites</h3>
- <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
- </p>
- </div>
- </div>
-
- <div class="medium-8 columns">
- <div class="row collapse">
- <div class="medium-4 columns">
- <div class="learn-links">
- <h4 class="hide-for-small">Want more?</h4>
- <ul>
- <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
- <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
- <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
- <li><a href="http://zurb.com/university/courses">Training</a></li>
- <li><a href="http://zurb.com/library">Design Resources</a></li>
- </ul>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="support-links">
- <h4 class="hide-for-small">Talk to us</h4>
- <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
- <p><a href="https://get.foundation/get-involved/contribute.html">Get involved in<br>our amazing community.</a></p>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="connect-links">
- <h4 class="hide-for-small">Stay Updated</h4>
- <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
- <a href="http://zurb.com/news" class="small button">Stay Connected</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="row global">
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/studios" class="footer-link-block services">
- <span class="title">Studios</span>
- <span>Helping more than 200 startups succeed since 1998.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="https://get.foundation/" class="footer-link-block foundation">
- <span class="title">Foundation</span>
- <span>The most advanced front-end framework in the world.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/notable" class="footer-link-block apps">
- <span class="title">Notable Design Apps</span>
- <span>Prototype, iterate and collect feedback on your products.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/university" class="footer-link-block expo">
- <span class="title">University</span>
- <span>Ideas, thoughts and design resources shared with you.</span>
- </a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-bottom">
- <div class="row">
- <div class="medium-4 medium-push-8 columns">
- <ul class="home-social">
- <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
- <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
- <li><a href="http://zurb.com/contact" class="mail"></a></li>
- </ul>
- </div>
- <div class="medium-8 medium-pull-4 columns">
- <a href="http://www.zurb.com" class="zurb-logo regular"></a>
- <ul class="zurb-links">
- <li><a href="http://zurb.com/about">About</a></li>
- <li><a href="http://zurb.com/blog">Blog</a></li>
- <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
- <li><a href="http://zurb.com/contact">Contact</a></li>
- <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
- </ul>
- <p class="copyright">© 1998‐2016 ZURB, Inc. All rights reserved.</p>
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- <script>
- var _gaq = _gaq || [];
- _gaq.push(
- ['_setAccount', 'UA-2195009-2'],
- ['_trackPageview'],
- ['b._setAccount', 'UA-2195009-27'],
- ['b._trackPageview']
- );
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
-
- <script src="assets/js/vendor.js?hash=100ab9c0e8fce7b2b15e51b22455e42c"></script>
- <script src="assets/js/foundation.js?hash=e96526722565b428859fc2676956eed5"></script>
- <script src="assets/js/docs.js?hash=c7686f0506b6d1e079e6ba0a26daf3c0"></script>
- <script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
-</body>
-</html>
+++ /dev/null
-<!doctype html>
-<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
-<html class="no-js" lang="en" dir="ltr">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="New in Foundation 6 is a Flexbox-powered grid, which you can use instead of the traditional float grid.">
- <link rel="icon" href="assets/img/icons/foundation-favicon.ico" type="image/x-icon">
- <title>Foundation for Sites 6 Docs | Flex Grid</title>
- <link href="assets/css/docs.css?hash=8f4c6b961ca2d4591da4103ea458dae1" rel="stylesheet" />
- <link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=10ccffec260de7aeb8d36119eef96a3a" rel="stylesheet">
- <!-- <link rel="stylesheet" href="./node_modules/motion-ui/dist/motion-ui.css" /> -->
-</head>
-<body>
-
- <div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
-
- <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="mobile-ofc vertical menu">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
-
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/support.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/sort/unanswered">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
- </div>
-
- <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="vertical menu">
- <li><a href="#">Foundation</a></li>
- <li><a href="#">Dot</a></li>
- <li><a href="#">ZURB</a></li>
- <li><a href="#">Com</a></li>
- <li><a href="#">Slash</a></li>
- <li><a href="#">Sites</a></li>
- </ul>
- </div>
-
-
- <div class="off-canvas-content" data-off-canvas-content>
- <!-- Info Banner For Announcements or Links -->
- <!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
- <div class="info">
- <h5>Foundation 6 is here!</h5>
- </div>
- </a> -->
-
- <nav class="marketing-topbar show-for-medium">
-
- <ul class="menu">
- <li class="topbar-title"><a href="https://get.foundation/index.html"><img src="assets/img/logos/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
- </ul>
-
- <ul class="dropdown menu" data-dropdown-menu data-click-open="false">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/" target="_blank">F5 Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="https://get.foundation/emails/docs/" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
-
- </nav>
-
- <div class="title-bar hide-for-medium">
- <div class="title-bar-left">
- <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
- <span class="title-bar-title">Foundation</span>
- </div>
- </div>
-
-
- <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
-
- <div class="expanded row">
- <div class="medium-9 large-10 medium-push-3 large-push-2 columns">
-
-<article class="docs-component" id="docs-flex-grid">
-
-<a href="#docs-menu" class="small secondary expanded button hide-for-medium">Jump to Nav</a>
-
-<header>
- <h1 class="docs-page-title">Flex Grid</h1>
-
-
- <p class="lead docs-page-lead">New in Foundation 6 is a Flexbox-powered grid, which you can use instead of the traditional float grid.</p>
-
- <ul class="menu simple docs-contribute-menu">
- <li><a href="https://github.com/zurb/foundation-sites/edit/master/docs/pages/flex-grid.md" target="_blank"><i class="fi-pencil"></i>Edit this Page</a></li>
- <li><a href="https://github.com/zurb/foundation-sites/issues/new?title=%5BFlex%20Grid%5D%20ISSUE%20NAME%20HERE" target="_blank"><i class="fi-social-github"></i>Report a Bug</a></li>
- <li><a href="https://get.foundation/forum" target="_blank"><i class="fi-comment"></i>Get Help</a></li>
- </ul>
-</header>
-
-<hr>
-
-<div class="row">
-
-<div class="large-9 columns" id="docs">
-
-<p>The flex grid works very similarly to the standard float grid, but includes a number of useful features only possible with flexbox, like horizontal and vertical alignment, automatic sizing, and easier source ordering.</p>
-<hr>
-<h2 id="browser-support" class="docs-heading" data-magellan-target="browser-support">Browser support<a class="docs-heading-icon" href="#browser-support"></a></h2><p>The flex grid is only supported in Chrome, Firefox, Safari 6+, IE10+, iOS 7+, and Android 4.4+. Flexbox is supported in Android 2, but not reliably enough for use with this grid. (<a href="http://caniuse.com/#feat=flexbox">View flexbox browser support.</a>) We recommend only using the flex grid on projects that can live with purely cutting-edge browser support.</p>
-<div class="warning callout">
- <p>In Firefox 43+, images in flex columns may overflow their container. To fix this, add a defined <code>width</code> to any images inside a flex column, or use <code>width: 100%</code> for full-bleed images.</p>
-</div>
-
-<hr>
-<h2 id="importing" class="docs-heading" data-magellan-target="importing">Importing<a class="docs-heading-icon" href="#importing"></a></h2><p>If you're using the CSS version of Foundation, you can generate a <a href="https://get.foundation/sites/download">custom download of Foundation</a> with flexbox mode enabled.</p>
-<p>If you're using the Sass version of Foundation, you can enable a framework-wide flexbox mode, and add exports for the flex grid and flexbox helper classes. <a href="flexbox.html#enabling-flexbox-mode">Learn more about enabling flexbox mode.</a></p>
-<div class="docs-code" data-docs-code><pre><code class="scss">@<span class="hljs-keyword">import</span> <span class="hljs-string">'foundation'</span>;
-
-<span class="hljs-comment">// @include foundation-grid;</span>
-@<span class="hljs-keyword">include</span> foundation-flex-classes;
-@<span class="hljs-keyword">include</span> foundation-flex-grid;</code></pre></div><div class="primary callout">
- <p>The flex grid uses the same settings variables as the float grid to adjust gutter size, column count, and so on. Refer to the <a href="grid.html#sass-variables">Sass variable reference</a> for the default grid to see how the flex grid can be customized.</p>
-</div>
-
-<div class="warning callout">
- <p>The standard grid and flex grid use some of the same classes, namely <code>.row</code> and <code>.column</code>, and don't play nice together. If you want to use both in the same project, we recommend using the Sass mixins for each grid, instead of the default CSS.</p>
-</div>
-
-<hr>
-<h2 id="basics" class="docs-heading" data-magellan-target="basics">Basics<a class="docs-heading-icon" href="#basics"></a></h2><p>The structure of the flex grid is identical to that of the float grid. Rows use the class <code>.row</code>, and columns use the class <code>.column</code> (or <code>.columns</code>). Basic percentage-based sizing can also be done using the same grid classes you're used to: <code>.small-6</code>, <code>.medium-12</code>, and so on.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-6 columns"</span>></span>6 columns<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-6 columns"</span>></span>6 columns<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"medium-6 large-4 columns"</span>></span>12/6/4 columns<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"medium-6 large-8 columns"</span>></span>12/6/8 columns<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="row">
- <div class="small-6 columns">6 columns</div>
- <div class="small-6 columns">6 columns</div>
-</div>
-<div class="row">
- <div class="medium-6 large-4 columns">12/6/4 columns</div>
- <div class="medium-6 large-8 columns">12/6/8 columns</div>
-</div></div><hr>
-<h2 id="advanced-sizing" class="docs-heading" data-magellan-target="advanced-sizing">Advanced Sizing<a class="docs-heading-icon" href="#advanced-sizing"></a></h2><p>If no sizing class is added to the column, it will simply expand to fill the leftover space. We call this an <em>expand behavior</em>.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-4 columns"</span>></span>4 columns<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>></span>Whatever's left!<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="row">
- <div class="small-4 columns">4 columns</div>
- <div class="columns">Whatever's left!</div>
-</div></div><hr>
-<p>Multiple expanding columns will share the leftover space equally.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-4 columns"</span>></span>4 columns<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>></span>Whatever's left!<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>></span>Whatever's left!<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="row">
- <div class="small-4 columns">4 columns</div>
- <div class="columns">Whatever's left!</div>
- <div class="columns">Whatever's left!</div>
-</div></div><hr>
-<p>A column can also be made to <em>shrink</em>, by adding the <code>.shrink</code> class. This means it will only take up the horizontal space its contents need.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"shrink columns"</span>></span>Shrink!<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>></span>Expand!<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="row">
- <div class="shrink columns">Shrink!</div>
- <div class="columns">Expand!</div>
-</div></div><hr>
-<h2 id="responsive-adjustments" class="docs-heading" data-magellan-target="responsive-adjustments">Responsive Adjustments<a class="docs-heading-icon" href="#responsive-adjustments"></a></h2><p>Columns in a flex grid will not wrap if not given an explicit size—this is what allows the magical auto-sizing to work. To make columns stack on smaller screens, add the class <code>.small-12</code> manually.</p>
-<p>To switch back to the expand behavior from a percentage or shrink behavior, use the classes <code>.medium-expand</code> or <code>.large-expand</code>. In the below example, the columns stack on small screens, and become even-width on large screens.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-12 large-expand columns"</span>></span>One<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-12 large-expand columns"</span>></span>Two<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-12 large-expand columns"</span>></span>Three<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-12 large-expand columns"</span>></span>Four<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-12 large-expand columns"</span>></span>Five<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-12 large-expand columns"</span>></span>Six<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="row">
- <div class="small-12 large-expand columns">One</div>
- <div class="small-12 large-expand columns">Two</div>
- <div class="small-12 large-expand columns">Three</div>
- <div class="small-12 large-expand columns">Four</div>
- <div class="small-12 large-expand columns">Five</div>
- <div class="small-12 large-expand columns">Six</div>
-</div></div><hr>
-<h3 id="automatic-stacking" class="docs-heading">Automatic Stacking<a class="docs-heading-icon" href="#automatic-stacking"></a></h3><p>We have a few shorthand classes for the above behavior. Use the <code>.[size]-unstack</code> classes to stack all columns in the row by default, and then unstack them on a larger screen size, making each one equal-width.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row medium-unstack"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>></span>One<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>></span>Two<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>></span>Three<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>></span>Four<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>></span>Five<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>></span>Six<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="row medium-unstack">
- <div class="columns">One</div>
- <div class="columns">Two</div>
- <div class="columns">Three</div>
- <div class="columns">Four</div>
- <div class="columns">Five</div>
- <div class="columns">Six</div>
-</div></div><hr>
-<h2 id="column-alignment" class="docs-heading" data-magellan-target="column-alignment">Column Alignment<a class="docs-heading-icon" href="#column-alignment"></a></h2><p>Columns in a flex grid can be aligned across the horizontal or vertical axis of their parent row.</p>
-<h3 id="horizontal-alignment" class="docs-heading">Horizontal Alignment<a class="docs-heading-icon" href="#horizontal-alignment"></a></h3><p>Columns can be aligned the same way you would align text in a paragraph. By default, all columns align to the left (or the right in RTL), but this can be overridden with by adding the <code>.align-[dir]</code> class to the flex row.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column small-4"</span>></span>Aligned to<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column small-4"</span>></span>the left<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row align-right"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column small-4"</span>></span>Aligned to<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column small-4"</span>></span>the right<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row align-center"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column small-4"</span>></span>Aligned to<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column small-4"</span>></span>the middle<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row align-justify"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column small-4"</span>></span>Aligned to<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column small-4"</span>></span>the edges<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row align-spaced"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column small-4"</span>></span>Aligned to<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column small-4"</span>></span>the space around<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div><div class="docs-code-live">
- <div class="text-center">
- <div class="row">
- <div class="column small-4">Aligned to</div>
- <div class="column small-4">the left</div>
- </div>
- <div class="row align-right">
- <div class="column small-4">Aligned to</div>
- <div class="column small-4">the right</div>
- </div>
- <div class="row align-center">
- <div class="column small-4">Aligned to</div>
- <div class="column small-4">the middle</div>
- </div>
- <div class="row align-justify">
- <div class="column small-4">Aligned to</div>
- <div class="column small-4">the edges</div>
- </div>
- <div class="row align-spaced">
- <div class="column small-4">Aligned to</div>
- <div class="column small-4">the space around</div>
- </div>
- </div>
-</div>
-
-<p>You might be wondering what the difference between <code>.align-justify</code> and <code>.align-spaced</code> is. A justified grid (<code>justify-content: space-between</code>) evenly distributes the space <em>between</em> each column. The first and last columns pin to the edge of the grid.</p>
-<p>A spaced grid (<code>justify-content: space-around</code>) evenly distributes the space <em>around</em> each column. This means there will always be space to the left of the first column, and to the right of the last column.</p>
-<p>The horizontal alignment classes are shorthands for the <code>justify-content</code> CSS property. <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content">Learn more about <code>justify-content</code></a>.</p>
-<hr>
-<h3 id="vertical-alignment" class="docs-heading">Vertical Alignment<a class="docs-heading-icon" href="#vertical-alignment"></a></h3><p>By default, all columns in a flex grid stretch to be equal height. This behavior can be changed with another set of alignment classes. That's right, <em>middle alignment in CSS</em>!</p>
-<p>Your options for vertical alignment are <code>top</code>, <code>middle</code>, <code>bottom</code>, and <code>stretch</code>. Note that we use the word <em>middle</em> for vertical alignment, and <em>center</em> for horizontal alignment.</p>
-<p>Applying a vertical alignment class to the flex row will affect every column directly inside it.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row align-middle"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>></span>I'm in the middle!<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>></span>I am as well, but I have so much text I take up more space! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis facere ducimus earum minus, inventore, ratione doloremque deserunt neque perspiciatis accusamus explicabo soluta, quod provident distinctio aliquam omnis? Labore, ullam possimus.<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="row align-middle">
- <div class="columns">I'm in the middle!</div>
- <div class="columns">I am as well, but I have so much text I take up more space! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis facere ducimus earum minus, inventore, ratione doloremque deserunt neque perspiciatis accusamus explicabo soluta, quod provident distinctio aliquam omnis? Labore, ullam possimus.</div>
-</div></div><div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row align-top"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>></span>These columns align to the top.<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>></span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, tempora. Impedit eius officia possimus laudantium? Molestiae eaque, sapiente atque doloremque placeat! In sint, fugiat saepe sunt dolore tempore amet cupiditate.<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="row align-top">
- <div class="columns">These columns align to the top.</div>
- <div class="columns">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, tempora. Impedit eius officia possimus laudantium? Molestiae eaque, sapiente atque doloremque placeat! In sint, fugiat saepe sunt dolore tempore amet cupiditate.</div>
-</div></div><hr>
-<p>Similar alignment classes can also be applied to individual columns, which use the format <code>.align-self-*</code> instead of <code>.align-*</code>.</p>
-<div class="warning callout">
- <p>In Foundation 6.2, we introduced the <code>.align-self-*</code> classes, which replace the old method of using <code>.align-*</code> classes on columns. The old classes will be removed completely in Foundation 6.3.</p>
-</div>
-
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column align-self-bottom"</span>></span>Align bottom<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column align-self-middle"</span>></span>Align middle<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column align-self-top"</span>></span>Align top<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column"</span>></span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non harum laborum cum voluptate vel, eius adipisci similique dignissimos nobis at excepturi incidunt fugit molestiae quaerat, consequuntur porro temporibus. Nisi, ex?<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="row">
- <div class="column align-self-bottom">Align bottom</div>
- <div class="column align-self-middle">Align middle</div>
- <div class="column align-self-top">Align top</div>
- <div class="column">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non harum laborum cum voluptate vel, eius adipisci similique dignissimos nobis at excepturi incidunt fugit molestiae quaerat, consequuntur porro temporibus. Nisi, ex?</div>
-</div></div><hr>
-<h2 id="collapse-uncollapse-rows" class="docs-heading" data-magellan-target="collapse-uncollapse-rows">Collapse/Uncollapse Rows<a class="docs-heading-icon" href="#collapse-uncollapse-rows"></a></h2><p>The <code>.collapse</code> class lets you remove column gutters (padding).</p>
-<p>There are times when you won't want each media query to be collapsed or uncollapsed. In this case, use the media query size you want and collapse or uncollapse and add that to your row element. Example shows no gutter at small media size and then adds the gutter to columns at medium.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row small-collapse medium-uncollapse"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-6 columns"</span>></span>
- Removes gutter at small media query and adds at medium.
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-6 columns"</span>></span>
- Removes gutter at small media query and adds at medium.
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div><p class="lead">Scale the browser down to a medium size to see the difference.</p>
-
-<div class="row medium-uncollapse large-collapse">
- <div class="small-6 columns">
- <div class="callout secondary">
- <p class="show-for-small-only">On a small screen, I have gutters!</p>
- <p class="show-for-medium-only">On a medium screen, I have gutters!</p>
- <p class="show-for-large">On a large screen, I have no gutters!</p>
- </div>
- </div>
- <div class="small-6 columns">
- <div class="callout secondary">
- <p class="show-for-small-only">On a small screen, I have gutters!</p>
- <p class="show-for-medium-only">On a medium screen, I have gutters!</p>
- <p class="show-for-large">On a large screen, I have no gutters!</p>
- </div>
- </div>
-</div>
-
-<hr>
-<h2 id="offsets" class="docs-heading" data-magellan-target="offsets">Offsets<a class="docs-heading-icon" href="#offsets"></a></h2><p>Offsets work identically to the float grid, by applying <code>margin-left</code> to a column.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-4 large-offset-2 columns"</span>></span>Offset 2 on large<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-4 columns"</span>></span>4 columns<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="row">
- <div class="small-4 large-offset-2 columns">Offset 2 on large</div>
- <div class="small-4 columns">4 columns</div>
-</div></div><hr>
-<h2 id="source-ordering" class="docs-heading" data-magellan-target="source-ordering">Source Ordering<a class="docs-heading-icon" href="#source-ordering"></a></h2><p>Flexbox supports source ordering, making it easy to rearrange columns on different screen sizes without weird relative positioning tricks.</p>
-<p>The CSS property is easy enough to remember.</p>
-<div class="docs-code" data-docs-code><pre><code class="scss"><span class="hljs-selector-class">.element</span> {
- <span class="hljs-attribute">order</span>: <span class="hljs-number">1</span>;
-}</code></pre></div><p>Columns within a row will be sorted by their <code>order</code> property. Lower numbers are placed first. If multiple columns have the same number, they're sorted in the order they appear in the HTML.</p>
-<p>We have a set of classes that make it easy to setup source ordering in your HTML. They also come in responsive flavors, allowing you to reorder a grid on different screen sizes.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column small-order-2 medium-order-1"</span>></span>
- This column will come second on small, and first on medium and larger.
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column small-order-1 medium-order-2"</span>></span>
- This column will come first on small, and second on medium and larger.
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="row">
- <div class="column small-order-2 medium-order-1">
- This column will come second on small, and first on medium and larger.
- </div>
- <div class="column small-order-1 medium-order-2">
- This column will come first on small, and second on medium and larger.
- </div>
-</div></div><hr>
-<h2 id="block-grids" class="docs-heading" data-magellan-target="block-grids">Block Grids<a class="docs-heading-icon" href="#block-grids"></a></h2><p>To define column widths at the row-level, instead of the individual column level, add the class <code>.[size]-up-[n]</code> to a row, where <code>[n]</code> is the number of columns to display per row, and <code>[size]</code> is the breakpoint at which to apply the effect.</p>
-<div class="primary callout">
- <p>A block grid row has the property <code>align-items: stretch</code> by default, meaning the columns in each row are equal height. To change this, change the <code>align-items</code> property of the row, or use one of the <a href="flexbox.html#vertical-alignment">vertical alignment flexbox classes</a>.</p>
-</div>
-
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row small-up-1 medium-up-2 large-up-3"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column"</span>></span>1 per row on small<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column"</span>></span>2 per row on medium<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column"</span>></span>3 per row on large<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="row small-up-1 medium-up-2 large-up-3">
- <div class="column">1 per row on small</div>
- <div class="column">2 per row on medium</div>
- <div class="column">3 per row on large</div>
-</div></div>
-
-<hr>
-<section>
- <h2 id="sass-reference" class="docs-heading" data-magellan-target="sass-reference">Sass Reference<a class="docs-heading-icon" href="#sass-reference"></a></h2>
-
-
-
-
- <section>
- <h3 id="sass-mixins" class="docs-heading">Mixins<a class="docs-heading-icon" href="#sass-mixins"></a></h3>
-
- <p>We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.</p>
-
-
- <section >
- <h4 id="flex-grid-row" class="docs-heading">flex-grid-row<a class="docs-heading-icon" href="#flex-grid-row"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> flex-grid-row(<span class="hljs-variable">$behavior</span>, <span class="hljs-variable">$width</span>, <span class="hljs-variable">$columns</span>, <span class="hljs-variable">$base</span>, <span class="hljs-variable">$gutter</span>) { }</code></pre>
- </div>
-
- <p>Creates a container for a flex grid row.</p>
-
-
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$behavior</code></td>
- <td>Keyword or List</td>
- <td><code>null</code></td>
- <td><p>Modifications to the default grid styles. <code>nest</code> indicates the row will be placed inside another row. <code>collapse</code> indicates that the columns inside this row will not have padding. <code>nest collapse</code> combines both behaviors.</p>
-</td>
- </tr>
- <tr>
- <td><code>$width</code></td>
- <td>Number</td>
- <td><code>$grid-row-width</code></td>
- <td><p>Maximum width of the row.</p>
-</td>
- </tr>
- <tr>
- <td><code>$columns</code></td>
- <td>Number</td>
- <td><code>null</code></td>
- <td><p>Number of columns to use for this row. If set to <code>null</code> (the default), the global column count will be used.</p>
-</td>
- </tr>
- <tr>
- <td><code>$base</code></td>
- <td>Boolean</td>
- <td><code>true</code></td>
- <td><p>Set to <code>false</code> to prevent basic styles from being output. Useful if you're calling this mixin on the same element twice, as it prevents duplicate CSS output.</p>
-</td>
- </tr>
- <tr>
- <td><code>$gutter</code></td>
- <td>Number</td>
- <td><code>$grid-column-gutter</code></td>
- <td><p>Gutter to use when inverting margins, in case the row is nested.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="flex-grid-column" class="docs-heading">flex-grid-column<a class="docs-heading-icon" href="#flex-grid-column"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> flex-grid-column(<span class="hljs-variable">$columns</span>, <span class="hljs-variable">$gutter</span>);</code></pre>
- </div>
-
- <p>Creates a column for a flex grid. By default, the column will stretch to the full width of its container, but this can be overridden with sizing classes, or by using the <code>unstack</code> class on the parent flex row.</p>
-
-
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$columns</code></td>
- <td>Mixed</td>
- <td><code>null</code></td>
- <td><p>Width of the column. Refer to the <code>flex-grid-column()</code> function to see possible values.</p>
-</td>
- </tr>
- <tr>
- <td><code>$gutter</code></td>
- <td>Number</td>
- <td><code>$grid-column-gutter</code></td>
- <td><p>Space between columns, added as a left and right padding.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="flex-grid-layout" class="docs-heading">flex-grid-layout<a class="docs-heading-icon" href="#flex-grid-layout"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> flex-grid-layout(<span class="hljs-variable">$n</span>, <span class="hljs-variable">$selector</span>);</code></pre>
- </div>
-
- <p>Creates a block grid for a flex grid row.</p>
-
-
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$n</code></td>
- <td>Number</td>
- <td><code><span style="color: #999;">None</span></code></td>
- <td><p>Number of columns to display on each row.</p>
-</td>
- </tr>
- <tr>
- <td><code>$selector</code></td>
- <td>String</td>
- <td><code><span style="color: #999;">None</span></code></td>
- <td><p>Selector to use to target columns within the row.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="flex-grid-order" class="docs-heading">flex-grid-order<a class="docs-heading-icon" href="#flex-grid-order"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> flex-grid-order(<span class="hljs-variable">$order</span>);</code></pre>
- </div>
-
- <p>Changes the source order of a flex grid column. Columns with lower numbers appear first in the layout.</p>
-
-
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$order</code></td>
- <td>Number</td>
- <td><code>0</code></td>
- <td><p>Order number to apply.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="flex-grid-row-align" class="docs-heading">flex-grid-row-align<a class="docs-heading-icon" href="#flex-grid-row-align"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> flex-grid-row-align(<span class="hljs-variable">$x</span>, <span class="hljs-variable">$y</span>);</code></pre>
- </div>
-
- <p>Horizontally or vertically aligns the columns within a flex row. Apply this mixin to a flex row.</p>
-
-
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$x</code></td>
- <td>Keyword</td>
- <td><code>null</code></td>
- <td><p>Horizontal alignment to use. Can be <code>left</code>, <code>right</code>, <code>center</code>, <code>justify</code>, or <code>spaced</code>. Or, set it to <code>null</code> (the default) to not set horizontal alignment.</p>
-</td>
- </tr>
- <tr>
- <td><code>$y</code></td>
- <td>Keyword</td>
- <td><code>null</code></td>
- <td><p>Vertical alignment to use. Can be <code>top</code>, <code>bottom</code>, <code>middle</code>, or <code>stretch</code>. Or, set it to <code>null</code> (the default) to not set vertical alignment.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="flex-grid-column-align" class="docs-heading">flex-grid-column-align<a class="docs-heading-icon" href="#flex-grid-column-align"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> flex-grid-column-align(<span class="hljs-variable">$y</span>);</code></pre>
- </div>
-
- <p>Vertically align a single column within a flex row. Apply this mixin to a flex column.</p>
-
-
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$y</code></td>
- <td>Keyword</td>
- <td><code>null</code></td>
- <td><p>Vertical alignment to use. Can be <code>top</code>, <code>bottom</code>, <code>middle</code>, or <code>stretch</code>. Or, set it to <code>null</code> (the default) to not set vertical alignment.</p>
-</td>
- </tr>
- </table>
- </section>
-
-
-
-
-
- </section>
-
- <hr>
-
- <section>
- <h3 id="sass-functions" class="docs-heading">Functions<a class="docs-heading-icon" href="#sass-functions"></a></h3>
-
-
- <section >
- <h4 id="flex-grid-column" class="docs-heading">flex-grid-column<a class="docs-heading-icon" href="#flex-grid-column"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code><span class="hljs-attribute">flex</span>-grid-column(<span class="hljs-variable">$columns</span>)</code></pre>
- </div>
-
- <p>Calculates the <code>flex</code> property for a flex grid column. It accepts all of the same values as the basic <code>grid-column()</code> function, along with two extras:</p>
-<ul>
-<li><code>null</code> (the default) will make the column expand to fill space.</li>
-<li><code>shrink</code> will make the column contract, so it only takes up the horizontal space it needs.</li>
-</ul>
-
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$columns</code></td>
- <td>Mixed</td>
- <td><code>null</code></td>
- <td><p>Width of the column.</p>
-</td>
- </tr>
- </table>
- </section>
-
-
-
- </section>
-
-</section>
-
-
-<!-- <hr> -->
-<!-- <section class="docs-building-blocks">
- <h2 id="building-blocks" class="docs-heading" data-magellan-target="building-blocks">Building Blocks<a class="docs-heading-icon" href="#building-blocks"></a></h2>
-
- <p><a href="http://zurb.com/building-blocks">Building Blocks</a> is a ZURB-curated resource with useful code snippets that use Foundation components. Here are a few for this component:</p>
-
- <div class="warning callout">
- <p>These are placeholder items. If you have ideas for building blocks for this component, <a href="https://github.com/zurb/foundation-sites-6/issues/118">we're taking ideas on GitHub</a>.</p>
- </div>
-
- <div data-building-blocks></div>
-</section> -->
-
-</div>
-
-<div class="large-3 columns" data-sticky-container>
- <nav class="columns docs-toc-wrap" data-sticky data-anchor="docs" data-sticky-on="large">
- <div class="docs-toc hide" id="docsTOC">
- <ul class="vertical menu" data-docs-toc>
- <li class="docs-nav-title">On this page:</li>
- </ul>
- </div>
- <div class="foundation-toc-ad-unit" id="TOCAdUnit">
- </div>
- </nav>
-</div>
-
-</div>
-
-</article>
-
- </div>
- <div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
- <ul class="vertical menu docs-nav" id="docs-menu">
- <p class="docs-nav-version">
- <span data-docs-version></span>
- <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">(Changelog)</a>
- </p>
-
- <li class="docs-nav-title">Getting Started</li>
- <li><a href="installation.html">Installation</a></li>
- <li><a href="starter-projects.html">Starter Projects</a></li>
- <li><a href="compatibility.html">Compatibility</a></li>
- <li><a href="accessibility.html">Accessibility</a></li>
- <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
-
- <li class="docs-nav-title">Setup</li>
- <li><a href="global.html">Global Styles</a></li>
- <li><a href="rtl.html">Right-to-Left Support</a></li>
- <li><a href="flexbox.html">Flexbox</a></li>
- <li><a href="sass.html">Sass</a></li>
- <li><a href="javascript.html">JavaScript</a></li>
- <li><a href="javascript-utilities.html">JavaScript Utilities</a></li>
- <li><a href="media-queries.html">Media Queries</a></li>
-
- <li class="docs-nav-title">General</li>
- <li><a href="grid.html">Grid</a></li>
- <li class="current"><a href="flex-grid.html">Flex Grid</a></li>
- <li><a href="forms.html">Forms</a></li>
- <li><a href="visibility.html">Visibility Classes</a></li>
- <li><a href="float-classes.html">Float Classes</a></li>
-
- <li class="docs-nav-title">Typography</li>
- <li><a href="typography-base.html">Base Styles</a></li>
- <li><a href="typography-helpers.html">Helper Classes</a></li>
-
- <li class="docs-nav-title">Controls</li>
- <li><a href="button.html">Button</a></li>
- <li><a href="button-group.html">Button Group</a></li>
- <li><a href="close-button.html">Close Button</a></li>
- <li><a href="slider.html">Slider <span class="label">JS</span></a></li>
- <li><a href="switch.html">Switch</a></li>
-
- <li class="docs-nav-title">Navigation</li>
- <li><a href="navigation.html">Overview</a></li>
- <li><a href="menu.html">Menu</a></li>
- <li><a href="dropdown-menu.html">Dropdown Menu <span class="label">JS</span></a></li>
- <li><a href="drilldown-menu.html">Drilldown Menu <span class="label">JS</span></a></li>
- <li><a href="accordion-menu.html">Accordion Menu <span class="label">JS</span></a></li>
- <li><a href="top-bar.html">Top Bar</a></li>
- <li><a href="responsive-navigation.html">Responsive Navigation</a></li>
- <li><a href="magellan.html">Magellan <span class="label">JS</span></a></li>
- <li><a href="pagination.html">Pagination</a></li>
- <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
-
- <li class="docs-nav-title">Containers</li>
- <li><a href="accordion.html">Accordion <span class="label">JS</span></a></li>
- <li><a href="callout.html">Callout</a></li>
- <li><a href="dropdown.html">Dropdown <span class="label">JS</span></a></li>
- <li><a href="media-object.html">Media Object</a></li>
- <li><a href="off-canvas.html">Off-canvas <span class="label">JS</span></a></li>
- <li><a href="reveal.html">Reveal <span class="label">JS</span> <small>Modal</small></a></li>
- <li><a href="table.html">Table</a></li>
- <li><a href="tabs.html">Tabs <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Media</li>
- <li><a href="badge.html">Badge</a></li>
- <li><a href="flex-video.html">Flex Video</a></li>
- <li><a href="label.html">Label</a></li>
- <li><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
- <li><a href="progress-bar.html">Progress Bar</a></li>
- <li><a href="thumbnail.html">Thumbnail</a></li>
- <li><a href="tooltip.html">Tooltip <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Plugins</li>
- <li><a href="abide.html">Abide <small>Form Validation</small></a></li>
- <li><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
- <li><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
- <li><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
- <li><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
-
- <li class="docs-nav-title">Sass</li>
- <li><a href="sass-functions.html">Functions</a></li>
- <li><a href="sass-mixins.html">Mixins</a></li>
-
- <li class="docs-nav-title">Libraries</li>
- <li><a href="motion-ui.html">Motion UI</a></li>
- <li><a href="panini.html">Panini</a></li>
- <li><a href="style-sherpa.html">Style Sherpa</a></li>
-
- <li class="docs-nav-title">Older Versions</li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
- <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
- <li><a href="https://get.foundation/sites/docs/v/3.2.5/">Foundation 3</a></li>
- <li><a href="https://get.foundation/sites/docs/v/2.2.1/">Foundation 2</a></li>
- </ul>
-
- </div>
- </div>
-
- <!-- Small Business(Docs) -->
- <section id="studiosCallout">
- <div class="row">
- <div class="medium-4 large-4 columns">
- <img src="https://get.foundation/assets/img/smallbiz-footer.svg" alt="">
- </div>
- <div class="medium-8 large-8 columns banner-info">
- <div class="row column property-label">ZURB Foundation</div>
- <h3 class="light">Yeah, we can help with that.</h3>
- <p class="lead"> We’ll collaborate with your team throughout the entire project life cycle. We’ll take your concept and move it through ideation, hi-fi wireframes, visual design and code, all while informing you on the whys and hows along the way.</p>
- <div class="course-buttons">
- <a href="https://get.foundation/get-involved/premium-support.html" class="studios button" data-zcom-event="studios_foundation_click" id="foundationSmallV1">Show Me How →</a>
- </div>
- </div>
- </div>
- </section>
-
- <div class="docs-newsletter">
- <div class="row">
- <div class="medium-7 large-8 columns">
- <a target="_blank" href="https://get.foundation/learn/responsive-reading.html">
- <h5 class="">Download ZURB’s 21 Responsive Trends That Will Shape 2017</h5>
- <p style="margin-bottom: 0;">Stay informed with amazing responsive trends each month from ZURB.</p>
- </a>
- </div>
- <div class="medium-5 large-4 footer-signup-form columns">
- <a style="margin-bottom: 0;" target="_blank" href="https://get.foundation/learn/responsive-reading.html" class="button expanded">Download the PDF</a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-top bg-fblue">
- <div class="row property">
- <div class="medium-4 columns">
- <div class="property-info">
- <h3>Foundation for Sites</h3>
- <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
- </p>
- </div>
- </div>
-
- <div class="medium-8 columns">
- <div class="row collapse">
- <div class="medium-4 columns">
- <div class="learn-links">
- <h4 class="hide-for-small">Want more?</h4>
- <ul>
- <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
- <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
- <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
- <li><a href="http://zurb.com/university/courses">Training</a></li>
- <li><a href="http://zurb.com/library">Design Resources</a></li>
- </ul>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="support-links">
- <h4 class="hide-for-small">Talk to us</h4>
- <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
- <p><a href="https://get.foundation/get-involved/contribute.html">Get involved in<br>our amazing community.</a></p>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="connect-links">
- <h4 class="hide-for-small">Stay Updated</h4>
- <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
- <a href="http://zurb.com/news" class="small button">Stay Connected</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="row global">
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/studios" class="footer-link-block services">
- <span class="title">Studios</span>
- <span>Helping more than 200 startups succeed since 1998.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="https://get.foundation/" class="footer-link-block foundation">
- <span class="title">Foundation</span>
- <span>The most advanced front-end framework in the world.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/notable" class="footer-link-block apps">
- <span class="title">Notable Design Apps</span>
- <span>Prototype, iterate and collect feedback on your products.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/university" class="footer-link-block expo">
- <span class="title">University</span>
- <span>Ideas, thoughts and design resources shared with you.</span>
- </a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-bottom">
- <div class="row">
- <div class="medium-4 medium-push-8 columns">
- <ul class="home-social">
- <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
- <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
- <li><a href="http://zurb.com/contact" class="mail"></a></li>
- </ul>
- </div>
- <div class="medium-8 medium-pull-4 columns">
- <a href="http://www.zurb.com" class="zurb-logo regular"></a>
- <ul class="zurb-links">
- <li><a href="http://zurb.com/about">About</a></li>
- <li><a href="http://zurb.com/blog">Blog</a></li>
- <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
- <li><a href="http://zurb.com/contact">Contact</a></li>
- <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
- </ul>
- <p class="copyright">© 1998‐2016 ZURB, Inc. All rights reserved.</p>
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- <script>
- var _gaq = _gaq || [];
- _gaq.push(
- ['_setAccount', 'UA-2195009-2'],
- ['_trackPageview'],
- ['b._setAccount', 'UA-2195009-27'],
- ['b._trackPageview']
- );
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
-
- <script src="assets/js/vendor.js?hash=f9de39a5437f333254d58c7a102ca325"></script>
- <script src="assets/js/foundation.js?hash=70b1bc6505575eaedda0f4858e9be987"></script>
- <script src="assets/js/docs.js?hash=2320a3d0b3431dd81d5c053e86ea93eb"></script>
- <script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
-</body>
-</html>
+++ /dev/null
-<!doctype html>
-<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
-<html class="no-js" lang="en" dir="ltr">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="Wrap embedded videos from YouTube, Vimeo, and others in a flex video container to ensure they maintain the correct aspect ratio regardless of screen size.">
- <link rel="icon" href="assets/img/icons/foundation-favicon.ico" type="image/x-icon">
- <title>Foundation for Sites 6 Docs | Flex Video</title>
- <link href="assets/css/docs.css?hash=da792843458ce8456a458675a0de8952" rel="stylesheet" />
- <link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=f9ae1eee023fa143f454aeab42e6edea" rel="stylesheet">
- <!-- <link rel="stylesheet" href="./node_modules/motion-ui/dist/motion-ui.css" /> -->
-</head>
-<body>
-
- <div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
-
- <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="mobile-ofc vertical menu">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
-
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/support.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/sort/unanswered">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
- </div>
-
- <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="vertical menu">
- <li><a href="#">Foundation</a></li>
- <li><a href="#">Dot</a></li>
- <li><a href="#">ZURB</a></li>
- <li><a href="#">Com</a></li>
- <li><a href="#">Slash</a></li>
- <li><a href="#">Sites</a></li>
- </ul>
- </div>
-
-
- <div class="off-canvas-content" data-off-canvas-content>
- <!-- Info Banner For Announcements or Links -->
- <!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
- <div class="info">
- <h5>Foundation 6 is here!</h5>
- </div>
- </a> -->
-
- <nav class="marketing-topbar show-for-medium">
-
- <ul class="menu">
- <li class="topbar-title"><a href="https://get.foundation/index.html"><img src="assets/img/logos/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
- </ul>
-
- <ul class="dropdown menu" data-dropdown-menu data-click-open="false">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/" target="_blank">F5 Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="https://get.foundation/emails/docs/" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
-
- </nav>
-
- <div class="title-bar hide-for-medium">
- <div class="title-bar-left">
- <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
- <span class="title-bar-title">Foundation</span>
- </div>
- </div>
-
-
- <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
-
- <div class="expanded row">
- <div class="medium-9 large-10 medium-push-3 large-push-2 columns">
-
-<article class="docs-component" id="docs-flex-video">
-
-<a href="#docs-menu" class="small secondary expanded button hide-for-medium">Jump to Nav</a>
-
-<header>
- <h1 class="docs-page-title">Flex Video</h1>
-
-
- <p class="lead docs-page-lead">Wrap embedded videos from YouTube, Vimeo, and others in a flex video container to ensure they maintain the correct aspect ratio regardless of screen size.</p>
-
- <ul class="menu simple docs-contribute-menu">
- <li><a href="https://github.com/zurb/foundation-sites/edit/master/docs/pages/flex-video.md" target="_blank"><i class="fi-pencil"></i>Edit this Page</a></li>
- <li><a href="https://github.com/zurb/foundation-sites/issues/new?title=%5BFlex%20Video%5D%20ISSUE%20NAME%20HERE" target="_blank"><i class="fi-social-github"></i>Report a Bug</a></li>
- <li><a href="https://get.foundation/forum" target="_blank"><i class="fi-comment"></i>Get Help</a></li>
- </ul>
-</header>
-
-<hr>
-
-<div class="row">
-
-<div class="large-9 columns" id="docs">
-
-<p>Embedded videos won't maintain their aspect ratio as the width of the screen changes. To avoid squished videos, wrap them in a container with the class <code>.flex-video</code>.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex-video"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">iframe</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"420"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"315"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://www.youtube.com/embed/V9gkYw35Vws"</span> <span class="hljs-attr">frameborder</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">allowfullscreen</span>></span><span class="hljs-tag"></<span class="hljs-name">iframe</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="flex-video">
- <iframe width="420" height="315" src="https://www.youtube.com/embed/V9gkYw35Vws" frameborder="0" allowfullscreen></iframe>
-</div></div><hr>
-<p>The default ratio is 4:3. Add the <code>.widescreen</code> class to change it to 16:9.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex-video widescreen"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">iframe</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"420"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"315"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://www.youtube.com/embed/aiBt44rrslw"</span> <span class="hljs-attr">frameborder</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">allowfullscreen</span>></span><span class="hljs-tag"></<span class="hljs-name">iframe</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="flex-video widescreen">
- <iframe width="420" height="315" src="https://www.youtube.com/embed/aiBt44rrslw" frameborder="0" allowfullscreen></iframe>
-</div></div><hr>
-<p>Embedded Vimeo videos are special snowflakes of their own. Add the <code>.vimeo</code> class to a flex video container that wraps a Vimeo embed.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex-video widescreen vimeo"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">iframe</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"http://player.vimeo.com/video/60122989"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"400"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"225"</span> <span class="hljs-attr">frameborder</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">webkitAllowFullScreen</span> <span class="hljs-attr">mozallowfullscreen</span> <span class="hljs-attr">allowFullScreen</span>></span><span class="hljs-tag"></<span class="hljs-name">iframe</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="flex-video widescreen vimeo">
- <iframe src="http://player.vimeo.com/video/60122989" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
-</div></div>
-
-<hr>
-<section>
- <h2 id="sass-reference" class="docs-heading" data-magellan-target="sass-reference">Sass Reference<a class="docs-heading-icon" href="#sass-reference"></a></h2>
-
- <section>
- <h3 id="sass-variables" class="docs-heading">Variables<a class="docs-heading-icon" href="#sass-variables"></a></h3>
-
- <p>The default styles of this component can be customized using these Sass variables in your project's <a href="sass.html#the-settings-file">settings file</a>.</p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td class="name"><code>$flexvideo-margin-bottom</code></td>
- <td>Number</td>
- <td class="number"><code>rem-calc(16)</code></td>
- <td><p>Margin below a flex video container.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$flexvideo-ratio</code></td>
- <td>Number</td>
- <td class="number"><code>4 by 3</code></td>
- <td><p>Padding used to create a 4:3 aspect ratio.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$flexvideo-ratio-widescreen</code></td>
- <td>Number</td>
- <td class="number"><code>16 by 9</code></td>
- <td><p>Padding used to create a 16:9 aspect ratio.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="sass-mixins" class="docs-heading">Mixins<a class="docs-heading-icon" href="#sass-mixins"></a></h3>
-
- <p>We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.</p>
-
-
- <section >
- <h4 id="flex-video" class="docs-heading">flex-video<a class="docs-heading-icon" href="#flex-video"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> flex-video(<span class="hljs-variable">$ratio</span>);</code></pre>
- </div>
-
- <p>Creates a flex video container.</p>
-
-
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$ratio</code></td>
- <td>List</td>
- <td><code>$flexvideo-ratio</code></td>
- <td><p>Ratio to use for the container, formatted as <code>x by y</code>.</p>
-</td>
- </tr>
- </table>
- </section>
-
-
-
-
-
- </section>
-
- <hr>
-
- <section>
- <h3 id="sass-functions" class="docs-heading">Functions<a class="docs-heading-icon" href="#sass-functions"></a></h3>
-
-
- <section >
- <h4 id="flex-video" class="docs-heading">flex-video<a class="docs-heading-icon" href="#flex-video"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code><span class="hljs-attribute">flex</span>-<span class="hljs-selector-tag">video</span>(<span class="hljs-variable">$ratio</span>)</code></pre>
- </div>
-
- <p>Creates a percentage height that can be used as padding in a flex video container.</p>
-
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$ratio</code></td>
- <td>List</td>
- <td><code><span style="color: #999;">None</span></code></td>
- <td><p>Ratio to use to calculate the height, formatted as <code>x by y</code>.</p>
-</td>
- </tr>
- </table>
- </section>
-
-
-
- </section>
-
-</section>
-
-
-<!-- <hr> -->
-<!-- <section class="docs-building-blocks">
- <h2 id="building-blocks" class="docs-heading" data-magellan-target="building-blocks">Building Blocks<a class="docs-heading-icon" href="#building-blocks"></a></h2>
-
- <p><a href="http://zurb.com/building-blocks">Building Blocks</a> is a ZURB-curated resource with useful code snippets that use Foundation components. Here are a few for this component:</p>
-
- <div class="warning callout">
- <p>These are placeholder items. If you have ideas for building blocks for this component, <a href="https://github.com/zurb/foundation-sites-6/issues/118">we're taking ideas on GitHub</a>.</p>
- </div>
-
- <div data-building-blocks></div>
-</section> -->
-
-</div>
-
-<div class="large-3 columns" data-sticky-container>
- <nav class="columns docs-toc-wrap" data-sticky data-anchor="docs" data-sticky-on="large">
- <div class="docs-toc hide" id="docsTOC">
- <ul class="vertical menu" data-docs-toc>
- <li class="docs-nav-title">On this page:</li>
- </ul>
- </div>
- <div class="foundation-toc-ad-unit" id="TOCAdUnit">
- </div>
- </nav>
-</div>
-
-</div>
-
-</article>
-
- </div>
- <div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
- <ul class="vertical menu docs-nav" id="docs-menu">
- <p class="docs-nav-version">
- <span data-docs-version></span>
- <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">(Changelog)</a>
- </p>
-
- <li class="docs-nav-title">Getting Started</li>
- <li><a href="installation.html">Installation</a></li>
- <li><a href="starter-projects.html">Starter Projects</a></li>
- <li><a href="compatibility.html">Compatibility</a></li>
- <li><a href="accessibility.html">Accessibility</a></li>
- <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
-
- <li class="docs-nav-title">Setup</li>
- <li><a href="global.html">Global Styles</a></li>
- <li><a href="rtl.html">Right-to-Left Support</a></li>
- <li><a href="flexbox.html">Flexbox</a></li>
- <li><a href="sass.html">Sass</a></li>
- <li><a href="javascript.html">JavaScript</a></li>
- <li><a href="javascript-utilities.html">JavaScript Utilities</a></li>
- <li><a href="media-queries.html">Media Queries</a></li>
-
- <li class="docs-nav-title">General</li>
- <li><a href="grid.html">Grid</a></li>
- <li><a href="flex-grid.html">Flex Grid</a></li>
- <li><a href="forms.html">Forms</a></li>
- <li><a href="visibility.html">Visibility Classes</a></li>
- <li><a href="float-classes.html">Float Classes</a></li>
-
- <li class="docs-nav-title">Typography</li>
- <li><a href="typography-base.html">Base Styles</a></li>
- <li><a href="typography-helpers.html">Helper Classes</a></li>
-
- <li class="docs-nav-title">Controls</li>
- <li><a href="button.html">Button</a></li>
- <li><a href="button-group.html">Button Group</a></li>
- <li><a href="close-button.html">Close Button</a></li>
- <li><a href="slider.html">Slider <span class="label">JS</span></a></li>
- <li><a href="switch.html">Switch</a></li>
-
- <li class="docs-nav-title">Navigation</li>
- <li><a href="navigation.html">Overview</a></li>
- <li><a href="menu.html">Menu</a></li>
- <li><a href="dropdown-menu.html">Dropdown Menu <span class="label">JS</span></a></li>
- <li><a href="drilldown-menu.html">Drilldown Menu <span class="label">JS</span></a></li>
- <li><a href="accordion-menu.html">Accordion Menu <span class="label">JS</span></a></li>
- <li><a href="top-bar.html">Top Bar</a></li>
- <li><a href="responsive-navigation.html">Responsive Navigation</a></li>
- <li><a href="magellan.html">Magellan <span class="label">JS</span></a></li>
- <li><a href="pagination.html">Pagination</a></li>
- <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
-
- <li class="docs-nav-title">Containers</li>
- <li><a href="accordion.html">Accordion <span class="label">JS</span></a></li>
- <li><a href="callout.html">Callout</a></li>
- <li><a href="dropdown.html">Dropdown <span class="label">JS</span></a></li>
- <li><a href="media-object.html">Media Object</a></li>
- <li><a href="off-canvas.html">Off-canvas <span class="label">JS</span></a></li>
- <li><a href="reveal.html">Reveal <span class="label">JS</span> <small>Modal</small></a></li>
- <li><a href="table.html">Table</a></li>
- <li><a href="tabs.html">Tabs <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Media</li>
- <li><a href="badge.html">Badge</a></li>
- <li class="current"><a href="flex-video.html">Flex Video</a></li>
- <li><a href="label.html">Label</a></li>
- <li><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
- <li><a href="progress-bar.html">Progress Bar</a></li>
- <li><a href="thumbnail.html">Thumbnail</a></li>
- <li><a href="tooltip.html">Tooltip <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Plugins</li>
- <li><a href="abide.html">Abide <small>Form Validation</small></a></li>
- <li><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
- <li><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
- <li><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
- <li><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
-
- <li class="docs-nav-title">Sass</li>
- <li><a href="sass-functions.html">Functions</a></li>
- <li><a href="sass-mixins.html">Mixins</a></li>
-
- <li class="docs-nav-title">Libraries</li>
- <li><a href="motion-ui.html">Motion UI</a></li>
- <li><a href="panini.html">Panini</a></li>
- <li><a href="style-sherpa.html">Style Sherpa</a></li>
-
- <li class="docs-nav-title">Older Versions</li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
- <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
- <li><a href="https://get.foundation/sites/docs/v/3.2.5/">Foundation 3</a></li>
- <li><a href="https://get.foundation/sites/docs/v/2.2.1/">Foundation 2</a></li>
- </ul>
-
- </div>
- </div>
-
- <!-- Small Business(Docs) -->
- <section id="studiosCallout">
- <div class="row">
- <div class="medium-4 large-4 columns">
- <img src="https://get.foundation/assets/img/smallbiz-footer.svg" alt="">
- </div>
- <div class="medium-8 large-8 columns banner-info">
- <div class="row column property-label">ZURB Foundation</div>
- <h3 class="light">Yeah, we can help with that.</h3>
- <p class="lead"> We’ll collaborate with your team throughout the entire project life cycle. We’ll take your concept and move it through ideation, hi-fi wireframes, visual design and code, all while informing you on the whys and hows along the way.</p>
- <div class="course-buttons">
- <a href="https://get.foundation/get-involved/premium-support.html" class="studios button" data-zcom-event="studios_foundation_click" id="foundationSmallV1">Show Me How →</a>
- </div>
- </div>
- </div>
- </section>
-
- <div class="docs-newsletter">
- <div class="row">
- <div class="medium-7 large-8 columns">
- <a target="_blank" href="https://get.foundation/learn/responsive-reading.html">
- <h5 class="">Download ZURB’s 21 Responsive Trends That Will Shape 2017</h5>
- <p style="margin-bottom: 0;">Stay informed with amazing responsive trends each month from ZURB.</p>
- </a>
- </div>
- <div class="medium-5 large-4 footer-signup-form columns">
- <a style="margin-bottom: 0;" target="_blank" href="https://get.foundation/learn/responsive-reading.html" class="button expanded">Download the PDF</a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-top bg-fblue">
- <div class="row property">
- <div class="medium-4 columns">
- <div class="property-info">
- <h3>Foundation for Sites</h3>
- <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
- </p>
- </div>
- </div>
-
- <div class="medium-8 columns">
- <div class="row collapse">
- <div class="medium-4 columns">
- <div class="learn-links">
- <h4 class="hide-for-small">Want more?</h4>
- <ul>
- <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
- <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
- <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
- <li><a href="http://zurb.com/university/courses">Training</a></li>
- <li><a href="http://zurb.com/library">Design Resources</a></li>
- </ul>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="support-links">
- <h4 class="hide-for-small">Talk to us</h4>
- <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
- <p><a href="https://get.foundation/get-involved/contribute.html">Get involved in<br>our amazing community.</a></p>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="connect-links">
- <h4 class="hide-for-small">Stay Updated</h4>
- <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
- <a href="http://zurb.com/news" class="small button">Stay Connected</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="row global">
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/studios" class="footer-link-block services">
- <span class="title">Studios</span>
- <span>Helping more than 200 startups succeed since 1998.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="https://get.foundation/" class="footer-link-block foundation">
- <span class="title">Foundation</span>
- <span>The most advanced front-end framework in the world.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/notable" class="footer-link-block apps">
- <span class="title">Notable Design Apps</span>
- <span>Prototype, iterate and collect feedback on your products.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/university" class="footer-link-block expo">
- <span class="title">University</span>
- <span>Ideas, thoughts and design resources shared with you.</span>
- </a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-bottom">
- <div class="row">
- <div class="medium-4 medium-push-8 columns">
- <ul class="home-social">
- <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
- <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
- <li><a href="http://zurb.com/contact" class="mail"></a></li>
- </ul>
- </div>
- <div class="medium-8 medium-pull-4 columns">
- <a href="http://www.zurb.com" class="zurb-logo regular"></a>
- <ul class="zurb-links">
- <li><a href="http://zurb.com/about">About</a></li>
- <li><a href="http://zurb.com/blog">Blog</a></li>
- <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
- <li><a href="http://zurb.com/contact">Contact</a></li>
- <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
- </ul>
- <p class="copyright">© 1998‐2016 ZURB, Inc. All rights reserved.</p>
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- <script>
- var _gaq = _gaq || [];
- _gaq.push(
- ['_setAccount', 'UA-2195009-2'],
- ['_trackPageview'],
- ['b._setAccount', 'UA-2195009-27'],
- ['b._trackPageview']
- );
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
-
- <script src="assets/js/vendor.js?hash=26590f3b6239446bb095928be652f4da"></script>
- <script src="assets/js/foundation.js?hash=3f8c7c0f2f87162cb31d37e31732a66e"></script>
- <script src="assets/js/docs.js?hash=78c02d49ae2bca6ada318ac7d34078f1"></script>
- <script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
-</body>
-</html>
+++ /dev/null
-<!doctype html>
-<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
-<html class="no-js" lang="en" dir="ltr">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="For browsers with cutting-edge support, some of Foundation's key components can be converted to flexbox.">
- <link rel="icon" href="assets/img/icons/foundation-favicon.ico" type="image/x-icon">
- <title>Foundation for Sites 6 Docs | Flexbox</title>
- <link href="assets/css/docs.css?hash=027f1be7bc5fd7f14dbe2e1d78e72ead" rel="stylesheet" />
- <link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=ce75df904c8f4a4d7b3e3f3ee3ce00e7" rel="stylesheet">
- <!-- <link rel="stylesheet" href="./node_modules/motion-ui/dist/motion-ui.css" /> -->
-</head>
-<body>
-
- <div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
-
- <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="mobile-ofc vertical menu">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
-
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/support.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/sort/unanswered">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
- </div>
-
- <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="vertical menu">
- <li><a href="#">Foundation</a></li>
- <li><a href="#">Dot</a></li>
- <li><a href="#">ZURB</a></li>
- <li><a href="#">Com</a></li>
- <li><a href="#">Slash</a></li>
- <li><a href="#">Sites</a></li>
- </ul>
- </div>
-
-
- <div class="off-canvas-content" data-off-canvas-content>
- <!-- Info Banner For Announcements or Links -->
- <!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
- <div class="info">
- <h5>Foundation 6 is here!</h5>
- </div>
- </a> -->
-
- <nav class="marketing-topbar show-for-medium">
-
- <ul class="menu">
- <li class="topbar-title"><a href="https://get.foundation/index.html"><img src="assets/img/logos/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
- </ul>
-
- <ul class="dropdown menu" data-dropdown-menu data-click-open="false">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/" target="_blank">F5 Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="https://get.foundation/emails/docs/" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
-
- </nav>
-
- <div class="title-bar hide-for-medium">
- <div class="title-bar-left">
- <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
- <span class="title-bar-title">Foundation</span>
- </div>
- </div>
-
-
- <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
-
- <div class="expanded row">
- <div class="medium-9 large-10 medium-push-3 large-push-2 columns">
-
-<article class="docs-component" id="docs-flexbox">
-
-<a href="#docs-menu" class="small secondary expanded button hide-for-medium">Jump to Nav</a>
-
-<header>
- <h1 class="docs-page-title">Flexbox</h1>
-
-
- <p class="lead docs-page-lead">For browsers with cutting-edge support, some of Foundation's key components can be converted to flexbox.</p>
-
- <ul class="menu simple docs-contribute-menu">
- <li><a href="https://github.com/zurb/foundation-sites/edit/master/docs/pages/flexbox.md" target="_blank"><i class="fi-pencil"></i>Edit this Page</a></li>
- <li><a href="https://github.com/zurb/foundation-sites/issues/new?title=%5BFlexbox%5D%20ISSUE%20NAME%20HERE" target="_blank"><i class="fi-social-github"></i>Report a Bug</a></li>
- <li><a href="https://get.foundation/forum" target="_blank"><i class="fi-comment"></i>Get Help</a></li>
- </ul>
-</header>
-
-<hr>
-
-<div class="row">
-
-<div class="large-9 columns" id="docs">
-
-<p>Foundation components use a combination of floats, vertical alignment, table cells, and various other CSS hacks to get layouts looking right. These days, there's a better way... if you have the browser support!</p>
-<p>Enabling <strong>flexbox mode</strong> replaces those hacks with flexbox properties, streamlining how layouts are made, and making sizing and alignment of elements much easier.</p>
-<p>Flexbox mode is only supported these browsers:</p>
-<ul>
-<li>The latest Chrome and Firefox</li>
-<li>Safari 6+</li>
-<li>IE 10+</li>
-<li>iOS 7+</li>
-<li>Android 4.4+</li>
-</ul>
-<hr>
-<h2 id="enabling-flexbox-mode" class="docs-heading" data-magellan-target="enabling-flexbox-mode">Enabling Flexbox Mode<a class="docs-heading-icon" href="#enabling-flexbox-mode"></a></h2><p>If you're using the CSS version of Foundation, you can generate a <a href="https://get.foundation/sites/download">custom download of Foundation</a> with flexbox mode enabled. If you're using the Sass version of Foundation, you can enable flexbox mode two ways:</p>
-<p>If you use the <code>foundation-everything()</code> mixin in your main Sass file, pass in the parameter <code>true</code> to enable flexbox mode.</p>
-<div class="docs-code" data-docs-code><pre><code class="scss">@<span class="hljs-keyword">include</span> foundation-everything(true);</code></pre></div><p>If you included each component manually (like our starter projects do), open your settings file (basic template: scss/_settings.scss, ZURB template: src/assets/scss/_settings.scss) and set <code>$global-flexbox</code> to <code>true</code>, and remove the <code>@include</code> for the float grid and replace it with the one for the flex grid, along with the helper classes (basic template: scss/app.scss, ZURB template: src/assets/scss/app.scss):</p>
-<div class="docs-code" data-docs-code><pre><code class="scss"><span class="hljs-variable">$global-flexbox</span>: true;
-
-<span class="hljs-comment">// @include foundation-grid;</span>
-@<span class="hljs-keyword">include</span> foundation-flex-grid;
-@<span class="hljs-keyword">include</span> foundation-flex-classes;</code></pre></div><hr>
-<h2 id="supported-components" class="docs-heading" data-magellan-target="supported-components">Supported Components<a class="docs-heading-icon" href="#supported-components"></a></h2><p>Besides the flex grid, these components have flexbox modes:</p>
-<ul>
-<li><a href="button-group.html">Button group</a></li>
-<li><a href="forms.html#inline-labels-and-buttons">Input group</a></li>
-<li><a href="menu.html">Menu</a></li>
-<li><a href="top-bar.html">Top bar</a></li>
-<li><a href="media-object.html">Media object</a></li>
-<li><a href="off-canvas.html#title-bar">Title bar</a></li>
-</ul>
-<p>In general, all of the components work exactly the same. However, a few of them require slight changes to CSS classes used to work properly. Refer to the documentation for each to find out what's different.</p>
-<hr>
-<h2 id="helper-classes" class="docs-heading" data-magellan-target="helper-classes">Helper Classes<a class="docs-heading-icon" href="#helper-classes"></a></h2><p>Flexbox makes horizontal and vertical alignment painless, through the CSS properties <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-items"><code>align-content</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-self"><code>align-self</code></a>, and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content"><code>justify-content</code></a>. Foundation includes a handful of classes for these properties, which work with any flexbox-enabled component.</p>
-<p>To understand how these classes work, you need to understand the parent-child relationship created with flexbox. An element with <code>display: flex</code> is a <em>flex parent</em>, and can horizontally or vertically align its children. All immediate children of the flex parent are <em>flex children</em>. A flex child can vertically align itself.</p>
-<p>Here's a basic example: when using the grid, a row is a flex parent, and a column is a flex child.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div><hr>
-<h3 id="horizontal-alignment" class="docs-heading">Horizontal Alignment<a class="docs-heading-icon" href="#horizontal-alignment"></a></h3><p>Horizontal alignment classes are applied to flex parents. Left alignment is the default, but you can use one of these classes to change this:</p>
-<ul>
-<li><code>.align-right</code></li>
-<li><code>.align-center</code></li>
-<li><code>.align-justify</code></li>
-<li><code>.align-spaced</code></li>
-</ul>
-<div class="docs-code-live">
- <div class="text-center">
- <div class="row">
- <div class="column small-4">Aligned to</div>
- <div class="column small-4">the left</div>
- </div>
- <div class="row align-right">
- <div class="column small-4">Aligned to</div>
- <div class="column small-4">the right</div>
- </div>
- <div class="row align-center">
- <div class="column small-4">Aligned to</div>
- <div class="column small-4">the center</div>
- </div>
- <div class="row align-justify">
- <div class="column small-4">Aligned to</div>
- <div class="column small-4">the edges</div>
- </div>
- <div class="row align-spaced">
- <div class="column small-4">Aligned to</div>
- <div class="column small-4">the space around</div>
- </div>
- </div>
-</div>
-
-<p>You might be wondering what the difference between <code>.align-justify</code> and <code>.align-spaced</code> is. A justified grid (<code>justify-content: space-between</code>) evenly distributes the space <em>between</em> each column. The first and last columns pin to the edge of the grid.</p>
-<p>A spaced grid (<code>justify-content: space-around</code>) evenly distributes the space <em>around</em> each column. This means there will always be space to the left of the first column, and to the right of the last column.</p>
-<p>The horizontal alignment classes are shorthands for the <code>justify-content</code> CSS property. <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content">Learn more about <code>justify-content</code></a>.</p>
-<hr>
-<h3 id="vertical-alignment" class="docs-heading">Vertical Alignment<a class="docs-heading-icon" href="#vertical-alignment"></a></h3><p>Vertical alignment can be applied to a flex parent—which will align all the children automatically—or to a flex child, which will align only that element.</p>
-<p>Stretch alignment is the default. To set parent alignment, use these classes:</p>
-<ul>
-<li><code>.align-top</code></li>
-<li><code>.align-middle</code></li>
-<li><code>.align-bottom</code></li>
-<li><code>.align-stretch</code></li>
-</ul>
-<div class="primary callout">
- <p>Note that with vertical alignment, we use the term "middle" for the midpoint, while with horizontal alignment, we use the term "center". Otherwise, we'd have two CSS classes with the same name, but different functionality.</p>
-</div>
-
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row align-middle"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>></span>I'm in the middle!<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>></span>I am as well, but I have so much text I take up more space! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis facere ducimus earum minus, inventore, ratione doloremque deserunt neque perspiciatis accusamus explicabo soluta, quod provident distinctio aliquam omnis? Labore, ullam possimus.<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="row align-middle">
- <div class="columns">I'm in the middle!</div>
- <div class="columns">I am as well, but I have so much text I take up more space! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis facere ducimus earum minus, inventore, ratione doloremque deserunt neque perspiciatis accusamus explicabo soluta, quod provident distinctio aliquam omnis? Labore, ullam possimus.</div>
-</div></div><div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row align-stretch"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>></span>These colums have the same height.<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>></span>That's right, equal-height columns are possible with Flexbox too! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, tempora. Impedit eius officia possimus laudantium? Molestiae eaque, sapiente atque doloremque placeat! In sint, fugiat saepe sunt dolore tempore amet cupiditate.<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="row align-stretch">
- <div class="columns">These colums have the same height.</div>
- <div class="columns">That's right, equal-height columns are possible with Flexbox too! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, tempora. Impedit eius officia possimus laudantium? Molestiae eaque, sapiente atque doloremque placeat! In sint, fugiat saepe sunt dolore tempore amet cupiditate.</div>
-</div></div><hr>
-<p>To align an individual child, use the below classes. They use the same alignment terms as the parent-level classes, but the classes start with <code>.align-self-</code> instead of <code>.align-</code>.</p>
-<ul>
-<li><code>.align-self-top</code></li>
-<li><code>.align-self-middle</code></li>
-<li><code>.align-self-bottom</code></li>
-<li><code>.align-self-stretch</code></li>
-</ul>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column align-self-bottom"</span>></span>Align bottom<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column align-self-middle"</span>></span>Align middle<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column align-self-top"</span>></span>Align top. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non harum laborum cum voluptate vel, eius adipisci similique dignissimos nobis at excepturi incidunt fugit molestiae quaerat, consequuntur porro temporibus. Nisi, ex?<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="row">
- <div class="column align-self-bottom">Align bottom</div>
- <div class="column align-self-middle">Align middle</div>
- <div class="column align-self-top">Align top. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non harum laborum cum voluptate vel, eius adipisci similique dignissimos nobis at excepturi incidunt fugit molestiae quaerat, consequuntur porro temporibus. Nisi, ex?</div>
-</div></div><hr>
-<h2 id="helper-mixins" class="docs-heading" data-magellan-target="helper-mixins">Helper Mixins<a class="docs-heading-icon" href="#helper-mixins"></a></h2><p>If you're using the Sass version of Foundation, you can access the above helpers as mixins as well.</p>
-<p>For parent-level alignment, use <code>flex-align()</code>. You can pass in a horizontal alignment (<code>$x</code>), vertical alignment (<code>$y</code>), or both.</p>
-<div class="docs-code" data-docs-code><pre><code class="scss"><span class="hljs-selector-class">.container</span> {
- @<span class="hljs-keyword">include</span> flex-align(<span class="hljs-variable">$x</span>: center, <span class="hljs-variable">$y</span>: stretch);
-}</code></pre></div><p>For child-level alignment, use <code>flex-align-self()</code>. You can pass in any horizontal alignment.</p>
-<div class="docs-code" data-docs-code><pre><code class="scss"><span class="hljs-selector-class">.sidebar</span> {
- @<span class="hljs-keyword">include</span> flex-align-self(bottom);
-}</code></pre></div><p>Interested in building your own flexbox-ey component? Use the <code>flex()</code> mixin to get started.</p>
-<div class="docs-code" data-docs-code><pre><code class="scss"><span class="hljs-selector-class">.flexish-thang</span> {
- @<span class="hljs-keyword">include</span> flex;
- @<span class="hljs-keyword">include</span> flex-align(center, middle);
-}</code></pre></div>
-
-<hr>
-<section>
- <h2 id="sass-reference" class="docs-heading" data-magellan-target="sass-reference">Sass Reference<a class="docs-heading-icon" href="#sass-reference"></a></h2>
-
-
-
-
- <section>
- <h3 id="sass-mixins" class="docs-heading">Mixins<a class="docs-heading-icon" href="#sass-mixins"></a></h3>
-
- <p>We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.</p>
-
-
- <section >
- <h4 id="flex" class="docs-heading">flex<a class="docs-heading-icon" href="#flex"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> flex;</code></pre>
- </div>
-
- <p>Enables flexbox by adding <code>display: flex</code> to the element.</p>
-
-
-
-
-
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="flex-align" class="docs-heading">flex-align<a class="docs-heading-icon" href="#flex-align"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> flex-align(<span class="hljs-variable">$x</span>, <span class="hljs-variable">$y</span>);</code></pre>
- </div>
-
- <p>Horizontally or vertically aligns the items within a flex container.</p>
-
-
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$x</code></td>
- <td>Keyword</td>
- <td><code>null</code></td>
- <td><p>Horizontal alignment to use. Can be <code>left</code>, <code>right</code>, <code>center</code>, <code>justify</code>, or <code>spaced</code>. Or, set it to <code>null</code> (the default) to not set horizontal alignment.</p>
-</td>
- </tr>
- <tr>
- <td><code>$y</code></td>
- <td>Keyword</td>
- <td><code>null</code></td>
- <td><p>Vertical alignment to use. Can be <code>top</code>, <code>bottom</code>, <code>middle</code>, or <code>stretch</code>. Or, set it to <code>null</code> (the default) to not set vertical alignment.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="flex-align-self" class="docs-heading">flex-align-self<a class="docs-heading-icon" href="#flex-align-self"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> flex-align-self(<span class="hljs-variable">$y</span>);</code></pre>
- </div>
-
- <p>Vertically align a single column within a flex row. Apply this mixin to a flex column.</p>
-
-
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$y</code></td>
- <td>Keyword</td>
- <td><code>null</code></td>
- <td><p>Vertical alignment to use. Can be <code>top</code>, <code>bottom</code>, <code>middle</code>, or <code>stretch</code>. Or, set it to <code>null</code> (the default) to not set vertical alignment.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="flex-order" class="docs-heading">flex-order<a class="docs-heading-icon" href="#flex-order"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> flex-order(<span class="hljs-variable">$order</span>);</code></pre>
- </div>
-
- <p>Changes the source order of a flex child. Children with lower numbers appear first in the layout.</p>
-
-
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$order</code></td>
- <td>Number</td>
- <td><code>0</code></td>
- <td><p>Order number to apply.</p>
-</td>
- </tr>
- </table>
- </section>
-
-
-
-
-
- </section>
-
-
-</section>
-
-
-<!-- <hr> -->
-<!-- <section class="docs-building-blocks">
- <h2 id="building-blocks" class="docs-heading" data-magellan-target="building-blocks">Building Blocks<a class="docs-heading-icon" href="#building-blocks"></a></h2>
-
- <p><a href="http://zurb.com/building-blocks">Building Blocks</a> is a ZURB-curated resource with useful code snippets that use Foundation components. Here are a few for this component:</p>
-
- <div class="warning callout">
- <p>These are placeholder items. If you have ideas for building blocks for this component, <a href="https://github.com/zurb/foundation-sites-6/issues/118">we're taking ideas on GitHub</a>.</p>
- </div>
-
- <div data-building-blocks></div>
-</section> -->
-
-</div>
-
-<div class="large-3 columns" data-sticky-container>
- <nav class="columns docs-toc-wrap" data-sticky data-anchor="docs" data-sticky-on="large">
- <div class="docs-toc hide" id="docsTOC">
- <ul class="vertical menu" data-docs-toc>
- <li class="docs-nav-title">On this page:</li>
- </ul>
- </div>
- <div class="foundation-toc-ad-unit" id="TOCAdUnit">
- </div>
- </nav>
-</div>
-
-</div>
-
-</article>
-
- </div>
- <div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
- <ul class="vertical menu docs-nav" id="docs-menu">
- <p class="docs-nav-version">
- <span data-docs-version></span>
- <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">(Changelog)</a>
- </p>
-
- <li class="docs-nav-title">Getting Started</li>
- <li><a href="installation.html">Installation</a></li>
- <li><a href="starter-projects.html">Starter Projects</a></li>
- <li><a href="compatibility.html">Compatibility</a></li>
- <li><a href="accessibility.html">Accessibility</a></li>
- <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
-
- <li class="docs-nav-title">Setup</li>
- <li><a href="global.html">Global Styles</a></li>
- <li><a href="rtl.html">Right-to-Left Support</a></li>
- <li class="current"><a href="flexbox.html">Flexbox</a></li>
- <li><a href="sass.html">Sass</a></li>
- <li><a href="javascript.html">JavaScript</a></li>
- <li><a href="javascript-utilities.html">JavaScript Utilities</a></li>
- <li><a href="media-queries.html">Media Queries</a></li>
-
- <li class="docs-nav-title">General</li>
- <li><a href="grid.html">Grid</a></li>
- <li><a href="flex-grid.html">Flex Grid</a></li>
- <li><a href="forms.html">Forms</a></li>
- <li><a href="visibility.html">Visibility Classes</a></li>
- <li><a href="float-classes.html">Float Classes</a></li>
-
- <li class="docs-nav-title">Typography</li>
- <li><a href="typography-base.html">Base Styles</a></li>
- <li><a href="typography-helpers.html">Helper Classes</a></li>
-
- <li class="docs-nav-title">Controls</li>
- <li><a href="button.html">Button</a></li>
- <li><a href="button-group.html">Button Group</a></li>
- <li><a href="close-button.html">Close Button</a></li>
- <li><a href="slider.html">Slider <span class="label">JS</span></a></li>
- <li><a href="switch.html">Switch</a></li>
-
- <li class="docs-nav-title">Navigation</li>
- <li><a href="navigation.html">Overview</a></li>
- <li><a href="menu.html">Menu</a></li>
- <li><a href="dropdown-menu.html">Dropdown Menu <span class="label">JS</span></a></li>
- <li><a href="drilldown-menu.html">Drilldown Menu <span class="label">JS</span></a></li>
- <li><a href="accordion-menu.html">Accordion Menu <span class="label">JS</span></a></li>
- <li><a href="top-bar.html">Top Bar</a></li>
- <li><a href="responsive-navigation.html">Responsive Navigation</a></li>
- <li><a href="magellan.html">Magellan <span class="label">JS</span></a></li>
- <li><a href="pagination.html">Pagination</a></li>
- <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
-
- <li class="docs-nav-title">Containers</li>
- <li><a href="accordion.html">Accordion <span class="label">JS</span></a></li>
- <li><a href="callout.html">Callout</a></li>
- <li><a href="dropdown.html">Dropdown <span class="label">JS</span></a></li>
- <li><a href="media-object.html">Media Object</a></li>
- <li><a href="off-canvas.html">Off-canvas <span class="label">JS</span></a></li>
- <li><a href="reveal.html">Reveal <span class="label">JS</span> <small>Modal</small></a></li>
- <li><a href="table.html">Table</a></li>
- <li><a href="tabs.html">Tabs <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Media</li>
- <li><a href="badge.html">Badge</a></li>
- <li><a href="flex-video.html">Flex Video</a></li>
- <li><a href="label.html">Label</a></li>
- <li><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
- <li><a href="progress-bar.html">Progress Bar</a></li>
- <li><a href="thumbnail.html">Thumbnail</a></li>
- <li><a href="tooltip.html">Tooltip <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Plugins</li>
- <li><a href="abide.html">Abide <small>Form Validation</small></a></li>
- <li><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
- <li><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
- <li><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
- <li><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
-
- <li class="docs-nav-title">Sass</li>
- <li><a href="sass-functions.html">Functions</a></li>
- <li><a href="sass-mixins.html">Mixins</a></li>
-
- <li class="docs-nav-title">Libraries</li>
- <li><a href="motion-ui.html">Motion UI</a></li>
- <li><a href="panini.html">Panini</a></li>
- <li><a href="style-sherpa.html">Style Sherpa</a></li>
-
- <li class="docs-nav-title">Older Versions</li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
- <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
- <li><a href="https://get.foundation/sites/docs/v/3.2.5/">Foundation 3</a></li>
- <li><a href="https://get.foundation/sites/docs/v/2.2.1/">Foundation 2</a></li>
- </ul>
-
- </div>
- </div>
-
- <!-- Small Business(Docs) -->
- <section id="studiosCallout">
- <div class="row">
- <div class="medium-4 large-4 columns">
- <img src="https://get.foundation/assets/img/smallbiz-footer.svg" alt="">
- </div>
- <div class="medium-8 large-8 columns banner-info">
- <div class="row column property-label">ZURB Foundation</div>
- <h3 class="light">Yeah, we can help with that.</h3>
- <p class="lead"> We’ll collaborate with your team throughout the entire project life cycle. We’ll take your concept and move it through ideation, hi-fi wireframes, visual design and code, all while informing you on the whys and hows along the way.</p>
- <div class="course-buttons">
- <a href="https://get.foundation/get-involved/premium-support.html" class="studios button" data-zcom-event="studios_foundation_click" id="foundationSmallV1">Show Me How →</a>
- </div>
- </div>
- </div>
- </section>
-
- <div class="docs-newsletter">
- <div class="row">
- <div class="medium-7 large-8 columns">
- <a target="_blank" href="https://get.foundation/learn/responsive-reading.html">
- <h5 class="">Download ZURB’s 21 Responsive Trends That Will Shape 2017</h5>
- <p style="margin-bottom: 0;">Stay informed with amazing responsive trends each month from ZURB.</p>
- </a>
- </div>
- <div class="medium-5 large-4 footer-signup-form columns">
- <a style="margin-bottom: 0;" target="_blank" href="https://get.foundation/learn/responsive-reading.html" class="button expanded">Download the PDF</a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-top bg-fblue">
- <div class="row property">
- <div class="medium-4 columns">
- <div class="property-info">
- <h3>Foundation for Sites</h3>
- <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
- </p>
- </div>
- </div>
-
- <div class="medium-8 columns">
- <div class="row collapse">
- <div class="medium-4 columns">
- <div class="learn-links">
- <h4 class="hide-for-small">Want more?</h4>
- <ul>
- <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
- <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
- <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
- <li><a href="http://zurb.com/university/courses">Training</a></li>
- <li><a href="http://zurb.com/library">Design Resources</a></li>
- </ul>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="support-links">
- <h4 class="hide-for-small">Talk to us</h4>
- <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
- <p><a href="https://get.foundation/get-involved/contribute.html">Get involved in<br>our amazing community.</a></p>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="connect-links">
- <h4 class="hide-for-small">Stay Updated</h4>
- <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
- <a href="http://zurb.com/news" class="small button">Stay Connected</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="row global">
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/studios" class="footer-link-block services">
- <span class="title">Studios</span>
- <span>Helping more than 200 startups succeed since 1998.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="https://get.foundation/" class="footer-link-block foundation">
- <span class="title">Foundation</span>
- <span>The most advanced front-end framework in the world.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/notable" class="footer-link-block apps">
- <span class="title">Notable Design Apps</span>
- <span>Prototype, iterate and collect feedback on your products.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/university" class="footer-link-block expo">
- <span class="title">University</span>
- <span>Ideas, thoughts and design resources shared with you.</span>
- </a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-bottom">
- <div class="row">
- <div class="medium-4 medium-push-8 columns">
- <ul class="home-social">
- <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
- <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
- <li><a href="http://zurb.com/contact" class="mail"></a></li>
- </ul>
- </div>
- <div class="medium-8 medium-pull-4 columns">
- <a href="http://www.zurb.com" class="zurb-logo regular"></a>
- <ul class="zurb-links">
- <li><a href="http://zurb.com/about">About</a></li>
- <li><a href="http://zurb.com/blog">Blog</a></li>
- <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
- <li><a href="http://zurb.com/contact">Contact</a></li>
- <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
- </ul>
- <p class="copyright">© 1998‐2016 ZURB, Inc. All rights reserved.</p>
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- <script>
- var _gaq = _gaq || [];
- _gaq.push(
- ['_setAccount', 'UA-2195009-2'],
- ['_trackPageview'],
- ['b._setAccount', 'UA-2195009-27'],
- ['b._trackPageview']
- );
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
-
- <script src="assets/js/vendor.js?hash=05da17882a2bfb59e91cb1f0ab6fccbe"></script>
- <script src="assets/js/foundation.js?hash=c1d474449d7ea6e2c488b2868c12bdf3"></script>
- <script src="assets/js/docs.js?hash=7874cb9437981ef140db6c54b6d0631b"></script>
- <script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
-</body>
-</html>
+++ /dev/null
-<!doctype html>
-<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
-<html class="no-js" lang="en" dir="ltr">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="Foundation includes a handful of helpful float classes to add common positioning behaviors to elements.">
- <link rel="icon" href="assets/img/icons/foundation-favicon.ico" type="image/x-icon">
- <title>Foundation for Sites 6 Docs | Float Classes</title>
- <link href="assets/css/docs.css?hash=f0d7b93b87a47526f08482d97f463862" rel="stylesheet" />
- <link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=4e7082229e491ae3035d3e638b08ee0c" rel="stylesheet">
- <!-- <link rel="stylesheet" href="./node_modules/motion-ui/dist/motion-ui.css" /> -->
-</head>
-<body>
-
- <div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
-
- <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="mobile-ofc vertical menu">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
-
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/support.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/sort/unanswered">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
- </div>
-
- <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="vertical menu">
- <li><a href="#">Foundation</a></li>
- <li><a href="#">Dot</a></li>
- <li><a href="#">ZURB</a></li>
- <li><a href="#">Com</a></li>
- <li><a href="#">Slash</a></li>
- <li><a href="#">Sites</a></li>
- </ul>
- </div>
-
-
- <div class="off-canvas-content" data-off-canvas-content>
- <!-- Info Banner For Announcements or Links -->
- <!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
- <div class="info">
- <h5>Foundation 6 is here!</h5>
- </div>
- </a> -->
-
- <nav class="marketing-topbar show-for-medium">
-
- <ul class="menu">
- <li class="topbar-title"><a href="https://get.foundation/index.html"><img src="assets/img/logos/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
- </ul>
-
- <ul class="dropdown menu" data-dropdown-menu data-click-open="false">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/" target="_blank">F5 Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="https://get.foundation/emails/docs/" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
-
- </nav>
-
- <div class="title-bar hide-for-medium">
- <div class="title-bar-left">
- <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
- <span class="title-bar-title">Foundation</span>
- </div>
- </div>
-
-
- <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
-
- <div class="expanded row">
- <div class="medium-9 large-10 medium-push-3 large-push-2 columns">
-
-<article class="docs-component" id="docs-float-classes">
-
-<a href="#docs-menu" class="small secondary expanded button hide-for-medium">Jump to Nav</a>
-
-<header>
- <h1 class="docs-page-title">Float Classes</h1>
-
-
- <p class="lead docs-page-lead">Foundation includes a handful of helpful float classes to add common positioning behaviors to elements.</p>
-
- <ul class="menu simple docs-contribute-menu">
- <li><a href="https://github.com/zurb/foundation-sites/edit/master/docs/pages/float-classes.md" target="_blank"><i class="fi-pencil"></i>Edit this Page</a></li>
- <li><a href="https://github.com/zurb/foundation-sites/issues/new?title=%5BFloat%20Classes%5D%20ISSUE%20NAME%20HERE" target="_blank"><i class="fi-social-github"></i>Report a Bug</a></li>
- <li><a href="https://get.foundation/forum" target="_blank"><i class="fi-comment"></i>Get Help</a></li>
- </ul>
-</header>
-
-<hr>
-
-<div class="row">
-
-<div class="large-9 columns" id="docs">
-
-<h2 id="float-left-right" class="docs-heading" data-magellan-target="float-left-right">Float Left/Right<a class="docs-heading-icon" href="#float-left-right"></a></h2><p>You can change the float behavior of an element by adding the <code>.float-left</code> or <code>.float-right</code> classes to an element. To clear floats, add the class <code>.clearfix</code> to the parent element.</p>
-<div class="warning callout">
- <p>Float classes don't flip direction in a <a href="rtl.html">right-to-left</a> environment—<code>left</code> always means left, and <code>right</code> always means right.</p>
-</div>
-
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"callout clearfix"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button float-left"</span>></span>Left<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button float-right"</span>></span>Right<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="callout clearfix">
- <a class="button float-left">Left</a>
- <a class="button float-right">Right</a>
-</div></div><hr>
-<h2 id="float-center" class="docs-heading" data-magellan-target="float-center">Float Center<a class="docs-heading-icon" href="#float-center"></a></h2><p>Okay, it's not <em>really</em> a float, but you can add the <code>.float-center</code> class to an element to engage the automatic margin centering trick. Note that this will only work on elements with an absolute width, which means not a percentage or <code>auto</code> width.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"assets/img/generic/voyager.jpg"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"float-center"</span>></span></code></pre></div>
-
-<div class="docs-code-live"><img src="assets/img/generic/voyager.jpg" class="float-center"></div>
-
-
-
-
-</div>
-
-<div class="large-3 columns" data-sticky-container>
- <nav class="columns docs-toc-wrap" data-sticky data-anchor="docs" data-sticky-on="large">
- <div class="docs-toc hide" id="docsTOC">
- <ul class="vertical menu" data-docs-toc>
- <li class="docs-nav-title">On this page:</li>
- </ul>
- </div>
- <div class="foundation-toc-ad-unit" id="TOCAdUnit">
- </div>
- </nav>
-</div>
-
-</div>
-
-</article>
-
- </div>
- <div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
- <ul class="vertical menu docs-nav" id="docs-menu">
- <p class="docs-nav-version">
- <span data-docs-version></span>
- <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">(Changelog)</a>
- </p>
-
- <li class="docs-nav-title">Getting Started</li>
- <li><a href="installation.html">Installation</a></li>
- <li><a href="starter-projects.html">Starter Projects</a></li>
- <li><a href="compatibility.html">Compatibility</a></li>
- <li><a href="accessibility.html">Accessibility</a></li>
- <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
-
- <li class="docs-nav-title">Setup</li>
- <li><a href="global.html">Global Styles</a></li>
- <li><a href="rtl.html">Right-to-Left Support</a></li>
- <li><a href="flexbox.html">Flexbox</a></li>
- <li><a href="sass.html">Sass</a></li>
- <li><a href="javascript.html">JavaScript</a></li>
- <li><a href="javascript-utilities.html">JavaScript Utilities</a></li>
- <li><a href="media-queries.html">Media Queries</a></li>
-
- <li class="docs-nav-title">General</li>
- <li><a href="grid.html">Grid</a></li>
- <li><a href="flex-grid.html">Flex Grid</a></li>
- <li><a href="forms.html">Forms</a></li>
- <li><a href="visibility.html">Visibility Classes</a></li>
- <li class="current"><a href="float-classes.html">Float Classes</a></li>
-
- <li class="docs-nav-title">Typography</li>
- <li><a href="typography-base.html">Base Styles</a></li>
- <li><a href="typography-helpers.html">Helper Classes</a></li>
-
- <li class="docs-nav-title">Controls</li>
- <li><a href="button.html">Button</a></li>
- <li><a href="button-group.html">Button Group</a></li>
- <li><a href="close-button.html">Close Button</a></li>
- <li><a href="slider.html">Slider <span class="label">JS</span></a></li>
- <li><a href="switch.html">Switch</a></li>
-
- <li class="docs-nav-title">Navigation</li>
- <li><a href="navigation.html">Overview</a></li>
- <li><a href="menu.html">Menu</a></li>
- <li><a href="dropdown-menu.html">Dropdown Menu <span class="label">JS</span></a></li>
- <li><a href="drilldown-menu.html">Drilldown Menu <span class="label">JS</span></a></li>
- <li><a href="accordion-menu.html">Accordion Menu <span class="label">JS</span></a></li>
- <li><a href="top-bar.html">Top Bar</a></li>
- <li><a href="responsive-navigation.html">Responsive Navigation</a></li>
- <li><a href="magellan.html">Magellan <span class="label">JS</span></a></li>
- <li><a href="pagination.html">Pagination</a></li>
- <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
-
- <li class="docs-nav-title">Containers</li>
- <li><a href="accordion.html">Accordion <span class="label">JS</span></a></li>
- <li><a href="callout.html">Callout</a></li>
- <li><a href="dropdown.html">Dropdown <span class="label">JS</span></a></li>
- <li><a href="media-object.html">Media Object</a></li>
- <li><a href="off-canvas.html">Off-canvas <span class="label">JS</span></a></li>
- <li><a href="reveal.html">Reveal <span class="label">JS</span> <small>Modal</small></a></li>
- <li><a href="table.html">Table</a></li>
- <li><a href="tabs.html">Tabs <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Media</li>
- <li><a href="badge.html">Badge</a></li>
- <li><a href="flex-video.html">Flex Video</a></li>
- <li><a href="label.html">Label</a></li>
- <li><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
- <li><a href="progress-bar.html">Progress Bar</a></li>
- <li><a href="thumbnail.html">Thumbnail</a></li>
- <li><a href="tooltip.html">Tooltip <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Plugins</li>
- <li><a href="abide.html">Abide <small>Form Validation</small></a></li>
- <li><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
- <li><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
- <li><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
- <li><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
-
- <li class="docs-nav-title">Sass</li>
- <li><a href="sass-functions.html">Functions</a></li>
- <li><a href="sass-mixins.html">Mixins</a></li>
-
- <li class="docs-nav-title">Libraries</li>
- <li><a href="motion-ui.html">Motion UI</a></li>
- <li><a href="panini.html">Panini</a></li>
- <li><a href="style-sherpa.html">Style Sherpa</a></li>
-
- <li class="docs-nav-title">Older Versions</li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
- <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
- <li><a href="https://get.foundation/sites/docs/v/3.2.5/">Foundation 3</a></li>
- <li><a href="https://get.foundation/sites/docs/v/2.2.1/">Foundation 2</a></li>
- </ul>
-
- </div>
- </div>
-
- <!-- Small Business(Docs) -->
- <section id="studiosCallout">
- <div class="row">
- <div class="medium-4 large-4 columns">
- <img src="https://get.foundation/assets/img/smallbiz-footer.svg" alt="">
- </div>
- <div class="medium-8 large-8 columns banner-info">
- <div class="row column property-label">ZURB Foundation</div>
- <h3 class="light">Yeah, we can help with that.</h3>
- <p class="lead"> We’ll collaborate with your team throughout the entire project life cycle. We’ll take your concept and move it through ideation, hi-fi wireframes, visual design and code, all while informing you on the whys and hows along the way.</p>
- <div class="course-buttons">
- <a href="https://get.foundation/get-involved/premium-support.html" class="studios button" data-zcom-event="studios_foundation_click" id="foundationSmallV1">Show Me How →</a>
- </div>
- </div>
- </div>
- </section>
-
- <div class="docs-newsletter">
- <div class="row">
- <div class="medium-7 large-8 columns">
- <a target="_blank" href="https://get.foundation/learn/responsive-reading.html">
- <h5 class="">Download ZURB’s 21 Responsive Trends That Will Shape 2017</h5>
- <p style="margin-bottom: 0;">Stay informed with amazing responsive trends each month from ZURB.</p>
- </a>
- </div>
- <div class="medium-5 large-4 footer-signup-form columns">
- <a style="margin-bottom: 0;" target="_blank" href="https://get.foundation/learn/responsive-reading.html" class="button expanded">Download the PDF</a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-top bg-fblue">
- <div class="row property">
- <div class="medium-4 columns">
- <div class="property-info">
- <h3>Foundation for Sites</h3>
- <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
- </p>
- </div>
- </div>
-
- <div class="medium-8 columns">
- <div class="row collapse">
- <div class="medium-4 columns">
- <div class="learn-links">
- <h4 class="hide-for-small">Want more?</h4>
- <ul>
- <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
- <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
- <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
- <li><a href="http://zurb.com/university/courses">Training</a></li>
- <li><a href="http://zurb.com/library">Design Resources</a></li>
- </ul>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="support-links">
- <h4 class="hide-for-small">Talk to us</h4>
- <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
- <p><a href="https://get.foundation/get-involved/contribute.html">Get involved in<br>our amazing community.</a></p>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="connect-links">
- <h4 class="hide-for-small">Stay Updated</h4>
- <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
- <a href="http://zurb.com/news" class="small button">Stay Connected</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="row global">
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/studios" class="footer-link-block services">
- <span class="title">Studios</span>
- <span>Helping more than 200 startups succeed since 1998.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="https://get.foundation/" class="footer-link-block foundation">
- <span class="title">Foundation</span>
- <span>The most advanced front-end framework in the world.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/notable" class="footer-link-block apps">
- <span class="title">Notable Design Apps</span>
- <span>Prototype, iterate and collect feedback on your products.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/university" class="footer-link-block expo">
- <span class="title">University</span>
- <span>Ideas, thoughts and design resources shared with you.</span>
- </a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-bottom">
- <div class="row">
- <div class="medium-4 medium-push-8 columns">
- <ul class="home-social">
- <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
- <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
- <li><a href="http://zurb.com/contact" class="mail"></a></li>
- </ul>
- </div>
- <div class="medium-8 medium-pull-4 columns">
- <a href="http://www.zurb.com" class="zurb-logo regular"></a>
- <ul class="zurb-links">
- <li><a href="http://zurb.com/about">About</a></li>
- <li><a href="http://zurb.com/blog">Blog</a></li>
- <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
- <li><a href="http://zurb.com/contact">Contact</a></li>
- <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
- </ul>
- <p class="copyright">© 1998‐2016 ZURB, Inc. All rights reserved.</p>
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- <script>
- var _gaq = _gaq || [];
- _gaq.push(
- ['_setAccount', 'UA-2195009-2'],
- ['_trackPageview'],
- ['b._setAccount', 'UA-2195009-27'],
- ['b._trackPageview']
- );
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
-
- <script src="assets/js/vendor.js?hash=cec606f292c17362cb2986b2f134fe11"></script>
- <script src="assets/js/foundation.js?hash=a5819e6dcda30891a85ac302ea5c9f3f"></script>
- <script src="assets/js/docs.js?hash=fed9b0d4c0365e6067da0f15903abb8c"></script>
- <script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
-</body>
-</html>
+++ /dev/null
-<!doctype html>
-<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
-<html class="no-js" lang="en" dir="ltr">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="We set out to create an easy, powerful and versatile form layout system. A combination of form styles and the Foundation grid means you can do almost anything.">
- <link rel="icon" href="assets/img/icons/foundation-favicon.ico" type="image/x-icon">
- <title>Foundation for Sites 6 Docs | Forms</title>
- <link href="assets/css/docs.css?hash=b147fa1a12c0151b8b514d6dc158514c" rel="stylesheet" />
- <link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=c02a06f5763b2dfe55459e113e1dc686" rel="stylesheet">
- <!-- <link rel="stylesheet" href="./node_modules/motion-ui/dist/motion-ui.css" /> -->
-</head>
-<body>
-
- <div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
-
- <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="mobile-ofc vertical menu">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
-
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/support.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/sort/unanswered">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
- </div>
-
- <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="vertical menu">
- <li><a href="#">Foundation</a></li>
- <li><a href="#">Dot</a></li>
- <li><a href="#">ZURB</a></li>
- <li><a href="#">Com</a></li>
- <li><a href="#">Slash</a></li>
- <li><a href="#">Sites</a></li>
- </ul>
- </div>
-
-
- <div class="off-canvas-content" data-off-canvas-content>
- <!-- Info Banner For Announcements or Links -->
- <!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
- <div class="info">
- <h5>Foundation 6 is here!</h5>
- </div>
- </a> -->
-
- <nav class="marketing-topbar show-for-medium">
-
- <ul class="menu">
- <li class="topbar-title"><a href="https://get.foundation/index.html"><img src="assets/img/logos/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
- </ul>
-
- <ul class="dropdown menu" data-dropdown-menu data-click-open="false">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/" target="_blank">F5 Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="https://get.foundation/emails/docs/" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
-
- </nav>
-
- <div class="title-bar hide-for-medium">
- <div class="title-bar-left">
- <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
- <span class="title-bar-title">Foundation</span>
- </div>
- </div>
-
-
- <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
-
- <div class="expanded row">
- <div class="medium-9 large-10 medium-push-3 large-push-2 columns">
-
-<article class="docs-component" id="docs-forms">
-
-<a href="#docs-menu" class="small secondary expanded button hide-for-medium">Jump to Nav</a>
-
-<header>
- <h1 class="docs-page-title">Forms</h1>
-
-
- <p class="lead docs-page-lead">We set out to create an easy, powerful and versatile form layout system. A combination of form styles and the Foundation grid means you can do almost anything.</p>
-
- <ul class="menu simple docs-contribute-menu">
- <li><a href="https://github.com/zurb/foundation-sites/edit/master/docs/pages/forms.md" target="_blank"><i class="fi-pencil"></i>Edit this Page</a></li>
- <li><a href="https://github.com/zurb/foundation-sites/issues/new?title=%5BForms%5D%20ISSUE%20NAME%20HERE" target="_blank"><i class="fi-social-github"></i>Report a Bug</a></li>
- <li><a href="https://get.foundation/forum" target="_blank"><i class="fi-comment"></i>Get Help</a></li>
- </ul>
-</header>
-
-<hr>
-
-<div class="row">
-
-<div class="large-9 columns" id="docs">
-
-<h2 id="form-basics" class="docs-heading" data-magellan-target="form-basics">Form Basics<a class="docs-heading-icon" href="#form-basics"></a></h2><p>Creating a form in Foundation is designed to be easy but extremely flexible. Forms are built with a combination of standard form elements, as well as grid rows and columns.</p>
-<hr>
-<h4 id="text-inputs" class="docs-heading">Text Inputs<a class="docs-heading-icon" href="#text-inputs"></a></h4><p>These input types create a text field: <code>text</code>, <code>date</code>, <code>datetime</code>, <code>datetime-local</code>, <code>email</code>, <code>month</code>, <code>number</code>, <code>password</code>, <code>search</code>, <code>tel</code>, <code>time</code>, <code>url</code>, and <code>week</code>.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">form</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"medium-6 columns"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Input Label
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">".medium-6.columns"</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"medium-6 columns"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Input Label
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">".medium-6.columns"</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">form</span>></span></code></pre></div>
-
-<div class="docs-code-live"><form>
- <div class="row">
- <div class="medium-6 columns">
- <label>Input Label
- <input type="text" placeholder=".medium-6.columns">
- </label>
- </div>
- <div class="medium-6 columns">
- <label>Input Label
- <input type="text" placeholder=".medium-6.columns">
- </label>
- </div>
- </div>
-</form></div><hr>
-<h4 id="number-inputs" class="docs-heading">Number Inputs<a class="docs-heading-icon" href="#number-inputs"></a></h4><p>In most desktop browsers, <code><input type="number"></code> elements will have up/down controls inside them, which increment and decrement the number inside the field. These are called <em>spin buttons</em>. You can disable them by setting the <code>$input-number-spinners</code> Sass variable to <code>false</code>.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">label</span>></span>
- How many puppies?
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"number"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"100"</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">label</span>></span></code></pre></div>
-
-<div class="docs-code-live"><label>
- How many puppies?
- <input type="number" value="100">
-</label></div><hr>
-<h4 id="text-areas" class="docs-heading">Text Areas<a class="docs-heading-icon" href="#text-areas"></a></h4><p>The <code><textarea></code> element creates a multi-line text input.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">label</span>></span>
- What books did you read over summer break?
- <span class="hljs-tag"><<span class="hljs-name">textarea</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"None"</span>></span><span class="hljs-tag"></<span class="hljs-name">textarea</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">label</span>></span></code></pre></div>
-
-<div class="docs-code-live"><label>
- What books did you read over summer break?
- <textarea placeholder="None"></textarea>
-</label></div><hr>
-<h4 id="select-menus" class="docs-heading">Select Menus<a class="docs-heading-icon" href="#select-menus"></a></h4><p>Use select menus to combine many choices into one menu.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">label</span>></span>Select Menu
- <span class="hljs-tag"><<span class="hljs-name">select</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"husker"</span>></span>Husker<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"starbuck"</span>></span>Starbuck<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"hotdog"</span>></span>Hot Dog<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"apollo"</span>></span>Apollo<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">select</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">label</span>></span></code></pre></div>
-
-<div class="docs-code-live"><label>Select Menu
- <select>
- <option value="husker">Husker</option>
- <option value="starbuck">Starbuck</option>
- <option value="hotdog">Hot Dog</option>
- <option value="apollo">Apollo</option>
- </select>
-</label></div><p>Add the <code>multiple</code> attribute to allow more than one option to be selected. Hold down the Ctrl (windows) / Command (Mac) button to select multiple options.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">label</span>></span>Multiple Select Menu
- <span class="hljs-tag"><<span class="hljs-name">select</span> <span class="hljs-attr">multiple</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"showboat"</span>></span>Showboat<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"redwing"</span>></span>Redwing<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"narcho"</span>></span>Narcho<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"hardball"</span>></span>Hardball<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">select</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">label</span>></span></code></pre></div>
-
-<div class="docs-code-live"><label>Multiple Select Menu
- <select multiple>
- <option value="showboat">Showboat</option>
- <option value="redwing">Redwing</option>
- <option value="narcho">Narcho</option>
- <option value="hardball">Hardball</option>
- </select>
-</label></div><hr>
-<h4 id="checkboxes-and-radio-buttons" class="docs-heading">Checkboxes and Radio Buttons<a class="docs-heading-icon" href="#checkboxes-and-radio-buttons"></a></h4><p>Use groups of checkboxes when the user may select multiple choices from a list, and use radio buttons when the user must select just one choice.</p>
-<p>Wrap a group of checkboxes or radio buttons in a <code><fieldset></code> element, and give them a common label using the <code><legend></code> element. Each individual control should also have its own label, created using a typical <code><label></code>.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">fieldset</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"large-6 columns"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">legend</span>></span>Choose Your Favorite<span class="hljs-tag"></<span class="hljs-name">legend</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"pokemon"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"Red"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"pokemonRed"</span> <span class="hljs-attr">required</span>></span><span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"pokemonRed"</span>></span>Red<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"pokemon"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"Blue"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"pokemonBlue"</span>></span><span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"pokemonBlue"</span>></span>Blue<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"pokemon"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"Yellow"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"pokemonYellow"</span>></span><span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"pokemonYellow"</span>></span>Yellow<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">fieldset</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">fieldset</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"large-6 columns"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">legend</span>></span>Check these out<span class="hljs-tag"></<span class="hljs-name">legend</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"checkbox1"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>></span><span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"checkbox1"</span>></span>Checkbox 1<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"checkbox2"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>></span><span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"checkbox2"</span>></span>Checkbox 2<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"checkbox3"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>></span><span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"checkbox3"</span>></span>Checkbox 3<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">fieldset</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="row">
- <fieldset class="large-6 columns">
- <legend>Choose Your Favorite</legend>
- <input type="radio" name="pokemon" value="Red" id="pokemonRed" required><label for="pokemonRed">Red</label>
- <input type="radio" name="pokemon" value="Blue" id="pokemonBlue"><label for="pokemonBlue">Blue</label>
- <input type="radio" name="pokemon" value="Yellow" id="pokemonYellow"><label for="pokemonYellow">Yellow</label>
- </fieldset>
- <fieldset class="large-6 columns">
- <legend>Check these out</legend>
- <input id="checkbox1" type="checkbox"><label for="checkbox1">Checkbox 1</label>
- <input id="checkbox2" type="checkbox"><label for="checkbox2">Checkbox 2</label>
- <input id="checkbox3" type="checkbox"><label for="checkbox3">Checkbox 3</label>
- </fieldset>
-</div></div><hr>
-<h4 id="fieldset-styles" class="docs-heading">Fieldset Styles<a class="docs-heading-icon" href="#fieldset-styles"></a></h4><p>To encourage their use as an accessibility tool, the <code><fieldset></code> element is no longer styled by default. Those styles are now contained in the <code>.fieldset</code> class.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">fieldset</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"fieldset"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">legend</span>></span>Check these out<span class="hljs-tag"></<span class="hljs-name">legend</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"checkbox12"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>></span><span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"checkbox12"</span>></span>Checkbox 1<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"checkbox22"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>></span><span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"checkbox22"</span>></span>Checkbox 2<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"checkbox32"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>></span><span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"checkbox32"</span>></span>Checkbox 3<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">fieldset</span>></span></code></pre></div>
-
-<div class="docs-code-live"><fieldset class="fieldset">
- <legend>Check these out</legend>
- <input id="checkbox12" type="checkbox"><label for="checkbox12">Checkbox 1</label>
- <input id="checkbox22" type="checkbox"><label for="checkbox22">Checkbox 2</label>
- <input id="checkbox32" type="checkbox"><label for="checkbox32">Checkbox 3</label>
-</fieldset></div><hr>
-<h2 id="help-text" class="docs-heading" data-magellan-target="help-text">Help Text<a class="docs-heading-icon" href="#help-text"></a></h2><p>Place help text below a field to clarify it's purpose. Whenever you use help text, give the text a unique ID, and add the attribute <code>aria-describedby</code> to the input.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">label</span>></span>Password
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"password"</span> <span class="hljs-attr">aria-describedby</span>=<span class="hljs-string">"passwordHelpText"</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"help-text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"passwordHelpText"</span>></span>Your password must have at least 10 characters, a number, and an Emoji.<span class="hljs-tag"></<span class="hljs-name">p</span>></span></code></pre></div>
-
-<div class="docs-code-live"><label>Password
- <input type="password" aria-describedby="passwordHelpText">
-</label>
-<p class="help-text" id="passwordHelpText">Your password must have at least 10 characters, a number, and an Emoji.</p></div><hr>
-<h2 id="label-positioning" class="docs-heading" data-magellan-target="label-positioning">Label Positioning<a class="docs-heading-icon" href="#label-positioning"></a></h2><p>Sometimes you want a form with labels to the left of your inputs. Piece of cake! You can put the label inside a different column to the left of the input. Then use the class <code>.text-right</code> or <code>.float-right</code> (or add <code>text-align: right</code> yourself) to realign the label.</p>
-<div class="warning callout">
- <p>In a <a href="rtl.html">right-to-left</a> environment, use <code>.float-left</code> instead.</p>
-</div>
-
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">form</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-3 columns"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"right-label"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-right"</span>></span>Label<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-9 columns"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"right-label"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Right-aligned text input"</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">form</span>></span></code></pre></div><div class="medium-8 column row">
- <div class="row">
- <div class="small-3 columns">
- <label for="right-label" class="text-right">Label</label>
- </div>
- <div class="small-9 columns">
- <input type="text" id="right-label" placeholder="Right-aligned text input">
- </div>
- </div>
-</div>
-
-<hr>
-<p>Add the <code>.middle</code> class to vertically align the label with its input.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">form</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-3 columns"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"middle-label"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-right middle"</span>></span>Label<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-9 columns"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"middle-label"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Right- and middle-aligned text input"</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">form</span>></span></code></pre></div><div class="medium-8 column row">
- <div class="row">
- <div class="small-3 columns">
- <label for="middle-label" class="text-right middle">Label</label>
- </div>
- <div class="small-9 columns">
- <input type="text" id="middle-label" placeholder="Right- and middle-aligned text input">
- </div>
- </div>
-</div>
-
-<hr>
-<h2 id="inline-labels-and-buttons" class="docs-heading" data-magellan-target="inline-labels-and-buttons">Inline Labels and Buttons<a class="docs-heading-icon" href="#inline-labels-and-buttons"></a></h2><p>To attach extra text or controls to the left or right of an input field, wrap the elements in an <code>.input-group</code> container, then add these classes to the elements inside:</p>
-<ul>
-<li><code>.input-group-field</code> on the text field.</li>
-<li><code>.input-group-label</code> on a text label.</li>
-<li><code>.input-group-button</code> on a button. <strong>Place the button inside this wrapper.</strong></li>
-</ul>
-<div class="primary callout">
- <p>This component supports flexbox mode. <a href="flexbox.html">Learn how to enable flexbox mode</a>.</p>
-</div>
-
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"input-group"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"input-group-label"</span>></span>$<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"input-group-field"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"number"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"input-group-button"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"submit"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"Submit"</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="input-group">
- <span class="input-group-label">$</span>
- <input class="input-group-field" type="number">
- <div class="input-group-button">
- <input type="submit" class="button" value="Submit">
- </div>
-</div></div><hr>
-<h2 id="file-upload-button" class="docs-heading" data-magellan-target="file-upload-button">File Upload Button<a class="docs-heading-icon" href="#file-upload-button"></a></h2><p>Use <code><input type="file"></code> to create a file upload button. For security reasons, most browsers don't let you style file inputs. To work around that, we can style a form label as a button, and point it to the <code><input></code>. To properly mask the input, the <code>.show-for-sr</code> class is added.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"exampleFileUpload"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button"</span>></span>Upload File<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"file"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"exampleFileUpload"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"show-for-sr"</span>></span></code></pre></div>
-
-<div class="docs-code-live"><label for="exampleFileUpload" class="button">Upload File</label>
-<input type="file" id="exampleFileUpload" class="show-for-sr"></div><hr>
-<h2 id="custom-controls" class="docs-heading" data-magellan-target="custom-controls">Custom Controls<a class="docs-heading-icon" href="#custom-controls"></a></h2><p>Custom form controls, like date pickers, range sliders, or switches need some extra attention to be made accessible. Our custom inputs, such as the range slider and switch, do most of this work for you.</p>
-<p>Custom inputs with labels or help text need the attributes <code>aria-labelledby</code> and <code>aria-describedby</code> added to them, so screen readers know how to describe the control.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"ageLabel"</span>></span>Age<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"slider"</span> <span class="hljs-attr">aria-labelledby</span>=<span class="hljs-string">"ageLabel"</span> <span class="hljs-attr">aria-describedby</span>=<span class="hljs-string">"ageHelpText"</span> <span class="hljs-attr">data-slider</span> <span class="hljs-attr">data-initial-start</span>=<span class="hljs-string">'50'</span> <span class="hljs-attr">data-end</span>=<span class="hljs-string">'200'</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"slider-handle"</span> <span class="hljs-attr">data-slider-handle</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"slider"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"1"</span>></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"slider-fill"</span> <span class="hljs-attr">data-slider-fill</span>></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"hidden"</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"ageHelpText"</span>></span>How old are you?<span class="hljs-tag"></<span class="hljs-name">p</span>></span></code></pre></div>
-
-<hr>
-<section>
- <h2 id="sass-reference" class="docs-heading" data-magellan-target="sass-reference">Sass Reference<a class="docs-heading-icon" href="#sass-reference"></a></h2>
-
- <section>
- <h3 id="sass-variables" class="docs-heading">Variables<a class="docs-heading-icon" href="#sass-variables"></a></h3>
-
- <p>The default styles of this component can be customized using these Sass variables in your project's <a href="sass.html#the-settings-file">settings file</a>.</p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td class="name"><code>$fieldset-border</code></td>
- <td>Border</td>
- <td class="border"><code>1px solid $medium-gray</code></td>
- <td><p>Default border around custom fieldsets.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$fieldset-padding</code></td>
- <td>Number</td>
- <td class="number"><code>rem-calc(20)</code></td>
- <td><p>Default padding inside custom fieldsets.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$fieldset-margin</code></td>
- <td>Number</td>
- <td class="number"><code>rem-calc(18 0)</code></td>
- <td><p>Default margin around custom fieldsets.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$legend-padding</code></td>
- <td>Number</td>
- <td class="number"><code>rem-calc(0 3)</code></td>
- <td><p>Default padding between the legend text and fieldset border.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$form-spacing</code></td>
- <td>Number</td>
- <td class="number"><code>rem-calc(16)</code></td>
- <td><p>Global spacing for form elements.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$helptext-color</code></td>
- <td>Color</td>
- <td class="color"><code>$black</code></td>
- <td><p>Default color for help text.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$helptext-font-size</code></td>
- <td>Number</td>
- <td class="number"><code>rem-calc(13)</code></td>
- <td><p>Default font size for help text.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$helptext-font-style</code></td>
- <td>Keyword</td>
- <td class="keyword"><code>italic</code></td>
- <td><p>Default font style for help text.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$input-prefix-color</code></td>
- <td>Color</td>
- <td class="color"><code>$black</code></td>
- <td><p>Color of labels prefixed to an input.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$input-prefix-background</code></td>
- <td>Color</td>
- <td class="color"><code>$light-gray</code></td>
- <td><p>Background color of labels prefixed to an input.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$input-prefix-border</code></td>
- <td>Border</td>
- <td class="border"><code>1px solid $medium-gray</code></td>
- <td><p>Border around labels prefixed to an input.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$input-prefix-padding</code></td>
- <td></td>
- <td class=""><code>1rem</code></td>
- <td><p>Left/right padding of an pre/postfixed input label</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$form-label-color</code></td>
- <td>Color</td>
- <td class="color"><code>$black</code></td>
- <td><p>Color for form labels.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$form-label-font-size</code></td>
- <td>Number</td>
- <td class="number"><code>rem-calc(14)</code></td>
- <td><p>Font size for form labels.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$form-label-font-weight</code></td>
- <td>Keyword</td>
- <td class="keyword"><code>$global-weight-normal</code></td>
- <td><p>Font weight for form labels.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$form-label-line-height</code></td>
- <td>Number</td>
- <td class="number"><code>1.8</code></td>
- <td><p>Line height for form labels. The higher the number, the more space between the label and its input field.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$select-background</code></td>
- <td>Color</td>
- <td class="color"><code>$white</code></td>
- <td><p>Background color for select menus.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$select-triangle-color</code></td>
- <td>Color</td>
- <td class="color"><code>$dark-gray</code></td>
- <td><p>Color of the dropdown triangle inside select menus. Set to <code>transparent</code> to remove it entirely.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$select-radius</code></td>
- <td>Color</td>
- <td class="color"><code>$global-radius</code></td>
- <td><p>Default radius for select menus.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$input-color</code></td>
- <td>Color</td>
- <td class="color"><code>$black</code></td>
- <td><p>Font color of text inputs.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$input-placeholder-color</code></td>
- <td>Color</td>
- <td class="color"><code>$medium-gray</code></td>
- <td><p>Font color of placeholder text within text inputs.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$input-font-family</code></td>
- <td>Font</td>
- <td class="font"><code>inherit</code></td>
- <td><p>Font family of text inputs.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$input-font-size</code></td>
- <td>Number</td>
- <td class="number"><code>rem-calc(16)</code></td>
- <td><p>Font size of text inputs.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$input-background</code></td>
- <td>Color</td>
- <td class="color"><code>$white</code></td>
- <td><p>Background color of text inputs.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$input-background-focus</code></td>
- <td>Color</td>
- <td class="color"><code>$white</code></td>
- <td><p>Background color of focused of text inputs.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$input-background-disabled</code></td>
- <td>Color</td>
- <td class="color"><code>$light-gray</code></td>
- <td><p>Background color of disabled text inputs.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$input-border</code></td>
- <td>Border</td>
- <td class="border"><code>1px solid $medium-gray</code></td>
- <td><p>Border around text inputs.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$input-border-focus</code></td>
- <td>Color</td>
- <td class="color"><code>1px solid $dark-gray</code></td>
- <td><p>Border around focused text inputs.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$input-shadow</code></td>
- <td>Shadow</td>
- <td class="shadow"><code>inset 0 1px 2px rgba($black, 0.1)</code></td>
- <td><p>Box shadow inside text inputs when not focused.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$input-shadow-focus</code></td>
- <td>Shadow</td>
- <td class="shadow"><code>0 0 5px $medium-gray</code></td>
- <td><p>Box shadow outside text inputs when focused.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$input-cursor-disabled</code></td>
- <td>Cursor</td>
- <td class="cursor"><code>not-allowed</code></td>
- <td><p>Cursor to use when hovering over a disabled text input.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$input-transition</code></td>
- <td>Transition</td>
- <td class="transition"><code>box-shadow 0.5s, border-color 0.25s ease-in-out</code></td>
- <td><p>Properties to transition on text inputs.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$input-number-spinners</code></td>
- <td>Boolean</td>
- <td class="boolean"><code>true</code></td>
- <td><p>Enables the up/down buttons that Chrome and Firefox add to <code><input type='number'></code> elements.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$input-radius</code></td>
- <td>Border</td>
- <td class="border"><code>$global-radius</code></td>
- <td><p>Radius for text inputs.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$meter-height</code></td>
- <td>Length</td>
- <td class="length"><code>1rem</code></td>
- <td><p>Height of a <code><meter></code> element.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$meter-radius</code></td>
- <td>Length</td>
- <td class="length"><code>$global-radius</code></td>
- <td><p>Border radius of a <code><meter></code> element.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$meter-background</code></td>
- <td>Color</td>
- <td class="color"><code>$medium-gray</code></td>
- <td><p>Background color of a <code><meter></code> element.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$meter-fill-good</code></td>
- <td>Color</td>
- <td class="color"><code>$success-color</code></td>
- <td><p>Meter fill for an optimal value in a <code><meter></code> element.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$meter-fill-medium</code></td>
- <td>Color</td>
- <td class="color"><code>$warning-color</code></td>
- <td><p>Meter fill for an average value in a <code><meter></code> element.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$meter-fill-bad</code></td>
- <td>Color</td>
- <td class="color"><code>$alert-color</code></td>
- <td><p>Meter fill for a suboptimal value in a <code><meter></code> element.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$progress-height</code></td>
- <td>Number</td>
- <td class="number"><code>1rem</code></td>
- <td><p>Height of a progress bar.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$progress-background</code></td>
- <td>Color</td>
- <td class="color"><code>$medium-gray</code></td>
- <td><p>Background color of a progress bar.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$progress-margin-bottom</code></td>
- <td>Number</td>
- <td class="number"><code>$global-margin</code></td>
- <td><p>Bottom margin of a progress bar.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$progress-meter-background</code></td>
- <td>Color</td>
- <td class="color"><code>$primary-color</code></td>
- <td><p>Default color of a progress bar's meter.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$progress-radius</code></td>
- <td>Number</td>
- <td class="number"><code>$global-radius</code></td>
- <td><p>Default radius of a progress bar.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$slider-height</code></td>
- <td>Number</td>
- <td class="number"><code>0.5rem</code></td>
- <td><p>Default height of the slider.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$slider-background</code></td>
- <td>Color</td>
- <td class="color"><code>$light-gray</code></td>
- <td><p>Default background color of the slider's track.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$slider-fill-background</code></td>
- <td>Color</td>
- <td class="color"><code>$medium-gray</code></td>
- <td><p>Default color of the active fill color of the slider.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$slider-handle-height</code></td>
- <td>Number</td>
- <td class="number"><code>1.4rem</code></td>
- <td><p>Default height of the handle of the slider.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$slider-handle-width</code></td>
- <td>Number</td>
- <td class="number"><code>1.4rem</code></td>
- <td><p>Default width of the handle of the slider.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$slider-handle-background</code></td>
- <td>Color</td>
- <td class="color"><code>$primary-color</code></td>
- <td><p>Default color of the handle for the slider.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$slider-opacity-disabled</code></td>
- <td>Number</td>
- <td class="number"><code>0.25</code></td>
- <td><p>Default fade amount of a disabled slider.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$slider-radius</code></td>
- <td>Number</td>
- <td class="number"><code>$global-radius</code></td>
- <td><p>Default radius for slider.</p>
-</td>
- </tr>
- </table>
- </section>
-
-
-
-</section>
-
-
-<!-- <hr> -->
-<!-- <section class="docs-building-blocks">
- <h2 id="building-blocks" class="docs-heading" data-magellan-target="building-blocks">Building Blocks<a class="docs-heading-icon" href="#building-blocks"></a></h2>
-
- <p><a href="http://zurb.com/building-blocks">Building Blocks</a> is a ZURB-curated resource with useful code snippets that use Foundation components. Here are a few for this component:</p>
-
- <div class="warning callout">
- <p>These are placeholder items. If you have ideas for building blocks for this component, <a href="https://github.com/zurb/foundation-sites-6/issues/118">we're taking ideas on GitHub</a>.</p>
- </div>
-
- <div data-building-blocks></div>
-</section> -->
-
-</div>
-
-<div class="large-3 columns" data-sticky-container>
- <nav class="columns docs-toc-wrap" data-sticky data-anchor="docs" data-sticky-on="large">
- <div class="docs-toc hide" id="docsTOC">
- <ul class="vertical menu" data-docs-toc>
- <li class="docs-nav-title">On this page:</li>
- </ul>
- </div>
- <div class="foundation-toc-ad-unit" id="TOCAdUnit">
- </div>
- </nav>
-</div>
-
-</div>
-
-</article>
-
- </div>
- <div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
- <ul class="vertical menu docs-nav" id="docs-menu">
- <p class="docs-nav-version">
- <span data-docs-version></span>
- <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">(Changelog)</a>
- </p>
-
- <li class="docs-nav-title">Getting Started</li>
- <li><a href="installation.html">Installation</a></li>
- <li><a href="starter-projects.html">Starter Projects</a></li>
- <li><a href="compatibility.html">Compatibility</a></li>
- <li><a href="accessibility.html">Accessibility</a></li>
- <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
-
- <li class="docs-nav-title">Setup</li>
- <li><a href="global.html">Global Styles</a></li>
- <li><a href="rtl.html">Right-to-Left Support</a></li>
- <li><a href="flexbox.html">Flexbox</a></li>
- <li><a href="sass.html">Sass</a></li>
- <li><a href="javascript.html">JavaScript</a></li>
- <li><a href="javascript-utilities.html">JavaScript Utilities</a></li>
- <li><a href="media-queries.html">Media Queries</a></li>
-
- <li class="docs-nav-title">General</li>
- <li><a href="grid.html">Grid</a></li>
- <li><a href="flex-grid.html">Flex Grid</a></li>
- <li class="current"><a href="forms.html">Forms</a></li>
- <li><a href="visibility.html">Visibility Classes</a></li>
- <li><a href="float-classes.html">Float Classes</a></li>
-
- <li class="docs-nav-title">Typography</li>
- <li><a href="typography-base.html">Base Styles</a></li>
- <li><a href="typography-helpers.html">Helper Classes</a></li>
-
- <li class="docs-nav-title">Controls</li>
- <li><a href="button.html">Button</a></li>
- <li><a href="button-group.html">Button Group</a></li>
- <li><a href="close-button.html">Close Button</a></li>
- <li><a href="slider.html">Slider <span class="label">JS</span></a></li>
- <li><a href="switch.html">Switch</a></li>
-
- <li class="docs-nav-title">Navigation</li>
- <li><a href="navigation.html">Overview</a></li>
- <li><a href="menu.html">Menu</a></li>
- <li><a href="dropdown-menu.html">Dropdown Menu <span class="label">JS</span></a></li>
- <li><a href="drilldown-menu.html">Drilldown Menu <span class="label">JS</span></a></li>
- <li><a href="accordion-menu.html">Accordion Menu <span class="label">JS</span></a></li>
- <li><a href="top-bar.html">Top Bar</a></li>
- <li><a href="responsive-navigation.html">Responsive Navigation</a></li>
- <li><a href="magellan.html">Magellan <span class="label">JS</span></a></li>
- <li><a href="pagination.html">Pagination</a></li>
- <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
-
- <li class="docs-nav-title">Containers</li>
- <li><a href="accordion.html">Accordion <span class="label">JS</span></a></li>
- <li><a href="callout.html">Callout</a></li>
- <li><a href="dropdown.html">Dropdown <span class="label">JS</span></a></li>
- <li><a href="media-object.html">Media Object</a></li>
- <li><a href="off-canvas.html">Off-canvas <span class="label">JS</span></a></li>
- <li><a href="reveal.html">Reveal <span class="label">JS</span> <small>Modal</small></a></li>
- <li><a href="table.html">Table</a></li>
- <li><a href="tabs.html">Tabs <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Media</li>
- <li><a href="badge.html">Badge</a></li>
- <li><a href="flex-video.html">Flex Video</a></li>
- <li><a href="label.html">Label</a></li>
- <li><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
- <li><a href="progress-bar.html">Progress Bar</a></li>
- <li><a href="thumbnail.html">Thumbnail</a></li>
- <li><a href="tooltip.html">Tooltip <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Plugins</li>
- <li><a href="abide.html">Abide <small>Form Validation</small></a></li>
- <li><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
- <li><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
- <li><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
- <li><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
-
- <li class="docs-nav-title">Sass</li>
- <li><a href="sass-functions.html">Functions</a></li>
- <li><a href="sass-mixins.html">Mixins</a></li>
-
- <li class="docs-nav-title">Libraries</li>
- <li><a href="motion-ui.html">Motion UI</a></li>
- <li><a href="panini.html">Panini</a></li>
- <li><a href="style-sherpa.html">Style Sherpa</a></li>
-
- <li class="docs-nav-title">Older Versions</li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
- <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
- <li><a href="https://get.foundation/sites/docs/v/3.2.5/">Foundation 3</a></li>
- <li><a href="https://get.foundation/sites/docs/v/2.2.1/">Foundation 2</a></li>
- </ul>
-
- </div>
- </div>
-
- <!-- Small Business(Docs) -->
- <section id="studiosCallout">
- <div class="row">
- <div class="medium-4 large-4 columns">
- <img src="https://get.foundation/assets/img/smallbiz-footer.svg" alt="">
- </div>
- <div class="medium-8 large-8 columns banner-info">
- <div class="row column property-label">ZURB Foundation</div>
- <h3 class="light">Yeah, we can help with that.</h3>
- <p class="lead"> We’ll collaborate with your team throughout the entire project life cycle. We’ll take your concept and move it through ideation, hi-fi wireframes, visual design and code, all while informing you on the whys and hows along the way.</p>
- <div class="course-buttons">
- <a href="https://get.foundation/get-involved/premium-support.html" class="studios button" data-zcom-event="studios_foundation_click" id="foundationSmallV1">Show Me How →</a>
- </div>
- </div>
- </div>
- </section>
-
- <div class="docs-newsletter">
- <div class="row">
- <div class="medium-7 large-8 columns">
- <a target="_blank" href="https://get.foundation/learn/responsive-reading.html">
- <h5 class="">Download ZURB’s 21 Responsive Trends That Will Shape 2017</h5>
- <p style="margin-bottom: 0;">Stay informed with amazing responsive trends each month from ZURB.</p>
- </a>
- </div>
- <div class="medium-5 large-4 footer-signup-form columns">
- <a style="margin-bottom: 0;" target="_blank" href="https://get.foundation/learn/responsive-reading.html" class="button expanded">Download the PDF</a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-top bg-fblue">
- <div class="row property">
- <div class="medium-4 columns">
- <div class="property-info">
- <h3>Foundation for Sites</h3>
- <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
- </p>
- </div>
- </div>
-
- <div class="medium-8 columns">
- <div class="row collapse">
- <div class="medium-4 columns">
- <div class="learn-links">
- <h4 class="hide-for-small">Want more?</h4>
- <ul>
- <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
- <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
- <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
- <li><a href="http://zurb.com/university/courses">Training</a></li>
- <li><a href="http://zurb.com/library">Design Resources</a></li>
- </ul>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="support-links">
- <h4 class="hide-for-small">Talk to us</h4>
- <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
- <p><a href="https://get.foundation/get-involved/contribute.html">Get involved in<br>our amazing community.</a></p>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="connect-links">
- <h4 class="hide-for-small">Stay Updated</h4>
- <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
- <a href="http://zurb.com/news" class="small button">Stay Connected</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="row global">
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/studios" class="footer-link-block services">
- <span class="title">Studios</span>
- <span>Helping more than 200 startups succeed since 1998.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="https://get.foundation/" class="footer-link-block foundation">
- <span class="title">Foundation</span>
- <span>The most advanced front-end framework in the world.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/notable" class="footer-link-block apps">
- <span class="title">Notable Design Apps</span>
- <span>Prototype, iterate and collect feedback on your products.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/university" class="footer-link-block expo">
- <span class="title">University</span>
- <span>Ideas, thoughts and design resources shared with you.</span>
- </a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-bottom">
- <div class="row">
- <div class="medium-4 medium-push-8 columns">
- <ul class="home-social">
- <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
- <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
- <li><a href="http://zurb.com/contact" class="mail"></a></li>
- </ul>
- </div>
- <div class="medium-8 medium-pull-4 columns">
- <a href="http://www.zurb.com" class="zurb-logo regular"></a>
- <ul class="zurb-links">
- <li><a href="http://zurb.com/about">About</a></li>
- <li><a href="http://zurb.com/blog">Blog</a></li>
- <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
- <li><a href="http://zurb.com/contact">Contact</a></li>
- <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
- </ul>
- <p class="copyright">© 1998‐2016 ZURB, Inc. All rights reserved.</p>
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- <script>
- var _gaq = _gaq || [];
- _gaq.push(
- ['_setAccount', 'UA-2195009-2'],
- ['_trackPageview'],
- ['b._setAccount', 'UA-2195009-27'],
- ['b._trackPageview']
- );
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
-
- <script src="assets/js/vendor.js?hash=dfae1bc4eee27afbdb294832c027e9ed"></script>
- <script src="assets/js/foundation.js?hash=46c4608c02b672eabbd189057f94ec65"></script>
- <script src="assets/js/docs.js?hash=07683ffaac2fea4e8d2c3a164fe54657"></script>
- <script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
-</body>
-</html>
+++ /dev/null
-<!doctype html>
-<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
-<html class="no-js" lang="en" dir="ltr">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="Our global CSS includes helpful resets to ensure consistent styling across browsers.">
- <link rel="icon" href="assets/img/icons/foundation-favicon.ico" type="image/x-icon">
- <title>Foundation for Sites 6 Docs | Global Styles</title>
- <link href="assets/css/docs.css?hash=4a133b262f126ddaf5c72b681b5a7ee3" rel="stylesheet" />
- <link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=acd7d2d9b4ac1964ec320ddac6b6ef49" rel="stylesheet">
- <!-- <link rel="stylesheet" href="./node_modules/motion-ui/dist/motion-ui.css" /> -->
-</head>
-<body>
-
- <div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
-
- <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="mobile-ofc vertical menu">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
-
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/support.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/sort/unanswered">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
- </div>
-
- <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="vertical menu">
- <li><a href="#">Foundation</a></li>
- <li><a href="#">Dot</a></li>
- <li><a href="#">ZURB</a></li>
- <li><a href="#">Com</a></li>
- <li><a href="#">Slash</a></li>
- <li><a href="#">Sites</a></li>
- </ul>
- </div>
-
-
- <div class="off-canvas-content" data-off-canvas-content>
- <!-- Info Banner For Announcements or Links -->
- <!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
- <div class="info">
- <h5>Foundation 6 is here!</h5>
- </div>
- </a> -->
-
- <nav class="marketing-topbar show-for-medium">
-
- <ul class="menu">
- <li class="topbar-title"><a href="https://get.foundation/index.html"><img src="assets/img/logos/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
- </ul>
-
- <ul class="dropdown menu" data-dropdown-menu data-click-open="false">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/" target="_blank">F5 Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="https://get.foundation/emails/docs/" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
-
- </nav>
-
- <div class="title-bar hide-for-medium">
- <div class="title-bar-left">
- <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
- <span class="title-bar-title">Foundation</span>
- </div>
- </div>
-
-
- <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
-
- <div class="expanded row">
- <div class="medium-9 large-10 medium-push-3 large-push-2 columns">
-
-<article class="docs-component" id="docs-global-styles">
-
-<a href="#docs-menu" class="small secondary expanded button hide-for-medium">Jump to Nav</a>
-
-<header>
- <h1 class="docs-page-title">Global Styles</h1>
-
-
- <p class="lead docs-page-lead">Our global CSS includes helpful resets to ensure consistent styling across browsers.</p>
-
- <ul class="menu simple docs-contribute-menu">
- <li><a href="https://github.com/zurb/foundation-sites/edit/master/docs/pages/global.md" target="_blank"><i class="fi-pencil"></i>Edit this Page</a></li>
- <li><a href="https://github.com/zurb/foundation-sites/issues/new?title=%5BGlobal%20Styles%5D%20ISSUE%20NAME%20HERE" target="_blank"><i class="fi-social-github"></i>Report a Bug</a></li>
- <li><a href="https://get.foundation/forum" target="_blank"><i class="fi-comment"></i>Get Help</a></li>
- </ul>
-</header>
-
-<hr>
-
-<div class="row">
-
-<div class="large-9 columns" id="docs">
-
-<h2 id="font-sizing" class="docs-heading" data-magellan-target="font-sizing">Font Sizing<a class="docs-heading-icon" href="#font-sizing"></a></h2><p>The default font size is set to 100% of the browser style sheet, usually 16 pixels. This ensures compatibility with browser-based text zoom or user-set defaults. If you're using the Sass version of Foundation, edit the <code>$global-font-size</code> variable to change the base font size. This can be a percentage value, or a pixel value.</p>
-<div class="alert callout">
- <p><code>$rem-base</code> was deprecated in version 6.1, in favor of using <code>$global-font-size</code> to define rem calculation.</p>
-</div>
-
-<hr>
-<h2 id="colors" class="docs-heading" data-magellan-target="colors">Colors<a class="docs-heading-icon" href="#colors"></a></h2><p>All interactive elements in Foundation, such as links and buttons, use the same color. The default shade of blue you see all over Foundation comes from the <code>$primary-color</code> Sass variable.</p>
-<p>Many components can also be colored with four other colors: secondary, alert, success, and warning. Use these colors to give more context to UI elements and actions.</p>
-<div class="row small-up-1 medium-up-3 large-up-5">
- <div class="column">
- <div class="docs-color-block">
- <div class="docs-color-block-primary"></div>
- <p>Primary</p>
- </div>
- </div>
- <div class="column">
- <div class="docs-color-block">
- <div class="docs-color-block-secondary"></div>
- <p>Secondary</p>
- </div>
- </div>
- <div class="column">
- <div class="docs-color-block">
- <div class="docs-color-block-success"></div>
- <p>Success</p>
- </div>
- </div>
- <div class="column">
- <div class="docs-color-block">
- <div class="docs-color-block-warning"></div>
- <p>Warning</p>
- </div>
- </div>
- <div class="column">
- <div class="docs-color-block">
- <div class="docs-color-block-alert"></div>
- <p>Alert</p>
- </div>
- </div>
- <div class="column">
- <div class="docs-color-block">
- <div class="docs-color-block-white"></div>
- <p>White</p>
- </div>
- </div>
- <div class="column">
- <div class="docs-color-block">
- <div class="docs-color-block-light-gray"></div>
- <p>Light Gray</p>
- </div>
- </div>
- <div class="column">
- <div class="docs-color-block">
- <div class="docs-color-block-medium-gray"></div>
- <p>Medium Gray</p>
- </div>
- </div>
- <div class="column">
- <div class="docs-color-block">
- <div class="docs-color-block-dark-gray"></div>
- <p>Dark Gray</p>
- </div>
- </div>
- <div class="column">
- <div class="docs-color-block">
- <div class="docs-color-block-black"></div>
- <p>Black</p>
- </div>
- </div>
-</div>
-
-<p>If you're using the Sass version of Foundation, it's possible to edit the default color palette, by changing the <code>$foundation-palette</code> variable in your settings file. The only required color is one named "primary". The names used in the palette will be output as CSS classes.</p>
-<div class="docs-code" data-docs-code><pre><code class="scss"><span class="hljs-variable">$foundation-palette</span>: (
- primary: <span class="hljs-number">#E44347</span>,
- mars: <span class="hljs-number">#D7525C</span>,
- saturn: <span class="hljs-number">#E4B884</span>,
- neptune: <span class="hljs-number">#5147D7</span>,
-)</code></pre></div><p>Using the above palette, we can add the <code>.mars</code>, <code>.saturn</code>, or <code>.neptune</code> classes to buttons, labels, badges, and more.</p>
-<p>To access the colors in your code, use Sass's <code>map-get()</code> function:</p>
-<div class="docs-code" data-docs-code><pre><code class="scss"><span class="hljs-selector-class">.mars</span> {
- <span class="hljs-attribute">color</span>: map-get(<span class="hljs-variable">$foundation-palette</span>, mars);
-}</code></pre></div><div class="warning callout">
- <p>If you're upgrading an older version of Foundation 6 to 6.2, add the line <code>@include add-foundation-colors;</code> <em>below the Global section of your settings file</em>. This will allow legacy color variables, such as <code>$primary-color</code> and <code>$secondary-color</code>, to continue working.
-</div>
-
-<hr>
-<h3 id="color-classes" class="docs-heading">Color Classes<a class="docs-heading-icon" href="#color-classes"></a></h3><p>Some components, such as <a href="button.html">buttons</a>, <a href="callout.html">callouts</a>, and <a href="label.html">labels</a>, have <em>coloring classes</em>, which let you change the color of the element by adding the name of the color as a CSS class.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button"</span>></span>Primary Action<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"secondary button"</span>></span>Secondary Action<span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></pre></div>
-
-<div class="docs-code-live"><button class="button">Primary Action</button>
-<button class="secondary button">Secondary Action</button></div><div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"success callout"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Created a new folder.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"alert callout"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Error fetching stick.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="success callout">
- <p>Created a new folder.</p>
-</div>
-<div class="alert callout">
- <p>Error fetching stick.</p>
-</div></div>
-
-<hr>
-<section>
- <h2 id="sass-reference" class="docs-heading" data-magellan-target="sass-reference">Sass Reference<a class="docs-heading-icon" href="#sass-reference"></a></h2>
-
- <section>
- <h3 id="sass-variables" class="docs-heading">Variables<a class="docs-heading-icon" href="#sass-variables"></a></h3>
-
- <p>The default styles of this component can be customized using these Sass variables in your project's <a href="sass.html#the-settings-file">settings file</a>.</p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td class="name"><code>$global-font-size</code></td>
- <td>Number</td>
- <td class="number"><code>100%</code></td>
- <td><p>Font size attribute applied to <code><html></code> and <code><body></code>. We use 100% by default so the value is inherited from the user's browser settings.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$global-width</code></td>
- <td>Number</td>
- <td class="number"><code>rem-calc(1200)</code></td>
- <td><p>Global width of your site. Used by the grid to determine row width.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$global-lineheight</code></td>
- <td>Number</td>
- <td class="number"><code>1.5</code></td>
- <td><p>Default line height for all type. <code>$global-lineheight</code> is 24px while <code>$global-font-size</code> is 16px</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$foundation-palette</code></td>
- <td>Map</td>
- <td class="map"><code>
- primary: #2199e8<br>
- secondary: #777<br>
- success: #3adb76<br>
- warning: #ffae00<br>
- alert: #ec5840<br>
-</code></td>
- <td><p>Colors used for buttons, callouts, links, etc. There must always be a color called <code>primary</code>.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$light-gray</code></td>
- <td>Color</td>
- <td class="color"><code>#e6e6e6</code></td>
- <td><p>Color used for light gray UI items.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$medium-gray</code></td>
- <td>Color</td>
- <td class="color"><code>#cacaca</code></td>
- <td><p>Color used for medium gray UI items.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$dark-gray</code></td>
- <td>Color</td>
- <td class="color"><code>#8a8a8a</code></td>
- <td><p>Color used for dark gray UI items.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$black</code></td>
- <td>Color</td>
- <td class="color"><code>#0a0a0a</code></td>
- <td><p>Color used for black ui items.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$white</code></td>
- <td>Color</td>
- <td class="color"><code>#fefefe</code></td>
- <td><p>Color used for white ui items.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$body-background</code></td>
- <td>Color</td>
- <td class="color"><code>$white</code></td>
- <td><p>Background color of the body.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$body-font-color</code></td>
- <td>Color</td>
- <td class="color"><code>$black</code></td>
- <td><p>Text color of the body.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$body-font-family</code></td>
- <td>List</td>
- <td class="list"><code>'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif</code></td>
- <td><p>Font stack of the body.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$body-antialiased</code></td>
- <td>Boolean</td>
- <td class="boolean"><code>true</code></td>
- <td><p>Set to <code>true</code> to enable antialiased type, using the <code>-webkit-font-smoothing</code> and <code>-moz-osx-font-smoothing</code> CSS properties.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$global-margin</code></td>
- <td>Number</td>
- <td class="number"><code>1rem</code></td>
- <td><p>Global value used for margin on components.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$global-padding</code></td>
- <td>Number</td>
- <td class="number"><code>1rem</code></td>
- <td><p>Global value used for padding on components.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$global-weight-normal</code></td>
- <td>Keyword or Number</td>
- <td class="keyword | number"><code>normal</code></td>
- <td><p>Global font weight used for normal type.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$global-weight-bold</code></td>
- <td>Keyword or Number</td>
- <td class="keyword | number"><code>bold</code></td>
- <td><p>Global font weight used for bold type.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$global-radius</code></td>
- <td>Number</td>
- <td class="number"><code>0</code></td>
- <td><p>Global value used for all elements that have a border radius.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$global-text-direction</code></td>
- <td>Keyword</td>
- <td class="keyword"><code>ltr</code></td>
- <td><p>Sets the text direction of the CSS. Can be either <code>ltr</code> or <code>rtl</code>.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$global-flexbox</code></td>
- <td>Boolean</td>
- <td class="boolean"><code>false</code></td>
- <td><p>Enables flexbox for components that support it.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="sass-mixins" class="docs-heading">Mixins<a class="docs-heading-icon" href="#sass-mixins"></a></h3>
-
- <p>We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.</p>
-
-
- </section>
-
-
-</section>
-
-
-<!-- <hr> -->
-<!-- <section class="docs-building-blocks">
- <h2 id="building-blocks" class="docs-heading" data-magellan-target="building-blocks">Building Blocks<a class="docs-heading-icon" href="#building-blocks"></a></h2>
-
- <p><a href="http://zurb.com/building-blocks">Building Blocks</a> is a ZURB-curated resource with useful code snippets that use Foundation components. Here are a few for this component:</p>
-
- <div class="warning callout">
- <p>These are placeholder items. If you have ideas for building blocks for this component, <a href="https://github.com/zurb/foundation-sites-6/issues/118">we're taking ideas on GitHub</a>.</p>
- </div>
-
- <div data-building-blocks></div>
-</section> -->
-
-</div>
-
-<div class="large-3 columns" data-sticky-container>
- <nav class="columns docs-toc-wrap" data-sticky data-anchor="docs" data-sticky-on="large">
- <div class="docs-toc hide" id="docsTOC">
- <ul class="vertical menu" data-docs-toc>
- <li class="docs-nav-title">On this page:</li>
- </ul>
- </div>
- <div class="foundation-toc-ad-unit" id="TOCAdUnit">
- </div>
- </nav>
-</div>
-
-</div>
-
-</article>
-
- </div>
- <div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
- <ul class="vertical menu docs-nav" id="docs-menu">
- <p class="docs-nav-version">
- <span data-docs-version></span>
- <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">(Changelog)</a>
- </p>
-
- <li class="docs-nav-title">Getting Started</li>
- <li><a href="installation.html">Installation</a></li>
- <li><a href="starter-projects.html">Starter Projects</a></li>
- <li><a href="compatibility.html">Compatibility</a></li>
- <li><a href="accessibility.html">Accessibility</a></li>
- <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
-
- <li class="docs-nav-title">Setup</li>
- <li class="current"><a href="global.html">Global Styles</a></li>
- <li><a href="rtl.html">Right-to-Left Support</a></li>
- <li><a href="flexbox.html">Flexbox</a></li>
- <li><a href="sass.html">Sass</a></li>
- <li><a href="javascript.html">JavaScript</a></li>
- <li><a href="javascript-utilities.html">JavaScript Utilities</a></li>
- <li><a href="media-queries.html">Media Queries</a></li>
-
- <li class="docs-nav-title">General</li>
- <li><a href="grid.html">Grid</a></li>
- <li><a href="flex-grid.html">Flex Grid</a></li>
- <li><a href="forms.html">Forms</a></li>
- <li><a href="visibility.html">Visibility Classes</a></li>
- <li><a href="float-classes.html">Float Classes</a></li>
-
- <li class="docs-nav-title">Typography</li>
- <li><a href="typography-base.html">Base Styles</a></li>
- <li><a href="typography-helpers.html">Helper Classes</a></li>
-
- <li class="docs-nav-title">Controls</li>
- <li><a href="button.html">Button</a></li>
- <li><a href="button-group.html">Button Group</a></li>
- <li><a href="close-button.html">Close Button</a></li>
- <li><a href="slider.html">Slider <span class="label">JS</span></a></li>
- <li><a href="switch.html">Switch</a></li>
-
- <li class="docs-nav-title">Navigation</li>
- <li><a href="navigation.html">Overview</a></li>
- <li><a href="menu.html">Menu</a></li>
- <li><a href="dropdown-menu.html">Dropdown Menu <span class="label">JS</span></a></li>
- <li><a href="drilldown-menu.html">Drilldown Menu <span class="label">JS</span></a></li>
- <li><a href="accordion-menu.html">Accordion Menu <span class="label">JS</span></a></li>
- <li><a href="top-bar.html">Top Bar</a></li>
- <li><a href="responsive-navigation.html">Responsive Navigation</a></li>
- <li><a href="magellan.html">Magellan <span class="label">JS</span></a></li>
- <li><a href="pagination.html">Pagination</a></li>
- <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
-
- <li class="docs-nav-title">Containers</li>
- <li><a href="accordion.html">Accordion <span class="label">JS</span></a></li>
- <li><a href="callout.html">Callout</a></li>
- <li><a href="dropdown.html">Dropdown <span class="label">JS</span></a></li>
- <li><a href="media-object.html">Media Object</a></li>
- <li><a href="off-canvas.html">Off-canvas <span class="label">JS</span></a></li>
- <li><a href="reveal.html">Reveal <span class="label">JS</span> <small>Modal</small></a></li>
- <li><a href="table.html">Table</a></li>
- <li><a href="tabs.html">Tabs <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Media</li>
- <li><a href="badge.html">Badge</a></li>
- <li><a href="flex-video.html">Flex Video</a></li>
- <li><a href="label.html">Label</a></li>
- <li><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
- <li><a href="progress-bar.html">Progress Bar</a></li>
- <li><a href="thumbnail.html">Thumbnail</a></li>
- <li><a href="tooltip.html">Tooltip <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Plugins</li>
- <li><a href="abide.html">Abide <small>Form Validation</small></a></li>
- <li><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
- <li><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
- <li><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
- <li><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
-
- <li class="docs-nav-title">Sass</li>
- <li><a href="sass-functions.html">Functions</a></li>
- <li><a href="sass-mixins.html">Mixins</a></li>
-
- <li class="docs-nav-title">Libraries</li>
- <li><a href="motion-ui.html">Motion UI</a></li>
- <li><a href="panini.html">Panini</a></li>
- <li><a href="style-sherpa.html">Style Sherpa</a></li>
-
- <li class="docs-nav-title">Older Versions</li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
- <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
- <li><a href="https://get.foundation/sites/docs/v/3.2.5/">Foundation 3</a></li>
- <li><a href="https://get.foundation/sites/docs/v/2.2.1/">Foundation 2</a></li>
- </ul>
-
- </div>
- </div>
-
- <!-- Small Business(Docs) -->
- <section id="studiosCallout">
- <div class="row">
- <div class="medium-4 large-4 columns">
- <img src="https://get.foundation/assets/img/smallbiz-footer.svg" alt="">
- </div>
- <div class="medium-8 large-8 columns banner-info">
- <div class="row column property-label">ZURB Foundation</div>
- <h3 class="light">Yeah, we can help with that.</h3>
- <p class="lead"> We’ll collaborate with your team throughout the entire project life cycle. We’ll take your concept and move it through ideation, hi-fi wireframes, visual design and code, all while informing you on the whys and hows along the way.</p>
- <div class="course-buttons">
- <a href="https://get.foundation/get-involved/premium-support.html" class="studios button" data-zcom-event="studios_foundation_click" id="foundationSmallV1">Show Me How →</a>
- </div>
- </div>
- </div>
- </section>
-
- <div class="docs-newsletter">
- <div class="row">
- <div class="medium-7 large-8 columns">
- <a target="_blank" href="https://get.foundation/learn/responsive-reading.html">
- <h5 class="">Download ZURB’s 21 Responsive Trends That Will Shape 2017</h5>
- <p style="margin-bottom: 0;">Stay informed with amazing responsive trends each month from ZURB.</p>
- </a>
- </div>
- <div class="medium-5 large-4 footer-signup-form columns">
- <a style="margin-bottom: 0;" target="_blank" href="https://get.foundation/learn/responsive-reading.html" class="button expanded">Download the PDF</a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-top bg-fblue">
- <div class="row property">
- <div class="medium-4 columns">
- <div class="property-info">
- <h3>Foundation for Sites</h3>
- <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
- </p>
- </div>
- </div>
-
- <div class="medium-8 columns">
- <div class="row collapse">
- <div class="medium-4 columns">
- <div class="learn-links">
- <h4 class="hide-for-small">Want more?</h4>
- <ul>
- <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
- <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
- <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
- <li><a href="http://zurb.com/university/courses">Training</a></li>
- <li><a href="http://zurb.com/library">Design Resources</a></li>
- </ul>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="support-links">
- <h4 class="hide-for-small">Talk to us</h4>
- <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
- <p><a href="https://get.foundation/get-involved/contribute.html">Get involved in<br>our amazing community.</a></p>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="connect-links">
- <h4 class="hide-for-small">Stay Updated</h4>
- <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
- <a href="http://zurb.com/news" class="small button">Stay Connected</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="row global">
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/studios" class="footer-link-block services">
- <span class="title">Studios</span>
- <span>Helping more than 200 startups succeed since 1998.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="https://get.foundation/" class="footer-link-block foundation">
- <span class="title">Foundation</span>
- <span>The most advanced front-end framework in the world.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/notable" class="footer-link-block apps">
- <span class="title">Notable Design Apps</span>
- <span>Prototype, iterate and collect feedback on your products.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/university" class="footer-link-block expo">
- <span class="title">University</span>
- <span>Ideas, thoughts and design resources shared with you.</span>
- </a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-bottom">
- <div class="row">
- <div class="medium-4 medium-push-8 columns">
- <ul class="home-social">
- <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
- <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
- <li><a href="http://zurb.com/contact" class="mail"></a></li>
- </ul>
- </div>
- <div class="medium-8 medium-pull-4 columns">
- <a href="http://www.zurb.com" class="zurb-logo regular"></a>
- <ul class="zurb-links">
- <li><a href="http://zurb.com/about">About</a></li>
- <li><a href="http://zurb.com/blog">Blog</a></li>
- <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
- <li><a href="http://zurb.com/contact">Contact</a></li>
- <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
- </ul>
- <p class="copyright">© 1998‐2016 ZURB, Inc. All rights reserved.</p>
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- <script>
- var _gaq = _gaq || [];
- _gaq.push(
- ['_setAccount', 'UA-2195009-2'],
- ['_trackPageview'],
- ['b._setAccount', 'UA-2195009-27'],
- ['b._trackPageview']
- );
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
-
- <script src="assets/js/vendor.js?hash=2756218f564be48531639be0e00d2622"></script>
- <script src="assets/js/foundation.js?hash=0bd84f376bf27a8876e6e45392686e0e"></script>
- <script src="assets/js/docs.js?hash=36e471c547773a5263faf919ffb8aecc"></script>
- <script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
-</body>
-</html>
+++ /dev/null
-<!doctype html>
-<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
-<html class="no-js" lang="en" dir="ltr">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="Create powerful multi-device layouts quickly and easily with the default 12-column, nestable Foundation grid. If you're familiar with grid systems, you'll feel right at home. If not, you'll learn quickly.">
- <link rel="icon" href="assets/img/icons/foundation-favicon.ico" type="image/x-icon">
- <title>Foundation for Sites 6 Docs | The Grid</title>
- <link href="assets/css/docs.css?hash=7ac9d1645de67d880bd2c5f3e0a32d2b" rel="stylesheet" />
- <link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=782b1f2e3045773dfb7ef834fc698b79" rel="stylesheet">
- <!-- <link rel="stylesheet" href="./node_modules/motion-ui/dist/motion-ui.css" /> -->
-</head>
-<body>
-
- <div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
-
- <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="mobile-ofc vertical menu">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
-
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/support.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/sort/unanswered">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
- </div>
-
- <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="vertical menu">
- <li><a href="#">Foundation</a></li>
- <li><a href="#">Dot</a></li>
- <li><a href="#">ZURB</a></li>
- <li><a href="#">Com</a></li>
- <li><a href="#">Slash</a></li>
- <li><a href="#">Sites</a></li>
- </ul>
- </div>
-
-
- <div class="off-canvas-content" data-off-canvas-content>
- <!-- Info Banner For Announcements or Links -->
- <!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
- <div class="info">
- <h5>Foundation 6 is here!</h5>
- </div>
- </a> -->
-
- <nav class="marketing-topbar show-for-medium">
-
- <ul class="menu">
- <li class="topbar-title"><a href="https://get.foundation/index.html"><img src="assets/img/logos/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
- </ul>
-
- <ul class="dropdown menu" data-dropdown-menu data-click-open="false">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/" target="_blank">F5 Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="https://get.foundation/emails/docs/" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
-
- </nav>
-
- <div class="title-bar hide-for-medium">
- <div class="title-bar-left">
- <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
- <span class="title-bar-title">Foundation</span>
- </div>
- </div>
-
-
- <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
-
- <div class="expanded row">
- <div class="medium-9 large-10 medium-push-3 large-push-2 columns">
-
-<article class="docs-component" id="docs-the-grid">
-
-<a href="#docs-menu" class="small secondary expanded button hide-for-medium">Jump to Nav</a>
-
-<header>
- <h1 class="docs-page-title">The Grid</h1>
-
-
- <p class="lead docs-page-lead">Create powerful multi-device layouts quickly and easily with the default 12-column, nestable Foundation grid. If you're familiar with grid systems, you'll feel right at home. If not, you'll learn quickly.</p>
-
- <ul class="menu simple docs-contribute-menu">
- <li><a href="https://github.com/zurb/foundation-sites/edit/master/docs/pages/grid.md" target="_blank"><i class="fi-pencil"></i>Edit this Page</a></li>
- <li><a href="https://github.com/zurb/foundation-sites/issues/new?title=%5BThe%20Grid%5D%20ISSUE%20NAME%20HERE" target="_blank"><i class="fi-social-github"></i>Report a Bug</a></li>
- <li><a href="https://get.foundation/forum" target="_blank"><i class="fi-comment"></i>Get Help</a></li>
- </ul>
-</header>
-
-<hr>
-
-<div class="row">
-
-<div class="large-9 columns" id="docs">
-
-<h2 id="basics" class="docs-heading" data-magellan-target="basics">Basics<a class="docs-heading-icon" href="#basics"></a></h2><p>Start by adding an element with a class of <code>.row</code>. This will create a horizontal block to contain vertical columns. Then add elements with a <code>.column</code> class within that row. You can use <code>.column</code> or <code>.columns</code>—the only difference is grammar. Specify the widths of each column with the <code>.small-#</code>, <code>.medium-#</code>, and <code>.large-#</code> classes.</p>
-<p><strong>Foundation is mobile-first.</strong> Code for small screens first, and larger devices will inherit those styles. Customize for larger screens as necessary.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-2 large-4 columns"</span>></span><span class="hljs-comment"><!-- ... --></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-4 large-4 columns"</span>></span><span class="hljs-comment"><!-- ... --></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-6 large-4 columns"</span>></span><span class="hljs-comment"><!-- ... --></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"large-3 columns"</span>></span><span class="hljs-comment"><!-- ... --></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"large-6 columns"</span>></span><span class="hljs-comment"><!-- ... --></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"large-3 columns"</span>></span><span class="hljs-comment"><!-- ... --></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-6 large-2 columns"</span>></span><span class="hljs-comment"><!-- ... --></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-6 large-8 columns"</span>></span><span class="hljs-comment"><!-- ... --></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-12 large-2 columns"</span>></span><span class="hljs-comment"><!-- ... --></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-3 columns"</span>></span><span class="hljs-comment"><!-- ... --></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-9 columns"</span>></span><span class="hljs-comment"><!-- ... --></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"large-4 columns"</span>></span><span class="hljs-comment"><!-- ... --></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"large-8 columns"</span>></span><span class="hljs-comment"><!-- ... --></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-6 large-5 columns"</span>></span><span class="hljs-comment"><!-- ... --></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-6 large-7 columns"</span>></span><span class="hljs-comment"><!-- ... --></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"large-6 columns"</span>></span><span class="hljs-comment"><!-- ... --></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"large-6 columns"</span>></span><span class="hljs-comment"><!-- ... --></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div><div class="row display">
- <div class="small-2 large-4 columns"><span class="hide-for-large">2</span><span class="show-for-large">4</span></div>
- <div class="small-4 large-4 columns">4</div>
- <div class="small-6 large-4 columns"><span class="hide-for-large">6</span><span class="show-for-large">4</span></div>
-</div>
-<div class="row display">
- <div class="large-3 columns"><span class="hide-for-large">full</span><span class="show-for-large">3</span></div>
- <div class="large-6 columns"><span class="hide-for-large">full</span><span class="show-for-large">6</span></div>
- <div class="large-3 columns"><span class="hide-for-large">full</span><span class="show-for-large">3</span></div>
-</div>
-<div class="row display">
- <div class="small-6 large-2 columns"><span class="hide-for-large">6</span><span class="show-for-large">2</span></div>
- <div class="small-6 large-8 columns"><span class="hide-for-large">6</span><span class="show-for-large">8</span></div>
- <div class="small-12 large-2 columns"><span class="hide-for-large">full</span><span class="show-for-large">2</span></div>
-</div>
-<div class="row display">
- <div class="small-3 columns">3</div>
- <div class="small-9 columns">9</div>
-</div>
-<div class="row display">
- <div class="large-4 columns"><span class="hide-for-large">full</span><span class="show-for-large">4</span></div>
- <div class="large-8 columns"><span class="hide-for-large">full</span><span class="show-for-large">8</span></div>
-</div>
-<div class="row display">
- <div class="small-6 large-5 columns"><span class="hide-for-large">6</span><span class="show-for-large">5</span></div>
- <div class="small-6 large-7 columns"><span class="hide-for-large">6</span><span class="show-for-large">7</span></div>
-</div>
-<div class="row display">
- <div class="large-6 columns"><span class="hide-for-large">full</span><span class="show-for-large">6</span></div>
- <div class="large-6 columns"><span class="hide-for-large">full</span><span class="show-for-large">6</span></div>
-</div>
-
-<hr>
-<h3 id="small-grids" class="docs-heading">Small Grids<a class="docs-heading-icon" href="#small-grids"></a></h3><p>Small grids expand to large screens easier than large grids cram into small screens.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-2 columns"</span>></span>2 <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hide-for-small-only"</span>></span>columns<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-10 columns"</span>></span>10 columns<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-3 columns"</span>></span>3 columns<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-9 columns"</span>></span>9 columns<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div><div class="row display">
- <div class="small-2 columns">2 columns</div>
- <div class="small-10 columns">10 columns</div>
-</div>
-<div class="row display">
- <div class="small-3 columns">3 columns</div>
- <div class="small-9 columns">9 columns</div>
-</div>
-
-<hr>
-<h3 id="medium-grid" class="docs-heading">Medium Grid<a class="docs-heading-icon" href="#medium-grid"></a></h3><p>Medium sized screens will inherit styles from small, unless you specify a different layout using the medium grid classes.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"medium-2 columns"</span>></span>2 columns<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"medium-10 columns"</span>></span>10 columns<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"medium-3 columns"</span>></span>3 columns<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"medium-9 columns"</span>></span>9 columns<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div><div class="row display">
- <div class="medium-2 columns">2 columns</div>
- <div class="medium-10 columns">10 columns</div>
-</div>
-<div class="row display">
- <div class="medium-3 columns">3 columns</div>
- <div class="medium-9 columns">9 columns</div>
-</div>
-
-<hr>
-<h2 id="advanced" class="docs-heading" data-magellan-target="advanced">Advanced<a class="docs-heading-icon" href="#advanced"></a></h2><h3 id="combined-column-row" class="docs-heading">Combined Column/Row<a class="docs-heading-icon" href="#combined-column-row"></a></h3><p>If you need a full-width column to use as a container, put the <code>.column</code> and <code>.row</code> classes on the same element. You can still nest more grids inside this container like usual.</p>
-<div class="warning callout">
- <p>Column rows can use sizing classes like <code>.small-8</code>, but only when used as a top-level container—not when nested inside another row.</p>
-</div>
-
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column row"</span>></span>
- Row column
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div><div class="column row display">
- Row column
-</div>
-
-<hr>
-<h3 id="fluid-row" class="docs-heading">Fluid Row<a class="docs-heading-icon" href="#fluid-row"></a></h3><p>Normally, a row is always 1200 pixels wide. Make a row completely fluid by adding the <code>.expanded</code> class.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"expanded row"</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div><hr>
-<h3 id="nesting" class="docs-heading">Nesting<a class="docs-heading-icon" href="#nesting"></a></h3><p>You can nest the grids indefinitely, though at a certain point it will get absurd.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-8 columns"</span>></span>8
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-8 columns"</span>></span>8 Nested
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-8 columns"</span>></span>8 Nested Again<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-4 columns"</span>></span>4<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-4 columns"</span>></span>4<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-4 columns"</span>></span>4<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div><div class="row display">
- <div class="small-8 columns">8
- <div class="row">
- <div class="small-8 columns">8 Nested
- <div class="row">
- <div class="small-8 columns">8 Nested Again</div>
- <div class="small-4 columns">4</div>
- </div>
- </div>
- <div class="small-4 columns">4</div>
- </div>
- </div>
- <div class="small-4 columns">4</div>
-</div>
-
-<hr>
-<h3 id="offsets" class="docs-heading">Offsets<a class="docs-heading-icon" href="#offsets"></a></h3><p>Move blocks up to 11 columns to the right by using classes like <code>.large-offset-1</code> and <code>.small-offset-3</code>.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"large-1 columns"</span>></span>1<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"large-11 columns"</span>></span>11<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"large-1 columns"</span>></span>1<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"large-10 large-offset-1 columns"</span>></span>10, offset 1<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"large-1 columns"</span>></span>1<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"large-9 large-offset-2 columns"</span>></span>9, offset 2<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"large-1 columns"</span>></span>1<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"large-8 large-offset-3 columns"</span>></span>8, offset 3<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div><div class="row display">
- <div class="large-1 columns">1</div>
- <div class="large-11 columns">11</div>
-</div>
-<div class="row display">
- <div class="large-1 columns">1</div>
- <div class="large-10 large-offset-1 columns">10, offset 1</div>
-</div>
-<div class="row display">
- <div class="large-1 columns">1</div>
- <div class="large-9 large-offset-2 columns">9, offset 2</div>
-</div>
-<div class="row display">
- <div class="large-1 columns">1</div>
- <div class="large-8 large-offset-3 columns">8, offset 3</div>
-</div>
-
-<hr>
-<h3 id="incomplete-rows" class="docs-heading">Incomplete Rows<a class="docs-heading-icon" href="#incomplete-rows"></a></h3><p>In order to work around browsers' different rounding behaviors, Foundation will float the last column in a row to the right so the edge aligns. If your row doesn't have a count that adds up to 12 columns, you can tag the last column with a class of <code>.end</code> in order to override that behavior.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"medium-3 columns"</span>></span>3<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"medium-3 columns"</span>></span>3<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"medium-3 columns"</span>></span>3<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"medium-3 columns"</span>></span>3<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"medium-3 columns"</span>></span>3<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"medium-3 columns end"</span>></span>3 end<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div><div class="row display-end">
- <div class="medium-3 columns">3</div>
- <div class="medium-3 columns">3</div>
- <div class="medium-3 columns">3</div>
-</div>
-<div class="row display-end">
- <div class="medium-3 columns">3</div>
- <div class="medium-3 columns">3</div>
- <div class="medium-3 columns end">3 end</div>
-</div>
-
-<hr>
-<h3 id="gutters" class="docs-heading">Gutters<a class="docs-heading-icon" href="#gutters"></a></h3><div class="warning callout">
- <p>Responsive gutters were added in Foundation 6.1.</p>
-</div>
-
-<p>The grid <em>gutter</em>—the space between two columns in a row, and the space between the edge of a grid and the edge of the page—is responsive, and becomes wider on larger screens.</p>
-<table>
-<thead>
-<tr>
-<th>Breakpoint</th>
-<th>Gutter Size</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td><code>small</code></td>
-<td>20px</td>
-</tr>
-<tr>
-<td><code>medium</code></td>
-<td>30px</td>
-</tr>
-</tbody>
-</table>
-<p>If you're using the Sass version of Foundation, you can change these defaults by editing the <code>$grid-column-gutter</code> variable:</p>
-<div class="docs-code" data-docs-code><pre><code class="scss"><span class="hljs-variable">$grid-column-gutter</span>: (
- small: <span class="hljs-number">20px</span>,
- medium: <span class="hljs-number">30px</span>,
-);</code></pre></div><p>To add more gutter definitions, add new lines to the map. The breakpoint names used here must match a breakpoint name in your project's <code>$breakpoints</code> map.</p>
-<p>Or, if you prefer using one gutter size on every breakpoint, just use a single number.</p>
-<div class="docs-code" data-docs-code><pre><code class="scss"><span class="hljs-variable">$grid-column-gutter</span>: <span class="hljs-number">30px</span>;</code></pre></div><hr>
-<h3 id="collapse-uncollapse-rows" class="docs-heading">Collapse/Uncollapse Rows<a class="docs-heading-icon" href="#collapse-uncollapse-rows"></a></h3><p>The <code>.collapse</code> class lets you remove column gutters (padding).</p>
-<p>There are times when you won't want each media query to be collapsed or uncollapsed. In this case, use the media query size you want and collapse or uncollapse and add that to your row element. Example shows no gutter at small media size and then adds the gutter to columns at medium.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row medium-uncollapse large-collapse"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-6 columns"</span>></span>
- Removes gutter at large media query
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-6 columns"</span>></span>
- Removes gutter at large media query
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div><p class="lead">Scale the browser down to a medium size to see the difference.</p>
-
-<div class="row medium-uncollapse large-collapse">
- <div class="small-6 columns">
- <div class="callout secondary">
- <p class="show-for-small-only">On a small screen, I have gutters!</p>
- <p class="show-for-medium-only">On a medium screen, I have gutters!</p>
- <p class="show-for-large">On a large screen, I have no gutters!</p>
- </div>
- </div>
- <div class="small-6 columns">
- <div class="callout secondary">
- <p class="show-for-small-only">On a small screen, I have gutters!</p>
- <p class="show-for-medium-only">On a medium screen, I have gutters!</p>
- <p class="show-for-large">On a large screen, I have no gutters!</p>
- </div>
- </div>
-</div>
-
-<hr>
-<h3 id="centered-columns" class="docs-heading">Centered Columns<a class="docs-heading-icon" href="#centered-columns"></a></h3><p>Center your columns by adding a class of <code>.small-centered</code> to your column. Large will inherit small centering by default, but you can also center solely on large by applying a <code>.large-centered</code> class. To uncenter on large screens, use <code>.large-uncentered</code>.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-3 small-centered columns"</span>></span>3 centered<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-6 large-centered columns"</span>></span>6 centered<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-9 small-centered large-uncentered columns"</span>></span>9 centered<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-11 small-centered columns"</span>></span>11 centered<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div><div class="row display">
- <div class="small-3 small-centered columns">3 centered</div>
-</div>
-<div class="row display">
- <div class="small-6 large-centered columns">6 centered, large</div>
-</div>
-<div class="row display">
- <div class="small-9 small-centered large-uncentered columns">9 centered small</div>
-</div>
-<div class="row display">
- <div class="small-11 small-centered columns">11 centered</div>
-</div>
-
-<hr>
-<h3 id="source-ordering" class="docs-heading">Source Ordering<a class="docs-heading-icon" href="#source-ordering"></a></h3><p>Using these source ordering classes, you can shift columns around between our breakpoints. This means if you place sub-navigation below main content on small displays, you have the option to position the sub-navigation on either the left or right of the page for large displays. Prefix push/pull with the size of the device you want to apply the styles to. <code>.medium-push-#</code>, <code>.large-push-#</code> is the syntax you'll use. Use the number 0 instead to reset a push/pull, such as <code>.medium-push-0</code> or <code>.large-pull-0</code>.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-10 small-push-2 columns"</span>></span>10<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-2 small-pull-10 columns"</span>></span>2, last<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"large-9 large-push-3 columns"</span>></span>9<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"large-3 large-pull-9 columns"</span>></span>3, last<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"large-8 large-push-4 columns"</span>></span>8<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"large-4 large-pull-8 columns"</span>></span>4, last<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-5 small-push-7 medium-7 medium-push-5 columns"</span>></span>7<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-7 small-pull-5 medium-5 medium-pull-7 columns"</span>></span>5, last<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"medium-6 medium-push-6 columns"</span>></span>6<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"medium-6 medium-pull-6 columns"</span>></span>6, last<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div><div class="row display">
- <div class="small-10 small-push-2 columns">10</div>
- <div class="small-2 small-pull-10 columns">2, last</div>
-</div>
-<div class="row display">
- <div class="large-9 large-push-3 columns">9</div>
- <div class="large-3 large-pull-9 columns">3, last</div>
-</div>
-<div class="row display">
- <div class="large-8 large-push-4 columns">8</div>
- <div class="large-4 large-pull-8 columns">4, last</div>
-</div>
-<div class="row display">
- <div class="small-5 small-push-7 medium-7 medium-push-5 columns">7</div>
- <div class="small-7 small-pull-5 medium-5 medium-pull-7 columns">5, last</div>
-</div>
-<div class="row display">
- <div class="medium-6 medium-push-6 columns">6</div>
- <div class="medium-6 medium-pull-6 columns">6, last</div>
-</div>
-
-<hr>
-<h3 id="block-grids" class="docs-heading">Block Grids<a class="docs-heading-icon" href="#block-grids"></a></h3><p>The block grid from Foundation 5 has been merged into the main grid. Add a class of the format <code>[size]-up-[n]</code> to change the size of all columns within the row. By default, the max number of columns you can use with block grid are 8.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row small-up-1 medium-up-2 large-up-4"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"//placehold.it/300x300"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"thumbnail"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">""</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"//placehold.it/300x300"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"thumbnail"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">""</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"//placehold.it/300x300"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"thumbnail"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">""</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"//placehold.it/300x300"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"thumbnail"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">""</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"//placehold.it/300x300"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"thumbnail"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">""</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"//placehold.it/300x300"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"thumbnail"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">""</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="row small-up-1 medium-up-2 large-up-4">
- <div class="column">
- <img src="//placehold.it/300x300" class="thumbnail" alt="">
- </div>
- <div class="column">
- <img src="//placehold.it/300x300" class="thumbnail" alt="">
- </div>
- <div class="column">
- <img src="//placehold.it/300x300" class="thumbnail" alt="">
- </div>
- <div class="column">
- <img src="//placehold.it/300x300" class="thumbnail" alt="">
- </div>
- <div class="column">
- <img src="//placehold.it/300x300" class="thumbnail" alt="">
- </div>
- <div class="column">
- <img src="//placehold.it/300x300" class="thumbnail" alt="">
- </div>
-</div></div><hr>
-<h2 id="building-semantically" class="docs-heading" data-magellan-target="building-semantically">Building Semantically<a class="docs-heading-icon" href="#building-semantically"></a></h2><p>Our grid CSS is generated with a powerful set of Sass mixins, which you can use in your own code to build a semantic grid.</p>
-<h3 id="rows" class="docs-heading">Rows<a class="docs-heading-icon" href="#rows"></a></h3><p>Use the <code>grid-row()</code> mixin to create a row.</p>
-<div class="docs-code" data-docs-code><pre><code class="scss"><span class="hljs-selector-class">.container</span> {
- @<span class="hljs-keyword">include</span> grid-row;
-}</code></pre></div><hr>
-<h3 id="columns" class="docs-heading">Columns<a class="docs-heading-icon" href="#columns"></a></h3><p>Use the <code>grid-column()</code> mixin to create a column. There are a number of ways to define the width of the column.</p>
-<div class="docs-code" data-docs-code><pre><code class="scss"><span class="hljs-selector-class">.main-content</span> {
- <span class="hljs-comment">// Use the full column count (100%)</span>
- @<span class="hljs-keyword">include</span> grid-column;
-
- <span class="hljs-comment">// Use a column count (33%);</span>
- @<span class="hljs-keyword">include</span> grid-column(<span class="hljs-number">4</span>);
-
- <span class="hljs-comment">// Use a percentage (15%)</span>
- @<span class="hljs-keyword">include</span> grid-column(<span class="hljs-number">15%</span>);
-
- <span class="hljs-comment">// Use a custom fraction (20%)</span>
- @<span class="hljs-keyword">include</span> grid-column(<span class="hljs-number">1</span> of 5);
-}</code></pre></div><p>The grid column calculator can also be accessed as a function. This gives you the percentage value, without any of the grid column CSS.</p>
-<div class="docs-code" data-docs-code><pre><code class="scss"><span class="hljs-selector-class">.main-content</span> {
- <span class="hljs-attribute">width</span>: grid-column(<span class="hljs-number">1</span> of <span class="hljs-number">7</span>);
-}</code></pre></div><p>To center a column semantically. Use ´grid-column-position(center);´.</p>
-<div class="docs-code" data-docs-code><pre><code class="scss"><span class="hljs-selector-class">.centered-column</span> {
- @<span class="hljs-keyword">include</span> grid-column-position(center);
-}</code></pre></div><hr>
-<h3 id="multiple-grids" class="docs-heading">Multiple Grids<a class="docs-heading-icon" href="#multiple-grids"></a></h3><p>By default, all grids use the number of columns set by the <code>$grid-column-count</code> variable. However, this can be selectively overridden within an instance of a row.</p>
-<p>In this example, the grid is 16 columns instead of the normal 12. Any references to column math inside the mixin will use the new column count.</p>
-<div class="docs-code" data-docs-code><pre><code class="scss"><span class="hljs-selector-class">.container</span> {
- @<span class="hljs-keyword">include</span> grid-row(<span class="hljs-number">16</span>) {
- <span class="hljs-selector-class">.main-content</span> {
- <span class="hljs-comment">// 5/16 = 31.25%</span>
- @<span class="hljs-keyword">include</span> grid-column(<span class="hljs-number">5</span>);
- }
-
- <span class="hljs-selector-class">.sidebar</span> {
- <span class="hljs-comment">// 11/16 = 68.75%</span>
- @<span class="hljs-keyword">include</span> grid-column(<span class="hljs-number">11</span>);
- }
- }
-}</code></pre></div><p>You can also temporarily change the grid context without outputting any row CSS, by using the <code>grid-context()</code> mixin.</p>
-<div class="docs-code" data-docs-code><pre><code class="scss">@<span class="hljs-keyword">include</span> grid-context(<span class="hljs-number">7</span>) {
- <span class="hljs-selector-class">.sidebar</span> {
- @<span class="hljs-keyword">include</span> grid-column(<span class="hljs-number">4</span>);
- }
-}</code></pre></div><p>Every other grid feature, from sizing to offsets to source ordering, can also be accessed with a mixin. Pair them with the <code>breakpoint()</code> mixin to make your grid responsive.</p>
-<p>Refer to the Sass documentation below to learn how each mixin works.</p>
-<div class="docs-code" data-docs-code><pre><code class="scss"><span class="hljs-selector-class">.main-content</span> {
- <span class="hljs-comment">// The mixins have shorthands, too!</span>
- @<span class="hljs-keyword">include</span> grid-col;
-
- @<span class="hljs-keyword">include</span> breakpoint(medium) {
- <span class="hljs-comment">// Changes size only</span>
- @<span class="hljs-keyword">include</span> grid-col-size(<span class="hljs-number">8</span>);
-
- <span class="hljs-comment">// Changes position only</span>
- @<span class="hljs-keyword">include</span> grid-col-pos(<span class="hljs-number">4</span>);
- }
-}</code></pre></div>
-
-<hr>
-<section>
- <h2 id="sass-reference" class="docs-heading" data-magellan-target="sass-reference">Sass Reference<a class="docs-heading-icon" href="#sass-reference"></a></h2>
-
- <section>
- <h3 id="sass-variables" class="docs-heading">Variables<a class="docs-heading-icon" href="#sass-variables"></a></h3>
-
- <p>The default styles of this component can be customized using these Sass variables in your project's <a href="sass.html#the-settings-file">settings file</a>.</p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td class="name"><code>$grid-row-width</code></td>
- <td>Number</td>
- <td class="number"><code>$global-width</code></td>
- <td><p>The maximum width of a row.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$grid-column-count</code></td>
- <td>Number</td>
- <td class="number"><code>12</code></td>
- <td><p>The default column count of a grid. Changing this value affects the logic of the grid mixins, and the number of CSS classes output.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$grid-column-gutter</code></td>
- <td>Map or Length</td>
- <td class="map | length"><code>
- small: 20px<br>
- medium: 30px<br>
-</code></td>
- <td><p>The amount of space between columns at different screen sizes. To use just one size, set the variable to a number instead of a map.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$grid-column-align-edge</code></td>
- <td>Boolean</td>
- <td class="boolean"><code>true</code></td>
- <td><p>If <code>true</code>, the last column in a row will align to the opposite edge of the row.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$block-grid-max</code></td>
- <td>Number</td>
- <td class="number"><code>8</code></td>
- <td><p>The highest number of <code>.x-up</code> classes available when using the block grid CSS.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="sass-mixins" class="docs-heading">Mixins<a class="docs-heading-icon" href="#sass-mixins"></a></h3>
-
- <p>We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.</p>
-
-
- <section >
- <h4 id="grid-column" class="docs-heading">grid-column<a class="docs-heading-icon" href="#grid-column"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> grid-column(<span class="hljs-variable">$columns</span>, <span class="hljs-variable">$gutter</span>);</code></pre>
- </div>
-
- <p>Creates a grid column.</p>
-
-
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$columns</code></td>
- <td>Mixed</td>
- <td><code>$grid-column-count</code></td>
- <td><p>Width of the column. Refer to the <code>grid-column()</code> function to see possible values.</p>
-</td>
- </tr>
- <tr>
- <td><code>$gutter</code></td>
- <td>Number</td>
- <td><code>$grid-column-gutter</code></td>
- <td><p>Spacing between columns.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="grid-column-row" class="docs-heading">grid-column-row<a class="docs-heading-icon" href="#grid-column-row"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> grid-column-row(<span class="hljs-variable">$gutter</span>);</code></pre>
- </div>
-
- <p>Creates a grid column row. This is the equivalent of adding <code>.row</code> and <code>.column</code> to the same element.</p>
-
-
- <p><strong>Aliases:</strong> <code>grid-col-row()</code></p>
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$gutter</code></td>
- <td>Number</td>
- <td><code>$grid-column-gutter</code></td>
- <td><p>Width of the gutters on either side of the column row.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="grid-column-collapse" class="docs-heading">grid-column-collapse<a class="docs-heading-icon" href="#grid-column-collapse"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> grid-column-collapse;</code></pre>
- </div>
-
- <p>Collapse the gutters on a column by removing the padding. <strong>Note:</strong> only use this mixin within a breakpoint. To collapse a column's gutters on all screen sizes, use the <code>$gutter</code> parameter of the <code>grid-column()</code> mixin instead.</p>
-
-
- <p><strong>Aliases:</strong> <code>grid-col-collapse()</code></p>
-
-
-
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="grid-column-uncollapse" class="docs-heading">grid-column-uncollapse<a class="docs-heading-icon" href="#grid-column-uncollapse"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> grid-column-uncollapse(<span class="hljs-variable">$gutter</span>);</code></pre>
- </div>
-
- <p>Un-collapse the gutters on a column by re-adding the padding.</p>
-
-
- <p><strong>Aliases:</strong> <code>grid-col-uncollapse()</code></p>
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$gutter</code></td>
- <td>Number</td>
- <td><code>$grid-column-gutter</code></td>
- <td><p>Spacing between columns.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="grid-layout" class="docs-heading">grid-layout<a class="docs-heading-icon" href="#grid-layout"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> grid-layout(<span class="hljs-variable">$n</span>, <span class="hljs-variable">$selector</span>);</code></pre>
- </div>
-
- <p>Sizes child elements so that <code>$n</code> number of items appear on each row.</p>
-
-
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$n</code></td>
- <td>Number</td>
- <td><code><span style="color: #999;">None</span></code></td>
- <td><p>Number of elements to display per row.</p>
-</td>
- </tr>
- <tr>
- <td><code>$selector</code></td>
- <td>String</td>
- <td><code>'.column'</code></td>
- <td><p>Selector(s) to use for child elements.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="grid-layout-center-last" class="docs-heading">grid-layout-center-last<a class="docs-heading-icon" href="#grid-layout-center-last"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> grid-layout-center-last(<span class="hljs-variable">$n</span>);</code></pre>
- </div>
-
- <p>Adds extra CSS to block grid children so the last items in the row center automatically. Apply this to the columns, not the row.</p>
-
-
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$n</code></td>
- <td>Number</td>
- <td><code><span style="color: #999;">None</span></code></td>
- <td><p>Number of items that appear in each row.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="grid-column-position" class="docs-heading">grid-column-position<a class="docs-heading-icon" href="#grid-column-position"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> grid-column-position(<span class="hljs-variable">$position</span>);</code></pre>
- </div>
-
- <p>Reposition a column.</p>
-
-
- <p><strong>Aliases:</strong> <code>grid-col-pos()</code></p>
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$position</code></td>
- <td>Number or Keyword</td>
- <td><code><span style="color: #999;">None</span></code></td>
- <td><p>Direction and amount to move. The column will move equal to the width of the column count specified. A positive number will push the column to the right, while a negative number will pull it to the left. Set to center to center the column.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="grid-column-unposition" class="docs-heading">grid-column-unposition<a class="docs-heading-icon" href="#grid-column-unposition"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> grid-column-unposition;</code></pre>
- </div>
-
- <p>Reset a position definition.</p>
-
-
- <p><strong>Aliases:</strong> <code>grid-col-unpos()</code></p>
-
-
-
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="grid-column-offset" class="docs-heading">grid-column-offset<a class="docs-heading-icon" href="#grid-column-offset"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> grid-column-offset(<span class="hljs-variable">$n</span>);</code></pre>
- </div>
-
- <p>Offsets a column to the right by <code>$n</code> columns.</p>
-
-
- <p><strong>Aliases:</strong> <code>grid-col-off()</code></p>
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$n</code></td>
- <td>Number or List</td>
- <td><code><span style="color: #999;">None</span></code></td>
- <td><p>Width to offset by. You can pass in any value accepted by the <code>grid-column()</code> mixin, such as <code>6</code>, <code>50%</code>, or <code>1 of 2</code>.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="grid-column-end" class="docs-heading">grid-column-end<a class="docs-heading-icon" href="#grid-column-end"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> grid-column-end;</code></pre>
- </div>
-
- <p>Disable the default behavior of the last column in a row aligning to the opposite edge.</p>
-
-
- <p><strong>Aliases:</strong> <code>grid-col-end()</code></p>
-
-
-
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="grid-context" class="docs-heading">grid-context<a class="docs-heading-icon" href="#grid-context"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> grid-context(<span class="hljs-variable">$columns</span>, <span class="hljs-variable">$root</span>) { }</code></pre>
- </div>
-
- <p>Change the behavior of columns defined inside this mixin to use a different column count.</p>
-
-
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$columns</code></td>
- <td>Number</td>
- <td><code><span style="color: #999;">None</span></code></td>
- <td><p>Number of columns to use.</p>
-</td>
- </tr>
- <tr>
- <td><code>$root</code></td>
- <td>Boolean</td>
- <td><code>false</code></td>
- <td><p>If <code>false</code>, selectors inside this mixin will nest inside the parent selector.
- If <code>true</code>, selectors will not nest.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="grid-row" class="docs-heading">grid-row<a class="docs-heading-icon" href="#grid-row"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> grid-row(<span class="hljs-variable">$columns</span>, <span class="hljs-variable">$behavior</span>, <span class="hljs-variable">$width</span>, <span class="hljs-variable">$cf</span>, <span class="hljs-variable">$gutter</span>) { }</code></pre>
- </div>
-
- <p>Creates a grid row.</p>
-
-
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$columns</code></td>
- <td>Number</td>
- <td><code>null</code></td>
- <td><p>Column count for this row. <code>null</code> will use the default column count.</p>
-</td>
- </tr>
- <tr>
- <td><code>$behavior</code></td>
- <td>Keywords</td>
- <td><code>null</code></td>
- <td><p>Modifications to the default grid styles. <code>nest</code> indicates the row will be placed inside another row. <code>collapse</code> indicates that the columns inside this row will not have padding. <code>nest collapse</code> combines both behaviors.</p>
-</td>
- </tr>
- <tr>
- <td><code>$width</code></td>
- <td>Number</td>
- <td><code>$grid-row-width</code></td>
- <td><p>Maximum width of the row.</p>
-</td>
- </tr>
- <tr>
- <td><code>$cf</code></td>
- <td>Boolean</td>
- <td><code>true</code></td>
- <td><p>Whether or not to include a clearfix.</p>
-</td>
- </tr>
- <tr>
- <td><code>$gutter</code></td>
- <td>Number</td>
- <td><code>$grid-column-gutter</code></td>
- <td><p>Gutter to use when inverting margins, in case the row is nested.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="grid-row-nest" class="docs-heading">grid-row-nest<a class="docs-heading-icon" href="#grid-row-nest"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> grid-row-nest(<span class="hljs-variable">$gutter</span>);</code></pre>
- </div>
-
- <p>Inverts the margins of a row to nest it inside of a column.</p>
-
-
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$gutter</code></td>
- <td>Map or null</td>
- <td><code>null</code></td>
- <td><p>Gutter value to use when inverting the margins. Set to <code>null</code> to refer to the responsive gutter settings.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="grid-column-size" class="docs-heading">grid-column-size<a class="docs-heading-icon" href="#grid-column-size"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> grid-column-size(<span class="hljs-variable">$width</span>);</code></pre>
- </div>
-
- <p>Set the width of a grid column.</p>
-
-
- <p><strong>Aliases:</strong> <code>grid-col-size()</code></p>
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$width</code></td>
- <td>Number or List</td>
- <td><code>$grid-column-count</code></td>
- <td><p>Width to make the column. You can pass in any value accepted by the <code>grid-column()</code> function, such as <code>6</code>, <code>50%</code>, or <code>1 of 2</code>.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
-
-
- </section>
-
- <hr>
-
- <section>
- <h3 id="sass-functions" class="docs-heading">Functions<a class="docs-heading-icon" href="#sass-functions"></a></h3>
-
-
- <section >
- <h4 id="grid-column" class="docs-heading">grid-column<a class="docs-heading-icon" href="#grid-column"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>grid-column(<span class="hljs-variable">$columns</span>)</code></pre>
- </div>
-
- <p>Calculates the width of a column based on a number of factors.</p>
-
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$columns</code></td>
- <td>Number or List</td>
- <td><code><span style="color: #999;">None</span></code></td>
- <td><p>Width of the column. Accepts multiple values:</p>
-<ul>
-<li>A percentage value will make the column that exact size.</li>
-<li>A single digit will make the column span that number of columns wide, taking into account the column count of the parent row.</li>
-<li>A string of the format "x of y" will make a column that is <em>x</em> columns wide, assuming <em>y</em> total columns for the parent.</li>
-</ul>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- </section>
-
-</section>
-
-
-<!-- <hr> -->
-<!-- <section class="docs-building-blocks">
- <h2 id="building-blocks" class="docs-heading" data-magellan-target="building-blocks">Building Blocks<a class="docs-heading-icon" href="#building-blocks"></a></h2>
-
- <p><a href="http://zurb.com/building-blocks">Building Blocks</a> is a ZURB-curated resource with useful code snippets that use Foundation components. Here are a few for this component:</p>
-
- <div class="warning callout">
- <p>These are placeholder items. If you have ideas for building blocks for this component, <a href="https://github.com/zurb/foundation-sites-6/issues/118">we're taking ideas on GitHub</a>.</p>
- </div>
-
- <div data-building-blocks></div>
-</section> -->
-
-</div>
-
-<div class="large-3 columns" data-sticky-container>
- <nav class="columns docs-toc-wrap" data-sticky data-anchor="docs" data-sticky-on="large">
- <div class="docs-toc hide" id="docsTOC">
- <ul class="vertical menu" data-docs-toc>
- <li class="docs-nav-title">On this page:</li>
- </ul>
- </div>
- <div class="foundation-toc-ad-unit" id="TOCAdUnit">
- </div>
- </nav>
-</div>
-
-</div>
-
-</article>
-
- </div>
- <div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
- <ul class="vertical menu docs-nav" id="docs-menu">
- <p class="docs-nav-version">
- <span data-docs-version></span>
- <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">(Changelog)</a>
- </p>
-
- <li class="docs-nav-title">Getting Started</li>
- <li><a href="installation.html">Installation</a></li>
- <li><a href="starter-projects.html">Starter Projects</a></li>
- <li><a href="compatibility.html">Compatibility</a></li>
- <li><a href="accessibility.html">Accessibility</a></li>
- <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
-
- <li class="docs-nav-title">Setup</li>
- <li><a href="global.html">Global Styles</a></li>
- <li><a href="rtl.html">Right-to-Left Support</a></li>
- <li><a href="flexbox.html">Flexbox</a></li>
- <li><a href="sass.html">Sass</a></li>
- <li><a href="javascript.html">JavaScript</a></li>
- <li><a href="javascript-utilities.html">JavaScript Utilities</a></li>
- <li><a href="media-queries.html">Media Queries</a></li>
-
- <li class="docs-nav-title">General</li>
- <li class="current"><a href="grid.html">Grid</a></li>
- <li><a href="flex-grid.html">Flex Grid</a></li>
- <li><a href="forms.html">Forms</a></li>
- <li><a href="visibility.html">Visibility Classes</a></li>
- <li><a href="float-classes.html">Float Classes</a></li>
-
- <li class="docs-nav-title">Typography</li>
- <li><a href="typography-base.html">Base Styles</a></li>
- <li><a href="typography-helpers.html">Helper Classes</a></li>
-
- <li class="docs-nav-title">Controls</li>
- <li><a href="button.html">Button</a></li>
- <li><a href="button-group.html">Button Group</a></li>
- <li><a href="close-button.html">Close Button</a></li>
- <li><a href="slider.html">Slider <span class="label">JS</span></a></li>
- <li><a href="switch.html">Switch</a></li>
-
- <li class="docs-nav-title">Navigation</li>
- <li><a href="navigation.html">Overview</a></li>
- <li><a href="menu.html">Menu</a></li>
- <li><a href="dropdown-menu.html">Dropdown Menu <span class="label">JS</span></a></li>
- <li><a href="drilldown-menu.html">Drilldown Menu <span class="label">JS</span></a></li>
- <li><a href="accordion-menu.html">Accordion Menu <span class="label">JS</span></a></li>
- <li><a href="top-bar.html">Top Bar</a></li>
- <li><a href="responsive-navigation.html">Responsive Navigation</a></li>
- <li><a href="magellan.html">Magellan <span class="label">JS</span></a></li>
- <li><a href="pagination.html">Pagination</a></li>
- <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
-
- <li class="docs-nav-title">Containers</li>
- <li><a href="accordion.html">Accordion <span class="label">JS</span></a></li>
- <li><a href="callout.html">Callout</a></li>
- <li><a href="dropdown.html">Dropdown <span class="label">JS</span></a></li>
- <li><a href="media-object.html">Media Object</a></li>
- <li><a href="off-canvas.html">Off-canvas <span class="label">JS</span></a></li>
- <li><a href="reveal.html">Reveal <span class="label">JS</span> <small>Modal</small></a></li>
- <li><a href="table.html">Table</a></li>
- <li><a href="tabs.html">Tabs <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Media</li>
- <li><a href="badge.html">Badge</a></li>
- <li><a href="flex-video.html">Flex Video</a></li>
- <li><a href="label.html">Label</a></li>
- <li><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
- <li><a href="progress-bar.html">Progress Bar</a></li>
- <li><a href="thumbnail.html">Thumbnail</a></li>
- <li><a href="tooltip.html">Tooltip <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Plugins</li>
- <li><a href="abide.html">Abide <small>Form Validation</small></a></li>
- <li><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
- <li><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
- <li><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
- <li><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
-
- <li class="docs-nav-title">Sass</li>
- <li><a href="sass-functions.html">Functions</a></li>
- <li><a href="sass-mixins.html">Mixins</a></li>
-
- <li class="docs-nav-title">Libraries</li>
- <li><a href="motion-ui.html">Motion UI</a></li>
- <li><a href="panini.html">Panini</a></li>
- <li><a href="style-sherpa.html">Style Sherpa</a></li>
-
- <li class="docs-nav-title">Older Versions</li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
- <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
- <li><a href="https://get.foundation/sites/docs/v/3.2.5/">Foundation 3</a></li>
- <li><a href="https://get.foundation/sites/docs/v/2.2.1/">Foundation 2</a></li>
- </ul>
-
- </div>
- </div>
-
- <!-- Small Business(Docs) -->
- <section id="studiosCallout">
- <div class="row">
- <div class="medium-4 large-4 columns">
- <img src="https://get.foundation/assets/img/smallbiz-footer.svg" alt="">
- </div>
- <div class="medium-8 large-8 columns banner-info">
- <div class="row column property-label">ZURB Foundation</div>
- <h3 class="light">Yeah, we can help with that.</h3>
- <p class="lead"> We’ll collaborate with your team throughout the entire project life cycle. We’ll take your concept and move it through ideation, hi-fi wireframes, visual design and code, all while informing you on the whys and hows along the way.</p>
- <div class="course-buttons">
- <a href="https://get.foundation/get-involved/premium-support.html" class="studios button" data-zcom-event="studios_foundation_click" id="foundationSmallV1">Show Me How →</a>
- </div>
- </div>
- </div>
- </section>
-
- <div class="docs-newsletter">
- <div class="row">
- <div class="medium-7 large-8 columns">
- <a target="_blank" href="https://get.foundation/learn/responsive-reading.html">
- <h5 class="">Download ZURB’s 21 Responsive Trends That Will Shape 2017</h5>
- <p style="margin-bottom: 0;">Stay informed with amazing responsive trends each month from ZURB.</p>
- </a>
- </div>
- <div class="medium-5 large-4 footer-signup-form columns">
- <a style="margin-bottom: 0;" target="_blank" href="https://get.foundation/learn/responsive-reading.html" class="button expanded">Download the PDF</a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-top bg-fblue">
- <div class="row property">
- <div class="medium-4 columns">
- <div class="property-info">
- <h3>Foundation for Sites</h3>
- <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
- </p>
- </div>
- </div>
-
- <div class="medium-8 columns">
- <div class="row collapse">
- <div class="medium-4 columns">
- <div class="learn-links">
- <h4 class="hide-for-small">Want more?</h4>
- <ul>
- <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
- <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
- <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
- <li><a href="http://zurb.com/university/courses">Training</a></li>
- <li><a href="http://zurb.com/library">Design Resources</a></li>
- </ul>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="support-links">
- <h4 class="hide-for-small">Talk to us</h4>
- <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
- <p><a href="https://get.foundation/get-involved/contribute.html">Get involved in<br>our amazing community.</a></p>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="connect-links">
- <h4 class="hide-for-small">Stay Updated</h4>
- <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
- <a href="http://zurb.com/news" class="small button">Stay Connected</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="row global">
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/studios" class="footer-link-block services">
- <span class="title">Studios</span>
- <span>Helping more than 200 startups succeed since 1998.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="https://get.foundation/" class="footer-link-block foundation">
- <span class="title">Foundation</span>
- <span>The most advanced front-end framework in the world.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/notable" class="footer-link-block apps">
- <span class="title">Notable Design Apps</span>
- <span>Prototype, iterate and collect feedback on your products.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/university" class="footer-link-block expo">
- <span class="title">University</span>
- <span>Ideas, thoughts and design resources shared with you.</span>
- </a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-bottom">
- <div class="row">
- <div class="medium-4 medium-push-8 columns">
- <ul class="home-social">
- <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
- <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
- <li><a href="http://zurb.com/contact" class="mail"></a></li>
- </ul>
- </div>
- <div class="medium-8 medium-pull-4 columns">
- <a href="http://www.zurb.com" class="zurb-logo regular"></a>
- <ul class="zurb-links">
- <li><a href="http://zurb.com/about">About</a></li>
- <li><a href="http://zurb.com/blog">Blog</a></li>
- <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
- <li><a href="http://zurb.com/contact">Contact</a></li>
- <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
- </ul>
- <p class="copyright">© 1998‐2016 ZURB, Inc. All rights reserved.</p>
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- <script>
- var _gaq = _gaq || [];
- _gaq.push(
- ['_setAccount', 'UA-2195009-2'],
- ['_trackPageview'],
- ['b._setAccount', 'UA-2195009-27'],
- ['b._trackPageview']
- );
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
-
- <script src="assets/js/vendor.js?hash=180dd359c36611d649a6672508cbf3fb"></script>
- <script src="assets/js/foundation.js?hash=d69cc484620e48982ae5b5f02b97b32e"></script>
- <script src="assets/js/docs.js?hash=204134469990eada8ea44333de201a66"></script>
- <script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
-</body>
-</html>
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="We built Foundation for Sites to be the most advanced responsive front-end framework in the world.">
- <link rel="icon" href="assets/img/icons/foundation-favicon.ico" type="image/x-icon">
- <title>Foundation for Sites 6 Docs</title>
- <link href="assets/css/docs.css?hash=8d981072ac4bdc910c060b318a1b3879" rel="stylesheet" />
- <link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=eb0115900b962d511fe7bdf9a8b3e48a" rel="stylesheet">
- <!-- <link rel="stylesheet" href="./node_modules/motion-ui/dist/motion-ui.css" /> -->
-</head>
-<body>
-
- <div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
-
- <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="mobile-ofc vertical menu">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
-
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/support.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/sort/unanswered">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
- </ul>
- </li>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <title>Getting Started With Foundation 5 | Foundation Docs</title>
+ <link rel="icon" href="assets/img/icons/oundation-favicon.ico" type="image/x-icon">
+ <!-- For third-generation iPad with high-resolution Retina display: -->
+ <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/img/icons/apple-touch-icon-144x144-precomposed.png">
+ <!-- For iPhone with high-resolution Retina display: -->
+ <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/img/icons/apple-touch-icon-114x114-precomposed.png">
+ <!-- For first- and second-generation iPad: -->
+ <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/img/icons/apple-touch-icon-72x72-precomposed.png">
+ <!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
+ <link rel="apple-touch-icon-precomposed" href="assets/img/icons/apple-touch-icon-precomposed.png">
+
+ <meta name="description" content="Documentation and reference library for ZURB Foundation. JavaScript, CSS, components, grid and more.">
+ <meta name="author" content="ZURB, inc. ZURB network also includes zurb.com">
+ <meta name="copyright" content="ZURB, inc. Copyright (c) 2014">
+
+ <link href="assets/css/docs.css" rel="stylesheet" />
+ <link href="http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" rel="stylesheet" />
+ <script src="assets/js/modernizr.js"></script>
+ </head>
+ <body class="antialiased hide-extras">
+
+ <!-- Info Banner For Announcements or Links -->
+ <!-- <a href="https://get.foundation" id="notice">
+ <div class="info">
+ <h5>Foundation 6 is here!</h5>
+ </div>
+ </a> -->
+
+
+ <div class="marketing off-canvas-wrap" data-offcanvas>
+ <div class="inner-wrap">
+
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
- </div>
-
- <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="vertical menu">
- <li><a href="#">Foundation</a></li>
- <li><a href="#">Dot</a></li>
- <li><a href="#">ZURB</a></li>
- <li><a href="#">Com</a></li>
- <li><a href="#">Slash</a></li>
- <li><a href="#">Sites</a></li>
- </ul>
- </div>
-
- <div class="off-canvas-content" data-off-canvas-content>
- <!-- Info Banner For Announcements or Links -->
- <!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
- <div class="info">
- <h5>Foundation 6 is here!</h5>
- </div>
- </a> -->
- <nav class="marketing-topbar show-for-medium">
-
- <ul class="menu">
- <li class="topbar-title"><a href="https://get.foundation/index.html"><img src="assets/img/logos/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
+<!-- <nav class="tab-bar show-for-small">
+ <a class="off-canvas-left-toggle menu-icon ">
+ <span></span>
+ </a>
+</nav> -->
+
+
+<nav class="top-bar docs-bar hide-for-small" data-topbar>
+ <ul class="title-area">
+ <li class="name">
+ <h1>
+ <a href="https://get.foundation/">
+ <span>Foundation</span>
+ </a>
+ </h1>
+ </li>
+ </ul>
+
+ <section class="top-bar-section">
+ <ul class="right">
+ <li class="divider"></li>
+ <li class="has-dropdown">
+ <a target="_blank" href="https://zurb.com/responsive">Showcase <i class="fa fa-external-link"></i></a>
+ <ul class="dropdown">
+ <li><a target="_blank" href="https://zurb.com/responsive">Showcase <i class="fa fa-external-link"></i></a></li>
+ <li><a href="https://get.foundation/showcase/brands.html">Brands</a></li>
+ <li><a href="https://get.foundation/showcase/case-studies.html">Case Studies</a></li>
+ <li><a href="https://get.foundation/showcase/blog.html">Blog</a></li>
+ <li><a href="https://get.foundation/showcase/buzz.html">Buzz</a></li>
+ <li><a href="https://get.foundation/showcase/about.html">About Foundation</a></li>
</ul>
-
- <ul class="dropdown menu" data-dropdown-menu data-click-open="false">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/" target="_blank">F5 Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="https://get.foundation/emails/docs/" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
+ </li>
+ <li class="divider"></li>
+ <li class="has-dropdown">
+ <a href="https://get.foundation/develop/getting-started.html" class="">Develop</a>
+ <ul class="dropdown">
+ <li class="title">Frameworks</li>
+ <li><a class="" href="https://get.foundation/sites.html">Foundation for Sites</a></li>
+ <li><a class="" href="https://get.foundation/apps.html">Foundation for Apps</a></li>
+ <li><a class="spaced-list-item" href="https://get.foundation/emails.html">Foundation for Emails</a></li>
+ <li class="spaced-divider"><hr></li>
+ <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
+ <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
+ <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
+ <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
</ul>
-
- </nav>
-
- <div class="title-bar hide-for-medium">
- <div class="title-bar-left">
- <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
- <span class="title-bar-title">Foundation</span>
- </div>
- </div>
-
+ </li>
+ <li class="divider"></li>
+ <li class="has-dropdown">
+ <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
+ <ul class="dropdown">
+ <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
+ <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
+ <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
+ <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
+ <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
+ </ul>
+ </li>
+ <li class="divider"></li>
+ <li class="has-dropdown">
+ <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
+ <ul class="dropdown">
+ <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
+ <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
+ <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
+ <li><a href="https://get.foundation/learn/events.html">Events</a></li>
+ <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
+ <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
+ <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
+ </ul>
+ </li>
+ <li class="divider"></li>
+ <li class="has-dropdown">
+ <a href="https://get.foundation/sites/docs/v/5.5.3/">Docs</a>
+ <ul class="dropdown">
+ <li><a href="https://get.foundation/sites/docs/v/5.5.3/">F5 Sites Docs</a></li>
+ <li><a href="https://get.foundation/sites/docs">F6 Sites Docs</a></li>
+ <li><a href="https://get.foundation/emails/docs">Emails Docs</a></li>
+ <li><a href="https://get.foundation/apps/docs">Apps Docs</a></li>
+ </ul>
+ </li>
+ <li class="divider"></li>
+ <li class="has-form">
+ <a href="https://get.foundation/sites/getting-started.html">Getting Started</a>
+ </ul>
+ </section>
+</nav>
+ <nav class="tab-bar show-for-small">
+ <a class="left-off-canvas-toggle menu-icon">
+ <span>Foundation</span>
+ </a>
+</nav>
- <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
+<aside class="marketing-left-off-canvas-menu">
- <div class="expanded row">
- <div class="medium-9 large-10 medium-push-3 large-push-2 columns">
+ <ul class="off-canvas-list">
+ <li><label class="first">Foundation</label></li>
+ <li><a href="https://get.foundation">Home</a></li>
+ </ul>
-<article class="docs-component" id="docs-foundation-for-sites">
+ <hr>
-<a href="#docs-menu" class="small secondary expanded button hide-for-medium">Jump to Nav</a>
+ <ul class="off-canvas-list">
+ <li><label>Setup</label></li>
-<header>
- <h1 class="docs-page-title">Foundation for Sites</h1>
+ <li><a href="index.html" data-search="">Getting Started</a></li>
+ <li><a href="css.html" data-search="Styles">CSS</a></li>
+ <li><a href="sass.html" data-search="Sass">Sass</a></li>
+ <li><a href="sass-files.html" data-search="Sass,Sass - What You Get, How to Use Sass">Sass Files</a></li>
+ <li><a href="using-sass.html" data-search="Sass,Sass - What You Get, How to Use Sass">Using Sass</a></li>
+ <li><a href="applications.html" data-search="Rails,Gem">Applications</a></li>
+ <li><a href="javascript.html" data-search="">Javascript</a></li>
+ <li><a href="components/global.html" data-search="Global Styles,Global Mixins,Global Variables,Useful HTML Classes">Global Styles</a></li>
+ <li><a href="components/kitchen_sink.html" data-search="">Kitchen Sink</a></li>
+ <li><a href="upgrading.html" data-search="Migration">Upgrading</a></li>
+ <li class="divider"></li>
+ <li><label>Structure</label></li>
+ <li><a href="media-queries.html" data-search="Breakpoints">Media Queries</a></li>
+ <li><a href="components/visibility.html" data-search="">Visibility</a></li>
+ <li><a href="components/grid.html" data-search="">Grid</a></li>
+ <li><a href="components/block_grid.html" data-search="">Block Grid</a></li>
+ <li><a href="components/interchange.html" data-search="Responsive Images">Interchange Responsive Content <span class="label">JS</span></a></li>
+ <li><a href="utility-classes.html" data-search="">Utility Classes</a></li>
+ <li><a href="javascript-utilities.html" data-search="">Javascript Utilities</a></li>
+ <li><a href="components/rtl.html" data-search="RTL">Right-to-Left Support</a></li>
- <p class="lead docs-page-lead">We built Foundation for Sites to be the most advanced responsive front-end framework in the world.</p>
+ <li class="divider"></li>
+ <li><label>Navigation</label></li>
+ <li><a href="components/offcanvas.html" data-search="Off Canvas">Off-canvas <span class="label">JS</span></a></li>
+ <li><a href="components/topbar.html" data-search="Nav Bar,Navigation,Sticky">Top Bar <span class="label">JS</span></a></li>
+ <li><a href="components/icon-bar.html" data-search="">Icon Bar</a></li>
+ <li><a href="components/sidenav.html" data-search="">Side Nav</a></li>
+ <li><a href="components/magellan.html" data-search="Scrollspy">Magellan Sticky Nav <span class="label">JS</span></a></li>
+ <li><a href="components/subnav.html" data-search="">Sub Nav</a></li>
+ <li><a href="components/breadcrumbs.html" data-search="Navigation Path,Cookie Crumb">Breadcrumbs</a></li>
+ <li><a href="components/pagination.html" data-search="">Pagination</a></li>
- <ul class="menu simple docs-contribute-menu">
- <li><a href="https://github.com/zurb/foundation-sites/edit/master/docs/pages/index.md" target="_blank"><i class="fi-pencil"></i>Edit this Page</a></li>
- <li><a href="https://github.com/zurb/foundation-sites/issues/new?title=%5BFoundation%20for%20Sites%5D%20ISSUE%20NAME%20HERE" target="_blank"><i class="fi-social-github"></i>Report a Bug</a></li>
- <li><a href="https://get.foundation/forum" target="_blank"><i class="fi-comment"></i>Get Help</a></li>
- </ul>
-</header>
+ <li class="divider"></li>
+ <li><label>Media</label></li>
+ <li><a href="components/orbit.html" data-search="Carousel,Slider,Slideshow">Orbit Slider <span class="label">JS</span></a></li>
+ <li><a href="components/thumbnails.html" data-search="Images">Thumbnails</a></li>
+ <li><a href="components/clearing.html" data-search="Responsive Lightbox,Lightbox">Clearing Lightbox <span class="label">JS</span></a></li>
+ <li><a href="components/flex_video.html" data-search="Responsive Video">Flex Video</a></li>
+
+ <li class="divider"></li>
+ <li><label>Forms</label></li>
+ <li><a href="components/forms.html" data-search="">Forms</a></li>
+ <li><a href="components/switch.html" data-search="">Switches</a></li>
+ <li><a href="components/range_slider.html" data-search="Range Slider">Sliders <span class="label">JS</span></a></li>
+ <li><a href="components/abide.html" data-search="Form Validation,Field Validation">Abide Validation <span class="label">JS</span></a></li>
+
+ <li class="divider"></li>
+ <li><label>Buttons</label></li>
+ <li><a href="components/buttons.html" data-search="">Buttons</a></li>
+ <li><a href="components/button_groups.html" data-search="Button Bar">Button Groups</a></li>
+ <li><a href="components/split_buttons.html" data-search="">Split Buttons <span class="label">JS</span></a></li>
+ <li><a href="components/dropdown_buttons.html" data-search="">Dropdown Buttons <span class="label">JS</span></a></li>
+
+ <li class="divider"></li>
+ <li><label>Typography</label></li>
+ <li><a href="components/typography.html" data-search="Typography,Type-setting,Composition">Type</a></li>
+ <li><a href="components/inline_lists.html" data-search="Lists">Inline Lists</a></li>
+ <li><a href="components/labels.html" data-search="Tags">Labels</a></li>
+ <li><a href="components/keystrokes.html" data-search="">Keystrokes</a></li>
+
+ <li class="divider"></li>
+ <li class="heading"><label>Callouts & Prompts</label></li>
+ <li><a href="components/reveal.html" data-search="Modal">Reveal Modal <span class="label">JS</span></a></li>
+ <li><a href="components/alert_boxes.html" data-search="Error,Success,Warning">Alerts <span class="label">JS</span></a></li>
+ <li><a href="components/panels.html" data-search="Wells">Panels</a></li>
+ <li><a href="components/tooltips.html" data-search="Popover">Tooltips <span class="label">JS</span></a></li>
+ <li><a href="components/joyride.html" data-search="Tooltip Tour,Guider,Tooltip Walk-through">Joyride <span class="label">JS</span></a></li>
+
+ <li class="divider"></li>
+ <li><label>Content</label></li>
+ <li><a href="components/dropdown.html" data-search="">Dropdowns <span class="label">JS</span></a></li>
+ <li><a href="components/pricing_tables.html" data-search="">Pricing Tables</a></li>
+ <li><a href="components/progress_bars.html" data-search="">Progress Bars</a></li>
+ <li><a href="components/tables.html" data-search="">Tables</a></li>
+ <li><a href="components/accordion.html" data-search="">Accordion <span class="label">JS</span></a></li>
+ <li><a href="components/tabs.html" data-search="">Tabs <span class="label">JS</span></a></li>
+ <li><a href="components/equalizer.html" data-search="">Equalizer <span class="label">JS</span></a></li>
+
+ <li class="divider"></li>
+ <li><label>Support</label></li>
+
+ <li><a href="changelog.html" data-search="">Changelog</a></li>
+ <li><a href="compatibility.html" data-search="">Compatibility</a></li>
+
+ <li class="divider"></li>
+ <li class="heading"><label>Older Docs</label></li>
+ <li><a href="/docs/v/4.3.2/" data-search="">Foundation 4</a></li>
+ <li><a href="/docs/v/3.2.5/" data-search="">Foundation 3</a></li>
+ <li><a href="/docs/v/2.2.1/" data-search="">Foundation 2</a></li>
+ </ul>
+
+ <hr>
+
+ <div class="zurb-links">
+ <ul class="top">
+ <li class="logo"><a href="http://zurb.com"></a></li>
+ <li><a href="http://zurb.com/about">About</a></li>
+ <li><a href="http://zurb.com/blog">Blog</a></li>
+ <li><a href="http://zurb.com/contact">Contact</a></li>
+ </ul>
+ <ul class="pillars">
+ <li>
+ <a href="http://www.zurb.com/studios" class="footer-link-block services">
+ <span class="title">Studios</span>
+ <span>Helping startups win since '98.</span>
+ </a>
+ </li>
+ <li>
+ <a href="https://get.foundation/" class="footer-link-block foundation">
+ <span class="title">Foundation</span>
+ <span>World's most advanced responsive framework.</span>
+ </a>
+ </li>
+ <li>
+ <a href="http://zurb.com/notable" class="footer-link-block apps">
+ <span class="title">Notable</span>
+ <span>Tools to rapidly prototype and iterate.</span>
+ </a>
+ </li>
+ <li>
+ <a href="http://zurb.com/university" class="footer-link-block expo">
+ <span class="title">University</span>
+ <span>Online training for smarter product design.</span>
+ </a>
+ </li>
+ </ul>
+</div>
+
+</aside>
+
+<a class="exit-off-canvas" href="#"></a>
+
+
+ <section role="main" class="scroll-container">
+
+ <div class="row">
+ <div class="large-3 medium-4 columns">
+ <div class="hide-for-small">
+ <div class="sidebar">
+ <h5>Foundation Documentation</h5>
+ <!-- <form>
+ <label>Search Documentation</label>
+ <input tabindex="1" id="autocomplete" type="search" placeholder="Search Docs: e.g. forms">
+ </form>
+
+ <a href="https://get.foundation/sites/download.html" class="download button expand">Download Foundation</a> -->
+
+ <nav>
+ <ul class="side-nav">
+ <li class="heading">Setup</li>
+
+ <li><a href="index.html" data-search="">Getting Started</a></li>
+ <li><a href="css.html" data-search="Styles">CSS</a></li>
+ <li><a href="sass.html" data-search="Sass">Sass</a></li>
+ <li><a href="sass-files.html" data-search="Sass,Sass - What You Get, How to Use Sass">Sass Files</a></li>
+ <li><a href="using-sass.html" data-search="Sass,Sass - What You Get, How to Use Sass">Using Sass</a></li>
+ <li><a href="applications.html" data-search="Rails,Gem">Applications</a></li>
+ <li><a href="javascript.html" data-search="">JavaScript</a></li>
+ <li><a href="components/global.html" data-search="Global Styles,Global Mixins,Global Variables,Useful HTML Classes">Global Styles</a></li>
+ <li><a href="components/kitchen_sink.html" data-search="">Kitchen Sink</a></li>
+ <li><a href="accessibility.html" data-search="accessibility">Accessibility</a></li>
+ <li><a href="upgrading.html" data-search="Migration">Upgrading</a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Structure</li>
+ <li><a href="media-queries.html" data-search="Breakpoints">Media Queries</a></li>
+ <li><a href="components/visibility.html" data-search="">Visibility</a></li>
+ <li><a href="components/grid.html" data-search="">Grid</a></li>
+ <li><a href="components/block_grid.html" data-search="">Block Grid</a></li>
+ <li><a href="components/interchange.html" data-search="Responsive Images">Interchange Responsive Content <span class="label">JS</span></a></li>
+ <li><a href="utility-classes.html" data-search="">Utility Classes</a></li>
+ <li><a href="javascript-utilities.html" data-search="">Javascript Utilities</a></li>
+ <li><a href="components/rtl.html" data-search="RTL">Right-to-Left Support</a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Navigation</li>
+ <li><a href="components/offcanvas.html" data-search="Off Canvas">Off-canvas <span class="label">JS</span></a></li>
+ <li><a href="components/topbar.html" data-search="Nav Bar,Navigation,Sticky">Top Bar <span class="label">JS</span></a></li>
+ <li><a href="components/icon-bar.html" data-search="">Icon Bar</a></li>
+ <li><a href="components/sidenav.html" data-search="">Side Nav</a></li>
+ <li><a href="components/magellan.html" data-search="Scrollspy">Magellan Sticky Nav <span class="label">JS</span></a></li>
+ <li><a href="components/subnav.html" data-search="">Sub Nav</a></li>
+ <li><a href="components/breadcrumbs.html" data-search="Navigation Path,Cookie Crumb">Breadcrumbs</a></li>
+ <li><a href="components/pagination.html" data-search="">Pagination</a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Media</li>
+ <li><a href="components/orbit.html" data-search="Carousel,Slider,Slideshow">Orbit Slider <span class="label">JS</span></a></li>
+ <li><a href="components/thumbnails.html" data-search="Images">Thumbnails</a></li>
+ <li><a href="components/clearing.html" data-search="Responsive Lightbox,Lightbox">Clearing Lightbox <span class="label">JS</span></a></li>
+ <li><a href="components/flex_video.html" data-search="Responsive Video">Flex Video</a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Forms</li>
+ <li><a href="components/forms.html" data-search="">Forms</a></li>
+ <li><a href="components/switch.html" data-search="">Switches</a></li>
+ <li><a href="components/range_slider.html" data-search="Range Slider">Range Sliders <span class="label">JS</span></a></li>
+ <li><a href="components/abide.html" data-search="Form Validation,Field Validation">Abide Validation <span class="label">JS</span></a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Buttons</li>
+ <li><a href="components/buttons.html" data-search="">Buttons</a></li>
+ <li><a href="components/button_groups.html" data-search="Button Bar">Button Groups</a></li>
+ <li><a href="components/split_buttons.html" data-search="">Split Buttons <span class="label">JS</span></a></li>
+ <li><a href="components/dropdown_buttons.html" data-search="">Dropdown Buttons <span class="label">JS</span></a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Typography</li>
+ <li><a href="components/typography.html" data-search="Typography,Type-setting,Composition">Type</a></li>
+ <li><a href="components/inline_lists.html" data-search="Lists">Inline Lists</a></li>
+ <li><a href="components/labels.html" data-search="Tags">Labels</a></li>
+ <li><a href="components/keystrokes.html" data-search="">Keystrokes</a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Callouts & Prompts</li>
+ <li><a href="components/reveal.html" data-search="Modal">Reveal Modal <span class="label">JS</span></a></li>
+ <li><a href="components/alert_boxes.html" data-search="Error,Success,Warning">Alerts <span class="label">JS</span></a></li>
+ <li><a href="components/panels.html" data-search="Wells">Panels</a></li>
+ <li><a href="components/tooltips.html" data-search="Popover">Tooltips <span class="label">JS</span></a></li>
+ <li><a href="components/joyride.html" data-search="Tooltip Tour,Guider,Tooltip Walk-through">Joyride <span class="label">JS</span></a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Content</li>
+ <li><a href="components/dropdown.html" data-search="">Dropdowns <span class="label">JS</span></a></li>
+ <li><a href="components/pricing_tables.html" data-search="">Pricing Tables</a></li>
+ <li><a href="components/progress_bars.html" data-search="">Progress Bars</a></li>
+ <li><a href="components/tables.html" data-search="">Tables</a></li>
+ <li><a href="components/accordion.html" data-search="">Accordion <span class="label">JS</span></a></li>
+ <li><a href="components/tabs.html" data-search="">Tabs <span class="label">JS</span></a></li>
+ <li><a href="components/equalizer.html" data-search="">Equalizer <span class="label">JS</span></a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Support</li>
+
+ <li><a href="changelog.html" data-search="">Changelog</a></li>
+ <li><a href="compatibility.html" data-search="">Compatibility</a></li>
+ <li class="divider"></li>
+ <li class="heading">Older Docs</li>
+ <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html" data-search="">Foundation 4</a></li>
+ <li><a href="https://get.foundation/sites/docs/v/3.2.5/" data-search="">Foundation 3</a></li>
+ <li><a href="https://get.foundation/sites/docs/v/2.2.1/" data-search="">Foundation 2</a></li>
+
+ </ul>
+ </nav>
+
+</div>
+ </div>
+ </div>
+ <div class="large-9 medium-8 columns">
+ <h1 id="getting-started-with-foundation-5">Getting Started With Foundation 5</h1>
+ <p><h3 class="subheader">Getting started with Foundation is easy. Whether you are a master of Sass, building a new app, or making your existing site responsive, we've got you covered.</h3></p>
<hr>
<div class="row">
+ <div class="small-12 columns">
+ <h2>What is Foundation?</h2>
+ <h2 class="subheader">Foundation is the most advanced, responsive front-end framework in the world. The framework is mobile friendly and ready for you to customize it any way you want to use it.</h2>
+ <div class="row whatis">
+ <div class="large-7 columns">
+ <img data-interchange="[assets/img/images/responsive-medium.svg, (default)], [assets/img/images/responsive.svg, (large)]">
+ </div>
+ <div class="large-5 columns">
+ <p>Millions of designers and engineers use Foundation as part of their workflows. It was the first framework to introduce the concepts of responsive design, semantics, mobile first and partials. It's also compatibile with most browsers and devices. Foundation is the professional choice for designers and engineers.</p>
+ <p><a href="https://get.foundation/learn/why-foundation.html">Why choose foundation? →</a></p>
+ <p><a href="compatibility.html">Foundation compatibility →</a></p>
+ </div>
+ </div>
+ </div>
+</div>
-<div class="large-9 columns" id="docs">
+<hr>
-<h2 id="installing" class="docs-heading" data-magellan-target="installing">Installing<a class="docs-heading-icon" href="#installing"></a></h2><p>There are a number of ways to install Foundation for Sites. If you're just getting started, we recommend downloading Yeti Launch, which allows you to quickly set up starter projects with any Foundation framework. You can also install our Node CLI to do the same thing.</p>
-<p>It's also possible to manually install Foundation for Sites into your project through npm, Bower, Meteor, or Composer.</p>
-<p><a href="installation.html" class="large button">Install Foundation for Sites</a></p>
-<h3 id="looking-for-foundation-5-" class="docs-heading">Looking for Foundation 5?<a class="docs-heading-icon" href="#looking-for-foundation-5-"></a></h3><p>We're still supporting Foundation 5 for those who don't want to take the leap into the future with us. You can view the docs, download a package or visit the Github page.</p>
-<div class="button-group">
- <a href="https://get.foundation/downloads/foundation-5.5.3.zip" class="button">Download</a>
- <a href="https://get.foundation/sites/docs/v/5.5.3" class="button">Docs</a>
- <a href="https://github.com/zurb/foundation-sites/tree/V5" class="button">GitHub</a>
+<div class="row">
+ <div class="small-12 columns">
+ <h2>What Are You Building?</h2>
+ <h2 class="subheader">We have three different packages to get you started:</h2>
+ </div>
</div>
-<hr>
-<h2 id="what-s-in-the-box-" class="docs-heading" data-magellan-target="what-s-in-the-box-">What's in the Box?<a class="docs-heading-icon" href="#what-s-in-the-box-"></a></h2><p>Get to know the pieces of Foundation.</p>
-<h3 id="general" class="docs-heading">General<a class="docs-heading-icon" href="#general"></a></h3><div class="row up-1 medium-up-2 large-up-3 docs-big-index">
- <div class="column"><a href="global.html">
- <strong>Global Styles</strong>
- <p>Global styles applied by the Foundation framework.</p>
- </a></div>
- <div class="column"><a href="accessibility.html">
- <strong>Accessibility</strong>
- <p>An overview of Foundation's accessibility hooks.</p>
- </a></div>
- <div class="column"><a href="rtl.html">
- <strong>Right-to-Left Support</strong>
- <p>Getting Foundation working with RTL languages.</p>
- </a></div>
- <div class="column"><a href="sass.html">
- <strong>Sass</strong>
- <p>Installing and using the Sass version of Foundation.</p>
- </a></div>
- <div class="column"><a href="javascript.html">
- <strong>JavaScript</strong>
- <p>Initializing and using Foundation's JavaScript plugins.</p>
- </a></div>
- <div class="column"><a href="media-queries.html">
- <strong>Media Queries</strong>
- <p>Working with Foundation's breakpoints.</p>
- </a></div>
- <div class="column"><a href="flexbox.html">
- <strong>Flexbox Mode</strong>
- <p>Supercharge your CSS with flexbox.</p>
- </a></div>
- <div class="column"><a href="compatibility.html">
- <strong>Compatibility</strong>
- <p>What browsers does Foundation work with?</p>
- </a></div>
- <div class="column"><a href="kitchen-sink.html">
- <strong>Kitchen Sink</strong>
- <p>Every component on one page.</p>
- </a></div>
+<div class="row circle-list skill-list">
+ <div class="medium-4 columns">
+ <img src="assets/img/images/css.svg" >
+ <h4>Hack on CSS</h4>
+ <p class="skill-level subheader">Skill level <i class="fi-star"></i></p>
+ <p>The straight CSS version is perfect if you want to just start writing code, rapid prototype, or building a simple, static site. We'll give you all the pieces you need, no setup required.</p>
+ <p><a href="css.html">CSS Install →</a></p>
+ </div>
+
+ <hr class="dashed hide-for-medium-up">
+
+ <div class="medium-4 columns">
+ <img src="assets/img/images/scss.svg">
+ <h4>Customize with Sass</h4>
+ <p class="skill-level subheader">Skill level <i class="fi-star"></i> <i class="fi-star"></i></p>
+ <p>Check out to get started with Sass (SCSS) to let you customize... well, everything. Setup is straight forward and if you haven't used Sass before, once you do, you'll never look back.</p>
+ <p><a href="sass.html">Sass Install →</a></p>
+ </div>
+
+ <hr class="dashed hide-for-medium-up">
+
+ <div class="medium-4 columns">
+ <img src="assets/img/images/rails.svg">
+ <h4>Build an App</h4>
+ <p class="skill-level subheader">Skill level <i class="fi-star"></i> <i class="fi-star"></i> <i class="fi-star"></i></p>
+ <p>We use Rails to build our apps (Notable, Verify, Solidify, ZURB University, and the Foundation Forum) and you can too. We'll show you how to use the Foundation gem and get set up.</p>
+ <p><a href="applications.html">App Install →</a></p>
+ </div>
</div>
-<h3 id="components" class="docs-heading">Components<a class="docs-heading-icon" href="#components"></a></h3><div class="row up-1 medium-up-3 docs-small-index">
- <div class="column">
- <section>
- <h4>Layout</h4>
- <ul>
- <li><a href="grid.html">Grid</a></li>
- <li><a href="flex-grid.html">Flex Grid</a></li>
- <li><a href="forms.html">Forms</a></li>
- <li><a href="visibility.html">Visibility Classes</a></li>
- <li><a href="float-classes.html">Float Classes</a></li>
- <li><a href="flexbox.html">Flexbox</a></li>
- </ul>
- </section>
+<hr>
- <section>
- <h4>Typography</h4>
- <ul>
- <li><a href="base-typography.html">Base Styles</a></li>
- <li><a href="typography-helpers.html">Helper Classes</a></li>
- </ul>
- </section>
+<div class="row">
+ <div class="small-12 columns">
+ <h2>What Comes With Foundation?</h2>
+ <h2 class="subheader">Foundation has a ton of components and structures to help you build a responsive site without having to worry about all of your baseline, foundational (see what we did there?) code.</h2>
+ <p>You can see all of Foundation's components on one page called the <a href="components/kitchen_sink.html">Kitchen Sink</a> or check out a small snapshot of what Foundation includes: </p>
+ </div>
+</div>
+<section class="what-comes-with">
+ <!--=================================
+ Grid
+ ==================================-->
+ <section class="grid-example">
+ <div class="row">
+ <div class="large-6 columns">
+ <h3 class="button-title">The Grid</h3>
+ <p>Our grid works on almost any device and has support for nesting, source ordering, offsets and device presentation. Frankly, it's a little too easy. In no time, you'll be creating complex layouts like this.</p>
+ <p>Need a head start on some of your designs or some extra inspiration to see the full potential of a responsive front-end framework? <a href="#resources">Check out a list of our Foundation resources!</a></p>
+ </div>
+ <div class="large-6 columns">
+ <section class="gs-example">
+ <div class="row collapse">
+ <div class="small-12 columns">
+ <p>12</p>
+ </div>
+ </div>
+ <div class="row collapse">
+ <div class="small-6 columns border-none">
+ <p>6</p>
+ </div>
+ <div class="small-6 columns">
+ <p>6</p>
+ <div class="row">
+ <div class="small-6 columns border-none">
+ <p>6</p>
+ </div>
+ <div class="small-6 columns">
+ <p>6</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="row collapse">
+ <div class="small-4 columns border-none">
+ <p>4</p>
+ <div class="row">
+ <div class="small-4 columns border-none">
+ <p>4</p>
+ </div>
+ <div class="small-8 columns">
+ <p>8</p>
+ </div>
+ </div>
+ </div>
+ <div class="small-4 columns border-none">
+ <p>4</p>
+ <div class="row">
+ <div class="small-3 columns border-none">
+ <p>3</p>
+ </div>
+ <div class="small-9 columns">
+ <p>9</p>
+ </div>
+ </div>
+ </div>
+ <div class="small-4 columns">
+ <p>4</p>
+ <div class="row">
+ <div class="small-3 columns border-none">
+ <p>3</p>
+ </div>
+ <div class="small-3 columns border-none">
+ <p>3</p>
+ </div>
+ <div class="small-6 columns">
+ <p>6</p>
+ </div>
+ </div>
+ </div>
+ </div>
+</section>
+ </div>
+ </div>
+ </section>
- <section>
- <h4>Controls</h4>
- <ul>
- <li><a href="button.html">Button</a></li>
- <li><a href="button-group.html">Button Group</a></li>
- <li><a href="close-button.html">Close Button</a></li>
- <li><a href="slider.html">Slider</a></li>
- <li><a href="switch.html">Switch</a></li>
- </ul>
- </section>
+ <hr class="dashed">
- <section>
- <h4>Libraries</h4>
- <ul>
- <li><a href="motion-ui.html">Motion UI</a></li>
- <li><a href="panini.html">Panini</a></li>
- </ul>
- </section>
+ <!--=================================
+ Buttons
+ ==================================-->
+
+ <div class="row">
+ <div class="large-6 columns">
+ <h3 class="button-title">Buttons</h3>
+ <p>Clicking on stuff is awesome, so hook up your users with buttons to do stuff. There are some lightweight button styles for size, presentation, and color to make customizing your own button as easy as adding a class.</p>
+ </div>
+ <div class="large-6 columns">
+ <div class="row">
+ <div class="small-6 columns">
+ <a href="#" class="button expand">Default Color</a>
+ </div>
+ <div class="small-6 columns">
+ <a href="#" class="button secondary expand">Secondary Color</a>
+ </div>
+ <div class="small-6 columns">
+ <a href="#" class="button success expand">Success Color</a>
</div>
- <div class="column">
- <section>
- <h4>Navigation</h4>
- <ul>
- <li><a href="navigation.html">Overview</a></li>
- <li><a href="menu.html">Menu</a></li>
- <li><a href="dropdown-menu.html">Dropdown Menu</a></li>
- <li><a href="drilldown-menu.html">Drilldown Menu</a></li>
- <li><a href="accordion-menu.html">Accordion Menu</a></li>
- <li><a href="top-bar.html">Top Bar</a></li>
- <li><a href="responsive-navigation.html">Responsive Navigation</a></li>
- <li><a href="magellan.html">Magellan</a></li>
- <li><a href="pagination.html">Pagination</a></li>
- <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
+ <div class="small-6 columns">
+ <a href="#" class="button alert expand">Alert Color</a>
+ </div>
+</div>
+<div class="row">
+ <div class="small-4 columns">
+ <a href="#" class="button expand">Default</a>
+ </div>
+ <div class="small-4 columns">
+ <a href="#" class="button radius expand">Radius</a>
+ </div>
+ <div class="small-4 columns">
+ <a href="#" class="button round expand">Round</a>
+ </div>
+</div>
+<section class="gs-buttongroup">
+ <div class="row">
+ <div class="small-12 columns">
+ <ul class="button-group expand round">
+ <li><a href="#" class="button alert">Button</a></li>
+ <li><a href="#" class="button alert">Group</a></li>
</ul>
- </section>
+ </div>
+ </div>
+</section>
+<div class="row gs-hoverbutton">
+ <div class="small-6 columns">
+ <a href="#" class="button round expand split">Split Button <span data-dropdown="drop"></span></a><br>
+ <ul id="drop" class=" expand f-dropdown" data-dropdown-content>
+ <li><a href="#">This is a link</a></li>
+ <li><a href="#">This is another</a></li>
+ <li><a href="#">Yet another</a></li>
+ </ul>
+ </div>
+ <div class="small-6 columns">
+ <a href="#" class="alert expand button" data-dropdown="hover1" data-options="is_hover:true">Hover & Click Button</a><br>
+ <ul id="hover1" class="f-dropdown" data-dropdown-content>
+ <li><a href="#">This is a link</a></li>
+ <li><a href="#">This is another</a></li>
+ <li><a href="#">Yet another</a></li>
+ </ul>
+ </div>
+</div>
+ </div>
+ </div>
+
+ <hr class="dashed">
+
+ <!--=================================
+ Navigation
+ ==================================-->
+
+ <div class="row">
+ <div class="large-6 columns">
+ <h3 class="button-title">Navigation</h3>
+ <p>People have to get around. Navigation styles in Foundation include: a robust top bar with dropdowns; button; search bars; a cool icon bar; a bitchin' off-canvas implementation; and a bunch of other navigational constructs.</p>
+ </div>
+ <div class="large-6 columns">
+ <section class="gs-navigation">
+ <section class="gs-topbar">
+ <nav class="top-bar" data-topbar>
+ <ul class="title-area">
+ <li class="name">
+ <h1><a href="#">Title</a></h1>
+ </li>
+ <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
+ </ul>
- <section>
- <h4>Containers</h4>
- <ul>
- <li><a href="accordion.html">Accordion</a></li>
- <li><a href="callout.html">Callout</a></li>
- <li><a href="dropdown.html">Dropdown</a></li>
- <li><a href="media-object.html">Media Object</a></li>
- <li><a href="off-canvas.html">Off-canvas</a></li>
- <li><a href="reveal.html">Reveal</a></li>
- <li><a href="table.html">Table</a></li>
- <li><a href="tabs.html">Tabs</a></li>
+ <section class="top-bar-section">
+ <ul class="right">
+ <li class="has-form">
+ <div class="row collapse">
+ <div class="small-8 large-7 columns">
+ <input type="text" placeholder="Search">
+ </div>
+ <div class="small-3 large-3 end columns">
+ <a href="#" class="alert button expand">Go</a>
+ </div>
+ </div>
+ </li>
+ <li class="has-dropdown">
+ <a href="#">Dropdown</a>
+ <ul class="dropdown">
+ <li><a href="#">First link in dropdown</a></li>
+ </ul>
+ </li>
</ul>
</section>
+ </nav>
+</section>
+ <section class="gs-iconbar">
+ <div class="icon-bar five-up">
+ <a class="item">
+ <i class="fi-home"></i>
+ </a>
+ <a class="item">
+ <i class="fi-bookmark"></i>
+ </a>
+ <a class="item">
+ <i class="fi-info"></i>
+ </a>
+ <a class="item">
+ <i class="fi-mail"></i>
+ </a>
+ <a class="item">
+ <i class="fi-like"></i>
+ </a>
</div>
- <div class="column">
- <section>
- <h4>Media</h4>
- <ul>
- <li><a href="badge.html">Badge</a></li>
- <li><a href="flex-video.html">Flex Video</a></li>
- <li><a href="label.html">Label</a></li>
- <li><a href="orbit.html">Orbit</a></li>
- <li><a href="progress-bar.html">Progress Bar</a></li>
- <li><a href="thumbnail.html">Thumbnail</a></li>
- <li><a href="tooltip.html">Tooltip</a></li>
- </ul>
- </section>
+</section>
- <section>
- <h4>Plugins</h4>
- <ul>
- <li><a href="abide.html">Abide</a></li>
- <li><a href="equalizer.html">Equalizer</a></li>
- <li><a href="interchange.html">Interchange</a></li>
- <li><a href="toggler.html">Toggler</a></li>
- <li><a href="sticky.html">Sticky</a></li>
+ <div class="off-canvas-wrap off-canvas-example" data-offcanvas>
+ <div class="inner-wrap">
+ <nav class="tab-bar">
+ <section class="left-small">
+ <a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
+ </section>
+
+ <section class="middle tab-bar-section">
+ <h1 class="title">Foundation</h1>
+ </section>
+
+ <section class="right-small">
+ <a class="right-off-canvas-toggle menu-icon" href="#"><span></span></a>
+ </section>
+ </nav>
+
+ <aside class="left-off-canvas-menu">
+ <ul class="off-canvas-list">
+ <li><label>Foundation</label></li>
+ <li><a href="#">The Psychohistorians</a></li>
+ <li><a href="#">The Encyclopedists</a></li>
+ <li><a href="#">The Mayors</a></li>
</ul>
- </section>
+ </aside>
- <section>
- <h4>Sass</h4>
- <ul>
- <li><a href="sass-mixins.html">Mixins</a></li>
- <li><a href="sass-functions.html">Functions</a></li>
+ <aside class="right-off-canvas-menu">
+ <ul class="off-canvas-list">
+ <li><label>Users</label></li>
+ <li><a href="#">Hari Seldon</a></li>
+ <li><a href="#">Salvor Hardin</a></li>
+ <li><a href="#">Gaal Dornick</a></li>
</ul>
+ </aside>
+
+ <section class="main-section">
+ <div class="row">
+ <div class="large-12 columns">
+ <br>
+ <h4 class="">The Psychohistorians</h4>
+ <p>Set in the year 0 F.E. ("Foundation Era"), The Psychohistorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire.</p>
+ </div>
+ </div>
</section>
+ <a class="exit-off-canvas"></a>
</div>
</div>
+ <br>
+ <ul class="pagination">
+ <li class="arrow 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 class="arrow"><a href="">»</a></li>
+</ul>
+</section>
+ </div>
+ </div>
+ <hr class="dashed">
+ <div class="row">
+ <div class="large-6 columns">
+ <h3 class="button-title">Plugins</h3>
+ <p>We've included a ton of JavaScript plugins written just for Foundation: pop-up modals (Reveal); add a required validation for forms (Abide); create content tabs; alerts; and tons more.</p>
+ </div>
+ <div class="large-6 columns">
+ <section class="gs-modal">
+ <a href="#" data-reveal-id="firstModal" class="radius button">Click me to Reveal a Modal</a>
+ <div id="firstModal" class="reveal-modal" data-reveal>
+ <h2>This is a modal.</h2>
+ <p>Reveal makes these very easy to summon and dismiss. The close button is simply an anchor with a unicode character icon and a class of <code>close-reveal-modal</code>. Clicking anywhere outside the modal will also dismiss it.</p>
+ <p>Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.</p>
+ <p><a href="#" data-reveal-id="secondModal" class="secondary button">Second Modal...</a></p>
+ <a class="close-reveal-modal">×</a>
+ </div>
+ <div id="secondModal" class="reveal-modal" data-reveal>
+ <h2>This is a second modal.</h2>
+ <p>See? It just slides into place after the other first modal. Very handy when you need subsequent dialogs, or when a modal option impacts or requires another decision.</p>
+ <a class="close-reveal-modal">×</a>
+ </div>
+</section>
+<form data-abide>
+ <div class="name-field">
+ <label>Today's date <small>required</small>
+ <input type="text" placeholder="Type in text to this form to test the validation" pattern="month_day_year">
+ </label>
+ <small class="error">If you didn't put in a date in the format 'mm/dd/yyyy,'' this error should appear.</small>
+ </div>
+</form>
+<section class="tabs-example">
+ <ul class="tabs" data-tab>
+ <li class="tab-title active"><a href="#panel2-1">Tab 1</a></li>
+ <li class="tab-title"><a href="#panel2-2">Tab 2</a></li>
+ <li class="tab-title"><a href="#panel2-3">Tab 3</a></li>
+ </ul>
+ <div class="tabs-content">
+ <div class="content active" id="panel2-1">
+ <p>First panel content goes here...</p>
+ </div>
+ <div class="content" id="panel2-2">
+ <p>Second panel content goes here...</p>
+ </div>
+ <div class="content" id="panel2-3">
+ <p>Third panel content goes here...</p>
+ </div>
+ </div>
+</section>
+<div data-alert class="alert-box warning round">
+ This is a round warning alert.
+ <a href="#" class="close">×</a>
+</div>
+ </div>
+ </div>
+</section>
+<hr>
+<div class="row">
+ <div class="small-12 columns">
+ <h2>Test Drive Foundation</h2>
+ <h2 class="subheader">Want to give Foundation a quick spin? We've set up a Codepen where you can play around with the default Foundation download — HTML, CSS and JS. It's a pretty swanky way to just see what Foundation has to offer.</h2>
+ </div>
</div>
-
-<div class="large-3 columns" data-sticky-container>
- <nav class="columns docs-toc-wrap" data-sticky data-anchor="docs" data-sticky-on="large">
- <div class="docs-toc hide" id="docsTOC">
- <ul class="vertical menu" data-docs-toc>
- <li class="docs-nav-title">On this page:</li>
+<section class="codepen-demo">
+ <div class="row">
+ <div class="small-12 columns">
+ <ul class="tabs" data-tab>
+ <li class="tab-title active"><a href="#testdrive-1">Foundation Grid</a></li>
+ <li class="tab-title "><a href="#testdrive-2">Navigation</a></li>
+ <li class="tab-title"><a href="#testdrive-3">Forms</a></li>
+ <li class="tab-title"><a href="#testdrive-4">Interchange</a></li>
</ul>
+ <div class="tabs-content">
+ <div class="content active" id="testdrive-1">
+ <p>We put together a small demo to show you how easy it is to start creating with the Foundation Grid! We've used visibility classes, a medium grid, and even source ordering. You can play with this Codepen yourself. Go ahead and fork it, change it, enjoy it!</p>
+ <p data-height="350" data-theme-id="7558" data-slug-hash="olduj" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/ZURBFoundation/pen/olduj/'>Grid Example</a> by ZURB Foundation (<a href='http://codepen.io/ZURBFoundation'>@ZURBFoundation</a>) on <a href='http://codepen.io'>CodePen</a>.</p><script async src="//codepen.io/assets/embed/ei.js"></script>
+ </div>
+ <div class="content " id="testdrive-2">
+ <p>We put together a small demo to show you how to use a visibility class to have a Top bar on medium and large screens and an off-canvas menu for small screens. You can play with this Codepen yourself. Go ahead and fork it, change it, enjoy it!</p>
+ <p data-height="350" data-theme-id="7558" data-slug-hash="vKwHa" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/ZURBFoundation/pen/vKwHa/'>Navigation Example</a> by ZURB Foundation (<a href='http://codepen.io/ZURBFoundation'>@ZURBFoundation</a>) on <a href='http://codepen.io'>CodePen</a>.</p><script async src="//codepen.io/assets/embed/ei.js"></script>
+ </div>
+ <div class="content" id="testdrive-3">
+ <p>We put together a small demo to show you how to use a our forms. We have check boxes, input boxes, and so much more. You can play with this Codepen yourself. Go ahead and fork it, change it, enjoy it!</p>
+ <p data-height="350" data-theme-id="7558" data-slug-hash="AuvoL" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/ZURBFoundation/pen/AuvoL/'>Foundation Forms</a> by ZURB Foundation (<a href='http://codepen.io/ZURBFoundation'>@ZURBFoundation</a>) on <a href='http://codepen.io'>CodePen</a>.</p><script async src="//codepen.io/assets/embed/ei.js"></script>
+ </div>
+ <div class="content" id="testdrive-4">
+ <p>We have a small demo to show off one our coolest features, Interchange! Take a look at the code, you can even play with this Codepen yourself. Go ahead and fork it, change it, enjoy it!</p>
+ <p data-height="350" data-theme-id="7558" data-slug-hash="fcFnq" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/ZURBFoundation/pen/fcFnq/'>fcFnq</a> by ZURB Foundation (<a href='http://codepen.io/ZURBFoundation'>@ZURBFoundation</a>) on <a href='http://codepen.io'>CodePen</a>.</p><script async src="//codepen.io/assets/embed/ei.js"></script>
+ </div>
+ </div>
</div>
- <div class="foundation-toc-ad-unit" id="TOCAdUnit">
+ </div>
+</section>
+
+<hr>
+
+<div class="row gs-resources">
+ <div class="small-12 columns">
+ <h2 id="resources">Foundation Resources</h2>
+ <h2 class="subheader">Not enough to get you started? Think again. Check out all the cool things we've got for you.</h2>
+ <div class="row">
+ <div class="small-12 columns">
+ <div class="row circle-list">
+ <div class="medium-4 columns">
+ <h4>Components</h4>
+ <p>If you need tools to help get your project started? We have some <a href="https://get.foundation/templates-f5.html">templates</a> we've put together, custom code snippets in our <a href="http://patterntap.com/code">Building Blocks</a>, and <a href="https://get.foundation/responsive-tables.html">responsive tables</a>. We can also help if you need <a href="https://get.foundation/icon-fonts.html">icon fonts</a> or <a href="https://get.foundation/social-icons.html">social icons</a>.</p>
+ </div>
+ <div class="medium-4 columns">
+ <h4>Development Tools</h4>
+ <p>The Foundation community has put together <a href="https://get.foundation/sites/resources.html">free themes</a> for WordPress, Drupal, Shopify, Jekyll, and more! Or if you're looking for <a href="http://madmimi.github.io/angular-foundation/">Angular directives for Foundation</a>, <a href="https://github.com/zurb/foundation-5-sublime-snippets"> and Sublime Text Snippets</a>to help you out.</p>
+ </div>
+ <div class="medium-4 columns">
+ <h4>Inspiration</h4>
+ <p>Looking for something to jumpstart your creative juices? We've got you covered with a fully <a href="http://zurb.com/responsive">Responsive Gallery</a>, our <a href="http://zurb.com/university/lessons">ZURB University Lessons</a>, updates on the <a href="http://zurb.com/blog">ZURBlog</a>, and a glossary of product design terms with <a href="http://zurb.com/word">ZURB Word</a>.</p>
+ </div>
+ </div>
+ </div>
</div>
- </nav>
+ <p class="bottom-link"><a href="https://get.foundation/sites/resources.html">See the full list of resources our community have put together. →</a></p>
+ </div>
</div>
+<hr>
+
+<div class="row">
+ <div class="small-12 columns">
+ <h2>Our Community</h2>
+ <h2 class="subheader">Foundation has grown a lot over the years and whether you want to help others, contribute to Foundation, or even contact us to solve issues for your business, we know where you need to go.</h2>
+ </div>
</div>
-</article>
+<div class="row circle-list">
+ <div class="medium-4 columns">
+ <img src="assets/img/images/support-forum-gs.svg" >
+ <h4>Foundation Community</h4>
+ <p>Join the Foundation Community in our very own Forum, come support your peers! Get your questions answered or learn something new. This is your portal to the community.</p>
+ <p><a href="https://get.foundation/forum">Foundation Forum →</a></p>
+ </div>
+
+ <hr class="dashed hide-for-medium-up">
+
+ <div class="medium-4 columns">
+ <img src="assets/img/images/support-github.svg">
+ <h4>Foundation on Github</h4>
+ <p>Want to contribute to Foundation's open-source framework? Submit a fix and be counted as a contributor. See an issue, report it on GitHub. Want to see what's coming up? It's all happening on GitHub.</p>
+ <p><a href="https://github.com/zurb/foundation/issues">Contribute on Github →</a></p>
+ </div>
+
+ <hr class="dashed hide-for-medium-up">
+
+ <div class="medium-4 columns">
+ <img src="assets/img/images/support-business-gs.svg">
+ <h4>Business Support</h4>
+ <p>Foundation Business Support is here to keep you projects moving along smoothly. Whether it's a complex problem or a simple fix we have a solution for your business.</p>
+ <p><a href="https://get.foundation/support/premium-support.html">Foundation Business Support →</a></p>
+ </div>
+</div>
+
+<hr>
+
+<h2>Trending Forum Topics</h2>
+
+<div class="row">
+ <div class="medium-12 columns" data-forum-posts>
+
+ </div>
+</div>
+
+
+<div class="row">
+ <div class="medium-12 columns"><a href="/forum">See all topics →</a>
+ </div>
+</div>
+
+
+
- </div>
- <div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
- <ul class="vertical menu docs-nav" id="docs-menu">
- <p class="docs-nav-version">
- <span data-docs-version></span>
- <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">(Changelog)</a>
- </p>
-
- <li class="docs-nav-title">Getting Started</li>
- <li><a href="installation.html">Installation</a></li>
- <li><a href="starter-projects.html">Starter Projects</a></li>
- <li><a href="compatibility.html">Compatibility</a></li>
- <li><a href="accessibility.html">Accessibility</a></li>
- <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
-
- <li class="docs-nav-title">Setup</li>
- <li><a href="global.html">Global Styles</a></li>
- <li><a href="rtl.html">Right-to-Left Support</a></li>
- <li><a href="flexbox.html">Flexbox</a></li>
- <li><a href="sass.html">Sass</a></li>
- <li><a href="javascript.html">JavaScript</a></li>
- <li><a href="javascript-utilities.html">JavaScript Utilities</a></li>
- <li><a href="media-queries.html">Media Queries</a></li>
-
- <li class="docs-nav-title">General</li>
- <li><a href="grid.html">Grid</a></li>
- <li><a href="flex-grid.html">Flex Grid</a></li>
- <li><a href="forms.html">Forms</a></li>
- <li><a href="visibility.html">Visibility Classes</a></li>
- <li><a href="float-classes.html">Float Classes</a></li>
-
- <li class="docs-nav-title">Typography</li>
- <li><a href="typography-base.html">Base Styles</a></li>
- <li><a href="typography-helpers.html">Helper Classes</a></li>
-
- <li class="docs-nav-title">Controls</li>
- <li><a href="button.html">Button</a></li>
- <li><a href="button-group.html">Button Group</a></li>
- <li><a href="close-button.html">Close Button</a></li>
- <li><a href="slider.html">Slider <span class="label">JS</span></a></li>
- <li><a href="switch.html">Switch</a></li>
-
- <li class="docs-nav-title">Navigation</li>
- <li><a href="navigation.html">Overview</a></li>
- <li><a href="menu.html">Menu</a></li>
- <li><a href="dropdown-menu.html">Dropdown Menu <span class="label">JS</span></a></li>
- <li><a href="drilldown-menu.html">Drilldown Menu <span class="label">JS</span></a></li>
- <li><a href="accordion-menu.html">Accordion Menu <span class="label">JS</span></a></li>
- <li><a href="top-bar.html">Top Bar</a></li>
- <li><a href="responsive-navigation.html">Responsive Navigation</a></li>
- <li><a href="magellan.html">Magellan <span class="label">JS</span></a></li>
- <li><a href="pagination.html">Pagination</a></li>
- <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
-
- <li class="docs-nav-title">Containers</li>
- <li><a href="accordion.html">Accordion <span class="label">JS</span></a></li>
- <li><a href="callout.html">Callout</a></li>
- <li><a href="dropdown.html">Dropdown <span class="label">JS</span></a></li>
- <li><a href="media-object.html">Media Object</a></li>
- <li><a href="off-canvas.html">Off-canvas <span class="label">JS</span></a></li>
- <li><a href="reveal.html">Reveal <span class="label">JS</span> <small>Modal</small></a></li>
- <li><a href="table.html">Table</a></li>
- <li><a href="tabs.html">Tabs <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Media</li>
- <li><a href="badge.html">Badge</a></li>
- <li><a href="flex-video.html">Flex Video</a></li>
- <li><a href="label.html">Label</a></li>
- <li><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
- <li><a href="progress-bar.html">Progress Bar</a></li>
- <li><a href="thumbnail.html">Thumbnail</a></li>
- <li><a href="tooltip.html">Tooltip <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Plugins</li>
- <li><a href="abide.html">Abide <small>Form Validation</small></a></li>
- <li><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
- <li><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
- <li><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
- <li><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
-
- <li class="docs-nav-title">Sass</li>
- <li><a href="sass-functions.html">Functions</a></li>
- <li><a href="sass-mixins.html">Mixins</a></li>
-
- <li class="docs-nav-title">Libraries</li>
- <li><a href="motion-ui.html">Motion UI</a></li>
- <li><a href="panini.html">Panini</a></li>
- <li><a href="style-sherpa.html">Style Sherpa</a></li>
-
- <li class="docs-nav-title">Older Versions</li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
- <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
- <li><a href="https://get.foundation/sites/docs/v/3.2.5/">Foundation 3</a></li>
- <li><a href="https://get.foundation/sites/docs/v/2.2.1/">Foundation 2</a></li>
- </ul>
-
- </div>
- </div>
- <!-- Small Business(Docs) -->
- <section id="studiosCallout">
- <div class="row">
- <div class="medium-4 large-4 columns">
- <img src="https://get.foundation/assets/img/smallbiz-footer.svg" alt="">
- </div>
- <div class="medium-8 large-8 columns banner-info">
- <div class="row column property-label">ZURB Foundation</div>
- <h3 class="light">Yeah, we can help with that.</h3>
- <p class="lead"> We’ll collaborate with your team throughout the entire project life cycle. We’ll take your concept and move it through ideation, hi-fi wireframes, visual design and code, all while informing you on the whys and hows along the way.</p>
- <div class="course-buttons">
- <a href="https://get.foundation/get-involved/premium-support.html" class="studios button" data-zcom-event="studios_foundation_click" id="foundationSmallV1">Show Me How →</a>
</div>
</div>
- </div>
- </section>
-
- <div class="docs-newsletter">
- <div class="row">
- <div class="medium-7 large-8 columns">
- <a target="_blank" href="https://get.foundation/learn/responsive-reading.html">
- <h5 class="">Download ZURB’s 21 Responsive Trends That Will Shape 2017</h5>
- <p style="margin-bottom: 0;">Stay informed with amazing responsive trends each month from ZURB.</p>
- </a>
+ <!-- <section id="courses-banner-large">
+ <div class="row">
+ <div class="large-5 medium-5 columns banner-image">
+ <img src="https://get.foundation/assets/img/responsive-banner-main.svg" alt="responsive design">
+ </div>
+ <div class="large-7 medium-7 columns banner-info">
+ <h3>Get a running start with Foundation</h3>
+ <p>Learn the fundamentals of the world's most advanced responsive framework in our <strong>Intro to Foundation class.</strong> You'll learn from the creators themselves on how to use Foundation and jumpstart your next project. <a href="http://zurb.com/university/courses" class="inline-hide">Learn more about classes »</a></p>
+ <a href="http://zurb.com/university/foundation-intro?utm_source=Foundation%20Docs&utm_medium=Large%20Banner&utm_campaign=Intro%20to%20Foundation" class="button">Learn More</a>
+ <a href="http://zurb.com/university/courses" class="learn-more hide-for-medium-up">Learn more about classes »</a>
+ </div>
+ </div>
+</section> -->
+ <div id="newsletter">
+ <div class="row">
+ <div class="medium-8 columns">
+ <h5>Stay on top of what’s happening in <a href="http://zurb.com/responsive">responsive design</a>.</h5>
+ <p>Sign up to receive monthly Responsive Reading highlights. <a href="http://zurb.com/responsive/reading">Read Last Month's Edition »</a></p>
+ </div>
+ <div class="medium-4 columns">
+ <form action="http://zurb.createsend.com/t/y/s/xlitlu/" method="post" id="subForm">
+ <div class="row collapse margintop-20px">
+ <div class="small-8 medium-8 columns">
+ <input id="fieldEmail" name="cm-xlitlu-xlitlu" type="email" placeholder="signup@example.com">
</div>
- <div class="medium-5 large-4 footer-signup-form columns">
- <a style="margin-bottom: 0;" target="_blank" href="https://get.foundation/learn/responsive-reading.html" class="button expanded">Download the PDF</a>
+ <div class="small-4 medium-4 columns">
+ <input type="submit" href="#" class="postfix button" value="Sign Up">
</div>
</div>
+ </form>
+ </div>
+ </div>
+</div>
+
+
+<div class="zurb-footer-top bg-fblue">
+ <div class="row property">
+ <div class="medium-4 columns">
+ <div class="property-info">
+ <h3>Foundation for Sites</h3>
+ <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
+ </p>
</div>
-
- <div class="zurb-footer-top bg-fblue">
- <div class="row property">
- <div class="medium-4 columns">
- <div class="property-info">
- <h3>Foundation for Sites</h3>
- <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
- </p>
- </div>
- </div>
-
- <div class="medium-8 columns">
- <div class="row collapse">
- <div class="medium-4 columns">
- <div class="learn-links">
- <h4 class="hide-for-small">Want more?</h4>
- <ul>
- <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
- <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
- <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
- <li><a href="http://zurb.com/university/courses">Training</a></li>
- <li><a href="http://zurb.com/library">Design Resources</a></li>
- </ul>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="support-links">
- <h4 class="hide-for-small">Talk to us</h4>
- <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
- <p><a href="https://get.foundation/get-involved/contribute.html">Get involved in<br>our amazing community.</a></p>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="connect-links">
- <h4 class="hide-for-small">Stay Updated</h4>
- <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
- <a href="http://zurb.com/news" class="small button">Stay Connected</a>
- </div>
- </div>
- </div>
+ </div>
+
+ <div class="medium-8 columns">
+ <div class="row collapse">
+ <div class="medium-4 columns">
+ <div class="learn-links">
+ <h4 class="hide-for-small">Want more?</h4>
+ <ul>
+ <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
+ <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
+ <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
+ <li><a href="http://zurb.com/university/courses">Training</a></li>
+ <li><a href="http://zurb.com/library">Design Resources</a></li>
+ </ul>
</div>
</div>
- <div class="row global">
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/studios" class="footer-link-block services">
- <span class="title">Studios</span>
- <span>Helping more than 200 startups succeed since 1998.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="https://get.foundation/" class="footer-link-block foundation">
- <span class="title">Foundation</span>
- <span>The most advanced front-end framework in the world.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/notable" class="footer-link-block apps">
- <span class="title">Notable Design Apps</span>
- <span>Prototype, iterate and collect feedback on your products.</span>
- </a>
+ <div class="medium-4 columns">
+ <div class="support-links">
+ <h4 class="hide-for-small">Talk to us</h4>
+ <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
+ <p><a href="https://get.foundation/business/business-support.html">Business Support</a></p>
+ <p>Or check our <a href="https://get.foundation/support/support.html">support page</a></p>
+ </div>
</div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/university" class="footer-link-block expo">
- <span class="title">University</span>
- <span>Ideas, thoughts and design resources shared with you.</span>
- </a>
+ <div class="medium-4 columns">
+ <div class="connect-links">
+ <h4 class="hide-for-small">Stay Updated</h4>
+ <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
+ <a href="http://zurb.com/news" class="small button">Stay Connected</a>
</div>
</div>
</div>
-
- <div class="zurb-footer-bottom">
- <div class="row">
- <div class="medium-4 medium-push-8 columns">
- <ul class="home-social">
- <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
- <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
- <li><a href="http://zurb.com/contact" class="mail"></a></li>
- </ul>
- </div>
- <div class="medium-8 medium-pull-4 columns">
- <a href="http://www.zurb.com" class="zurb-logo regular"></a>
- <ul class="zurb-links">
- <li><a href="http://zurb.com/about">About</a></li>
- <li><a href="http://zurb.com/blog">Blog</a></li>
- <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
- <li><a href="http://zurb.com/contact">Contact</a></li>
- <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
- </ul>
- <p class="copyright">© 1998‐2016 ZURB, Inc. All rights reserved.</p>
- </div>
- </div>
+ </div>
+ </div>
+ <div class="row global">
+ <div class="medium-3 small-6 columns">
+ <a href="http://zurb.com/studios" class="footer-link-block services">
+ <span class="title">Studios</span>
+ <span>Helping more than 200 startups succeed since 1998.</span>
+ </a>
+ </div>
+ <div class="medium-3 small-6 columns">
+ <a href="https://get.foundation/" class="footer-link-block foundation">
+ <span class="title">Foundation</span>
+ <span>The most advanced front-end framework in the world.</span>
+ </a>
+ </div>
+ <div class="medium-3 small-6 columns">
+ <a href="http://zurb.com/notable" class="footer-link-block apps">
+ <span class="title">Notable Design Apps</span>
+ <span>Prototype, iterate and collect feedback on your products.</span>
+ </a>
+ </div>
+ <div class="medium-3 small-6 columns">
+ <a href="http://zurb.com/university" class="footer-link-block expo">
+ <span class="title">University</span>
+ <span>Ideas, thoughts and design resources shared with you.</span>
+ </a>
+ </div>
+ </div>
+</div>
+
+<div class="zurb-footer-bottom">
+ <div class="row">
+ <div class="medium-4 medium-4 push-8 columns">
+ <ul class="home-social">
+ <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
+ <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
+ <li><a href="http://zurb.com/contact" class="mail"></a></li>
+ </ul>
+ </div>
+ <div class="medium-8 medium-8 pull-4 columns">
+ <a href="http://www.zurb.com" class="zurb-logo regular"></a>
+ <ul class="zurb-links">
+ <li><a href="http://zurb.com/about">About</a></li>
+ <li><a href="http://zurb.com/blog">Blog</a></li>
+ <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
+ <li><a href="http://zurb.com/contact">Contact</a></li>
+ <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
+ </ul>
+ <p class="copyright">© 1998‐2015 ZURB, Inc. All rights reserved.</p>
+ </div>
+ </div>
+</div>
+
+ </section>
+
</div>
-
- </div>
- </div>
-
- <script>
- var _gaq = _gaq || [];
- _gaq.push(
- ['_setAccount', 'UA-2195009-2'],
- ['_trackPageview'],
- ['b._setAccount', 'UA-2195009-27'],
- ['b._trackPageview']
- );
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
-
- <script src="assets/js/vendor.js?hash=36aa521eef8aa0582384bedab70dae49"></script>
- <script src="assets/js/foundation.js?hash=a6de2a35f7aa7c35a5dffd2e57b0b2c3"></script>
- <script src="assets/js/docs.js?hash=27f397bbe1efefca6e2f924560d08869"></script>
- <script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
-</body>
+ </div>
+
+ <script src="assets/js/templates.js"></script>
+ <script src="assets/js/all.js"></script>
+ <script>
+ var _gaq = _gaq || [];
+ _gaq.push(
+ ['_setAccount', 'UA-2195009-2'],
+ ['_trackPageview'],
+ ['b._setAccount', 'UA-2195009-27'],
+ ['b._trackPageview']
+ );
+
+ (function() {
+ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+ })();
+ </script>
+ <script>
+ $(document).foundation().foundation('joyride', 'start');
+ </script>
+ </body>
+
+
</html>
+++ /dev/null
-<!doctype html>
-<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
-<html class="no-js" lang="en" dir="ltr">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="There are many ways to install Foundation, but if you're just getting started, we have a few suggestions.">
- <link rel="icon" href="assets/img/icons/foundation-favicon.ico" type="image/x-icon">
- <title>Foundation for Sites 6 Docs | Installation</title>
- <link href="assets/css/docs.css?hash=edf54f1ef507f1a7560d7ad13cecbb32" rel="stylesheet" />
- <link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=2baba859f65e199ef2e35b7d92c5cab6" rel="stylesheet">
- <!-- <link rel="stylesheet" href="./node_modules/motion-ui/dist/motion-ui.css" /> -->
-</head>
-<body>
-
- <div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
-
- <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="mobile-ofc vertical menu">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
-
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/support.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/sort/unanswered">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
- </div>
-
- <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="vertical menu">
- <li><a href="#">Foundation</a></li>
- <li><a href="#">Dot</a></li>
- <li><a href="#">ZURB</a></li>
- <li><a href="#">Com</a></li>
- <li><a href="#">Slash</a></li>
- <li><a href="#">Sites</a></li>
- </ul>
- </div>
-
-
- <div class="off-canvas-content" data-off-canvas-content>
- <!-- Info Banner For Announcements or Links -->
- <!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
- <div class="info">
- <h5>Foundation 6 is here!</h5>
- </div>
- </a> -->
-
- <nav class="marketing-topbar show-for-medium">
-
- <ul class="menu">
- <li class="topbar-title"><a href="https://get.foundation/index.html"><img src="assets/img/logos/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
- </ul>
-
- <ul class="dropdown menu" data-dropdown-menu data-click-open="false">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/" target="_blank">F5 Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="https://get.foundation/emails/docs/" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
-
- </nav>
-
- <div class="title-bar hide-for-medium">
- <div class="title-bar-left">
- <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
- <span class="title-bar-title">Foundation</span>
- </div>
- </div>
-
-
- <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
-
- <div class="expanded row">
- <div class="medium-9 large-10 medium-push-3 large-push-2 columns">
-
-<article class="docs-component" id="docs-installation">
-
-<a href="#docs-menu" class="small secondary expanded button hide-for-medium">Jump to Nav</a>
-
-<header>
- <h1 class="docs-page-title">Installation</h1>
-
-
- <p class="lead docs-page-lead">There are many ways to install Foundation, but if you're just getting started, we have a few suggestions.</p>
-
- <ul class="menu simple docs-contribute-menu">
- <li><a href="https://github.com/zurb/foundation-sites/edit/master/docs/pages/installation.md" target="_blank"><i class="fi-pencil"></i>Edit this Page</a></li>
- <li><a href="https://github.com/zurb/foundation-sites/issues/new?title=%5BInstallation%5D%20ISSUE%20NAME%20HERE" target="_blank"><i class="fi-social-github"></i>Report a Bug</a></li>
- <li><a href="https://get.foundation/forum" target="_blank"><i class="fi-comment"></i>Get Help</a></li>
- </ul>
-</header>
-
-<hr>
-
-<div class="row">
-
-<div class="large-9 columns" id="docs">
-
-<!--## Yeti Launch-->
-<!--Yeti Launch is our Mac app for quickly spinning up blank projects for any of the three Foundation frameworks. If you're just getting started with Foundation, we recommend downloading Yeti Launch to get going right away.-->
-<!--<a href="https://get.foundation/develop/yeti-launch" class="large button">Download Yeti Launch</a>-->
-<h3 id="command-line-tool" class="docs-heading">Command-Line Tool<a class="docs-heading-icon" href="#command-line-tool"></a></h3><p>Not a fan of GUIs? The Node-powered Foundation CLI can install the same template projects for you. Install it with npm:</p>
-<div class="docs-code" data-docs-code><pre><code class="bash">npm install --global foundation-cli</code></pre></div><p>Depending on how your machine is configured, the command may fail with an <code>EACCESS</code> error. To get around this, run the command with <code>sudo</code> at the beginning:</p>
-<div class="docs-code" data-docs-code><pre><code class="bash">sudo npm install --global foundation-cli</code></pre></div><div class="callout alert">
- <p>If you already have the Foundation 5 CLI on your machine, you will only be able to access one of the commands, depending on how your command line environment is configured.</p>
-
- <p>If you want to remove the old CLI, run <code>gem uninstall foundation</code>. After testing this new CLI, if you want to go back to the old CLI, run <code>npm uninstall foundation-cli --global</code>.</p>
-</div>
-
-<p>Once you've installed the CLI, use the <code>new</code> command to start making a new project:</p>
-<div class="docs-code" data-docs-code><pre><code class="bash">foundation new</code></pre></div><hr>
-<h2 id="manual-setup" class="docs-heading" data-magellan-target="manual-setup">Manual Setup<a class="docs-heading-icon" href="#manual-setup"></a></h2><h3 id="basic-template" class="docs-heading">Basic Template<a class="docs-heading-icon" href="#basic-template"></a></h3><p>To manually set up the basic template, first download it with Git:</p>
-<div class="docs-code" data-docs-code><pre><code class="bash">git <span class="hljs-built_in">clone</span> https://github.com/zurb/foundation-sites-template projectname</code></pre></div><p>Then open the folder in your command line, and install the needed dependencies:</p>
-<div class="docs-code" data-docs-code><pre><code class="bash"><span class="hljs-built_in">cd</span> projectname
-npm install
-bower install</code></pre></div><p>Finally, run <code>npm start</code> to run the Sass compiler. It will re-run every time you save a Sass file.</p>
-<h3 id="zurb-template" class="docs-heading">ZURB Template<a class="docs-heading-icon" href="#zurb-template"></a></h3><p>To manually set up the ZURB template, first download it with Git:</p>
-<div class="docs-code" data-docs-code><pre><code class="bash">git <span class="hljs-built_in">clone</span> https://github.com/zurb/foundation-zurb-template projectname</code></pre></div><p>Then open the folder in your command line, and install the needed dependencies:</p>
-<div class="docs-code" data-docs-code><pre><code class="bash"><span class="hljs-built_in">cd</span> projectname
-npm install
-bower install</code></pre></div><p>Finally, run <code>npm start</code> to run Gulp. Your finished site will be created in a folder called <code>dist</code>, viewable at this URL:</p>
-<div class="docs-code" data-docs-code><pre><code class="html">http://localhost:8000</code></pre></div><p>To create compressed, production-ready assets, run <code>npm run build</code>.</p>
-<hr>
-<h2 id="css-download" class="docs-heading" data-magellan-target="css-download">CSS Download<a class="docs-heading-icon" href="#css-download"></a></h2><p>If you aren't into Sass, we have a starter template with compiled CSS and JavaScript, as well as a starting <code>index.html</code> file for you to hack on. Just unzip and get coding!</p>
-<p><a href="https://get.foundation/sites/download" class="large button">Download CSS Version</a></p>
-<hr>
-<h2 id="html-starter-template" class="docs-heading" data-magellan-target="html-starter-template">HTML Starter Template<a class="docs-heading-icon" href="#html-starter-template"></a></h2><p>Start with this HTML template and adapt it to your needs.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-meta"><!doctype html></span>
-<span class="hljs-tag"><<span class="hljs-name">html</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"no-js"</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">head</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"utf-8"</span> /></span>
- <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">"x-ua-compatible"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"ie=edge"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"width=device-width, initial-scale=1.0"</span> /></span>
- <span class="hljs-tag"><<span class="hljs-name">title</span>></span>Foundation Starter Template<span class="hljs-tag"></<span class="hljs-name">title</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"css/foundation.css"</span> /></span>
- <span class="hljs-tag"></<span class="hljs-name">head</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">body</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">h1</span>></span>Hello, world!<span class="hljs-tag"></<span class="hljs-name">h1</span>></span>
-
- <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"js/vendor/jquery.min.js"</span>></span><span class="undefined?hash=554e6bb538fac07ebd5f35cd21d70011"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"js/vendor/what-input.min.js"</span>></span><span class="undefined"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"js/foundation.min.js"</span>></span><span class="undefined"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="javascript">
- $(<span class="hljs-built_in">document</span>).foundation();
- </span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
-
- <span class="hljs-tag"></<span class="hljs-name">body</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">html</span>></span></code></pre></div><hr>
-<h2 id="cdn-links" class="docs-heading" data-magellan-target="cdn-links">CDN Links<a class="docs-heading-icon" href="#cdn-links"></a></h2><p>The folks at <a href="https://www.jsdelivr.com">jsDelivr</a> host the compressed Foundation CSS and JavaScript for us. Just drop one of these <code><script></code> tags into your HTML and you're set:</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-comment"><!-- Compressed CSS --></span>
-<span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/foundation/6.2.3/foundation.min.css"</span>></span>
-
-<span class="hljs-comment"><!-- Compressed JavaScript --></span>
-<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/foundation/6.2.3/foundation.min.js"</span>></span><span class="undefined"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre></div><hr>
-<h2 id="package-managers" class="docs-heading" data-magellan-target="package-managers">Package Managers<a class="docs-heading-icon" href="#package-managers"></a></h2><p>Foundation is available on npm, Bower, Meteor, and Composer. The package includes all of the source Sass and JavaScript files, as well as compiled CSS and JavaScript, in uncompressed and compressed flavors.</p>
-<ul>
-<li>npm: <code>npm install foundation-sites</code></li>
-<li>Bower: <code>bower install foundation-sites</code></li>
-<li>Meteor: <code>meteor add zurb:foundation-sites</code></li>
-<li>Composer: <code>php composer.phar require zurb/foundation</code></li>
-<li>NuGet: <code>Install-Package foundation-sites</code></li>
-</ul>
-<h3 id="package-contents" class="docs-heading">Package Contents<a class="docs-heading-icon" href="#package-contents"></a></h3><p>Here's what comes in the package.</p>
-<ul>
-<li><code>scss/</code>: Source Sass files. Use this folder as a load path in Sass.</li>
-<li><code>js/</code>: Source JavaScript files. If you're using a build system, make sure <code>foundation.core.js</code> is loaded first.</li>
-<li><code>dist/</code>: Compiled files.<ul>
-<li><code>css/</code>: Compiled CSS files. Includes minified and unminified files.</li>
-<li><code>js/</code>: Concatenated JavaScript files. Includes minified and unminified files.<ul>
-<li><code>plugins/</code>: Standalone JavaScript plugins.</li>
-</ul>
-</li>
-</ul>
-</li>
-</ul>
-<hr>
-<h2 id="other-integrations" class="docs-heading" data-magellan-target="other-integrations">Other Integrations<a class="docs-heading-icon" href="#other-integrations"></a></h2><p>The Foundation community has helped us integrate the framework into Rails, WordPress, Django, and more. Head to our <a href="https://get.foundation/sites/resources">resources page</a> to find even more ways to use Foundation.</p>
-
-
-
-
-
-</div>
-
-<div class="large-3 columns" data-sticky-container>
- <nav class="columns docs-toc-wrap" data-sticky data-anchor="docs" data-sticky-on="large">
- <div class="docs-toc hide" id="docsTOC">
- <ul class="vertical menu" data-docs-toc>
- <li class="docs-nav-title">On this page:</li>
- </ul>
- </div>
- <div class="foundation-toc-ad-unit" id="TOCAdUnit">
- </div>
- </nav>
-</div>
-
-</div>
-
-</article>
-
- </div>
- <div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
- <ul class="vertical menu docs-nav" id="docs-menu">
- <p class="docs-nav-version">
- <span data-docs-version></span>
- <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">(Changelog)</a>
- </p>
-
- <li class="docs-nav-title">Getting Started</li>
- <li class="current"><a href="installation.html">Installation</a></li>
- <li><a href="starter-projects.html">Starter Projects</a></li>
- <li><a href="compatibility.html">Compatibility</a></li>
- <li><a href="accessibility.html">Accessibility</a></li>
- <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
-
- <li class="docs-nav-title">Setup</li>
- <li><a href="global.html">Global Styles</a></li>
- <li><a href="rtl.html">Right-to-Left Support</a></li>
- <li><a href="flexbox.html">Flexbox</a></li>
- <li><a href="sass.html">Sass</a></li>
- <li><a href="javascript.html">JavaScript</a></li>
- <li><a href="javascript-utilities.html">JavaScript Utilities</a></li>
- <li><a href="media-queries.html">Media Queries</a></li>
-
- <li class="docs-nav-title">General</li>
- <li><a href="grid.html">Grid</a></li>
- <li><a href="flex-grid.html">Flex Grid</a></li>
- <li><a href="forms.html">Forms</a></li>
- <li><a href="visibility.html">Visibility Classes</a></li>
- <li><a href="float-classes.html">Float Classes</a></li>
-
- <li class="docs-nav-title">Typography</li>
- <li><a href="typography-base.html">Base Styles</a></li>
- <li><a href="typography-helpers.html">Helper Classes</a></li>
-
- <li class="docs-nav-title">Controls</li>
- <li><a href="button.html">Button</a></li>
- <li><a href="button-group.html">Button Group</a></li>
- <li><a href="close-button.html">Close Button</a></li>
- <li><a href="slider.html">Slider <span class="label">JS</span></a></li>
- <li><a href="switch.html">Switch</a></li>
-
- <li class="docs-nav-title">Navigation</li>
- <li><a href="navigation.html">Overview</a></li>
- <li><a href="menu.html">Menu</a></li>
- <li><a href="dropdown-menu.html">Dropdown Menu <span class="label">JS</span></a></li>
- <li><a href="drilldown-menu.html">Drilldown Menu <span class="label">JS</span></a></li>
- <li><a href="accordion-menu.html">Accordion Menu <span class="label">JS</span></a></li>
- <li><a href="top-bar.html">Top Bar</a></li>
- <li><a href="responsive-navigation.html">Responsive Navigation</a></li>
- <li><a href="magellan.html">Magellan <span class="label">JS</span></a></li>
- <li><a href="pagination.html">Pagination</a></li>
- <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
-
- <li class="docs-nav-title">Containers</li>
- <li><a href="accordion.html">Accordion <span class="label">JS</span></a></li>
- <li><a href="callout.html">Callout</a></li>
- <li><a href="dropdown.html">Dropdown <span class="label">JS</span></a></li>
- <li><a href="media-object.html">Media Object</a></li>
- <li><a href="off-canvas.html">Off-canvas <span class="label">JS</span></a></li>
- <li><a href="reveal.html">Reveal <span class="label">JS</span> <small>Modal</small></a></li>
- <li><a href="table.html">Table</a></li>
- <li><a href="tabs.html">Tabs <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Media</li>
- <li><a href="badge.html">Badge</a></li>
- <li><a href="flex-video.html">Flex Video</a></li>
- <li><a href="label.html">Label</a></li>
- <li><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
- <li><a href="progress-bar.html">Progress Bar</a></li>
- <li><a href="thumbnail.html">Thumbnail</a></li>
- <li><a href="tooltip.html">Tooltip <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Plugins</li>
- <li><a href="abide.html">Abide <small>Form Validation</small></a></li>
- <li><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
- <li><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
- <li><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
- <li><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
-
- <li class="docs-nav-title">Sass</li>
- <li><a href="sass-functions.html">Functions</a></li>
- <li><a href="sass-mixins.html">Mixins</a></li>
-
- <li class="docs-nav-title">Libraries</li>
- <li><a href="motion-ui.html">Motion UI</a></li>
- <li><a href="panini.html">Panini</a></li>
- <li><a href="style-sherpa.html">Style Sherpa</a></li>
-
- <li class="docs-nav-title">Older Versions</li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
- <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
- <li><a href="https://get.foundation/sites/docs/v/3.2.5/">Foundation 3</a></li>
- <li><a href="https://get.foundation/sites/docs/v/2.2.1/">Foundation 2</a></li>
- </ul>
-
- </div>
- </div>
-
- <!-- Small Business(Docs) -->
- <section id="studiosCallout">
- <div class="row">
- <div class="medium-4 large-4 columns">
- <img src="https://get.foundation/assets/img/smallbiz-footer.svg" alt="">
- </div>
- <div class="medium-8 large-8 columns banner-info">
- <div class="row column property-label">ZURB Foundation</div>
- <h3 class="light">Yeah, we can help with that.</h3>
- <p class="lead"> We’ll collaborate with your team throughout the entire project life cycle. We’ll take your concept and move it through ideation, hi-fi wireframes, visual design and code, all while informing you on the whys and hows along the way.</p>
- <div class="course-buttons">
- <a href="https://get.foundation/get-involved/premium-support.html" class="studios button" data-zcom-event="studios_foundation_click" id="foundationSmallV1">Show Me How →</a>
- </div>
- </div>
- </div>
- </section>
-
- <div class="docs-newsletter">
- <div class="row">
- <div class="medium-7 large-8 columns">
- <a target="_blank" href="https://get.foundation/learn/responsive-reading.html">
- <h5 class="">Download ZURB’s 21 Responsive Trends That Will Shape 2017</h5>
- <p style="margin-bottom: 0;">Stay informed with amazing responsive trends each month from ZURB.</p>
- </a>
- </div>
- <div class="medium-5 large-4 footer-signup-form columns">
- <a style="margin-bottom: 0;" target="_blank" href="https://get.foundation/learn/responsive-reading.html" class="button expanded">Download the PDF</a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-top bg-fblue">
- <div class="row property">
- <div class="medium-4 columns">
- <div class="property-info">
- <h3>Foundation for Sites</h3>
- <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
- </p>
- </div>
- </div>
-
- <div class="medium-8 columns">
- <div class="row collapse">
- <div class="medium-4 columns">
- <div class="learn-links">
- <h4 class="hide-for-small">Want more?</h4>
- <ul>
- <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
- <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
- <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
- <li><a href="http://zurb.com/university/courses">Training</a></li>
- <li><a href="http://zurb.com/library">Design Resources</a></li>
- </ul>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="support-links">
- <h4 class="hide-for-small">Talk to us</h4>
- <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
- <p><a href="https://get.foundation/get-involved/contribute.html">Get involved in<br>our amazing community.</a></p>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="connect-links">
- <h4 class="hide-for-small">Stay Updated</h4>
- <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
- <a href="http://zurb.com/news" class="small button">Stay Connected</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="row global">
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/studios" class="footer-link-block services">
- <span class="title">Studios</span>
- <span>Helping more than 200 startups succeed since 1998.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="https://get.foundation/" class="footer-link-block foundation">
- <span class="title">Foundation</span>
- <span>The most advanced front-end framework in the world.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/notable" class="footer-link-block apps">
- <span class="title">Notable Design Apps</span>
- <span>Prototype, iterate and collect feedback on your products.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/university" class="footer-link-block expo">
- <span class="title">University</span>
- <span>Ideas, thoughts and design resources shared with you.</span>
- </a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-bottom">
- <div class="row">
- <div class="medium-4 medium-push-8 columns">
- <ul class="home-social">
- <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
- <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
- <li><a href="http://zurb.com/contact" class="mail"></a></li>
- </ul>
- </div>
- <div class="medium-8 medium-pull-4 columns">
- <a href="http://www.zurb.com" class="zurb-logo regular"></a>
- <ul class="zurb-links">
- <li><a href="http://zurb.com/about">About</a></li>
- <li><a href="http://zurb.com/blog">Blog</a></li>
- <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
- <li><a href="http://zurb.com/contact">Contact</a></li>
- <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
- </ul>
- <p class="copyright">© 1998‐2016 ZURB, Inc. All rights reserved.</p>
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- <script>
- var _gaq = _gaq || [];
- _gaq.push(
- ['_setAccount', 'UA-2195009-2'],
- ['_trackPageview'],
- ['b._setAccount', 'UA-2195009-27'],
- ['b._trackPageview']
- );
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
-
- <script src="assets/js/vendor.js?hash=4a9824fcca1f90acaeb501012e92cbec"></script>
- <script src="assets/js/foundation.js?hash=a232df68f6244b18619ef7c84414c7df"></script>
- <script src="assets/js/docs.js?hash=0785bdb02b84d722b8b0c979e5621c2e"></script>
- <script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
-</body>
-</html>
+++ /dev/null
-<!doctype html>
-<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
-<html class="no-js" lang="en" dir="ltr">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="Interchange uses media queries to dynamically load responsive content that is appropriate for the user's device.">
- <link rel="icon" href="assets/img/icons/foundation-favicon.ico" type="image/x-icon">
- <title>Foundation for Sites 6 Docs | Interchange</title>
- <link href="assets/css/docs.css?hash=36827ae32c0ffb775f350175c2eeb833" rel="stylesheet" />
- <link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=df95f616b9461590363725ea76a04d66" rel="stylesheet">
- <!-- <link rel="stylesheet" href="./node_modules/motion-ui/dist/motion-ui.css" /> -->
-</head>
-<body>
-
- <div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
-
- <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="mobile-ofc vertical menu">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
-
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/support.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/sort/unanswered">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
- </div>
-
- <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="vertical menu">
- <li><a href="#">Foundation</a></li>
- <li><a href="#">Dot</a></li>
- <li><a href="#">ZURB</a></li>
- <li><a href="#">Com</a></li>
- <li><a href="#">Slash</a></li>
- <li><a href="#">Sites</a></li>
- </ul>
- </div>
-
-
- <div class="off-canvas-content" data-off-canvas-content>
- <!-- Info Banner For Announcements or Links -->
- <!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
- <div class="info">
- <h5>Foundation 6 is here!</h5>
- </div>
- </a> -->
-
- <nav class="marketing-topbar show-for-medium">
-
- <ul class="menu">
- <li class="topbar-title"><a href="https://get.foundation/index.html"><img src="assets/img/logos/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
- </ul>
-
- <ul class="dropdown menu" data-dropdown-menu data-click-open="false">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/" target="_blank">F5 Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="https://get.foundation/emails/docs/" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
-
- </nav>
-
- <div class="title-bar hide-for-medium">
- <div class="title-bar-left">
- <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
- <span class="title-bar-title">Foundation</span>
- </div>
- </div>
-
-
- <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
-
- <div class="expanded row">
- <div class="medium-9 large-10 medium-push-3 large-push-2 columns">
-
-<article class="docs-component" id="docs-interchange">
-
-<a href="#docs-menu" class="small secondary expanded button hide-for-medium">Jump to Nav</a>
-
-<header>
- <h1 class="docs-page-title">Interchange</h1>
-
- <span data-tooltip title="Requires a JavaScript library." class="docs-js label">JavaScript</span>
-
- <p class="lead docs-page-lead">Interchange uses media queries to dynamically load responsive content that is appropriate for the user's device.</p>
-
- <ul class="menu simple docs-contribute-menu">
- <li><a href="https://github.com/zurb/foundation-sites/edit/master/docs/pages/interchange.md" target="_blank"><i class="fi-pencil"></i>Edit this Page</a></li>
- <li><a href="https://github.com/zurb/foundation-sites/issues/new?title=%5BInterchange%5D%20ISSUE%20NAME%20HERE" target="_blank"><i class="fi-social-github"></i>Report a Bug</a></li>
- <li><a href="https://get.foundation/forum" target="_blank"><i class="fi-comment"></i>Get Help</a></li>
- </ul>
-</header>
-
-<hr>
-
-<div class="row">
-
-<div class="large-9 columns" id="docs">
-
-<p><img data-interchange="[assets/img/interchange/small.jpg, small], [assets/img/interchange/medium.jpg, medium], [assets/img/interchange/large.jpg, large]"></p>
-<hr>
-<h2 id="use-with-images" class="docs-heading" data-magellan-target="use-with-images">Use with Images<a class="docs-heading-icon" href="#use-with-images"></a></h2><p>Bandwidth is precious on mobile networks, so it helps to serve users on smaller screens a smaller image. Using Interchange, you can serve up specific images for users depending on their screen size. CSS media queries are used to determine what size the user's device is, and which image should be served.</p>
-<p>In the above example, we have three different sizes of image: one for small screens, one for medium, and one for large. Use the below format to set up a responsive image. The image will change automatically as the browser resizes.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">data-interchange</span>=<span class="hljs-string">"[assets/img/interchange/small.jpg, small], [assets/img/interchange/medium.jpg, medium], [assets/img/interchange/large.jpg, large]"</span>></span></code></pre></div><p>The image set is a comma-separated list of items with this format:</p>
-<div class="docs-code" data-docs-code><pre><code class="html">[image_path, media_query]</code></pre></div><p><code>image_path</code> can be a relative or absolute path. <code>media_query</code> can be any CSS media query, or a Foundation breakpoint—see <a href="#named-media-queries">Named Media Queries</a> below.</p>
-<div class="callout primary">
- <p>Interchange evaluates rules in order, and the last rule to match will be used. For this reason, you should order your rules from smallest screen to largest screen.</p>
-</div>
-
-<hr>
-<h2 id="use-with-html" class="docs-heading" data-magellan-target="use-with-html">Use with HTML<a class="docs-heading-icon" href="#use-with-html"></a></h2><p>Interchange can also swap in and out entire chunks of HTML. This allows you to load in mobile-friendly components on small screens, or more advanced versions on large screens.</p>
-<p>In the below example, we've applied <code>data-interchange</code> to a <code><div></code> instead of an <code><img></code> element, and the paths are to HTML files instead of images.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">data-interchange</span>=<span class="hljs-string">"[assets/partials/interchange-default.html, small], [assets/partials/interchange-medium.html, medium], [assets/partials/interchange-large.html, large]"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div><div id="docs-example-interchange" data-interchange="[assets/partials/interchange-default.html, small], [assets/partials/interchange-medium.html, medium], [assets/partials/interchange-large.html, large]"></div>
-
-<hr>
-<h2 id="use-with-background-images" class="docs-heading" data-magellan-target="use-with-background-images">Use with Background Images<a class="docs-heading-icon" href="#use-with-background-images"></a></h2><p>When using Interchange on a non-<code><img></code> element, you can pass in an image path instead of an HTML path, and the element's <code>background-image</code> property will be set to the path of the matching rule.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">data-interchange</span>=<span class="hljs-string">"[assets/img/interchange/small.jpg, small], [assets/img/interchange/medium.jpg, medium], [assets/img/interchange/large.jpg, large]"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div><hr>
-<h2 id="named-media-queries" class="docs-heading" data-magellan-target="named-media-queries">Named Media Queries<a class="docs-heading-icon" href="#named-media-queries"></a></h2><p>Interchange supports named queries as shorthands for full CSS media queries. Any breakpoint defined in the <code>$breakpoints</code> variable in your Sass will work, along with a few other keywords. <a href="media-queries.html">Learn more about changing the default breakpoints.</a></p>
-<table>
-<thead>
-<tr>
-<th>Query Name</th>
-<th>Media Query</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td>small</td>
-<td><code>screen and (min-width: 0em)</code></td>
-</tr>
-<tr>
-<td>medium</td>
-<td><code>only screen and (min-width: 40em)</code></td>
-</tr>
-<tr>
-<td>large</td>
-<td><code>only screen and (min-width: 64em)</code></td>
-</tr>
-<tr>
-<td>xlarge</td>
-<td><code>only screen and (min-width: 75em)</code></td>
-</tr>
-<tr>
-<td>xxlarge</td>
-<td><code>only screen and (min-width: 90em)</code></td>
-</tr>
-<tr>
-<td>portrait</td>
-<td><code>screen and (orientation: portrait)</code></td>
-</tr>
-<tr>
-<td>landscape</td>
-<td><code>screen and (orientation: landscape)</code></td>
-</tr>
-<tr>
-<td>retina</td>
-<td><code>only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx)</code></td>
-</tr>
-</tbody>
-</table>
-<p>To add your own named media queries, add them as properties to <code>Foundation.Interchange.SPECIAL_QUERIES</code>.</p>
-<div class="docs-code" data-docs-code><pre><code class="js">Foundation.Interchange.SPECIAL_QUERIES[<span class="hljs-string">'square'</span>] = <span class="hljs-string">'screen and (aspect-ratio: 1/1)'</span>;</code></pre></div><hr>
-<h2 id="programmatic-use" class="docs-heading" data-magellan-target="programmatic-use">Programmatic Use<a class="docs-heading-icon" href="#programmatic-use"></a></h2><p>When using Interchange programmatically, you need to pass in your ruleset in the <code>options</code> object, as well as the <em>container</em> element, <em>not</em> the content elements, like so:</p>
-<div class="docs-code" data-docs-code><pre><code class="js"><span class="hljs-keyword">var</span> $photoFrame = $(<span class="hljs-string">'#some-container'</span>);
-<span class="hljs-keyword">var</span> interchange = <span class="hljs-keyword">new</span> Foundation.Interchange($photoFrame, {rules: <span class="hljs-string">"[path/to/default.jpg, small], [path/to/medium.jpg, medium], [path/to/large.jpg, large]"</span>});</code></pre></div>
-
-
-<hr>
-<section>
- <h2 id="javascript-reference" class="docs-heading" data-magellan-target="javascript-reference">JavaScript Reference<a class="docs-heading-icon" href="#javascript-reference"></a></h2>
-
-
- <section>
- <h3 id="js-module" class="docs-heading">Initializing<a class="docs-heading-icon" href="#js-module"></a></h3>
-
- <p>The file <code>foundation.interchange.js</code> must be included in your JavaScript to use this plugin, along with <code>foundation.core.js</code>. <strong>This plugin also requires these utility libraries:</strong></p>
-
-
- <ul>
- <li><code>foundation.util.mediaQuery.js</code></li>
- </ul>
-
- <ul>
- <li><code>foundation.util.timerAndImageLoader.js</code></li>
- </ul>
-
-
- </section>
-
-
- <section>
- <h3 id="js-class" class="docs-heading">Foundation.Interchange<a class="docs-heading-icon" href="#js-class"></a></h3>
-
- <p>Creates a new instance of Interchange.</p>
-
-
- <div class="docs-code"><pre><code><span class="hljs-keyword">var</span> elem = <span class="hljs-keyword">new</span> Foundation.Interchange(element, options);</code></pre></div>
-
- <p><strong>Fires these events:</strong>
- Interchange#event:init
- </p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>element</code></td>
- <td>Object</td>
- <td>jQuery object to add the trigger to.</td>
- </tr>
- <tr>
- <td><code>options</code></td>
- <td>Object</td>
- <td>Overrides to the default plugin settings.</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="js-options" class="docs-heading">Plugin Options<a class="docs-heading-icon" href="#js-options"></a></h3>
-
- <p>Use these options to customize an instance of Interchange. Plugin options can be set as individual data attributes, one combined <code>data-options</code> attribute, or as an object passed to the plugin's constructor. <a href="javascript.html#initializing">Learn more about how JavaScript plugins are initialized.</a></p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Default</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>data-rules</code></td>
- <td><code></code></td>
- <td>Rules to be applied to Interchange elements. Set with the `data-interchange` array notation.</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="js-events" class="docs-heading">Events<a class="docs-heading-icon" href="#js-events"></a></h3>
-
- <p>These events will fire from any element with a Interchange plugin attached.</p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>replaced.zf.interchange</code></td>
- <td>Fires when content in an Interchange element is done being loaded.</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="js-functions" class="docs-heading">Methods<a class="docs-heading-icon" href="#js-functions"></a></h3>
-
- <section>
- <h4 id="replace" class="docs-heading">replace<a class="docs-heading-icon" href="#replace"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'replace'</span>, path);</code></pre>
- </div>
-
- <p>Update the <code>src</code> property of an image, or change the HTML of a container, to the specified path.</p>
-
-
- <p><strong>Fires these events:</strong>
- Interchange#event:replaced
- </p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>path</code></td>
- <td>String</td>
- <td>Path to the image or HTML partial.</td>
- </tr>
- </table>
-
- <hr>
- </section>
- <section>
- <h4 id="destroy" class="docs-heading">destroy<a class="docs-heading-icon" href="#destroy"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'destroy'</span>);</code></pre>
- </div>
-
- <p>Destroys an instance of interchange.</p>
-
-
-
-
-
- </section>
- </section>
-</section>
-
-
-</div>
-
-<div class="large-3 columns" data-sticky-container>
- <nav class="columns docs-toc-wrap" data-sticky data-anchor="docs" data-sticky-on="large">
- <div class="docs-toc hide" id="docsTOC">
- <ul class="vertical menu" data-docs-toc>
- <li class="docs-nav-title">On this page:</li>
- </ul>
- </div>
- <div class="foundation-toc-ad-unit" id="TOCAdUnit">
- </div>
- </nav>
-</div>
-
-</div>
-
-</article>
-
- </div>
- <div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
- <ul class="vertical menu docs-nav" id="docs-menu">
- <p class="docs-nav-version">
- <span data-docs-version></span>
- <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">(Changelog)</a>
- </p>
-
- <li class="docs-nav-title">Getting Started</li>
- <li><a href="installation.html">Installation</a></li>
- <li><a href="starter-projects.html">Starter Projects</a></li>
- <li><a href="compatibility.html">Compatibility</a></li>
- <li><a href="accessibility.html">Accessibility</a></li>
- <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
-
- <li class="docs-nav-title">Setup</li>
- <li><a href="global.html">Global Styles</a></li>
- <li><a href="rtl.html">Right-to-Left Support</a></li>
- <li><a href="flexbox.html">Flexbox</a></li>
- <li><a href="sass.html">Sass</a></li>
- <li><a href="javascript.html">JavaScript</a></li>
- <li><a href="javascript-utilities.html">JavaScript Utilities</a></li>
- <li><a href="media-queries.html">Media Queries</a></li>
-
- <li class="docs-nav-title">General</li>
- <li><a href="grid.html">Grid</a></li>
- <li><a href="flex-grid.html">Flex Grid</a></li>
- <li><a href="forms.html">Forms</a></li>
- <li><a href="visibility.html">Visibility Classes</a></li>
- <li><a href="float-classes.html">Float Classes</a></li>
-
- <li class="docs-nav-title">Typography</li>
- <li><a href="typography-base.html">Base Styles</a></li>
- <li><a href="typography-helpers.html">Helper Classes</a></li>
-
- <li class="docs-nav-title">Controls</li>
- <li><a href="button.html">Button</a></li>
- <li><a href="button-group.html">Button Group</a></li>
- <li><a href="close-button.html">Close Button</a></li>
- <li><a href="slider.html">Slider <span class="label">JS</span></a></li>
- <li><a href="switch.html">Switch</a></li>
-
- <li class="docs-nav-title">Navigation</li>
- <li><a href="navigation.html">Overview</a></li>
- <li><a href="menu.html">Menu</a></li>
- <li><a href="dropdown-menu.html">Dropdown Menu <span class="label">JS</span></a></li>
- <li><a href="drilldown-menu.html">Drilldown Menu <span class="label">JS</span></a></li>
- <li><a href="accordion-menu.html">Accordion Menu <span class="label">JS</span></a></li>
- <li><a href="top-bar.html">Top Bar</a></li>
- <li><a href="responsive-navigation.html">Responsive Navigation</a></li>
- <li><a href="magellan.html">Magellan <span class="label">JS</span></a></li>
- <li><a href="pagination.html">Pagination</a></li>
- <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
-
- <li class="docs-nav-title">Containers</li>
- <li><a href="accordion.html">Accordion <span class="label">JS</span></a></li>
- <li><a href="callout.html">Callout</a></li>
- <li><a href="dropdown.html">Dropdown <span class="label">JS</span></a></li>
- <li><a href="media-object.html">Media Object</a></li>
- <li><a href="off-canvas.html">Off-canvas <span class="label">JS</span></a></li>
- <li><a href="reveal.html">Reveal <span class="label">JS</span> <small>Modal</small></a></li>
- <li><a href="table.html">Table</a></li>
- <li><a href="tabs.html">Tabs <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Media</li>
- <li><a href="badge.html">Badge</a></li>
- <li><a href="flex-video.html">Flex Video</a></li>
- <li><a href="label.html">Label</a></li>
- <li><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
- <li><a href="progress-bar.html">Progress Bar</a></li>
- <li><a href="thumbnail.html">Thumbnail</a></li>
- <li><a href="tooltip.html">Tooltip <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Plugins</li>
- <li><a href="abide.html">Abide <small>Form Validation</small></a></li>
- <li><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
- <li class="current"><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
- <li><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
- <li><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
-
- <li class="docs-nav-title">Sass</li>
- <li><a href="sass-functions.html">Functions</a></li>
- <li><a href="sass-mixins.html">Mixins</a></li>
-
- <li class="docs-nav-title">Libraries</li>
- <li><a href="motion-ui.html">Motion UI</a></li>
- <li><a href="panini.html">Panini</a></li>
- <li><a href="style-sherpa.html">Style Sherpa</a></li>
-
- <li class="docs-nav-title">Older Versions</li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
- <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
- <li><a href="https://get.foundation/sites/docs/v/3.2.5/">Foundation 3</a></li>
- <li><a href="https://get.foundation/sites/docs/v/2.2.1/">Foundation 2</a></li>
- </ul>
-
- </div>
- </div>
-
- <!-- Small Business(Docs) -->
- <section id="studiosCallout">
- <div class="row">
- <div class="medium-4 large-4 columns">
- <img src="https://get.foundation/assets/img/smallbiz-footer.svg" alt="">
- </div>
- <div class="medium-8 large-8 columns banner-info">
- <div class="row column property-label">ZURB Foundation</div>
- <h3 class="light">Yeah, we can help with that.</h3>
- <p class="lead"> We’ll collaborate with your team throughout the entire project life cycle. We’ll take your concept and move it through ideation, hi-fi wireframes, visual design and code, all while informing you on the whys and hows along the way.</p>
- <div class="course-buttons">
- <a href="https://get.foundation/get-involved/premium-support.html" class="studios button" data-zcom-event="studios_foundation_click" id="foundationSmallV1">Show Me How →</a>
- </div>
- </div>
- </div>
- </section>
-
- <div class="docs-newsletter">
- <div class="row">
- <div class="medium-7 large-8 columns">
- <a target="_blank" href="https://get.foundation/learn/responsive-reading.html">
- <h5 class="">Download ZURB’s 21 Responsive Trends That Will Shape 2017</h5>
- <p style="margin-bottom: 0;">Stay informed with amazing responsive trends each month from ZURB.</p>
- </a>
- </div>
- <div class="medium-5 large-4 footer-signup-form columns">
- <a style="margin-bottom: 0;" target="_blank" href="https://get.foundation/learn/responsive-reading.html" class="button expanded">Download the PDF</a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-top bg-fblue">
- <div class="row property">
- <div class="medium-4 columns">
- <div class="property-info">
- <h3>Foundation for Sites</h3>
- <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
- </p>
- </div>
- </div>
-
- <div class="medium-8 columns">
- <div class="row collapse">
- <div class="medium-4 columns">
- <div class="learn-links">
- <h4 class="hide-for-small">Want more?</h4>
- <ul>
- <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
- <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
- <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
- <li><a href="http://zurb.com/university/courses">Training</a></li>
- <li><a href="http://zurb.com/library">Design Resources</a></li>
- </ul>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="support-links">
- <h4 class="hide-for-small">Talk to us</h4>
- <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
- <p><a href="https://get.foundation/get-involved/contribute.html">Get involved in<br>our amazing community.</a></p>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="connect-links">
- <h4 class="hide-for-small">Stay Updated</h4>
- <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
- <a href="http://zurb.com/news" class="small button">Stay Connected</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="row global">
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/studios" class="footer-link-block services">
- <span class="title">Studios</span>
- <span>Helping more than 200 startups succeed since 1998.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="https://get.foundation/" class="footer-link-block foundation">
- <span class="title">Foundation</span>
- <span>The most advanced front-end framework in the world.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/notable" class="footer-link-block apps">
- <span class="title">Notable Design Apps</span>
- <span>Prototype, iterate and collect feedback on your products.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/university" class="footer-link-block expo">
- <span class="title">University</span>
- <span>Ideas, thoughts and design resources shared with you.</span>
- </a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-bottom">
- <div class="row">
- <div class="medium-4 medium-push-8 columns">
- <ul class="home-social">
- <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
- <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
- <li><a href="http://zurb.com/contact" class="mail"></a></li>
- </ul>
- </div>
- <div class="medium-8 medium-pull-4 columns">
- <a href="http://www.zurb.com" class="zurb-logo regular"></a>
- <ul class="zurb-links">
- <li><a href="http://zurb.com/about">About</a></li>
- <li><a href="http://zurb.com/blog">Blog</a></li>
- <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
- <li><a href="http://zurb.com/contact">Contact</a></li>
- <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
- </ul>
- <p class="copyright">© 1998‐2016 ZURB, Inc. All rights reserved.</p>
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- <script>
- var _gaq = _gaq || [];
- _gaq.push(
- ['_setAccount', 'UA-2195009-2'],
- ['_trackPageview'],
- ['b._setAccount', 'UA-2195009-27'],
- ['b._trackPageview']
- );
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
-
- <script src="assets/js/vendor.js?hash=08a94b0f821aba016df13492565f54ea"></script>
- <script src="assets/js/foundation.js?hash=a80ab2d5a6bb401ed390374b840d6d52"></script>
- <script src="assets/js/docs.js?hash=b2197a90c846954b8e29f47240169025"></script>
- <script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
-</body>
-</html>
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="Our JavaScript Utility Libraries are easy to use and super helpful.">
- <link rel="icon" href="assets/img/icons/foundation-favicon.ico" type="image/x-icon">
- <title>Foundation for Sites 6 Docs | JavaScript Utilities</title>
- <link href="assets/css/docs.css?hash=9aaf966b90fdebbc979929423f32a09b" rel="stylesheet" />
- <link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=719b2ccd277fbeaed176f207e9e3a8e3" rel="stylesheet">
- <!-- <link rel="stylesheet" href="./node_modules/motion-ui/dist/motion-ui.css" /> -->
-</head>
-<body>
-
- <div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
-
- <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="mobile-ofc vertical menu">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
-
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/support.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/sort/unanswered">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
- </ul>
- </li>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <title>JavaScript Utilities | Foundation Docs</title>
+ <link rel="icon" href="assets/img/icons/oundation-favicon.ico" type="image/x-icon">
+ <!-- For third-generation iPad with high-resolution Retina display: -->
+ <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/img/icons/apple-touch-icon-144x144-precomposed.png">
+ <!-- For iPhone with high-resolution Retina display: -->
+ <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/img/icons/apple-touch-icon-114x114-precomposed.png">
+ <!-- For first- and second-generation iPad: -->
+ <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/img/icons/apple-touch-icon-72x72-precomposed.png">
+ <!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
+ <link rel="apple-touch-icon-precomposed" href="assets/img/icons/apple-touch-icon-precomposed.png">
+
+ <meta name="description" content="Documentation and reference library for ZURB Foundation. JavaScript, CSS, components, grid and more.">
+ <meta name="author" content="ZURB, inc. ZURB network also includes zurb.com">
+ <meta name="copyright" content="ZURB, inc. Copyright (c) 2014">
+
+ <link href="assets/css/docs.css" rel="stylesheet" />
+ <link href="http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" rel="stylesheet" />
+ <script src="assets/js/modernizr.js"></script>
+ </head>
+ <body class="antialiased hide-extras">
+
+ <!-- Info Banner For Announcements or Links -->
+ <!-- <a href="https://get.foundation" id="notice">
+ <div class="info">
+ <h5>Foundation 6 is here!</h5>
+ </div>
+ </a> -->
+
+
+ <div class="marketing off-canvas-wrap" data-offcanvas>
+ <div class="inner-wrap">
+
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
- </div>
-
- <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="vertical menu">
- <li><a href="#">Foundation</a></li>
- <li><a href="#">Dot</a></li>
- <li><a href="#">ZURB</a></li>
- <li><a href="#">Com</a></li>
- <li><a href="#">Slash</a></li>
- <li><a href="#">Sites</a></li>
- </ul>
- </div>
-
- <div class="off-canvas-content" data-off-canvas-content>
- <!-- Info Banner For Announcements or Links -->
- <!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
- <div class="info">
- <h5>Foundation 6 is here!</h5>
- </div>
- </a> -->
- <nav class="marketing-topbar show-for-medium">
-
- <ul class="menu">
- <li class="topbar-title"><a href="https://get.foundation/index.html"><img src="assets/img/logos/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
+<!-- <nav class="tab-bar show-for-small">
+ <a class="off-canvas-left-toggle menu-icon ">
+ <span></span>
+ </a>
+</nav> -->
+
+
+<nav class="top-bar docs-bar hide-for-small" data-topbar>
+ <ul class="title-area">
+ <li class="name">
+ <h1>
+ <a href="https://get.foundation/">
+ <span>Foundation</span>
+ </a>
+ </h1>
+ </li>
+ </ul>
+
+ <section class="top-bar-section">
+ <ul class="right">
+ <li class="divider"></li>
+ <li class="has-dropdown">
+ <a target="_blank" href="https://zurb.com/responsive">Showcase <i class="fa fa-external-link"></i></a>
+ <ul class="dropdown">
+ <li><a target="_blank" href="https://zurb.com/responsive">Showcase <i class="fa fa-external-link"></i></a></li>
+ <li><a href="https://get.foundation/showcase/brands.html">Brands</a></li>
+ <li><a href="https://get.foundation/showcase/case-studies.html">Case Studies</a></li>
+ <li><a href="https://get.foundation/showcase/blog.html">Blog</a></li>
+ <li><a href="https://get.foundation/showcase/buzz.html">Buzz</a></li>
+ <li><a href="https://get.foundation/showcase/about.html">About Foundation</a></li>
</ul>
-
- <ul class="dropdown menu" data-dropdown-menu data-click-open="false">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/" target="_blank">F5 Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="https://get.foundation/emails/docs/" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
+ </li>
+ <li class="divider"></li>
+ <li class="has-dropdown">
+ <a href="https://get.foundation/develop/getting-started.html" class="">Develop</a>
+ <ul class="dropdown">
+ <li class="title">Frameworks</li>
+ <li><a class="" href="https://get.foundation/sites.html">Foundation for Sites</a></li>
+ <li><a class="" href="https://get.foundation/apps.html">Foundation for Apps</a></li>
+ <li><a class="spaced-list-item" href="https://get.foundation/emails.html">Foundation for Emails</a></li>
+ <li class="spaced-divider"><hr></li>
+ <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
+ <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
+ <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
+ <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
</ul>
-
- </nav>
-
- <div class="title-bar hide-for-medium">
- <div class="title-bar-left">
- <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
- <span class="title-bar-title">Foundation</span>
- </div>
- </div>
-
+ </li>
+ <li class="divider"></li>
+ <li class="has-dropdown">
+ <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
+ <ul class="dropdown">
+ <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
+ <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
+ <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
+ <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
+ <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
+ </ul>
+ </li>
+ <li class="divider"></li>
+ <li class="has-dropdown">
+ <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
+ <ul class="dropdown">
+ <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
+ <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
+ <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
+ <li><a href="https://get.foundation/learn/events.html">Events</a></li>
+ <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
+ <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
+ <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
+ </ul>
+ </li>
+ <li class="divider"></li>
+ <li class="has-dropdown">
+ <a href="https://get.foundation/sites/docs/v/5.5.3/">Docs</a>
+ <ul class="dropdown">
+ <li><a href="https://get.foundation/sites/docs/v/5.5.3/">F5 Sites Docs</a></li>
+ <li><a href="https://get.foundation/sites/docs">F6 Sites Docs</a></li>
+ <li><a href="https://get.foundation/emails/docs">Emails Docs</a></li>
+ <li><a href="https://get.foundation/apps/docs">Apps Docs</a></li>
+ </ul>
+ </li>
+ <li class="divider"></li>
+ <li class="has-form">
+ <a href="https://get.foundation/sites/getting-started.html">Getting Started</a>
+ </ul>
+ </section>
+</nav>
+ <nav class="tab-bar show-for-small">
+ <a class="left-off-canvas-toggle menu-icon">
+ <span>Foundation</span>
+ </a>
+</nav>
- <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
+<aside class="marketing-left-off-canvas-menu">
- <div class="expanded row">
- <div class="medium-9 large-10 medium-push-3 large-push-2 columns">
+ <ul class="off-canvas-list">
+ <li><label class="first">Foundation</label></li>
+ <li><a href="https://get.foundation">Home</a></li>
+ </ul>
-<article class="docs-component" id="docs-javascript-utilities">
+ <hr>
-<a href="#docs-menu" class="small secondary expanded button hide-for-medium">Jump to Nav</a>
+ <ul class="off-canvas-list">
+ <li><label>Setup</label></li>
-<header>
- <h1 class="docs-page-title">JavaScript Utilities</h1>
+ <li><a href="index.html" data-search="">Getting Started</a></li>
+ <li><a href="css.html" data-search="Styles">CSS</a></li>
+ <li><a href="sass.html" data-search="Sass">Sass</a></li>
+ <li><a href="sass-files.html" data-search="Sass,Sass - What You Get, How to Use Sass">Sass Files</a></li>
+ <li><a href="using-sass.html" data-search="Sass,Sass - What You Get, How to Use Sass">Using Sass</a></li>
+ <li><a href="applications.html" data-search="Rails,Gem">Applications</a></li>
+ <li><a href="javascript.html" data-search="">Javascript</a></li>
+ <li><a href="components/global.html" data-search="Global Styles,Global Mixins,Global Variables,Useful HTML Classes">Global Styles</a></li>
+ <li><a href="components/kitchen_sink.html" data-search="">Kitchen Sink</a></li>
+ <li><a href="upgrading.html" data-search="Migration">Upgrading</a></li>
+ <li class="divider"></li>
+ <li><label>Structure</label></li>
+ <li><a href="media-queries.html" data-search="Breakpoints">Media Queries</a></li>
+ <li><a href="components/visibility.html" data-search="">Visibility</a></li>
+ <li><a href="components/grid.html" data-search="">Grid</a></li>
+ <li><a href="components/block_grid.html" data-search="">Block Grid</a></li>
+ <li><a href="components/interchange.html" data-search="Responsive Images">Interchange Responsive Content <span class="label">JS</span></a></li>
+ <li><a href="utility-classes.html" data-search="">Utility Classes</a></li>
+ <li><a href="javascript-utilities.html" data-search="">Javascript Utilities</a></li>
+ <li><a href="components/rtl.html" data-search="RTL">Right-to-Left Support</a></li>
- <p class="lead docs-page-lead">Our JavaScript Utility Libraries are easy to use and super helpful.</p>
+ <li class="divider"></li>
+ <li><label>Navigation</label></li>
+ <li><a href="components/offcanvas.html" data-search="Off Canvas">Off-canvas <span class="label">JS</span></a></li>
+ <li><a href="components/topbar.html" data-search="Nav Bar,Navigation,Sticky">Top Bar <span class="label">JS</span></a></li>
+ <li><a href="components/icon-bar.html" data-search="">Icon Bar</a></li>
+ <li><a href="components/sidenav.html" data-search="">Side Nav</a></li>
+ <li><a href="components/magellan.html" data-search="Scrollspy">Magellan Sticky Nav <span class="label">JS</span></a></li>
+ <li><a href="components/subnav.html" data-search="">Sub Nav</a></li>
+ <li><a href="components/breadcrumbs.html" data-search="Navigation Path,Cookie Crumb">Breadcrumbs</a></li>
+ <li><a href="components/pagination.html" data-search="">Pagination</a></li>
- <ul class="menu simple docs-contribute-menu">
- <li><a href="https://github.com/zurb/foundation-sites/edit/master/docs/pages/javascript-utilities.md" target="_blank"><i class="fi-pencil"></i>Edit this Page</a></li>
- <li><a href="https://github.com/zurb/foundation-sites/issues/new?title=%5BJavaScript%20Utilities%5D%20ISSUE%20NAME%20HERE" target="_blank"><i class="fi-social-github"></i>Report a Bug</a></li>
- <li><a href="https://get.foundation/forum" target="_blank"><i class="fi-comment"></i>Get Help</a></li>
- </ul>
-</header>
+ <li class="divider"></li>
+ <li><label>Media</label></li>
+ <li><a href="components/orbit.html" data-search="Carousel,Slider,Slideshow">Orbit Slider <span class="label">JS</span></a></li>
+ <li><a href="components/thumbnails.html" data-search="Images">Thumbnails</a></li>
+ <li><a href="components/clearing.html" data-search="Responsive Lightbox,Lightbox">Clearing Lightbox <span class="label">JS</span></a></li>
+ <li><a href="components/flex_video.html" data-search="Responsive Video">Flex Video</a></li>
+
+ <li class="divider"></li>
+ <li><label>Forms</label></li>
+ <li><a href="components/forms.html" data-search="">Forms</a></li>
+ <li><a href="components/switch.html" data-search="">Switches</a></li>
+ <li><a href="components/range_slider.html" data-search="Range Slider">Sliders <span class="label">JS</span></a></li>
+ <li><a href="components/abide.html" data-search="Form Validation,Field Validation">Abide Validation <span class="label">JS</span></a></li>
+
+ <li class="divider"></li>
+ <li><label>Buttons</label></li>
+ <li><a href="components/buttons.html" data-search="">Buttons</a></li>
+ <li><a href="components/button_groups.html" data-search="Button Bar">Button Groups</a></li>
+ <li><a href="components/split_buttons.html" data-search="">Split Buttons <span class="label">JS</span></a></li>
+ <li><a href="components/dropdown_buttons.html" data-search="">Dropdown Buttons <span class="label">JS</span></a></li>
+
+ <li class="divider"></li>
+ <li><label>Typography</label></li>
+ <li><a href="components/typography.html" data-search="Typography,Type-setting,Composition">Type</a></li>
+ <li><a href="components/inline_lists.html" data-search="Lists">Inline Lists</a></li>
+ <li><a href="components/labels.html" data-search="Tags">Labels</a></li>
+ <li><a href="components/keystrokes.html" data-search="">Keystrokes</a></li>
+
+ <li class="divider"></li>
+ <li class="heading"><label>Callouts & Prompts</label></li>
+ <li><a href="components/reveal.html" data-search="Modal">Reveal Modal <span class="label">JS</span></a></li>
+ <li><a href="components/alert_boxes.html" data-search="Error,Success,Warning">Alerts <span class="label">JS</span></a></li>
+ <li><a href="components/panels.html" data-search="Wells">Panels</a></li>
+ <li><a href="components/tooltips.html" data-search="Popover">Tooltips <span class="label">JS</span></a></li>
+ <li><a href="components/joyride.html" data-search="Tooltip Tour,Guider,Tooltip Walk-through">Joyride <span class="label">JS</span></a></li>
+
+ <li class="divider"></li>
+ <li><label>Content</label></li>
+ <li><a href="components/dropdown.html" data-search="">Dropdowns <span class="label">JS</span></a></li>
+ <li><a href="components/pricing_tables.html" data-search="">Pricing Tables</a></li>
+ <li><a href="components/progress_bars.html" data-search="">Progress Bars</a></li>
+ <li><a href="components/tables.html" data-search="">Tables</a></li>
+ <li><a href="components/accordion.html" data-search="">Accordion <span class="label">JS</span></a></li>
+ <li><a href="components/tabs.html" data-search="">Tabs <span class="label">JS</span></a></li>
+ <li><a href="components/equalizer.html" data-search="">Equalizer <span class="label">JS</span></a></li>
+
+ <li class="divider"></li>
+ <li><label>Support</label></li>
+
+ <li><a href="changelog.html" data-search="">Changelog</a></li>
+ <li><a href="compatibility.html" data-search="">Compatibility</a></li>
+
+ <li class="divider"></li>
+ <li class="heading"><label>Older Docs</label></li>
+ <li><a href="/docs/v/4.3.2/" data-search="">Foundation 4</a></li>
+ <li><a href="/docs/v/3.2.5/" data-search="">Foundation 3</a></li>
+ <li><a href="/docs/v/2.2.1/" data-search="">Foundation 2</a></li>
+ </ul>
+
+ <hr>
+
+ <div class="zurb-links">
+ <ul class="top">
+ <li class="logo"><a href="http://zurb.com"></a></li>
+ <li><a href="http://zurb.com/about">About</a></li>
+ <li><a href="http://zurb.com/blog">Blog</a></li>
+ <li><a href="http://zurb.com/contact">Contact</a></li>
+ </ul>
+ <ul class="pillars">
+ <li>
+ <a href="http://www.zurb.com/studios" class="footer-link-block services">
+ <span class="title">Studios</span>
+ <span>Helping startups win since '98.</span>
+ </a>
+ </li>
+ <li>
+ <a href="https://get.foundation/" class="footer-link-block foundation">
+ <span class="title">Foundation</span>
+ <span>World's most advanced responsive framework.</span>
+ </a>
+ </li>
+ <li>
+ <a href="http://zurb.com/notable" class="footer-link-block apps">
+ <span class="title">Notable</span>
+ <span>Tools to rapidly prototype and iterate.</span>
+ </a>
+ </li>
+ <li>
+ <a href="http://zurb.com/university" class="footer-link-block expo">
+ <span class="title">University</span>
+ <span>Online training for smarter product design.</span>
+ </a>
+ </li>
+ </ul>
+</div>
+
+</aside>
+
+<a class="exit-off-canvas" href="#"></a>
+
+
+ <section role="main" class="scroll-container">
+
+ <div class="row">
+ <div class="large-3 medium-4 columns">
+ <div class="hide-for-small">
+ <div class="sidebar">
+ <h5>Foundation Documentation</h5>
+ <!-- <form>
+ <label>Search Documentation</label>
+ <input tabindex="1" id="autocomplete" type="search" placeholder="Search Docs: e.g. forms">
+ </form>
+
+ <a href="https://get.foundation/sites/download.html" class="download button expand">Download Foundation</a> -->
+
+ <nav>
+ <ul class="side-nav">
+ <li class="heading">Setup</li>
+
+ <li><a href="index.html" data-search="">Getting Started</a></li>
+ <li><a href="css.html" data-search="Styles">CSS</a></li>
+ <li><a href="sass.html" data-search="Sass">Sass</a></li>
+ <li><a href="sass-files.html" data-search="Sass,Sass - What You Get, How to Use Sass">Sass Files</a></li>
+ <li><a href="using-sass.html" data-search="Sass,Sass - What You Get, How to Use Sass">Using Sass</a></li>
+ <li><a href="applications.html" data-search="Rails,Gem">Applications</a></li>
+ <li><a href="javascript.html" data-search="">JavaScript</a></li>
+ <li><a href="components/global.html" data-search="Global Styles,Global Mixins,Global Variables,Useful HTML Classes">Global Styles</a></li>
+ <li><a href="components/kitchen_sink.html" data-search="">Kitchen Sink</a></li>
+ <li><a href="accessibility.html" data-search="accessibility">Accessibility</a></li>
+ <li><a href="upgrading.html" data-search="Migration">Upgrading</a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Structure</li>
+ <li><a href="media-queries.html" data-search="Breakpoints">Media Queries</a></li>
+ <li><a href="components/visibility.html" data-search="">Visibility</a></li>
+ <li><a href="components/grid.html" data-search="">Grid</a></li>
+ <li><a href="components/block_grid.html" data-search="">Block Grid</a></li>
+ <li><a href="components/interchange.html" data-search="Responsive Images">Interchange Responsive Content <span class="label">JS</span></a></li>
+ <li><a href="utility-classes.html" data-search="">Utility Classes</a></li>
+ <li><a href="javascript-utilities.html" data-search="">Javascript Utilities</a></li>
+ <li><a href="components/rtl.html" data-search="RTL">Right-to-Left Support</a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Navigation</li>
+ <li><a href="components/offcanvas.html" data-search="Off Canvas">Off-canvas <span class="label">JS</span></a></li>
+ <li><a href="components/topbar.html" data-search="Nav Bar,Navigation,Sticky">Top Bar <span class="label">JS</span></a></li>
+ <li><a href="components/icon-bar.html" data-search="">Icon Bar</a></li>
+ <li><a href="components/sidenav.html" data-search="">Side Nav</a></li>
+ <li><a href="components/magellan.html" data-search="Scrollspy">Magellan Sticky Nav <span class="label">JS</span></a></li>
+ <li><a href="components/subnav.html" data-search="">Sub Nav</a></li>
+ <li><a href="components/breadcrumbs.html" data-search="Navigation Path,Cookie Crumb">Breadcrumbs</a></li>
+ <li><a href="components/pagination.html" data-search="">Pagination</a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Media</li>
+ <li><a href="components/orbit.html" data-search="Carousel,Slider,Slideshow">Orbit Slider <span class="label">JS</span></a></li>
+ <li><a href="components/thumbnails.html" data-search="Images">Thumbnails</a></li>
+ <li><a href="components/clearing.html" data-search="Responsive Lightbox,Lightbox">Clearing Lightbox <span class="label">JS</span></a></li>
+ <li><a href="components/flex_video.html" data-search="Responsive Video">Flex Video</a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Forms</li>
+ <li><a href="components/forms.html" data-search="">Forms</a></li>
+ <li><a href="components/switch.html" data-search="">Switches</a></li>
+ <li><a href="components/range_slider.html" data-search="Range Slider">Range Sliders <span class="label">JS</span></a></li>
+ <li><a href="components/abide.html" data-search="Form Validation,Field Validation">Abide Validation <span class="label">JS</span></a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Buttons</li>
+ <li><a href="components/buttons.html" data-search="">Buttons</a></li>
+ <li><a href="components/button_groups.html" data-search="Button Bar">Button Groups</a></li>
+ <li><a href="components/split_buttons.html" data-search="">Split Buttons <span class="label">JS</span></a></li>
+ <li><a href="components/dropdown_buttons.html" data-search="">Dropdown Buttons <span class="label">JS</span></a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Typography</li>
+ <li><a href="components/typography.html" data-search="Typography,Type-setting,Composition">Type</a></li>
+ <li><a href="components/inline_lists.html" data-search="Lists">Inline Lists</a></li>
+ <li><a href="components/labels.html" data-search="Tags">Labels</a></li>
+ <li><a href="components/keystrokes.html" data-search="">Keystrokes</a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Callouts & Prompts</li>
+ <li><a href="components/reveal.html" data-search="Modal">Reveal Modal <span class="label">JS</span></a></li>
+ <li><a href="components/alert_boxes.html" data-search="Error,Success,Warning">Alerts <span class="label">JS</span></a></li>
+ <li><a href="components/panels.html" data-search="Wells">Panels</a></li>
+ <li><a href="components/tooltips.html" data-search="Popover">Tooltips <span class="label">JS</span></a></li>
+ <li><a href="components/joyride.html" data-search="Tooltip Tour,Guider,Tooltip Walk-through">Joyride <span class="label">JS</span></a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Content</li>
+ <li><a href="components/dropdown.html" data-search="">Dropdowns <span class="label">JS</span></a></li>
+ <li><a href="components/pricing_tables.html" data-search="">Pricing Tables</a></li>
+ <li><a href="components/progress_bars.html" data-search="">Progress Bars</a></li>
+ <li><a href="components/tables.html" data-search="">Tables</a></li>
+ <li><a href="components/accordion.html" data-search="">Accordion <span class="label">JS</span></a></li>
+ <li><a href="components/tabs.html" data-search="">Tabs <span class="label">JS</span></a></li>
+ <li><a href="components/equalizer.html" data-search="">Equalizer <span class="label">JS</span></a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Support</li>
+
+ <li><a href="changelog.html" data-search="">Changelog</a></li>
+ <li><a href="compatibility.html" data-search="">Compatibility</a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Older Docs</li>
+ <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html" data-search="">Foundation 4</a></li>
+ <li><a href="https://get.foundation/sites/docs/v/3.2.5/" data-search="">Foundation 3</a></li>
+ <li><a href="https://get.foundation/sites/docs/v/2.2.1/" data-search="">Foundation 2</a></li>
+
+ </ul>
+ </nav>
+
+</div>
+ </div>
+ </div>
+ <div class="large-9 medium-8 columns">
+ <h1 id="javascript-utilities">JavaScript Utilities</h1>
+ <h3 class="subheader">Foundation includes a handful of helpful JavaScript utilities to help you add common functionalities to your apps and plugins.</h3>
<hr>
+<h2 id="using">Using the JavaScript Utilities</h2>
-<div class="row">
+<p>There are two ways to use the Foundation utilities: by calling them within the Foundation.utils namespace and by inheriting them into an object.</p>
+<h4>Foundation.utils</h4>
-<div class="large-9 columns" id="docs">
-
-<h2 id="installing" class="docs-heading" data-magellan-target="installing">Installing<a class="docs-heading-icon" href="#installing"></a></h2><p>See our <a href="javascript.html">JavaScript</a> and <a href="installation.html">Installation</a> pages on how to install our files in your project.</p>
-<h2 id="box" class="docs-heading" data-magellan-target="box">Box<a class="docs-heading-icon" href="#box"></a></h2><p><code>js/foundation.util.box.js</code></p>
-<p>One of the useful libraries is <code>Foundation.Box</code>, and it has a couple methods designed to make your life easier. You can pass either jQuery objects or plain JavaScript elements to both.</p>
-<div class="docs-code" data-docs-code><pre><code class="js">
-<span class="hljs-keyword">var</span> dims = Foundation.Box.GetDimensions(element);</code></pre></div><p>Will return an object that contains the dimensions of the <code>element</code> passed. The object return looks like:</p>
-<div class="docs-code" data-docs-code><pre><code class="js">
-{
- height: <span class="hljs-number">54</span>,
- width: <span class="hljs-number">521</span>,
- offset: {
- left: <span class="hljs-number">198</span>,
- top: <span class="hljs-number">1047</span>
- },
- parentDims: {
- height: ... <span class="hljs-comment">// parentDims and windowDims share the same format as the element dimensions.</span>
- },
- windowDims: {
- height: ...
- }
-}</code></pre></div><p>Also included is the <code>ImNotTouchingYou</code> function. It returns a boolean based on whether the element you pass it is colliding with the edge of the window, or optionally, a parent element. The other two options are for detecting collisions on only one axis, and are simply booleans you pass in.</p>
-<div class="docs-code" data-docs-code><pre><code class="js">
-<span class="hljs-keyword">var</span> clear = Foundation.Box.ImNotTouchingYou(element [, parent, leftAndRightOnly, topAndBottomOnly]);</code></pre></div><h2 id="keyboard" class="docs-heading" data-magellan-target="keyboard">Keyboard<a class="docs-heading-icon" href="#keyboard"></a></h2><p><code>js/foundation.util.keyboard.js</code></p>
-<p>Another quite useful library, <code>Foundation.Keyboard</code> has several methods to make keyboard event interaction easier for all. Shout out to <a href="http://www.mariusolbertz.de/">Marius Olbertz</a> of Germany who conceived and coded this library.</p>
-<p>Ever wanted a handy list of common keycodes and the keys they represent? Use <code>Foundation.Keyboard.keys</code>. This is an object containing key/value pairs of the most frequently used keys in our framework.</p>
-<p>Want to manage your own keyboard inputs? No problem! Within your <code>.on('key**')</code> callback, call <code>Foundation.Keyboard.parseKey(event)</code> to get a string of what key was pressed, e.g. <code>'TAB'</code> or <code>'ALT_X'</code>.
-You can also use this function outside of the Foundation components in your own JavaScript code.</p>
-<p>What if you want to know if there's focusable elements somewhere on a page? Instead of writing that function and selector yourself, just use:</p>
-<div class="docs-code" data-docs-code><pre><code class="js"><span class="hljs-keyword">var</span> focusable = Foundation.Keyboard.findFocusable($(<span class="hljs-string">'#content'</span>));</code></pre></div><p>The real gem of this library, however, is the <code>handleKey</code> function. Any plugin that is registered with the utility can call on this method to manage keyboard inputs.</p>
-<div class="docs-code" data-docs-code><pre><code class="js">Foundation.Keyboard.register(<span class="hljs-string">'pluginName'</span>, {
- <span class="hljs-string">'TAB'</span>: <span class="hljs-string">'next'</span>
-});
-...<span class="hljs-comment">//in event callback</span>
-Foundation.Keyboard.handleKey(event, <span class="hljs-string">'pluginName'</span>, {
- next: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
- <span class="hljs-comment">//do stuff</span>
+<p>As long as <kbd>foundation.js</kbd> has been loaded into the page, you can access any of the Foundation utilities by calling <code>Foundation.utils.{function_name}</code>.</p>
+<p>For example, if you type the following into the JavaScript console it will return a 6-digit alphanumeric string.</p>
+<pre><code class="language-javascript"><div class="code-container"><span class="comment">// Generates a random string of length n</span>
+Foundation.utils.random_str(<span class="number">6</span>);</div></code></pre>
+
+
+<h4>Method Inheritance</h4>
+
+<p>If you have any plain ole’ JavaScript object (a POJO), then you can inherit any of the Foundation JavaScript utilities by calling the <code>Foundation.inherit</code> method. To use the inherit method, pass in the object you want to inherit the methods, followed by a space separated string of methods that you want to inherit.</p>
+<pre><code class="language-javascript"><div class="code-container"><span class="comment">// Simple example</span>
+<span class="keyword">var</span> user = {};
+Foundation.inherit(user, <span class="string">'random_str data_options'</span>);
+
+<span class="comment">// Advanced Example</span>
+Person = <span class="keyword">function</span>() {
+ <span class="keyword">this</span>.init = <span class="keyword">function</span>() {
+ Foundation.inherit(<span class="keyword">this</span>, <span class="string">'random_str data_options'</span>);
}
-});</code></pre></div><p>There are also the functions <code>handled</code> and <code>unhandled</code> where you can place any code that shall always be executed after the key event has been handled or not.</p>
-<p>If you want to use your own key bindings, you can simply call the <code>Foundation.Keyboard.register</code> function even after Foundation has been initialized.</p>
-<h2 id="mediaquery" class="docs-heading" data-magellan-target="mediaquery">MediaQuery<a class="docs-heading-icon" href="#mediaquery"></a></h2><p><code>js/foundation.util.mediaQuery.js</code></p>
-<p>The media query library used by Foundation has two publicly accessible functions and two properties:</p>
-<div class="docs-code" data-docs-code><pre><code class="js">
-Foundation.MediaQuery.get(<span class="hljs-string">'medium'</span>);
-<span class="hljs-comment">// returns the minimum pixel value for the `medium` breakpoint.</span>
-Foundation.MediaQuery.atLeast(<span class="hljs-string">'large'</span>);
-<span class="hljs-comment">// returns a boolean if the current screen size is, you guessed it, at least `large`.</span>
-Foundation.MediaQuery.queries;
-<span class="hljs-comment">// an array of media queries Foundation uses for breakpoints.</span>
-Foundation.MediaQuery.current;
-<span class="hljs-comment">// a string of the current breakpoint size.</span></code></pre></div><p>Also included is an event emitter for breakpoint changes. You can hook into this event with</p>
-<div class="docs-code" data-docs-code><pre><code class="js">
-$(<span class="hljs-built_in">window</span>).on(<span class="hljs-string">'changed.zf.mediaquery'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">event, newSize, oldSize</span>)</span>{});</code></pre></div><h2 id="motion-move" class="docs-heading" data-magellan-target="motion-move">Motion & Move<a class="docs-heading-icon" href="#motion-move"></a></h2><p><code>js/foundation.util.motion.js</code></p>
-<p>Two handy utilities, one little file.</p>
-<p>Foundation.Motion is the same JavaScript used by the <a href="https://github.com/zurb/motion-ui">Motion-UI</a> library, and is included in Foundation 6. See the GitHub page for more details.</p>
-<p>Foundation.Move is a simple helper function for utilizing browsers' <code>requestAnimationFrame</code> method for hardware acceleration. Invoke like so:</p>
-<div class="docs-code" data-docs-code><pre><code class="js">Foundation.Move(durationInMS, $element, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
- <span class="hljs-comment">//animation logic</span>
-});</code></pre></div><p>Your jQuery element will fire <code>finished.zf.animate</code> when the animation is complete.</p>
-<h2 id="timer-images-loaded" class="docs-heading" data-magellan-target="timer-images-loaded">Timer & Images Loaded<a class="docs-heading-icon" href="#timer-images-loaded"></a></h2><p><code>js/foundation.util.timerAndImageLoader.js</code></p>
-<p>Both functions are used by <a href="orbit.html">Orbit</a> and can be useful elsewhere as well.</p>
-<div class="docs-code" data-docs-code><pre><code class="js">
-<span class="hljs-keyword">var</span> timer = <span class="hljs-keyword">new</span> Foundation.Timer($element, {duration: ms, infinite: bool}, callback);
-<span class="hljs-comment">// includes: timer.start(), timer.pause(), timer.restart()</span></code></pre></div><p>Similar to <code>setInterval</code>, except you can pause and pick back up where you left off.</p>
-<div class="docs-code" data-docs-code><pre><code class="js">Foundation.onImagesLoaded($images, callback);</code></pre></div><p>This will execute your callback function after all the images in your jQuery collection have loaded.</p>
-<h2 id="touch" class="docs-heading" data-magellan-target="touch">Touch<a class="docs-heading-icon" href="#touch"></a></h2><p><code>js/foundation.util.touch.js</code></p>
-<p>Gives you the ability to add swipe and psuedo-drag events to elements.</p>
-<div class="docs-code" data-docs-code><pre><code class="js">$(<span class="hljs-string">'selector'</span>).addTouch().on(<span class="hljs-string">'mousemove'</span>, handleDrag);
-<span class="hljs-comment">// Binds elements to touch events. Used in the Slider plugin for mobile devices.</span>
-$(<span class="hljs-string">'selector'</span>).spotSwipe().on(<span class="hljs-string">'swipeleft'</span>, handleLeftSwipe);
-<span class="hljs-comment">// Binds elements to swipe events. Used in the Orbit plugin for mobile devices.</span></code></pre></div><h2 id="triggers" class="docs-heading" data-magellan-target="triggers">Triggers<a class="docs-heading-icon" href="#triggers"></a></h2><p><code>js/foundation.util.triggers.js</code></p>
-<p>Provides a number of event listeners and triggers your script can hook into. Most of them are self-explanatory, and utilized in many Foundation plugins.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">data-open</span>=<span class="hljs-string">'someId'</span>></span>I open something!<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">data-close</span>=<span class="hljs-string">'someId'</span>></span>I close something!<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">data-toggle</span>=<span class="hljs-string">'someId'</span>></span>I toggle something!<span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></pre></div><div class="docs-code" data-docs-code><pre><code class="js"><span class="hljs-comment">// Add the data-open/close/toggle='idOfElement' tag to your markup.</span>
-<span class="hljs-comment">// When a click event is triggered on that element, these are the non-bubbling events directed at your element.</span>
-<span class="hljs-comment">// If you don't use an `id` selector, an event will be triggered that bubbles up to window.</span>
-$(<span class="hljs-string">'selector'</span>).on(<span class="hljs-string">'open.zf.trigger'</span>, handleOpen);
-$(<span class="hljs-string">'selector'</span>).on(<span class="hljs-string">'close.zf.trigger'</span>, handleClose);
-$(<span class="hljs-string">'selector'</span>).on(<span class="hljs-string">'toggle.zf.trigger'</span>, handleToggle);</code></pre></div><p>Besides these useful click triggers, there are also other listeners for you to tap into. Need to know when the window has been resized, but only when it's done resizing? How about a debounced scroll event? Add this markup and JavaScript and you're good to go!</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">data-scroll</span>=<span class="hljs-string">'someId'</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">data-resize</span>=<span class="hljs-string">'someId'</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div><div class="docs-code" data-docs-code><pre><code class="js">$(<span class="hljs-string">'#someId'</span>).on(<span class="hljs-string">'scrollme.zf.trigger'</span>, handleScroll);
-$(<span class="hljs-string">'#someId'</span>).on(<span class="hljs-string">'resizeme.zf.trigger'</span>, handleResize);</code></pre></div><h2 id="miscellaneous" class="docs-heading" data-magellan-target="miscellaneous">Miscellaneous<a class="docs-heading-icon" href="#miscellaneous"></a></h2><p>Foundation includes a couple useful features in the core library that are used in many places, that you can tap into.</p>
-<p><code>Foundation.GetYoDigits([number, namespace])</code> returns a base-36, psuedo-random string with a hyphenated namespace (if you include one). Both arguments are optional, it will by default return a string six characters long.</p>
-<p><code>Foundation.getFnName(fn)</code> returns a string representation of a named function. Seems small, but believe us, it's useful.</p>
-<p><code>Foundation.transitionend()</code> is a function<span data-tooltip title="Goodbye ZURB, I'll miss you"> </span>that returns the string of the properly vendor-prefixed version of <code>transitionend</code> events. Most browsers don't require a prefix these days, but for those that do, we've got you covered. But IE 9 doesn't support transitions?? Quite right you are! In that case our plugins that use transitions will simply snap to whatever location or visibility state they were headed to, and this function will fire a <code>transitionend</code> event manually on the element you passed. It still gives the desired results, and allows Motion-UI to work in IE 9.</p>
+};
+
+<span class="keyword">var</span> user = <span class="keyword">new</span> Person();
+user.init();</div></code></pre>
+<hr>
+<h2 id="selector">Selector Engine</h2>
+
+<p>While jQuery’s selector engine is quite versatile, it can sometimes be a bit slow. Foundation’s “Big S” selector leverages the native browser API by using <code>querySelectorAll()</code>, making it up to 20% faster.</p>
+<p>“Big S” can be used as a drop-in replacement for the jQuery $ selector in most cases.</p>
+<div class="row">
+ <div class="large-6 columns">
+ <h4>jQuery Selector</h4>
+<pre><code class="language-javascript"><div class="code-container"><span class="comment">// A simple selector</span>
+$(<span class="string">'.class #id'</span>);
+
+<span class="comment">// A bracket selector</span>
+$(<span class="string">'label[for="input1"]'</span>);
+
+<span class="comment">// A scoped selector</span>
+$(<span class="string">'dd > .content'</span>, <span class="string">'#accordion'</span>);</div></code></pre>
+
+ </div>
+ <div class="large-6 columns">
+ <h4>“Big S” Selector</h4>
+<pre><code class="language-javascript"><div class="code-container"><span class="comment">// A simple selector</span>
+Foundation.utils.S(<span class="string">'.class #id'</span>);
+<span class="comment">// A bracket selector</span>
+Foundation.utils.S(<span class="string">'label[for="input1"]'</span>);
+<span class="comment">// A scoped selector</span>
+Foundation.utils.S(<span class="string">'dd > .content'</span>, <span class="string">'#accordion'</span>);</div></code></pre>
+
+ </div>
</div>
-<div class="large-3 columns" data-sticky-container>
- <nav class="columns docs-toc-wrap" data-sticky data-anchor="docs" data-sticky-on="large">
- <div class="docs-toc hide" id="docsTOC">
- <ul class="vertical menu" data-docs-toc>
- <li class="docs-nav-title">On this page:</li>
- </ul>
- </div>
- <div class="foundation-toc-ad-unit" id="TOCAdUnit">
- </div>
- </nav>
+<p><h4>Method Signature</h4></p>
+<pre><code class="language-javascript"><div class="code-container"><span class="comment">// Arguments:</span>
+<span class="comment">// Selector (String): CSS selector describing the element(s) to be</span>
+<span class="comment">// returned as a jQuery object.</span>
+<span class="comment">//</span>
+<span class="comment">// Scope (String): CSS selector describing the area to be searched. Default</span>
+<span class="comment">// is document.</span>
+<span class="comment">//</span>
+<span class="comment">// Returns:</span>
+<span class="comment">// Element (jQuery Object): jQuery object containing elements matching the</span>
+<span class="comment">// selector within the scope.</span>
+
+S(selector, scope) { ... }</div></code></pre>
+
+
+<hr>
+<h2 id="delay">Throttle & Debounce</h2>
+
+<p>Many times when you create a callback, it’s advantageous to add a delay in order to prevent it from being triggered multiple times. Foundation includes two types of callback delays: <code>throttle</code> and <code>debounce</code>.</p>
+<p><strong>Throttle</strong> prevents a function from being executed more than once every n milliseconds. Throttling is often used in cases where it’s disadvantageous to trigger a callback every time an event is triggered (during a continuous action), but you still want to trigger a reaction while the event is occurring. Examples of this would be reacting to the browser window being resized, or animating an element.</p>
+<p><strong>Debounce</strong> prevents a function from being executed until it stops being invoked for n milliseconds. Debouncing is often used to prevent an action from being performed twice, such as double clicking a submit button, or to delay an event from occurring accidentally, such as an event triggered by hover.</p>
+<div class="row">
+ <div class="large-6 columns">
+ <h4>Without Delay</h4>
+<pre><code class="language-javascript"><div class="code-container"><span class="comment">// Button click handler</span>
+$(<span class="string">'.button'</span>).on(<span class="string">'click'</span>, <span class="keyword">function</span>(e){
+ <span class="comment">// Handle Click</span>
+});
+
+<span class="comment">// Resize function</span>
+$(window).on(<span class="string">'resize'</span>, <span class="keyword">function</span>(e){
+ <span class="comment">// Do responsive stuff</span>
+});</div></code></pre>
+
+ </div>
+ <div class="large-6 columns">
+ <h4>With Delay</h4>
+<pre><code class="language-javascript"><div class="code-container"><span class="comment">// Debounced button click handler</span>
+$(<span class="string">'.button'</span>).on(<span class="string">'click'</span>, Foundation.utils.debounce(<span class="keyword">function</span>(e){
+ <span class="comment">// Handle Click</span>
+}, <span class="number">300</span>, <span class="literal">true</span>));
+
+<span class="comment">// Throttled resize function</span>
+$(window).on(<span class="string">'resize'</span>, Foundation.utils.throttle(<span class="keyword">function</span>(e){
+ <span class="comment">// Do responsive stuff</span>
+}, <span class="number">300</span>));</div></code></pre>
+
+ </div>
</div>
+<p><h4>Method Signature</h4></p>
+<pre><code class="language-javascript"><div class="code-container"><span class="comment">// Arguments:</span>
+<span class="comment">// Func (Function): Function to be throttled.</span>
+<span class="comment">//</span>
+<span class="comment">// Delay (Integer): Function execution threshold in milliseconds.</span>
+<span class="comment">//</span>
+<span class="comment">// Returns:</span>
+<span class="comment">// Lazy_function (Function): Function with throttling applied.</span>
+
+throttle(func, delay) { ... }
+
+<span class="comment">// Arguments:</span>
+<span class="comment">// Func (Function): Function to be debounced.</span>
+<span class="comment">//</span>
+<span class="comment">// Delay (Integer): Function execution threshold in milliseconds.</span>
+<span class="comment">//</span>
+<span class="comment">// Immediate (Bool): Whether the function should be called at the beginning</span>
+<span class="comment">// of the delay instead of the end. Default is false.</span>
+<span class="comment">//</span>
+<span class="comment">// Returns:</span>
+<span class="comment">// Lazy_function (Function): Function with debouncing applied.</span>
+
+debounce(func, delay, immediate) { ... }</div></code></pre>
+
+
+<hr>
+<h2 id="data-options">Data Options</h2>
+
+<p>The <code>data_options</code> method parses a semicolon delimited set of values in the selected element’s <code>data-options</code> HTML attribute. It’s useful for allowing settings to be passed into a script or plugin from the markup.</p>
+<div class="row">
+ <div class="large-6 columns">
+ <h4>HTML</h4>
+<pre><code class="language-html"><div class="code-container"><span class="tag"><<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"target"</span> <span class="attribute">data-options</span>=<span class="value">"delay:4;color:red;animal:unicorn"</span>></span><span class="tag"></<span class="title">div</span>></span></div></code></pre>
+
+ </div>
+ <div class="large-6 columns">
+ <h4>Javascript</h4>
+<pre><code class="language-javascript"><div class="code-container"><span class="keyword">var</span> settings = Foundation.utils.data_options($(<span class="string">'#target'</span>));</div></code></pre>
+
+ </div>
</div>
-</article>
+<p><h4>Method Signature</h4></p>
+<pre><code class="language-javascript"><div class="code-container"><span class="comment">// Arguments:</span>
+<span class="comment">// el (jQuery Object): Element to be parsed.</span>
+<span class="comment">// data_attr_name (string): Optional name of the data attribute containing the options string (defaults to 'options').</span>
+<span class="comment">//</span>
+<span class="comment">// Returns:</span>
+<span class="comment">// Options (Javascript Object): Contents of the element's data-options</span>
+<span class="comment">// attribute.</span>
+
+data_options(el, data_attr_name) { ... }</div></code></pre>
+
+
+<hr>
+<h2 id="media-queries">Media Queries</h2>
+
+<p>Media queries are the backbone of most responsive CSS techniques, though they can be a bit unwieldy to deal with. To make them easier to deal with, we’ve included two helper methods (<code>register_media</code> and <code>add_custom_rule</code>), as well as polyfilled the native function <code>matchMedia</code> to work with all the browsers Foundation supports.</p>
+<p><strong>Register Media</strong> is used to add a new media query to Foundation’s list of JavaScript-accessible media queries. These can be found by calling <code>Foundation.media_queries</code>. The method works by appending a meta tag to the head of the document and checking the <code>font-family</code> of the element’s computed styles for the media query string.</p>
+<p><strong>Add Custom Rules</strong> is a method to add a custom CSS rule as a string to the document. If a media query is passed in the method will apply the style within that media query, otherwise it will be applied globally.</p>
+<p><strong>Match Media</strong> can be used to check if the browser currently matches the media query passed in as a string. To use the function, call <code>matchMedia()</code> with the media query as an argument, and check the <code>matches</code> property (see example below).</p>
+<p>In addition to this, you can also check the default Foundation media queries. The available methods are:</p>
+
+<pre><code class="language-javascript"><div class="code-container"><span class="comment">// Small queries</span>
+Foundation.utils.is_small_only();
+Foundation.utils.is_small_up();
+
+<span class="comment">// Medium queries</span>
+Foundation.utils.is_medium_only();
+Foundation.utils.is_medium_up();
+
+<span class="comment">// Large queries</span>
+Foundation.utils.is_large_only();
+Foundation.utils.is_large_up();
+
+<span class="comment">// XLarge queries</span>
+Foundation.utils.is_xlarge_only();
+Foundation.utils.is_xlarge_up();
+
+<span class="comment">// XXLarge queries</span>
+Foundation.utils.is_xxlarge_only();
+Foundation.utils.is_xxlarge_up();</div></code></pre>
+
+
+<div class="row">
+ <div class="large-6 columns">
+ <h4>CSS</h4>
+<pre><code class="language-css"><div class="code-container"><span class="comment">/<em>
+</em> Note: The media query string in the font-family property has to be surrounded
+<em> by slashes to be recognized by Phantom.js
+</em>
+<em> Note: Instead of being defined in the CSS, the following style rule could also
+</em> be added to the document using Foundation.utils.add_custom_rule().
+*/</span>
+<span class="tag">meta</span><span class="class">.my-mq-custom</span> <span class="rules">{
+ <span class="rule"><span class="attribute">font-family</span>:<span class="value"> <span class="string">"/only screen and (min-width: 40em)/"</span>;</span></span>
+ <span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">40</span>em;</span></span>
+<span class="rule">}</span></span></div></code></pre>
+
+ </div>
+ <div class="large-6 columns">
+ <h4>Javascript</h4>
+<pre><code class="language-javascript"><div class="code-container"><span class="comment">// Register custom media query</span>
+Foundation.utils.register_media(<span class="string">'custom'</span>, <span class="string">'my-mq-custom'</span>);
+
+<span class="comment">// Check if the media query is activated</span>
+<span class="keyword">if</span> (matchMedia(Foundation.media_queries[<span class="string">'custom'</span>]).matches){
+ ...
+};
+
+<span class="comment">// Apply a custom CSS rule to the media query</span>
+Foundation.utils.add_custom_rule(<span class="string">'.js-generated-element { padding-top: '</span> + element.data(<span class="string">'height'</span>) + <span class="string">'px }'</span>, <span class="string">'custom'</span>);</div></code></pre>
+
+ </div>
+</div>
+
+<p><h4>Method Signature</h4></p>
+<pre><code class="language-javascript"><div class="code-container"><span class="comment">// Arguments:</span>
+<span class="comment">// Media (String): Key string for the media query to be stored as in</span>
+<span class="comment">// Foundation.media_queries</span>
+<span class="comment">//</span>
+<span class="comment">// Class (String): Class name for the generated <meta> tag</span>
+
+register_media(media, class) { ... }
+
+<span class="comment">// Arguments:</span>
+<span class="comment">// Rule (String): CSS rule to be appended to the document.</span>
+<span class="comment">//</span>
+<span class="comment">// Media (String): Optional media query string for the CSS rule to be</span>
+<span class="comment">// nested under.</span>
+
+add_custom_rule(rule, media) { ... }</div></code></pre>
+
+
+<hr>
+<h2 id="image-loaded">Image Loaded</h2>
+
+<p>While binding to the document ready event is usually good enough for most plugins that manipulate the DOM, sometimes you need ALL the content to be loaded before you start calculating things like element sizes. This is especially important with images, which can take a while to load and significantly affect the layout of the page, depending on their size.</p>
+<p>This can be avoided by using the <code>image_loaded</code> method, which lets you pass in a callback to be executed when an image has completely finished loading. Passing in a jQuery selector that matches multiple images will cause the callback to be executed when all of the images are fully loaded.</p>
+<p><h4>Example</h4></p>
+<pre><code class="language-javascript"><div class="code-container">Foundation.utils.image_loaded($(<span class="string">'img.wait-for-me'</span>), <span class="keyword">function</span>(){
+ console.log(<span class="string">'Image Loaded! :)'</span>);
+});</div></code></pre>
+
+
+<p><h4>Method Signature</h4></p>
+<pre><code class="language-javascript"><div class="code-container"><span class="comment">// Arguments:</span>
+<span class="comment">// Image (jQuery Object): Image(s) to check if loaded.</span>
+<span class="comment">//</span>
+<span class="comment">// Callback (Function): Foundation to execute when image is fully loaded.</span>
+
+image_loaded(image, callback) { ... }</div></code></pre>
+
+
+<hr>
+<h2 id="random">Random String</h2>
+
+<p>The <code>random_str</code> method is a helper for generating random strings of a given length. This method is used by some of the Foundation plugins to ensure a reasonable probability of non-collision for IDs in dynamically generated DOM objects. Note that <code>random_str</code> should not be considered cryptographically secure.</p>
+<p><h4>Example</h4></p>
+<pre><code class="language-javascript"><div class="code-container">>> Foundation.utils.random_str(<span class="number">6</span>);
+<span class="string">"P47PGD"</span>
+>> Foundation.utils.random_str(<span class="number">6</span>);
+<span class="string">"JvuXFc"</span>
+>> Foundation.utils.random_str(<span class="number">6</span>);
+<span class="string">"XOxB7j"</span></div></code></pre>
+
+
+<p><h4>Method Signature</h4></p>
+<pre><code class="language-javascript"><div class="code-container"><span class="comment">// Arguments:</span>
+<span class="comment">// Length (Integer): Length of string to be generated. Defaults to random</span>
+<span class="comment">// integer.</span>
+<span class="comment">//</span>
+<span class="comment">// Returns:</span>
+<span class="comment">// Rand (String): Pseudo-random, alphanumeric string.</span>
+
+random_str(length) { ... }</div></code></pre>
+
- </div>
- <div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
- <ul class="vertical menu docs-nav" id="docs-menu">
- <p class="docs-nav-version">
- <span data-docs-version></span>
- <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">(Changelog)</a>
- </p>
-
- <li class="docs-nav-title">Getting Started</li>
- <li><a href="installation.html">Installation</a></li>
- <li><a href="starter-projects.html">Starter Projects</a></li>
- <li><a href="compatibility.html">Compatibility</a></li>
- <li><a href="accessibility.html">Accessibility</a></li>
- <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
-
- <li class="docs-nav-title">Setup</li>
- <li><a href="global.html">Global Styles</a></li>
- <li><a href="rtl.html">Right-to-Left Support</a></li>
- <li><a href="flexbox.html">Flexbox</a></li>
- <li><a href="sass.html">Sass</a></li>
- <li><a href="javascript.html">JavaScript</a></li>
- <li class="current"><a href="javascript-utilities.html">JavaScript Utilities</a></li>
- <li><a href="media-queries.html">Media Queries</a></li>
-
- <li class="docs-nav-title">General</li>
- <li><a href="grid.html">Grid</a></li>
- <li><a href="flex-grid.html">Flex Grid</a></li>
- <li><a href="forms.html">Forms</a></li>
- <li><a href="visibility.html">Visibility Classes</a></li>
- <li><a href="float-classes.html">Float Classes</a></li>
-
- <li class="docs-nav-title">Typography</li>
- <li><a href="typography-base.html">Base Styles</a></li>
- <li><a href="typography-helpers.html">Helper Classes</a></li>
-
- <li class="docs-nav-title">Controls</li>
- <li><a href="button.html">Button</a></li>
- <li><a href="button-group.html">Button Group</a></li>
- <li><a href="close-button.html">Close Button</a></li>
- <li><a href="slider.html">Slider <span class="label">JS</span></a></li>
- <li><a href="switch.html">Switch</a></li>
-
- <li class="docs-nav-title">Navigation</li>
- <li><a href="navigation.html">Overview</a></li>
- <li><a href="menu.html">Menu</a></li>
- <li><a href="dropdown-menu.html">Dropdown Menu <span class="label">JS</span></a></li>
- <li><a href="drilldown-menu.html">Drilldown Menu <span class="label">JS</span></a></li>
- <li><a href="accordion-menu.html">Accordion Menu <span class="label">JS</span></a></li>
- <li><a href="top-bar.html">Top Bar</a></li>
- <li><a href="responsive-navigation.html">Responsive Navigation</a></li>
- <li><a href="magellan.html">Magellan <span class="label">JS</span></a></li>
- <li><a href="pagination.html">Pagination</a></li>
- <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
-
- <li class="docs-nav-title">Containers</li>
- <li><a href="accordion.html">Accordion <span class="label">JS</span></a></li>
- <li><a href="callout.html">Callout</a></li>
- <li><a href="dropdown.html">Dropdown <span class="label">JS</span></a></li>
- <li><a href="media-object.html">Media Object</a></li>
- <li><a href="off-canvas.html">Off-canvas <span class="label">JS</span></a></li>
- <li><a href="reveal.html">Reveal <span class="label">JS</span> <small>Modal</small></a></li>
- <li><a href="table.html">Table</a></li>
- <li><a href="tabs.html">Tabs <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Media</li>
- <li><a href="badge.html">Badge</a></li>
- <li><a href="flex-video.html">Flex Video</a></li>
- <li><a href="label.html">Label</a></li>
- <li><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
- <li><a href="progress-bar.html">Progress Bar</a></li>
- <li><a href="thumbnail.html">Thumbnail</a></li>
- <li><a href="tooltip.html">Tooltip <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Plugins</li>
- <li><a href="abide.html">Abide <small>Form Validation</small></a></li>
- <li><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
- <li><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
- <li><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
- <li><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
-
- <li class="docs-nav-title">Sass</li>
- <li><a href="sass-functions.html">Functions</a></li>
- <li><a href="sass-mixins.html">Mixins</a></li>
-
- <li class="docs-nav-title">Libraries</li>
- <li><a href="motion-ui.html">Motion UI</a></li>
- <li><a href="panini.html">Panini</a></li>
- <li><a href="style-sherpa.html">Style Sherpa</a></li>
-
- <li class="docs-nav-title">Older Versions</li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
- <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
- <li><a href="https://get.foundation/sites/docs/v/3.2.5/">Foundation 3</a></li>
- <li><a href="https://get.foundation/sites/docs/v/2.2.1/">Foundation 2</a></li>
- </ul>
-
- </div>
- </div>
- <!-- Small Business(Docs) -->
- <section id="studiosCallout">
- <div class="row">
- <div class="medium-4 large-4 columns">
- <img src="https://get.foundation/assets/img/smallbiz-footer.svg" alt="">
- </div>
- <div class="medium-8 large-8 columns banner-info">
- <div class="row column property-label">ZURB Foundation</div>
- <h3 class="light">Yeah, we can help with that.</h3>
- <p class="lead"> We’ll collaborate with your team throughout the entire project life cycle. We’ll take your concept and move it through ideation, hi-fi wireframes, visual design and code, all while informing you on the whys and hows along the way.</p>
- <div class="course-buttons">
- <a href="https://get.foundation/get-involved/premium-support.html" class="studios button" data-zcom-event="studios_foundation_click" id="foundationSmallV1">Show Me How →</a>
</div>
</div>
- </div>
- </section>
-
- <div class="docs-newsletter">
- <div class="row">
- <div class="medium-7 large-8 columns">
- <a target="_blank" href="https://get.foundation/learn/responsive-reading.html">
- <h5 class="">Download ZURB’s 21 Responsive Trends That Will Shape 2017</h5>
- <p style="margin-bottom: 0;">Stay informed with amazing responsive trends each month from ZURB.</p>
- </a>
+ <!-- <section id="courses-banner-large">
+ <div class="row">
+ <div class="large-5 medium-5 columns banner-image">
+ <img src="https://get.foundation/assets/img/responsive-banner-main.svg" alt="responsive design">
+ </div>
+ <div class="large-7 medium-7 columns banner-info">
+ <h3>Get a running start with Foundation</h3>
+ <p>Learn the fundamentals of the world's most advanced responsive framework in our <strong>Intro to Foundation class.</strong> You'll learn from the creators themselves on how to use Foundation and jumpstart your next project. <a href="http://zurb.com/university/courses" class="inline-hide">Learn more about classes »</a></p>
+ <a href="http://zurb.com/university/foundation-intro?utm_source=Foundation%20Docs&utm_medium=Large%20Banner&utm_campaign=Intro%20to%20Foundation" class="button">Learn More</a>
+ <a href="http://zurb.com/university/courses" class="learn-more hide-for-medium-up">Learn more about classes »</a>
+ </div>
+ </div>
+</section> -->
+ <div id="newsletter">
+ <div class="row">
+ <div class="medium-8 columns">
+ <h5>Stay on top of what’s happening in <a href="http://zurb.com/responsive">responsive design</a>.</h5>
+ <p>Sign up to receive monthly Responsive Reading highlights. <a href="http://zurb.com/responsive/reading">Read Last Month's Edition »</a></p>
+ </div>
+ <div class="medium-4 columns">
+ <form action="http://zurb.createsend.com/t/y/s/xlitlu/" method="post" id="subForm">
+ <div class="row collapse margintop-20px">
+ <div class="small-8 medium-8 columns">
+ <input id="fieldEmail" name="cm-xlitlu-xlitlu" type="email" placeholder="signup@example.com">
</div>
- <div class="medium-5 large-4 footer-signup-form columns">
- <a style="margin-bottom: 0;" target="_blank" href="https://get.foundation/learn/responsive-reading.html" class="button expanded">Download the PDF</a>
+ <div class="small-4 medium-4 columns">
+ <input type="submit" href="#" class="postfix button" value="Sign Up">
</div>
</div>
+ </form>
+ </div>
+ </div>
+</div>
+
+
+<div class="zurb-footer-top bg-fblue">
+ <div class="row property">
+ <div class="medium-4 columns">
+ <div class="property-info">
+ <h3>Foundation for Sites</h3>
+ <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
+ </p>
</div>
-
- <div class="zurb-footer-top bg-fblue">
- <div class="row property">
- <div class="medium-4 columns">
- <div class="property-info">
- <h3>Foundation for Sites</h3>
- <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
- </p>
- </div>
- </div>
-
- <div class="medium-8 columns">
- <div class="row collapse">
- <div class="medium-4 columns">
- <div class="learn-links">
- <h4 class="hide-for-small">Want more?</h4>
- <ul>
- <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
- <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
- <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
- <li><a href="http://zurb.com/university/courses">Training</a></li>
- <li><a href="http://zurb.com/library">Design Resources</a></li>
- </ul>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="support-links">
- <h4 class="hide-for-small">Talk to us</h4>
- <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
- <p><a href="https://get.foundation/get-involved/contribute.html">Get involved in<br>our amazing community.</a></p>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="connect-links">
- <h4 class="hide-for-small">Stay Updated</h4>
- <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
- <a href="http://zurb.com/news" class="small button">Stay Connected</a>
- </div>
- </div>
- </div>
+ </div>
+
+ <div class="medium-8 columns">
+ <div class="row collapse">
+ <div class="medium-4 columns">
+ <div class="learn-links">
+ <h4 class="hide-for-small">Want more?</h4>
+ <ul>
+ <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
+ <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
+ <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
+ <li><a href="http://zurb.com/university/courses">Training</a></li>
+ <li><a href="http://zurb.com/library">Design Resources</a></li>
+ </ul>
</div>
</div>
- <div class="row global">
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/studios" class="footer-link-block services">
- <span class="title">Studios</span>
- <span>Helping more than 200 startups succeed since 1998.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="https://get.foundation/" class="footer-link-block foundation">
- <span class="title">Foundation</span>
- <span>The most advanced front-end framework in the world.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/notable" class="footer-link-block apps">
- <span class="title">Notable Design Apps</span>
- <span>Prototype, iterate and collect feedback on your products.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/university" class="footer-link-block expo">
- <span class="title">University</span>
- <span>Ideas, thoughts and design resources shared with you.</span>
- </a>
+ <div class="medium-4 columns">
+ <div class="support-links">
+ <h4 class="hide-for-small">Talk to us</h4>
+ <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
+ <p><a href="https://get.foundation/business/business-support.html">Business Support</a></p>
+ <p>Or check our <a href="https://get.foundation/support/support.html">support page</a></p>
+ </div>
</div>
- </div>
- </div>
-
- <div class="zurb-footer-bottom">
- <div class="row">
- <div class="medium-4 medium-push-8 columns">
- <ul class="home-social">
- <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
- <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
- <li><a href="http://zurb.com/contact" class="mail"></a></li>
- </ul>
- </div>
- <div class="medium-8 medium-pull-4 columns">
- <a href="http://www.zurb.com" class="zurb-logo regular"></a>
- <ul class="zurb-links">
- <li><a href="http://zurb.com/about">About</a></li>
- <li><a href="http://zurb.com/blog">Blog</a></li>
- <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
- <li><a href="http://zurb.com/contact">Contact</a></li>
- <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
- </ul>
- <p class="copyright">© 1998‐2016 ZURB, Inc. All rights reserved.</p>
+ <div class="medium-4 columns">
+ <div class="connect-links">
+ <h4 class="hide-for-small">Stay Updated</h4>
+ <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
+ <a href="http://zurb.com/news" class="small button">Stay Connected</a>
</div>
</div>
</div>
-
</div>
</div>
+ <div class="row global">
+ <div class="medium-3 small-6 columns">
+ <a href="http://zurb.com/studios" class="footer-link-block services">
+ <span class="title">Studios</span>
+ <span>Helping more than 200 startups succeed since 1998.</span>
+ </a>
+ </div>
+ <div class="medium-3 small-6 columns">
+ <a href="https://get.foundation/" class="footer-link-block foundation">
+ <span class="title">Foundation</span>
+ <span>The most advanced front-end framework in the world.</span>
+ </a>
+ </div>
+ <div class="medium-3 small-6 columns">
+ <a href="http://zurb.com/notable" class="footer-link-block apps">
+ <span class="title">Notable Design Apps</span>
+ <span>Prototype, iterate and collect feedback on your products.</span>
+ </a>
+ </div>
+ <div class="medium-3 small-6 columns">
+ <a href="http://zurb.com/university" class="footer-link-block expo">
+ <span class="title">University</span>
+ <span>Ideas, thoughts and design resources shared with you.</span>
+ </a>
+ </div>
+ </div>
+</div>
+
+<div class="zurb-footer-bottom">
+ <div class="row">
+ <div class="medium-4 medium-4 push-8 columns">
+ <ul class="home-social">
+ <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
+ <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
+ <li><a href="http://zurb.com/contact" class="mail"></a></li>
+ </ul>
+ </div>
+ <div class="medium-8 medium-8 pull-4 columns">
+ <a href="http://www.zurb.com" class="zurb-logo regular"></a>
+ <ul class="zurb-links">
+ <li><a href="http://zurb.com/about">About</a></li>
+ <li><a href="http://zurb.com/blog">Blog</a></li>
+ <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
+ <li><a href="http://zurb.com/contact">Contact</a></li>
+ <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
+ </ul>
+ <p class="copyright">© 1998‐2015 ZURB, Inc. All rights reserved.</p>
+ </div>
+ </div>
+</div>
+
+ </section>
+
+ </div>
+ </div>
+
+ <script src="assets/js/templates.js"></script>
+ <script src="assets/js/all.js"></script>
+ <script>
+ var _gaq = _gaq || [];
+ _gaq.push(
+ ['_setAccount', 'UA-2195009-2'],
+ ['_trackPageview'],
+ ['b._setAccount', 'UA-2195009-27'],
+ ['b._trackPageview']
+ );
+
+ (function() {
+ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+ })();
+ </script>
+ <script>
+ $(document).foundation().foundation('joyride', 'start');
+ </script>
+ </body>
+
- <script>
- var _gaq = _gaq || [];
- _gaq.push(
- ['_setAccount', 'UA-2195009-2'],
- ['_trackPageview'],
- ['b._setAccount', 'UA-2195009-27'],
- ['b._trackPageview']
- );
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
-
- <script src="assets/js/vendor.js?hash=7c433ce1a6c2d4c100c5b7f6e050dea3"></script>
- <script src="assets/js/foundation.js?hash=1a0cd9fe11451ce5affd1e183e7b5fc4"></script>
- <script src="assets/js/docs.js?hash=fae4f7a84ca3a904250f6862e3a05b63"></script>
- <script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
-</body>
</html>
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="Our JavaScript is easy to set up and only requires jQuery to get going.">
- <link rel="icon" href="assets/img/icons/foundation-favicon.ico" type="image/x-icon">
- <title>Foundation for Sites 6 Docs | JavaScript</title>
- <link href="assets/css/docs.css?hash=321aba49ae4fa7c71e8973bf9ec5d758" rel="stylesheet" />
- <link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=46808a4a9f97e1e6f40383d681bcaa1f" rel="stylesheet">
- <!-- <link rel="stylesheet" href="./node_modules/motion-ui/dist/motion-ui.css" /> -->
-</head>
-<body>
-
- <div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
-
- <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="mobile-ofc vertical menu">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
-
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/support.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/sort/unanswered">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
- </ul>
- </li>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <title>JavaScript Setup | Foundation Docs</title>
+ <link rel="icon" href="assets/img/icons/oundation-favicon.ico" type="image/x-icon">
+ <!-- For third-generation iPad with high-resolution Retina display: -->
+ <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/img/icons/apple-touch-icon-144x144-precomposed.png">
+ <!-- For iPhone with high-resolution Retina display: -->
+ <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/img/icons/apple-touch-icon-114x114-precomposed.png">
+ <!-- For first- and second-generation iPad: -->
+ <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/img/icons/apple-touch-icon-72x72-precomposed.png">
+ <!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
+ <link rel="apple-touch-icon-precomposed" href="assets/img/icons/apple-touch-icon-precomposed.png">
+
+ <meta name="description" content="Documentation and reference library for ZURB Foundation. JavaScript, CSS, components, grid and more.">
+ <meta name="author" content="ZURB, inc. ZURB network also includes zurb.com">
+ <meta name="copyright" content="ZURB, inc. Copyright (c) 2014">
+
+ <link href="assets/css/docs.css" rel="stylesheet" />
+ <link href="http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" rel="stylesheet" />
+ <script src="assets/js/modernizr.js"></script>
+ </head>
+ <body class="antialiased hide-extras">
+
+ <!-- Info Banner For Announcements or Links -->
+ <!-- <a href="https://get.foundation" id="notice">
+ <div class="info">
+ <h5>Foundation 6 is here!</h5>
+ </div>
+ </a> -->
+
+
+ <div class="marketing off-canvas-wrap" data-offcanvas>
+ <div class="inner-wrap">
+
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
- </div>
-
- <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="vertical menu">
- <li><a href="#">Foundation</a></li>
- <li><a href="#">Dot</a></li>
- <li><a href="#">ZURB</a></li>
- <li><a href="#">Com</a></li>
- <li><a href="#">Slash</a></li>
- <li><a href="#">Sites</a></li>
- </ul>
- </div>
-
- <div class="off-canvas-content" data-off-canvas-content>
- <!-- Info Banner For Announcements or Links -->
- <!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
- <div class="info">
- <h5>Foundation 6 is here!</h5>
- </div>
- </a> -->
- <nav class="marketing-topbar show-for-medium">
-
- <ul class="menu">
- <li class="topbar-title"><a href="https://get.foundation/index.html"><img src="assets/img/logos/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
+<!-- <nav class="tab-bar show-for-small">
+ <a class="off-canvas-left-toggle menu-icon ">
+ <span></span>
+ </a>
+</nav> -->
+
+
+<nav class="top-bar docs-bar hide-for-small" data-topbar>
+ <ul class="title-area">
+ <li class="name">
+ <h1>
+ <a href="https://get.foundation/">
+ <span>Foundation</span>
+ </a>
+ </h1>
+ </li>
+ </ul>
+
+ <section class="top-bar-section">
+ <ul class="right">
+ <li class="divider"></li>
+ <li class="has-dropdown">
+ <a target="_blank" href="https://zurb.com/responsive">Showcase <i class="fa fa-external-link"></i></a>
+ <ul class="dropdown">
+ <li><a target="_blank" href="https://zurb.com/responsive">Showcase <i class="fa fa-external-link"></i></a></li>
+ <li><a href="https://get.foundation/showcase/brands.html">Brands</a></li>
+ <li><a href="https://get.foundation/showcase/case-studies.html">Case Studies</a></li>
+ <li><a href="https://get.foundation/showcase/blog.html">Blog</a></li>
+ <li><a href="https://get.foundation/showcase/buzz.html">Buzz</a></li>
+ <li><a href="https://get.foundation/showcase/about.html">About Foundation</a></li>
</ul>
-
- <ul class="dropdown menu" data-dropdown-menu data-click-open="false">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/" target="_blank">F5 Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="https://get.foundation/emails/docs/" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
+ </li>
+ <li class="divider"></li>
+ <li class="has-dropdown">
+ <a href="https://get.foundation/develop/getting-started.html" class="">Develop</a>
+ <ul class="dropdown">
+ <li class="title">Frameworks</li>
+ <li><a class="" href="https://get.foundation/sites.html">Foundation for Sites</a></li>
+ <li><a class="" href="https://get.foundation/apps.html">Foundation for Apps</a></li>
+ <li><a class="spaced-list-item" href="https://get.foundation/emails.html">Foundation for Emails</a></li>
+ <li class="spaced-divider"><hr></li>
+ <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
+ <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
+ <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
+ <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
</ul>
-
- </nav>
-
- <div class="title-bar hide-for-medium">
- <div class="title-bar-left">
- <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
- <span class="title-bar-title">Foundation</span>
- </div>
- </div>
-
+ </li>
+ <li class="divider"></li>
+ <li class="has-dropdown">
+ <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
+ <ul class="dropdown">
+ <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
+ <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
+ <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
+ <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
+ <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
+ </ul>
+ </li>
+ <li class="divider"></li>
+ <li class="has-dropdown">
+ <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
+ <ul class="dropdown">
+ <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
+ <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
+ <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
+ <li><a href="https://get.foundation/learn/events.html">Events</a></li>
+ <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
+ <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
+ <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
+ </ul>
+ </li>
+ <li class="divider"></li>
+ <li class="has-dropdown">
+ <a href="https://get.foundation/sites/docs/v/5.5.3/">Docs</a>
+ <ul class="dropdown">
+ <li><a href="https://get.foundation/sites/docs/v/5.5.3/">F5 Sites Docs</a></li>
+ <li><a href="https://get.foundation/sites/docs">F6 Sites Docs</a></li>
+ <li><a href="https://get.foundation/emails/docs">Emails Docs</a></li>
+ <li><a href="https://get.foundation/apps/docs">Apps Docs</a></li>
+ </ul>
+ </li>
+ <li class="divider"></li>
+ <li class="has-form">
+ <a href="https://get.foundation/sites/getting-started.html">Getting Started</a>
+ </ul>
+ </section>
+</nav>
+ <nav class="tab-bar show-for-small">
+ <a class="left-off-canvas-toggle menu-icon">
+ <span>Foundation</span>
+ </a>
+</nav>
- <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
+<aside class="marketing-left-off-canvas-menu">
- <div class="expanded row">
- <div class="medium-9 large-10 medium-push-3 large-push-2 columns">
+ <ul class="off-canvas-list">
+ <li><label class="first">Foundation</label></li>
+ <li><a href="https://get.foundation">Home</a></li>
+ </ul>
-<article class="docs-component" id="docs-javascript">
+ <hr>
-<a href="#docs-menu" class="small secondary expanded button hide-for-medium">Jump to Nav</a>
+ <ul class="off-canvas-list">
+ <li><label>Setup</label></li>
-<header>
- <h1 class="docs-page-title">JavaScript</h1>
+ <li><a href="index.html" data-search="">Getting Started</a></li>
+ <li><a href="css.html" data-search="Styles">CSS</a></li>
+ <li><a href="sass.html" data-search="Sass">Sass</a></li>
+ <li><a href="sass-files.html" data-search="Sass,Sass - What You Get, How to Use Sass">Sass Files</a></li>
+ <li><a href="using-sass.html" data-search="Sass,Sass - What You Get, How to Use Sass">Using Sass</a></li>
+ <li><a href="applications.html" data-search="Rails,Gem">Applications</a></li>
+ <li><a href="javascript.html" data-search="">Javascript</a></li>
+ <li><a href="components/global.html" data-search="Global Styles,Global Mixins,Global Variables,Useful HTML Classes">Global Styles</a></li>
+ <li><a href="components/kitchen_sink.html" data-search="">Kitchen Sink</a></li>
+ <li><a href="upgrading.html" data-search="Migration">Upgrading</a></li>
+ <li class="divider"></li>
+ <li><label>Structure</label></li>
+ <li><a href="media-queries.html" data-search="Breakpoints">Media Queries</a></li>
+ <li><a href="components/visibility.html" data-search="">Visibility</a></li>
+ <li><a href="components/grid.html" data-search="">Grid</a></li>
+ <li><a href="components/block_grid.html" data-search="">Block Grid</a></li>
+ <li><a href="components/interchange.html" data-search="Responsive Images">Interchange Responsive Content <span class="label">JS</span></a></li>
+ <li><a href="utility-classes.html" data-search="">Utility Classes</a></li>
+ <li><a href="javascript-utilities.html" data-search="">Javascript Utilities</a></li>
+ <li><a href="components/rtl.html" data-search="RTL">Right-to-Left Support</a></li>
- <p class="lead docs-page-lead">Our JavaScript is easy to set up and only requires jQuery to get going.</p>
+ <li class="divider"></li>
+ <li><label>Navigation</label></li>
+ <li><a href="components/offcanvas.html" data-search="Off Canvas">Off-canvas <span class="label">JS</span></a></li>
+ <li><a href="components/topbar.html" data-search="Nav Bar,Navigation,Sticky">Top Bar <span class="label">JS</span></a></li>
+ <li><a href="components/icon-bar.html" data-search="">Icon Bar</a></li>
+ <li><a href="components/sidenav.html" data-search="">Side Nav</a></li>
+ <li><a href="components/magellan.html" data-search="Scrollspy">Magellan Sticky Nav <span class="label">JS</span></a></li>
+ <li><a href="components/subnav.html" data-search="">Sub Nav</a></li>
+ <li><a href="components/breadcrumbs.html" data-search="Navigation Path,Cookie Crumb">Breadcrumbs</a></li>
+ <li><a href="components/pagination.html" data-search="">Pagination</a></li>
- <ul class="menu simple docs-contribute-menu">
- <li><a href="https://github.com/zurb/foundation-sites/edit/master/docs/pages/javascript.md" target="_blank"><i class="fi-pencil"></i>Edit this Page</a></li>
- <li><a href="https://github.com/zurb/foundation-sites/issues/new?title=%5BJavaScript%5D%20ISSUE%20NAME%20HERE" target="_blank"><i class="fi-social-github"></i>Report a Bug</a></li>
- <li><a href="https://get.foundation/forum" target="_blank"><i class="fi-comment"></i>Get Help</a></li>
- </ul>
-</header>
+ <li class="divider"></li>
+ <li><label>Media</label></li>
+ <li><a href="components/orbit.html" data-search="Carousel,Slider,Slideshow">Orbit Slider <span class="label">JS</span></a></li>
+ <li><a href="components/thumbnails.html" data-search="Images">Thumbnails</a></li>
+ <li><a href="components/clearing.html" data-search="Responsive Lightbox,Lightbox">Clearing Lightbox <span class="label">JS</span></a></li>
+ <li><a href="components/flex_video.html" data-search="Responsive Video">Flex Video</a></li>
-<hr>
+ <li class="divider"></li>
+ <li><label>Forms</label></li>
+ <li><a href="components/forms.html" data-search="">Forms</a></li>
+ <li><a href="components/switch.html" data-search="">Switches</a></li>
+ <li><a href="components/range_slider.html" data-search="Range Slider">Sliders <span class="label">JS</span></a></li>
+ <li><a href="components/abide.html" data-search="Form Validation,Field Validation">Abide Validation <span class="label">JS</span></a></li>
-<div class="row">
+ <li class="divider"></li>
+ <li><label>Buttons</label></li>
+ <li><a href="components/buttons.html" data-search="">Buttons</a></li>
+ <li><a href="components/button_groups.html" data-search="Button Bar">Button Groups</a></li>
+ <li><a href="components/split_buttons.html" data-search="">Split Buttons <span class="label">JS</span></a></li>
+ <li><a href="components/dropdown_buttons.html" data-search="">Dropdown Buttons <span class="label">JS</span></a></li>
-<div class="large-9 columns" id="docs">
+ <li class="divider"></li>
+ <li><label>Typography</label></li>
+ <li><a href="components/typography.html" data-search="Typography,Type-setting,Composition">Type</a></li>
+ <li><a href="components/inline_lists.html" data-search="Lists">Inline Lists</a></li>
+ <li><a href="components/labels.html" data-search="Tags">Labels</a></li>
+ <li><a href="components/keystrokes.html" data-search="">Keystrokes</a></li>
-<h2 id="installing" class="docs-heading" data-magellan-target="installing">Installing<a class="docs-heading-icon" href="#installing"></a></h2><p>You can get the Foundation JavaScript files from a ZIP download, package manager, or CDN. Check out the <a href="installation.html">Installation</a> page to learn more.</p>
-<p>Once you have the files, add links to jQuery and Foundation as <code><script></code> tags at the bottom of your page, just before the closing <code><body></code> tag.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"js/jquery.min.js"</span>></span><span class="undefined?hash=eb4a7946700024d8f5010f588406b6e3"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
-<span class="hljs-comment"><!-- this will include every plugin and utility required by Foundation --></span>
-<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"js/foundation.min.js"</span>></span><span class="undefined"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre></div><div class="callout warning">
- <p>Make sure Foundation loads <em>after</em> jQuery.</p>
-</div>
+ <li class="divider"></li>
+ <li class="heading"><label>Callouts & Prompts</label></li>
+ <li><a href="components/reveal.html" data-search="Modal">Reveal Modal <span class="label">JS</span></a></li>
+ <li><a href="components/alert_boxes.html" data-search="Error,Success,Warning">Alerts <span class="label">JS</span></a></li>
+ <li><a href="components/panels.html" data-search="Wells">Panels</a></li>
+ <li><a href="components/tooltips.html" data-search="Popover">Tooltips <span class="label">JS</span></a></li>
+ <li><a href="components/joyride.html" data-search="Tooltip Tour,Guider,Tooltip Walk-through">Joyride <span class="label">JS</span></a></li>
-<h3 id="babel-required" class="docs-heading">Babel Required<a class="docs-heading-icon" href="#babel-required"></a></h3><p>Our JavaScript uses some features of ECMAScript 2015. <strong>If you use Foundation with a build system, you'll need to compile our code to ES5.</strong> We use <a href="https://babeljs.io/">Babel</a> in our templates to do this. Babel has <a href="https://babeljs.io/docs/setup/">plugins</a> for every build system imaginable, so integrating it into an existing setup is easy.</p>
-<p>When configuring Babel to work with Foundation, you only need to include the <code>es2015</code> preset. At the root of your project, add a file called <code>.babelrc</code> with these contents to load that configuration:</p>
-<div class="docs-code" data-docs-code><pre><code class="json">{
- <span class="hljs-attr">"presets"</span>: [<span class="hljs-string">"es2015"</span>]
-}</code></pre></div><h3 id="file-structure" class="docs-heading">File Structure<a class="docs-heading-icon" href="#file-structure"></a></h3><p>All of Foundation's plugins ship as individual files, named <code>foundation.tabs.js</code>, <code>foundation.accordion.js</code>, and so on. These files are also combined into one big file called <code>foundation.js</code>, which allows you to get every plugin at once.</p>
-<p>If you're only using certain plugins, know that they all require <code>foundation.core.js</code> and <code>foundation.util.mediaQuery.js</code> to be loaded <em>first</em>. Some plugins also require specific utility libraries that ship with Foundation—refer to a plugin's documentation to find out which plugins require what, and see the <a href="javascript-utilities.html">JavaScript Utilities</a> page for more information.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-comment"><!-- Example of selectively including files --></span>
-<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"js/jquery.min.js"</span>></span><span class="undefined"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"js/foundation.core.js"</span>></span><span class="undefined"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"js/foundation.util.mediaQuery.js"</span>></span><span class="undefined"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"js/foundation.tabs.js"</span>></span><span class="undefined"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"js/foundation.accordion.js"</span>></span><span class="undefined"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre></div><div class="callout warning">
- <p>Loading many individual files like this creates a lot of network overhead, especially for users on mobile networks. To keep your pages loading quick, we recommend using a tool like <a href="http://gruntjs.com">Grunt</a> or <a href="http://gulpjs.com">Gulp</a> to combine all of your JavaScript files into one.</p>
-</div>
+ <li class="divider"></li>
+ <li><label>Content</label></li>
+ <li><a href="components/dropdown.html" data-search="">Dropdowns <span class="label">JS</span></a></li>
+ <li><a href="components/pricing_tables.html" data-search="">Pricing Tables</a></li>
+ <li><a href="components/progress_bars.html" data-search="">Progress Bars</a></li>
+ <li><a href="components/tables.html" data-search="">Tables</a></li>
+ <li><a href="components/accordion.html" data-search="">Accordion <span class="label">JS</span></a></li>
+ <li><a href="components/tabs.html" data-search="">Tabs <span class="label">JS</span></a></li>
+ <li><a href="components/equalizer.html" data-search="">Equalizer <span class="label">JS</span></a></li>
-<hr>
-<h2 id="initializing" class="docs-heading" data-magellan-target="initializing">Initializing<a class="docs-heading-icon" href="#initializing"></a></h2><p>The <code>.foundation()</code> function on the jQuery object will kick off every Foundation plugin at once.</p>
-<div class="docs-code" data-docs-code><pre><code class="js">$(<span class="hljs-built_in">document</span>).foundation();</code></pre></div><p>You can also selectively initialize plugins by call the <code>.foundation();</code> method on one or more elements with a plugin.</p>
-<div class="docs-code" data-docs-code><pre><code class="js">$(<span class="hljs-string">'#foo'</span>).foundation(); <span class="hljs-comment">// initialize all plugins within the element `#foo`</span>
-$(<span class="hljs-string">'.has-tip'</span>).foundation(); <span class="hljs-comment">// initialize all tooltips on the page.</span></code></pre></div><hr>
-<h2 id="using-plugins" class="docs-heading" data-magellan-target="using-plugins">Using Plugins<a class="docs-heading-icon" href="#using-plugins"></a></h2><p>Plugins are attached to HTML elements using data attributes. The data attribute will match the name of the plugin. For example, adding <code>data-accordion</code> to an element creates an accordion, while adding <code>data-tooltip</code> creates a tooltip link.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">p</span>></span><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">data-tooltip</span> <span class="hljs-attr">aria-haspopup</span>=<span class="hljs-string">"true"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"has-tip"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"1"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Fancy word for a beetle."</span>></span>Scarabaeus<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">p</span>></span></code></pre></div>
-
-<div class="docs-code-live"><p><span data-tooltip aria-haspopup="true" class="has-tip" tabindex="1" title="Fancy word for a beetle.">Scarabaeus</span></p></div><div class="callout warning">
- <p>A single element can only have one Foundation plugin on it at a time. However, most plugins can be nested inside other ones.</p>
+ <li class="divider"></li>
+ <li><label>Support</label></li>
+
+ <li><a href="changelog.html" data-search="">Changelog</a></li>
+ <li><a href="compatibility.html" data-search="">Compatibility</a></li>
+
+ <li class="divider"></li>
+ <li class="heading"><label>Older Docs</label></li>
+ <li><a href="/docs/v/4.3.2/" data-search="">Foundation 4</a></li>
+ <li><a href="/docs/v/3.2.5/" data-search="">Foundation 3</a></li>
+ <li><a href="/docs/v/2.2.1/" data-search="">Foundation 2</a></li>
+ </ul>
+
+ <hr>
+
+ <div class="zurb-links">
+ <ul class="top">
+ <li class="logo"><a href="http://zurb.com"></a></li>
+ <li><a href="http://zurb.com/about">About</a></li>
+ <li><a href="http://zurb.com/blog">Blog</a></li>
+ <li><a href="http://zurb.com/contact">Contact</a></li>
+ </ul>
+ <ul class="pillars">
+ <li>
+ <a href="http://www.zurb.com/studios" class="footer-link-block services">
+ <span class="title">Studios</span>
+ <span>Helping startups win since '98.</span>
+ </a>
+ </li>
+ <li>
+ <a href="https://get.foundation/" class="footer-link-block foundation">
+ <span class="title">Foundation</span>
+ <span>World's most advanced responsive framework.</span>
+ </a>
+ </li>
+ <li>
+ <a href="http://zurb.com/notable" class="footer-link-block apps">
+ <span class="title">Notable</span>
+ <span>Tools to rapidly prototype and iterate.</span>
+ </a>
+ </li>
+ <li>
+ <a href="http://zurb.com/university" class="footer-link-block expo">
+ <span class="title">University</span>
+ <span>Online training for smarter product design.</span>
+ </a>
+ </li>
+ </ul>
</div>
-<hr>
-<h2 id="configuring-plugins" class="docs-heading" data-magellan-target="configuring-plugins">Configuring Plugins<a class="docs-heading-icon" href="#configuring-plugins"></a></h2><p>Each plugin has a set of configuration settings that customize how it works. For example, you change how fast an <a href="accordion.html">accordion</a> slides up and down, or if <a href="tooltip.html">tooltips</a> should appear on touch devices.</p>
-<p>Plugin settings can be changed globally by changing the <code>DEFAULTS</code> property on the plugin.</p>
-<div class="docs-code" data-docs-code><pre><code class="js">Foundation.Accordion.defaults.slideSpeed = <span class="hljs-number">500</span>;
-Foundation.Accordion.defaults.multiExpand = <span class="hljs-literal">true</span>;</code></pre></div><p>An individual instance of a plugin can also have different settings. These can be set in the HTML or in JavaScript.</p>
-<div class="callout warning">
- <p>In the HTML, each setting can be defined as an individual data attribute. Note that camelCased options are converted to hyphenated words. In the below example, <code>multiExpand</code> becomes <code>data-multi-expand</code>.</p>
+</aside>
+
+<a class="exit-off-canvas" href="#"></a>
+
+
+ <section role="main" class="scroll-container">
+
+ <div class="row">
+ <div class="large-3 medium-4 columns">
+ <div class="hide-for-small">
+ <div class="sidebar">
+ <h5>Foundation Documentation</h5>
+ <!-- <form>
+ <label>Search Documentation</label>
+ <input tabindex="1" id="autocomplete" type="search" placeholder="Search Docs: e.g. forms">
+ </form>
+
+ <a href="https://get.foundation/sites/download.html" class="download button expand">Download Foundation</a> -->
+
+ <nav>
+ <ul class="side-nav">
+ <li class="heading">Setup</li>
+
+ <li><a href="index.html" data-search="">Getting Started</a></li>
+ <li><a href="css.html" data-search="Styles">CSS</a></li>
+ <li><a href="sass.html" data-search="Sass">Sass</a></li>
+ <li><a href="sass-files.html" data-search="Sass,Sass - What You Get, How to Use Sass">Sass Files</a></li>
+ <li><a href="using-sass.html" data-search="Sass,Sass - What You Get, How to Use Sass">Using Sass</a></li>
+ <li><a href="applications.html" data-search="Rails,Gem">Applications</a></li>
+ <li><a href="javascript.html" data-search="">JavaScript</a></li>
+ <li><a href="components/global.html" data-search="Global Styles,Global Mixins,Global Variables,Useful HTML Classes">Global Styles</a></li>
+ <li><a href="components/kitchen_sink.html" data-search="">Kitchen Sink</a></li>
+ <li><a href="accessibility.html" data-search="accessibility">Accessibility</a></li>
+ <li><a href="upgrading.html" data-search="Migration">Upgrading</a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Structure</li>
+ <li><a href="media-queries.html" data-search="Breakpoints">Media Queries</a></li>
+ <li><a href="components/visibility.html" data-search="">Visibility</a></li>
+ <li><a href="components/grid.html" data-search="">Grid</a></li>
+ <li><a href="components/block_grid.html" data-search="">Block Grid</a></li>
+ <li><a href="components/interchange.html" data-search="Responsive Images">Interchange Responsive Content <span class="label">JS</span></a></li>
+ <li><a href="utility-classes.html" data-search="">Utility Classes</a></li>
+ <li><a href="javascript-utilities.html" data-search="">Javascript Utilities</a></li>
+ <li><a href="components/rtl.html" data-search="RTL">Right-to-Left Support</a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Navigation</li>
+ <li><a href="components/offcanvas.html" data-search="Off Canvas">Off-canvas <span class="label">JS</span></a></li>
+ <li><a href="components/topbar.html" data-search="Nav Bar,Navigation,Sticky">Top Bar <span class="label">JS</span></a></li>
+ <li><a href="components/icon-bar.html" data-search="">Icon Bar</a></li>
+ <li><a href="components/sidenav.html" data-search="">Side Nav</a></li>
+ <li><a href="components/magellan.html" data-search="Scrollspy">Magellan Sticky Nav <span class="label">JS</span></a></li>
+ <li><a href="components/subnav.html" data-search="">Sub Nav</a></li>
+ <li><a href="components/breadcrumbs.html" data-search="Navigation Path,Cookie Crumb">Breadcrumbs</a></li>
+ <li><a href="components/pagination.html" data-search="">Pagination</a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Media</li>
+ <li><a href="components/orbit.html" data-search="Carousel,Slider,Slideshow">Orbit Slider <span class="label">JS</span></a></li>
+ <li><a href="components/thumbnails.html" data-search="Images">Thumbnails</a></li>
+ <li><a href="components/clearing.html" data-search="Responsive Lightbox,Lightbox">Clearing Lightbox <span class="label">JS</span></a></li>
+ <li><a href="components/flex_video.html" data-search="Responsive Video">Flex Video</a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Forms</li>
+ <li><a href="components/forms.html" data-search="">Forms</a></li>
+ <li><a href="components/switch.html" data-search="">Switches</a></li>
+ <li><a href="components/range_slider.html" data-search="Range Slider">Range Sliders <span class="label">JS</span></a></li>
+ <li><a href="components/abide.html" data-search="Form Validation,Field Validation">Abide Validation <span class="label">JS</span></a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Buttons</li>
+ <li><a href="components/buttons.html" data-search="">Buttons</a></li>
+ <li><a href="components/button_groups.html" data-search="Button Bar">Button Groups</a></li>
+ <li><a href="components/split_buttons.html" data-search="">Split Buttons <span class="label">JS</span></a></li>
+ <li><a href="components/dropdown_buttons.html" data-search="">Dropdown Buttons <span class="label">JS</span></a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Typography</li>
+ <li><a href="components/typography.html" data-search="Typography,Type-setting,Composition">Type</a></li>
+ <li><a href="components/inline_lists.html" data-search="Lists">Inline Lists</a></li>
+ <li><a href="components/labels.html" data-search="Tags">Labels</a></li>
+ <li><a href="components/keystrokes.html" data-search="">Keystrokes</a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Callouts & Prompts</li>
+ <li><a href="components/reveal.html" data-search="Modal">Reveal Modal <span class="label">JS</span></a></li>
+ <li><a href="components/alert_boxes.html" data-search="Error,Success,Warning">Alerts <span class="label">JS</span></a></li>
+ <li><a href="components/panels.html" data-search="Wells">Panels</a></li>
+ <li><a href="components/tooltips.html" data-search="Popover">Tooltips <span class="label">JS</span></a></li>
+ <li><a href="components/joyride.html" data-search="Tooltip Tour,Guider,Tooltip Walk-through">Joyride <span class="label">JS</span></a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Content</li>
+ <li><a href="components/dropdown.html" data-search="">Dropdowns <span class="label">JS</span></a></li>
+ <li><a href="components/pricing_tables.html" data-search="">Pricing Tables</a></li>
+ <li><a href="components/progress_bars.html" data-search="">Progress Bars</a></li>
+ <li><a href="components/tables.html" data-search="">Tables</a></li>
+ <li><a href="components/accordion.html" data-search="">Accordion <span class="label">JS</span></a></li>
+ <li><a href="components/tabs.html" data-search="">Tabs <span class="label">JS</span></a></li>
+ <li><a href="components/equalizer.html" data-search="">Equalizer <span class="label">JS</span></a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Support</li>
+
+ <li><a href="changelog.html" data-search="">Changelog</a></li>
+ <li><a href="compatibility.html" data-search="">Compatibility</a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Older Docs</li>
+ <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html" data-search="">Foundation 4</a></li>
+ <li><a href="https://get.foundation/sites/docs/v/3.2.5/" data-search="">Foundation 3</a></li>
+ <li><a href="https://get.foundation/sites/docs/v/2.2.1/" data-search="">Foundation 2</a></li>
+
+ </ul>
+ </nav>
+
</div>
+ </div>
+ </div>
+ <div class="large-9 medium-8 columns">
+ <h1 id="javascript-setup">JavaScript Setup</h1>
+ <h3 class="subheader">We streamlined how you implement Foundation plugins by combining them into a single plugin under the <code>$.fn.foundation()</code> jQuery namespace.</h3>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">data-accordion</span> <span class="hljs-attr">data-slide-speed</span>=<span class="hljs-string">"500"</span> <span class="hljs-attr">data-multi-expand</span>=<span class="hljs-string">"true"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div><p>Data options can also be set in bulk on one attribute, <code>data-options</code>. Options are written with the format <code>key: value;</code>, with a semicolon separating each option. The above example can be written using <code>data-options</code> like so:</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">data-accordion</span> <span class="hljs-attr">data-options</span>=<span class="hljs-string">"slideSpeed: 500; multiExpand: true;"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div><p>There is one exception to this rule above, in the <a href="sticky.html">Sticky</a> plugin. Because of the way you pass top and bottom anchors to that plugin, you can't include them in your <code>data-options</code> attribute. If you are using a single anchor or no declared anchor at all, you can still use <code>data-options</code>, and you can use it for all other options available.</p>
-<p><hr>
-Setting options with JavaScript involves passing an object into the constructor function, like this:</p>
-<div class="docs-code" data-docs-code><pre><code class="js"><span class="hljs-keyword">var</span> options = {multiExpand: <span class="hljs-literal">true</span>, allowAllClosed: <span class="hljs-literal">false</span>};
-<span class="hljs-keyword">var</span> accordion = <span class="hljs-keyword">new</span> Foundation.Accordion($(<span class="hljs-string">'#some-accordion'</span>), options);</code></pre></div><p>It's worth noting that options passed to plugins via JavaScript take the highest precedence, and will overwrite any default values or options applied via the <code>data-some-option</code> tag. This is also how the <code>data-options="someOption:true; someOtherOption:false"</code> options are passed into constructor functions. So, if you were to say:</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">data-accordion</span> <span class="hljs-attr">data-slide-speed</span>=<span class="hljs-string">"500"</span> <span class="hljs-attr">data-options</span>=<span class="hljs-string">"slideSpeed:250;"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div><p>your accordion element would have a slide speed of 250 milliseconds.</p>
<hr>
-<h2 id="adding-plugins-after-page-load" class="docs-heading" data-magellan-target="adding-plugins-after-page-load">Adding Plugins After Page Load<a class="docs-heading-icon" href="#adding-plugins-after-page-load"></a></h2><p>If you add new HTML to the DOM, any plugins on those elements won't be initialized by default. Re-call the <code>.foundation()</code> function to check for new plugins.</p>
-<div class="docs-code" data-docs-code><pre><code class="js">$.ajax(<span class="hljs-string">'assets/partials/kitten-carousel.html'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">data</span>) </span>{
- $(<span class="hljs-string">'#kitten-carousel'</span>).html(data).foundation();
-});</code></pre></div><hr>
-<h2 id="adding-content-to-plugins" class="docs-heading" data-magellan-target="adding-content-to-plugins">Adding Content to Plugins<a class="docs-heading-icon" href="#adding-content-to-plugins"></a></h2><p>In previous versions of Foundation, there was a method for plugins called <code>reflow</code>, though it's inclusion on plugins wasn't universal. For Foundation 6 we've added a global <code>reInit</code> method that will remove and reapply event listeners, update the plugin's instance data for relevant information, like a new tab or content pane being added, and reset any cached data the plugin may rely on.</p>
-<p>This method can be called on a plugin class:</p>
-<div class="docs-code" data-docs-code><pre><code class="js">Foundation.reInit(<span class="hljs-string">'tooltip'</span>);</code></pre></div><p>an array of plugin classes:</p>
-<div class="docs-code" data-docs-code><pre><code class="js">Foundation.reInit([<span class="hljs-string">'tooltip'</span>, <span class="hljs-string">'accordion'</span>, <span class="hljs-string">'reveal'</span>]);</code></pre></div><p>or an individual element or collection of elements selected with jQuery:</p>
-<div class="docs-code" data-docs-code><pre><code class="js">Foundation.reInit($(<span class="hljs-string">'#some-plugin'</span>));
-Foundation.reInit($(<span class="hljs-string">'.some-plugin-class'</span>));</code></pre></div><p>If passing strings, it is required to pass proper <strong>camelCased</strong> or <strong>kebab-cased</strong> plugin names. Passing <code>DropdownMenu</code> or <code>dropdown-menu</code> are equivalent.</p>
+<h3 id="installation">Installation</h3>
+<p>Foundation JavaScript was designed to work with <a href="http://jquery.com/" title="jQuery Docs">jQuery</a> right out of the gate. In the <code><head></code> section of your page add Modernizr. Modernizr acts as a shim for HTML5 elements that older browsers may not recognize, and provides detection for mobile devices:</p>
+<pre><code class="language-html"><div class="code-container"><span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"/js/vendor/modernizr.js"</span>></span><span class="javascript"></span><span class="tag"></<span class="title">script</span>></span></div></code></pre>
+<p>Before the closing <code>body</code> tag, insert JQuery and FastClick.</p>
+<h4>HTML</h4>
+
+<pre><code class="language-html"><div class="code-container"><span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"/js/vendor/jquery.js"</span>></span><span class="javascript"></span><span class="tag"></<span class="title">script</span>></span>
+<span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"/js/vendor/fastclick.js"</span>></span><span class="javascript"></span><span class="tag"></<span class="title">script</span>></span></div></code></pre>
+<p>Then either load each plugin individually, or include <code>foundation.min.js</code>, which automatically loads the Foundation Core and all JavaScript plugins.</p>
+<h4>HTML</h4>
+
+<pre><code class="language-html"><div class="code-container"><span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"/js/foundation.min.js"</span>></span><span class="javascript"></span><span class="tag"></<span class="title">script</span>></span>
+
+<span class="comment"><!-- or individually --></span>
+
+<span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"/js/foundation.js"</span>></span><span class="javascript"></span><span class="tag"></<span class="title">script</span>></span>
+<span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"/js/foundation.alert.js"</span>></span><span class="javascript"></span><span class="tag"></<span class="title">script</span>></span>
+<span class="comment"><!-- ... --></span>
+<span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"/js/foundation.dropdown.js"</span>></span><span class="javascript"></span><span class="tag"></<span class="title">script</span>></span>
+<span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"/js/foundation.tab.js"</span>></span><span class="javascript"></span><span class="tag"></<span class="title">script</span>></span></div></code></pre>
<hr>
-<h2 id="programmatic-use" class="docs-heading" data-magellan-target="programmatic-use">Programmatic Use<a class="docs-heading-icon" href="#programmatic-use"></a></h2><p>Plugins can be created programmatically in JavaScript. Every plugin is a class on the global <code>Foundation</code> object, with a constructor that accepts two parameters: an element to attach to, and an object of options.</p>
-<div class="docs-code" data-docs-code><pre><code class="js"><span class="hljs-keyword">var</span> $accordion = <span class="hljs-keyword">new</span> Foundation.Accordion($(<span class="hljs-string">'#accordion'</span>), {
- slideSpeed: <span class="hljs-number">500</span>,
- multiExpand: <span class="hljs-literal">true</span>
-});</code></pre></div><p>Most plugins have a public API that allows you to manipulate it through JavaScript. Refer to a plugin's documentation to learn what functions are available. Invoking methods is easy as pie:</p>
-<div class="docs-code" data-docs-code><pre><code class="js">$(<span class="hljs-string">'#reveal'</span>).foundation(<span class="hljs-string">'open'</span>); <span class="hljs-comment">//will open a Reveal modal with id `reveal`.</span>
-
-$(<span class="hljs-string">'[data-tabs]'</span>).eq(<span class="hljs-number">0</span>).foundation(<span class="hljs-string">'selectTab'</span>, $(<span class="hljs-string">'#example'</span>)); <span class="hljs-comment">//will change the first Tabs on the page to whatever panel you choose.</span>
-
-$(<span class="hljs-string">'.tooltip'</span>).foundation(<span class="hljs-string">'destroy'</span>); <span class="hljs-comment">//will destroy all Tooltips on the page.</span></code></pre></div><p>You can use any jQuery selector you like, and if the selector encompasses multiple plugins, they will all have the same the chosen method invoked. You pass arguments just like you would any in other JavaScript <code>function(comma, delimited, so, easy)</code>. We did make an effort to reduce the number of public methods that require arguments, but check the plugin's page to see if it requires additional information.</p>
-<p>If you are creating your plugins programmatically, you can, of course, invoke methods directly:</p>
-<div class="docs-code" data-docs-code><pre><code class="js"><span class="hljs-keyword">var</span> $modal = <span class="hljs-keyword">new</span> Foundation.Reveal($(<span class="hljs-string">'#some-modal'</span>), options);
-$modal.open();</code></pre></div><div class="callout warning">
- <p>Plugin methods prefixed with an underscore are considered part of the internal API, which means they could change, break, or disappear without warning. We recommend sticking to only the public API, which is documented on each plugin's page.</p>
-</div>
+<h3 id="initialize-foundation">Initialize Foundation</h3>
+<p>After you have included the Foundation JavaScript, just add a simple call to initialize all plugins on your page.</p>
+<p>We recommend that you initialize Foundation at the end of the page <code><body></code>.</p>
+<h4>HTML</h4>
+<pre><code class="language-html"><div class="code-container"><span class="tag"><<span class="title">script</span>></span><span class="javascript">
+ $(document).foundation();
+</span><span class="tag"></<span class="title">script</span>></span></div></code></pre>
+<p><strong>Note:</strong> We include a tested version of jQuery in the Foundation repo to get you started quickly.</p>
<hr>
-<h2 id="events" class="docs-heading" data-magellan-target="events">Events<a class="docs-heading-icon" href="#events"></a></h2><p>Every plugin fires DOM events when certain functions finish. For example, you can listen for when tabs change, or an off-canvas menu opens, and create a callback to respond to it.</p>
-<div class="docs-code" data-docs-code><pre><code class="js">$(<span class="hljs-string">'[data-tabs]'</span>).on(<span class="hljs-string">'change.zf.tabs'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
- <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Those tabs sure did change!'</span>);
-});</code></pre></div><p>Refer to each plugin's documentation to see a list of events it fires, and when they fire.</p>
-<div class="callout warning">
- <p>Starting with Foundation 6, we removed callbacks as plugin settings. All use of callbacks with plugins should be done as event listeners.</p>
-</div>
+<h3 id="adding-new-content-after-page-load">Adding New Content After Page Load</h3>
+<p>If you add new content after the page has been loaded, you will need to reinitialize the Foundation JavaScript by running the following:</p>
+<pre><code class="language-javascript"><div class="code-container">$(document).foundation();</div></code></pre>
+<p>Reflow will make Foundation check the DOM for any elements and re-apply any listeners to them.</p>
+<pre><code class="language-javascript"><div class="code-container">$(document).foundation(<span class="string">'reflow'</span>);</div></code></pre>
+<p>To be efficient, target the actual Foundation plugin you need to <code>reflow</code>:</p>
+<pre><code class="language-javascript"><div class="code-container">$(document).foundation(<span class="string">'orbit'</span>, <span class="string">'reflow'</span>);
+or
+$(document).foundation(<span class="string">'tab'</span>, <span class="string">'reflow'</span>);
+or
+$(document).foundation(<span class="string">'interchange'</span>, <span class="string">'reflow'</span>);
+etc...</div></code></pre>
-</div>
-<div class="large-3 columns" data-sticky-container>
- <nav class="columns docs-toc-wrap" data-sticky data-anchor="docs" data-sticky-on="large">
- <div class="docs-toc hide" id="docsTOC">
- <ul class="vertical menu" data-docs-toc>
- <li class="docs-nav-title">On this page:</li>
- </ul>
- </div>
- <div class="foundation-toc-ad-unit" id="TOCAdUnit">
- </div>
- </nav>
-</div>
+<hr>
+<h3 id="configuration">Configuration</h3>
+<p>Foundation offers you options to customize plugin initialization. By default, calling <code>$('#scope').foundation();</code> will initialize all available plugins on the page. Alternatively, you can pass individual plugins along with configuration options and a callback. This way, you can select which plugins you want to customize, and which are fine by default. You can take a look at the call here:</p>
+<pre><code class="language-js"><div class="code-container">$(document).foundation({tab: {toggleable: <span class="literal">false</span>}});</div></code></pre>
+<p>The call will initialize all the plugins on the page and will configure tabs with <code>toggleable</code> enabled.</p>
+<p>You can configure multiple libraries within the same call as well. Here are a few ways to make it happen:</p>
+<h4>JS</h4>
+<pre><code class="language-js"><div class="code-container">$(document).foundation({
+ reveal : {
+ animation_speed: <span class="number">500</span>
+ },
+ tooltip : {
+ disable_for_touch: <span class="literal">true</span>
+ },
+ topbar : {
+ custom_back_text: <span class="literal">false</span>,
+ is_hover: <span class="literal">false</span>,
+ mobile_show_parent_link: <span class="literal">true</span>
+ }
+});</div></code></pre>
+<p>The above will initialize all of the plugins with default settings as well as customized settings for <code>reveal</code>, <code>tooltip</code>, and <code>topbar</code>.</p>
+<h4 id="dataOptions">Data Options</h4>
+
+<p>Instead of passing the settings to the plugins using JavaScript, you can pass them through the markup using <code>data-options</code>. To pass in an option, just place it in the <code>data-options</code> HTML attribute of the element the plugin is being called on. To pass in multiple options, format them as a semicolon-delimited list:</p>
+<pre><code class="language-html"><div class="code-container"><span class="tag"><<span class="title">span</span> <span class="attribute">data-tooltip</span> <span class="attribute">data-options</span>=<span class="value">"disable_for_touch:true;touch_close_text:'close me'"</span> <span class="attribute">class</span>=<span class="value">"has-tip"</span> <span class="attribute">title</span>=<span class="value">"Tooltips are awesome!"</span>></span>Has Tooltip<span class="tag"></<span class="title">span</span>></span></div></code></pre>
+<p>A chart of of all the available data-options is below.</p>
+<div class="row">
+ <div class="twelve columns">
+ <table class="plugin-options">
+ <tbody>
+ <tr>
+ <td rowspan="5">Abide</td>
+ <td>live_validate</td>
+ <td>true</td>
+ </tr>
+ <tr>
+ <td>validate_on_blur</td>
+ <td>true</td>
+ </tr>
+ <tr>
+ <td>focus_on_invalid</td>
+ <td>true</td>
+ </tr>
+ <tr>
+ <td>error_labels</td>
+ <td>true</td>
+ </tr>
+ <tr>
+ <td>timeout</td>
+ <td>1000</td>
+ </tr>
+ <tr>
+ <td rowspan="4">Accordion</td>
+ <td>content_class</td>
+ <td>'content'</td>
+ </tr>
+ <tr>
+ <td>active_class</td>
+ <td>'active'</td>
+ </tr>
+ <tr>
+ <td>multi_expand</td>
+ <td>false</td>
+ </tr>
+ <tr>
+ <td>toggleable</td>
+ <td>true</td>
+ </tr>
+ <tr>
+ <td rowspan="4">Clearing</td>
+ <td>close_selectors</td>
+ <td>'.clearing-close'</td>
+ </tr>
+ <tr>
+ <td>open_selectors</td>
+ <td>''</td>
+ </tr>
+ <tr>
+ <td>skip_selector</td>
+ <td>''</td>
+ </tr>
+ <tr>
+ <td>touch_label</td>
+ <td>'← Swipe to Advance →'</td>
+ </tr>
+ <tr>
+ <td rowspan="2">Dropdown</td>
+ <td>active_class</td>
+ <td>'open'</td>
+ </tr>
+ <tr>
+ <td>is_hover</td>
+ <td>false</td>
+ </tr>
+ <tr>
+ <td rowspan="1">Interchange</td>
+ <td>load_attr</td>
+ <td>'interchange'</td>
+ </tr>
+ <tr>
+ <td rowspan="22">Joyride</td>
+ <td>expose</td>
+ <td>false</td>
+ </tr>
+ <tr>
+ <td>modal</td>
+ <td>true</td>
+ </tr>
+ <tr>
+ <td>keyboard</td>
+ <td>true</td>
+ </tr>
+ <tr>
+ <td>tip_location</td>
+ <td>'bottom'</td>
+ </tr>
+ <tr>
+ <td>nub_position</td>
+ <td>'auto'</td>
+ </tr>
+ <tr>
+ <td>scroll_speed</td>
+ <td>1500</td>
+ </tr>
+ <tr>
+ <td>scroll_animation</td>
+ <td>'linear'</td>
+ </tr>
+ <tr>
+ <td>timer</td>
+ <td>0</td>
+ </tr>
+ <tr>
+ <td>start_timer_on_click</td>
+ <td>true</td>
+ </tr>
+ <tr>
+ <td>start_offset</td>
+ <td>0</td>
+ </tr>
+ <tr>
+ <td>next_button</td>
+ <td>true</td>
+ </tr>
+ <tr>
+ <td>prev_button</td>
+ <td>true</td>
+ </tr>
+ <tr>
+ <td>tip_animation</td>
+ <td>'fade'</td>
+ </tr>
+ <tr>
+ <td>pause_after</td>
+ <td>[]</td>
+ </tr>
+ <tr>
+ <td>exposed</td>
+ <td>[]</td>
+ </tr>
+ <tr>
+ <td>tip_animation_fade_speed</td>
+ <td>300</td>
+ </tr>
+ <tr>
+ <td>cookie_monster</td>
+ <td>false</td>
+ </tr>
+ <tr>
+ <td>cookie_name</td>
+ <td>'joyride'</td>
+ </tr>
+ <tr>
+ <td>cookie_domain</td>
+ <td>false</td>
+ </tr>
+ <tr>
+ <td>cookie_expires</td>
+ <td>365</td>
+ </tr>
+ <tr>
+ <td>tip_container</td>
+ <td>'body'</td>
+ </tr>
+ <tr>
+ <td>expose_add_class</td>
+ <td>''</td>
+ </tr>
+ <tr>
+ <td rowspan="6">Magellan</td>
+ <td>active_class</td>
+ <td>'active'</td>
+ </tr>
+ <tr>
+ <td>threshold</td>
+ <td>0</td>
+ </tr>
+ <tr>
+ <td>destination_threshold</td>
+ <td>20</td>
+ </tr>
+ <tr>
+ <td>throttle_delay</td>
+ <td>50</td>
+ </tr>
+ <tr>
+ <td>fixed_top</td>
+ <td>0</td>
+ </tr>
+ <tr>
+ <td>offset_by_height</td>
+ <td>true</td>
+ </tr>
+ <tr>
+ <td rowspan="2">OffCanvas</td>
+ <td>open_method</td>
+ <td>'move'</td>
+ </tr>
+ <tr>
+ <td>close_on_click</td>
+ <td>false</td>
+ </tr>
+ <tr>
+ <td rowspan="31">Orbit</td>
+ <td>animation</td>
+ <td>'slide'</td>
+ </tr>
+ <tr>
+ <td>timer_speed</td>
+ <td>10000</td>
+ </tr>
+ <tr>
+ <td>pause_on_hover</td>
+ <td>true</td>
+ </tr>
+ <tr>
+ <td>resume_on_mouseout</td>
+ <td>false</td>
+ </tr>
+ <tr>
+ <td>next_on_click</td>
+ <td>true</td>
+ </tr>
+ <tr>
+ <td>animation_speed</td>
+ <td>500</td>
+ </tr>
+ <tr>
+ <td>stack_on_small</td>
+ <td>false</td>
+ </tr>
+ <tr>
+ <td>navigation_arrows</td>
+ <td>true</td>
+ </tr>
+ <tr>
+ <td>slide_number</td>
+ <td>true</td>
+ </tr>
+ <tr>
+ <td>slide_number_text</td>
+ <td>'of'</td>
+ </tr>
+ <tr>
+ <td>container_class</td>
+ <td>'orbit-container'</td>
+ </tr>
+ <tr>
+ <td>stack_on_small_class</td>
+ <td>'orbit-stack-on-small'</td>
+ </tr>
+ <tr>
+ <td>next_class</td>
+ <td>'orbit-next'</td>
+ </tr>
+ <tr>
+ <td>prev_class</td>
+ <td>'orbit-prev'</td>
+ </tr>
+ <tr>
+ <td>timer_container_class</td>
+ <td>'orbit-timer'</td>
+ </tr>
+ <tr>
+ <td>timer_paused_class</td>
+ <td>'paused'</td>
+ </tr>
+ <tr>
+ <td>timer_progress_class</td>
+ <td>'orbit-progress'</td>
+ </tr>
+ <tr>
+ <td>slides_container_class</td>
+ <td>'orbit-slides-container'</td>
+ </tr>
+ <tr>
+ <td>preloader_class</td>
+ <td>'preloader'</td>
+ </tr>
+ <tr>
+ <td>slide_selector</td>
+ <td>'*'</td>
+ </tr>
+ <tr>
+ <td>bullets_container_class</td>
+ <td>'orbit-bullets'</td>
+ </tr>
+ <tr>
+ <td>bullets_active_class</td>
+ <td>'active'</td>
+ </tr>
+ <tr>
+ <td>slide_number_class</td>
+ <td>'orbit-slide-number'</td>
+ </tr>
+ <tr>
+ <td>caption_class</td>
+ <td>'orbit-caption'</td>
+ </tr>
+ <tr>
+ <td>active_slide_class</td>
+ <td>'active'</td>
+ </tr>
+ <tr>
+ <td>orbit_transition_class</td>
+ <td>'orbit-transitioning'</td>
+ </tr>
+ <tr>
+ <td>bullets</td>
+ <td>true</td>
+ </tr>
+ <tr>
+ <td>circular</td>
+ <td>true</td>
+ </tr>
+ <tr>
+ <td>timer</td>
+ <td>true</td>
+ </tr>
+ <tr>
+ <td>variable_height</td>
+ <td>false</td>
+ </tr>
+ <tr>
+ <td>swipe</td>
+ <td>true</td>
+ </tr>
+ <tr>
+ <td rowspan="9">Reveal</td>
+ <td>animation</td>
+ <td>'fadeAndPop'</td>
+ </tr>
+ <tr>
+ <td>animation_speed</td>
+ <td>250</td>
+ </tr>
+ <tr>
+ <td>close_on_background_click</td>
+ <td>true</td>
+ </tr>
+ <tr>
+ <td>close_on_esc</td>
+ <td>true</td>
+ </tr>
+ <tr>
+ <td>dismiss_modal_class</td>
+ <td>'close-reveal-modal'</td>
+ </tr>
+ <tr>
+ <td>multiple_opened</td>
+ <td>false</td>
+ </tr>
+ <tr>
+ <td>bg_class</td>
+ <td>'reveal-modal-bg'</td>
+ </tr>
+ <tr>
+ <td>root_element</td>
+ <td>'body'</td>
+ </tr>
+ <tr>
+ <td>bg</td>
+ <td>$('.reveal-modal-bg')</td>
+ </tr>
+ <tr>
+ <td rowspan="6">Sliders</td>
+ <td>start</td>
+ <td>0</td>
+ </tr>
+ <tr>
+ <td>end</td>
+ <td>100</td>
+ </tr>
+ <tr>
+ <td>step</td>
+ <td>1</td>
+ </tr>
+ <tr>
+ <td>initial</td>
+ <td>1</td>
+ </tr>
+ <tr>
+ <td>vertical</td>
+ <td>true</td>
+ </tr>
+ <tr>
+ <td>display_selector</td>
+ <td>'#sliderOutput'</td>
+ </tr>
+ <tr>
+ <td rowspan="2">Tab</td>
+ <td>active_class</td>
+ <td>'active'</td>
+ </tr>
+ <tr>
+ <td>is_hover</td>
+ <td>false</td>
+ </tr>
+ <tr>
+ <td rowspan="7">Tooltip</td>
+ <td>selector</td>
+ <td>'.has-tip'</td>
+ </tr>
+ <tr>
+ <td>additional_inheritable_classes</td>
+ <td>[]</td>
+ </tr>
+ <tr>
+ <td>tooltip_class</td>
+ <td>'.tooltip'</td>
+ </tr>
+ <tr>
+ <td>append_to</td>
+ <td>'body'</td>
+ </tr>
+ <tr>
+ <td>touch_close_text</td>
+ <td>'Tap To Close'</td>
+ </tr>
+ <tr>
+ <td>disable_for_touch</td>
+ <td>false</td>
+ </tr>
+ <tr>
+ <td>hover_delay</td>
+ <td>50</td>
+ </tr>
+ <tr>
+ <td rowspan="7">Topbar</td>
+ <td>index</td>
+ <td>0</td>
+ </tr>
+ <tr>
+ <td>sticky_class</td>
+ <td>'sticky'</td>
+ </tr>
+ <tr>
+ <td>custom_back_text</td>
+ <td>true</td>
+ </tr>
+ <tr>
+ <td>back_text</td>
+ <td>'Back'</td>
+ </tr>
+ <tr>
+ <td>is_hover</td>
+ <td>true</td>
+ </tr>
+ <tr>
+ <td>mobile_show_parent_link</td>
+ <td>false</td>
+ </tr>
+ <tr>
+ <td>scrolltop</td>
+ <td>true</td>
+ </tr>
+ </tbody>
+ <thead>
+ <td>Plugin Name</td>
+ <td>Setting</td>
+ <td>Default Value</td>
+ </thead>
+</table>
+
+ </div>
</div>
-</article>
- </div>
- <div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
- <ul class="vertical menu docs-nav" id="docs-menu">
- <p class="docs-nav-version">
- <span data-docs-version></span>
- <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">(Changelog)</a>
- </p>
-
- <li class="docs-nav-title">Getting Started</li>
- <li><a href="installation.html">Installation</a></li>
- <li><a href="starter-projects.html">Starter Projects</a></li>
- <li><a href="compatibility.html">Compatibility</a></li>
- <li><a href="accessibility.html">Accessibility</a></li>
- <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
-
- <li class="docs-nav-title">Setup</li>
- <li><a href="global.html">Global Styles</a></li>
- <li><a href="rtl.html">Right-to-Left Support</a></li>
- <li><a href="flexbox.html">Flexbox</a></li>
- <li><a href="sass.html">Sass</a></li>
- <li class="current"><a href="javascript.html">JavaScript</a></li>
- <li><a href="javascript-utilities.html">JavaScript Utilities</a></li>
- <li><a href="media-queries.html">Media Queries</a></li>
-
- <li class="docs-nav-title">General</li>
- <li><a href="grid.html">Grid</a></li>
- <li><a href="flex-grid.html">Flex Grid</a></li>
- <li><a href="forms.html">Forms</a></li>
- <li><a href="visibility.html">Visibility Classes</a></li>
- <li><a href="float-classes.html">Float Classes</a></li>
-
- <li class="docs-nav-title">Typography</li>
- <li><a href="typography-base.html">Base Styles</a></li>
- <li><a href="typography-helpers.html">Helper Classes</a></li>
-
- <li class="docs-nav-title">Controls</li>
- <li><a href="button.html">Button</a></li>
- <li><a href="button-group.html">Button Group</a></li>
- <li><a href="close-button.html">Close Button</a></li>
- <li><a href="slider.html">Slider <span class="label">JS</span></a></li>
- <li><a href="switch.html">Switch</a></li>
-
- <li class="docs-nav-title">Navigation</li>
- <li><a href="navigation.html">Overview</a></li>
- <li><a href="menu.html">Menu</a></li>
- <li><a href="dropdown-menu.html">Dropdown Menu <span class="label">JS</span></a></li>
- <li><a href="drilldown-menu.html">Drilldown Menu <span class="label">JS</span></a></li>
- <li><a href="accordion-menu.html">Accordion Menu <span class="label">JS</span></a></li>
- <li><a href="top-bar.html">Top Bar</a></li>
- <li><a href="responsive-navigation.html">Responsive Navigation</a></li>
- <li><a href="magellan.html">Magellan <span class="label">JS</span></a></li>
- <li><a href="pagination.html">Pagination</a></li>
- <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
-
- <li class="docs-nav-title">Containers</li>
- <li><a href="accordion.html">Accordion <span class="label">JS</span></a></li>
- <li><a href="callout.html">Callout</a></li>
- <li><a href="dropdown.html">Dropdown <span class="label">JS</span></a></li>
- <li><a href="media-object.html">Media Object</a></li>
- <li><a href="off-canvas.html">Off-canvas <span class="label">JS</span></a></li>
- <li><a href="reveal.html">Reveal <span class="label">JS</span> <small>Modal</small></a></li>
- <li><a href="table.html">Table</a></li>
- <li><a href="tabs.html">Tabs <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Media</li>
- <li><a href="badge.html">Badge</a></li>
- <li><a href="flex-video.html">Flex Video</a></li>
- <li><a href="label.html">Label</a></li>
- <li><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
- <li><a href="progress-bar.html">Progress Bar</a></li>
- <li><a href="thumbnail.html">Thumbnail</a></li>
- <li><a href="tooltip.html">Tooltip <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Plugins</li>
- <li><a href="abide.html">Abide <small>Form Validation</small></a></li>
- <li><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
- <li><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
- <li><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
- <li><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
-
- <li class="docs-nav-title">Sass</li>
- <li><a href="sass-functions.html">Functions</a></li>
- <li><a href="sass-mixins.html">Mixins</a></li>
-
- <li class="docs-nav-title">Libraries</li>
- <li><a href="motion-ui.html">Motion UI</a></li>
- <li><a href="panini.html">Panini</a></li>
- <li><a href="style-sherpa.html">Style Sherpa</a></li>
-
- <li class="docs-nav-title">Older Versions</li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
- <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
- <li><a href="https://get.foundation/sites/docs/v/3.2.5/">Foundation 3</a></li>
- <li><a href="https://get.foundation/sites/docs/v/2.2.1/">Foundation 2</a></li>
- </ul>
-
- </div>
- </div>
+<hr>
+<h3 id="configure-on-the-fly">Configure on the fly</h3>
+<p>New to Foundation 5, you can now reconfigure instances of your plugin after the page has loaded and Foundation has already been initialized.</p>
+<p>Let's pretend that we have an alert that was on our page when Foundation was first initialized:</p>
+<h4>HTML</h4>
+
+<pre><code class="language-html"><div class="code-container"><span class="tag"><<span class="title">div</span> <span class="attribute">data-alert</span> <span class="attribute">class</span>=<span class="value">"alert-box"</span> <span class="attribute">id</span>=<span class="value">"myAlert"</span>></span>
+ This is a standard alert.
+ <span class="tag"><<span class="title">a</span> <span class="attribute">href</span>=<span class="value">"#"</span> <span class="attribute">class</span>=<span class="value">"close"</span>></span>&times;<span class="tag"></<span class="title">a</span>></span>
+<span class="tag"></<span class="title">div</span>></span></div></code></pre>
+<p>The default fade out speed is 300 milliseconds, if we wanted to change this to 3 seconds we could do the following:</p>
+<h4>JS</h4>
+
+<pre><code class="language-js"><div class="code-container">$(<span class="string">'#myAlert'</span>).foundation({alert: {speed: <span class="number">3000</span>}});</div></code></pre>
+<p>You can set any configuration option or callback this way.</p>
+<hr>
+<h3 id="calling-internal-methods">Calling Internal Methods</h3>
+<p>Foundation JavaScript allows you call internal plugin methods by passing the method name as the second argument. This is necessary for plugins like Joyride, which are not initialized on page load by default.</p>
+<p>This will fire the <code>start</code> method on Joyride:</p>
+<h4>JS</h4>
+
+<pre><code class="language-html"><div class="code-container">$(document).foundation('joyride', 'start');</div></code></pre>
- <!-- Small Business(Docs) -->
- <section id="studiosCallout">
- <div class="row">
- <div class="medium-4 large-4 columns">
- <img src="https://get.foundation/assets/img/smallbiz-footer.svg" alt="">
- </div>
- <div class="medium-8 large-8 columns banner-info">
- <div class="row column property-label">ZURB Foundation</div>
- <h3 class="light">Yeah, we can help with that.</h3>
- <p class="lead"> We’ll collaborate with your team throughout the entire project life cycle. We’ll take your concept and move it through ideation, hi-fi wireframes, visual design and code, all while informing you on the whys and hows along the way.</p>
- <div class="course-buttons">
- <a href="https://get.foundation/get-involved/premium-support.html" class="studios button" data-zcom-event="studios_foundation_click" id="foundationSmallV1">Show Me How →</a>
</div>
</div>
- </div>
- </section>
-
- <div class="docs-newsletter">
- <div class="row">
- <div class="medium-7 large-8 columns">
- <a target="_blank" href="https://get.foundation/learn/responsive-reading.html">
- <h5 class="">Download ZURB’s 21 Responsive Trends That Will Shape 2017</h5>
- <p style="margin-bottom: 0;">Stay informed with amazing responsive trends each month from ZURB.</p>
- </a>
+ <!-- <section id="courses-banner-large">
+ <div class="row">
+ <div class="large-5 medium-5 columns banner-image">
+ <img src="https://get.foundation/assets/img/responsive-banner-main.svg" alt="responsive design">
+ </div>
+ <div class="large-7 medium-7 columns banner-info">
+ <h3>Get a running start with Foundation</h3>
+ <p>Learn the fundamentals of the world's most advanced responsive framework in our <strong>Intro to Foundation class.</strong> You'll learn from the creators themselves on how to use Foundation and jumpstart your next project. <a href="http://zurb.com/university/courses" class="inline-hide">Learn more about classes »</a></p>
+ <a href="http://zurb.com/university/foundation-intro?utm_source=Foundation%20Docs&utm_medium=Large%20Banner&utm_campaign=Intro%20to%20Foundation" class="button">Learn More</a>
+ <a href="http://zurb.com/university/courses" class="learn-more hide-for-medium-up">Learn more about classes »</a>
+ </div>
+ </div>
+</section> -->
+ <div id="newsletter">
+ <div class="row">
+ <div class="medium-8 columns">
+ <h5>Stay on top of what’s happening in <a href="http://zurb.com/responsive">responsive design</a>.</h5>
+ <p>Sign up to receive monthly Responsive Reading highlights. <a href="http://zurb.com/responsive/reading">Read Last Month's Edition »</a></p>
+ </div>
+ <div class="medium-4 columns">
+ <form action="http://zurb.createsend.com/t/y/s/xlitlu/" method="post" id="subForm">
+ <div class="row collapse margintop-20px">
+ <div class="small-8 medium-8 columns">
+ <input id="fieldEmail" name="cm-xlitlu-xlitlu" type="email" placeholder="signup@example.com">
</div>
- <div class="medium-5 large-4 footer-signup-form columns">
- <a style="margin-bottom: 0;" target="_blank" href="https://get.foundation/learn/responsive-reading.html" class="button expanded">Download the PDF</a>
+ <div class="small-4 medium-4 columns">
+ <input type="submit" href="#" class="postfix button" value="Sign Up">
</div>
</div>
+ </form>
+ </div>
+ </div>
+</div>
+
+
+<div class="zurb-footer-top bg-fblue">
+ <div class="row property">
+ <div class="medium-4 columns">
+ <div class="property-info">
+ <h3>Foundation for Sites</h3>
+ <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
+ </p>
</div>
-
- <div class="zurb-footer-top bg-fblue">
- <div class="row property">
- <div class="medium-4 columns">
- <div class="property-info">
- <h3>Foundation for Sites</h3>
- <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
- </p>
- </div>
- </div>
-
- <div class="medium-8 columns">
- <div class="row collapse">
- <div class="medium-4 columns">
- <div class="learn-links">
- <h4 class="hide-for-small">Want more?</h4>
- <ul>
- <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
- <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
- <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
- <li><a href="http://zurb.com/university/courses">Training</a></li>
- <li><a href="http://zurb.com/library">Design Resources</a></li>
- </ul>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="support-links">
- <h4 class="hide-for-small">Talk to us</h4>
- <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
- <p><a href="https://get.foundation/get-involved/contribute.html">Get involved in<br>our amazing community.</a></p>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="connect-links">
- <h4 class="hide-for-small">Stay Updated</h4>
- <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
- <a href="http://zurb.com/news" class="small button">Stay Connected</a>
- </div>
- </div>
- </div>
+ </div>
+
+ <div class="medium-8 columns">
+ <div class="row collapse">
+ <div class="medium-4 columns">
+ <div class="learn-links">
+ <h4 class="hide-for-small">Want more?</h4>
+ <ul>
+ <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
+ <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
+ <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
+ <li><a href="http://zurb.com/university/courses">Training</a></li>
+ <li><a href="http://zurb.com/library">Design Resources</a></li>
+ </ul>
</div>
</div>
- <div class="row global">
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/studios" class="footer-link-block services">
- <span class="title">Studios</span>
- <span>Helping more than 200 startups succeed since 1998.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="https://get.foundation/" class="footer-link-block foundation">
- <span class="title">Foundation</span>
- <span>The most advanced front-end framework in the world.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/notable" class="footer-link-block apps">
- <span class="title">Notable Design Apps</span>
- <span>Prototype, iterate and collect feedback on your products.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/university" class="footer-link-block expo">
- <span class="title">University</span>
- <span>Ideas, thoughts and design resources shared with you.</span>
- </a>
+ <div class="medium-4 columns">
+ <div class="support-links">
+ <h4 class="hide-for-small">Talk to us</h4>
+ <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
+ <p><a href="https://get.foundation/business/business-support.html">Business Support</a></p>
+ <p>Or check our <a href="https://get.foundation/support/support.html">support page</a></p>
+ </div>
</div>
- </div>
- </div>
-
- <div class="zurb-footer-bottom">
- <div class="row">
- <div class="medium-4 medium-push-8 columns">
- <ul class="home-social">
- <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
- <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
- <li><a href="http://zurb.com/contact" class="mail"></a></li>
- </ul>
- </div>
- <div class="medium-8 medium-pull-4 columns">
- <a href="http://www.zurb.com" class="zurb-logo regular"></a>
- <ul class="zurb-links">
- <li><a href="http://zurb.com/about">About</a></li>
- <li><a href="http://zurb.com/blog">Blog</a></li>
- <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
- <li><a href="http://zurb.com/contact">Contact</a></li>
- <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
- </ul>
- <p class="copyright">© 1998‐2016 ZURB, Inc. All rights reserved.</p>
+ <div class="medium-4 columns">
+ <div class="connect-links">
+ <h4 class="hide-for-small">Stay Updated</h4>
+ <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
+ <a href="http://zurb.com/news" class="small button">Stay Connected</a>
</div>
</div>
</div>
-
</div>
</div>
+ <div class="row global">
+ <div class="medium-3 small-6 columns">
+ <a href="http://zurb.com/studios" class="footer-link-block services">
+ <span class="title">Studios</span>
+ <span>Helping more than 200 startups succeed since 1998.</span>
+ </a>
+ </div>
+ <div class="medium-3 small-6 columns">
+ <a href="https://get.foundation/" class="footer-link-block foundation">
+ <span class="title">Foundation</span>
+ <span>The most advanced front-end framework in the world.</span>
+ </a>
+ </div>
+ <div class="medium-3 small-6 columns">
+ <a href="http://zurb.com/notable" class="footer-link-block apps">
+ <span class="title">Notable Design Apps</span>
+ <span>Prototype, iterate and collect feedback on your products.</span>
+ </a>
+ </div>
+ <div class="medium-3 small-6 columns">
+ <a href="http://zurb.com/university" class="footer-link-block expo">
+ <span class="title">University</span>
+ <span>Ideas, thoughts and design resources shared with you.</span>
+ </a>
+ </div>
+ </div>
+</div>
+
+<div class="zurb-footer-bottom">
+ <div class="row">
+ <div class="medium-4 medium-4 push-8 columns">
+ <ul class="home-social">
+ <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
+ <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
+ <li><a href="http://zurb.com/contact" class="mail"></a></li>
+ </ul>
+ </div>
+ <div class="medium-8 medium-8 pull-4 columns">
+ <a href="http://www.zurb.com" class="zurb-logo regular"></a>
+ <ul class="zurb-links">
+ <li><a href="http://zurb.com/about">About</a></li>
+ <li><a href="http://zurb.com/blog">Blog</a></li>
+ <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
+ <li><a href="http://zurb.com/contact">Contact</a></li>
+ <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
+ </ul>
+ <p class="copyright">© 1998‐2015 ZURB, Inc. All rights reserved.</p>
+ </div>
+ </div>
+</div>
+
+ </section>
+
+ </div>
+ </div>
+
+ <script src="assets/js/templates.js"></script>
+ <script src="assets/js/all.js"></script>
+ <script>
+ var _gaq = _gaq || [];
+ _gaq.push(
+ ['_setAccount', 'UA-2195009-2'],
+ ['_trackPageview'],
+ ['b._setAccount', 'UA-2195009-27'],
+ ['b._trackPageview']
+ );
+
+ (function() {
+ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+ })();
+ </script>
+ <script>
+ $(document).foundation().foundation('joyride', 'start');
+ </script>
+ </body>
+
- <script>
- var _gaq = _gaq || [];
- _gaq.push(
- ['_setAccount', 'UA-2195009-2'],
- ['_trackPageview'],
- ['b._setAccount', 'UA-2195009-27'],
- ['b._trackPageview']
- );
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
-
- <script src="assets/js/vendor.js?hash=84afdfe8f35d6a0d5a74389c2387ec0e"></script>
- <script src="assets/js/foundation.js?hash=b1f0342008cfb1c9b2f49d337b28d64d"></script>
- <script src="assets/js/docs.js?hash=3017935fb9f01dc66dc2cc7bc11e471d"></script>
- <script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
-</body>
</html>
+++ /dev/null
-<!doctype html>
-<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
-<html class="no-js" lang="en" dir="ltr">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="Everything but.">
- <link rel="icon" href="assets/img/icons/foundation-favicon.ico" type="image/x-icon">
- <title>Foundation for Sites 6 Docs | Kitchen Sink</title>
- <link href="assets/css/docs.css?hash=ca1ed1085f860240700b03c6003948f7" rel="stylesheet" />
- <link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=cb746caa33f8d0acf9f4f0301fdf01f2" rel="stylesheet">
- <!-- <link rel="stylesheet" href="./node_modules/motion-ui/dist/motion-ui.css" /> -->
-</head>
-<body>
-
- <div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
-
- <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="mobile-ofc vertical menu">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
-
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/support.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/sort/unanswered">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
- </div>
-
- <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="vertical menu">
- <li><a href="#">Foundation</a></li>
- <li><a href="#">Dot</a></li>
- <li><a href="#">ZURB</a></li>
- <li><a href="#">Com</a></li>
- <li><a href="#">Slash</a></li>
- <li><a href="#">Sites</a></li>
- </ul>
- </div>
-
-
- <div class="off-canvas-content" data-off-canvas-content>
- <!-- Info Banner For Announcements or Links -->
- <!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
- <div class="info">
- <h5>Foundation 6 is here!</h5>
- </div>
- </a> -->
-
- <nav class="marketing-topbar show-for-medium">
-
- <ul class="menu">
- <li class="topbar-title"><a href="https://get.foundation/index.html"><img src="assets/img/logos/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
- </ul>
-
- <ul class="dropdown menu" data-dropdown-menu data-click-open="false">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/" target="_blank">F5 Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="https://get.foundation/emails/docs/" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
-
- </nav>
-
- <div class="title-bar hide-for-medium">
- <div class="title-bar-left">
- <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
- <span class="title-bar-title">Foundation</span>
- </div>
- </div>
-
-
- <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
-
- <div class="expanded row">
- <div class="medium-9 large-10 medium-push-3 large-push-2 columns">
-
-<article class="docs-component" id="docs-kitchen-sink">
-
-<a href="#docs-menu" class="small secondary expanded button hide-for-medium">Jump to Nav</a>
-
-<header>
- <h1 class="docs-page-title">Kitchen Sink</h1>
-
-
- <p class="lead docs-page-lead">Everything but.</p>
-
- <ul class="menu simple docs-contribute-menu">
- <li><a href="https://github.com/zurb/foundation-sites/edit/master/docs/pages/kitchen-sink.md" target="_blank"><i class="fi-pencil"></i>Edit this Page</a></li>
- <li><a href="https://github.com/zurb/foundation-sites/issues/new?title=%5BKitchen%20Sink%5D%20ISSUE%20NAME%20HERE" target="_blank"><i class="fi-social-github"></i>Report a Bug</a></li>
- <li><a href="https://get.foundation/forum" target="_blank"><i class="fi-comment"></i>Get Help</a></li>
- </ul>
-</header>
-
-<hr>
-
-<div class="row">
-
-<div class="large-9 columns" id="docs">
-
-<h2 id="abide" class="docs-heading" data-magellan-target="abide">Abide<a class="docs-heading-icon" href="#abide"></a></h2><div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">data-abide</span> <span class="hljs-attr">novalidate</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">data-abide-error</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"alert callout"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"display: none;"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"fi-alert"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> There are some errors in your form.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-12 columns"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Number Required
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"1234"</span> <span class="hljs-attr">aria-describedby</span>=<span class="hljs-string">"exampleHelpText"</span> <span class="hljs-attr">required</span> <span class="hljs-attr">pattern</span>=<span class="hljs-string">"number"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-error"</span>></span>
- Yo, you had better fill this out, it's required.
- <span class="hljs-tag"></<span class="hljs-name">span</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"help-text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"exampleHelpText"</span>></span>Here's how you use this input field!<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-12 columns"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Nothing Required!
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Use me, or don't"</span> <span class="hljs-attr">aria-describedby</span>=<span class="hljs-string">"exampleHelpTex"</span> <span class="hljs-attr">data-abide-ignore</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"help-text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"exampleHelpTex"</span>></span>This input is ignored by Abide using `data-abide-ignore`<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-12 columns"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Password Required
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"password"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"password"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"yeti4preZ"</span> <span class="hljs-attr">aria-describedby</span>=<span class="hljs-string">"exampleHelpText"</span> <span class="hljs-attr">required</span> ></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-error"</span>></span>
- I'm required!
- <span class="hljs-tag"></<span class="hljs-name">span</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"help-text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"exampleHelpText"</span>></span>Enter a password please.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-12 columns"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Re-enter Password
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"password"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"yeti4preZ"</span> <span class="hljs-attr">aria-describedby</span>=<span class="hljs-string">"exampleHelpText2"</span> <span class="hljs-attr">required</span> <span class="hljs-attr">pattern</span>=<span class="hljs-string">"alpha_numeric"</span> <span class="hljs-attr">data-equalto</span>=<span class="hljs-string">"password"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-error"</span>></span>
- Hey, passwords are supposed to match!
- <span class="hljs-tag"></<span class="hljs-name">span</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"help-text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"exampleHelpText2"</span>></span>This field is using the `data-equalto="password"` attribute, causing it to match the password field above.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"medium-6 columns"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">label</span>></span>URL Pattern, not required, but throws error if it doesn't match the Regular Expression for a valid URL.
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"https://get.foundation"</span> <span class="hljs-attr">pattern</span>=<span class="hljs-string">"url"</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"medium-6 columns"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">label</span>></span>European Cars, Choose One, it can't be the blank option.
- <span class="hljs-tag"><<span class="hljs-name">select</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"select"</span> <span class="hljs-attr">required</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">""</span>></span><span class="hljs-tag"></<span class="hljs-name">option</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"volvo"</span>></span>Volvo<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"saab"</span>></span>Saab<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"mercedes"</span>></span>Mercedes<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"audi"</span>></span>Audi<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">select</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">fieldset</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"large-6 columns"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">legend</span>></span>Choose Your Favorite, and this is required, so you have to pick one.<span class="hljs-tag"></<span class="hljs-name">legend</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"pokemon"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"Red"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"pokemonRed"</span>></span><span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"pokemonRed"</span>></span>Red<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"pokemon"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"Blue"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"pokemonBlue"</span> <span class="hljs-attr">required</span>></span><span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"pokemonBlue"</span>></span>Blue<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"pokemon"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"Yellow"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"pokemonYellow"</span>></span><span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"pokemonYellow"</span>></span>Yellow<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">fieldset</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">fieldset</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"large-6 columns"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">legend</span>></span>Choose Your Favorite - not required, you can leave this one blank.<span class="hljs-tag"></<span class="hljs-name">legend</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"pockets"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"Red"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"pocketsRed"</span>></span><span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"pocketsRed"</span>></span>Red<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"pockets"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"Blue"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"pocketsBlue"</span>></span><span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"pocketsBlue"</span>></span>Blue<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"pockets"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"Yellow"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"pocketsYellow"</span>></span><span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"pocketsYellow"</span>></span>Yellow<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">fieldset</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">fieldset</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"large-6 columns"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">legend</span>></span>Check these out<span class="hljs-tag"></<span class="hljs-name">legend</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"checkbox1"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>></span><span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"checkbox1"</span>></span>Checkbox 1<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"checkbox2"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">required</span>></span><span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"checkbox2"</span>></span>Checkbox 2<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"checkbox3"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>></span><span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"checkbox3"</span>></span>Checkbox 3<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">fieldset</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">fieldset</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"large-6 columns"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"submit"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"Submit"</span>></span>Submit<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">fieldset</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">fieldset</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"large-6 columns"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"reset"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"Reset"</span>></span>Reset<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">fieldset</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">form</span>></span></code></pre></div>
-
-<div class="docs-code-live"><form data-abide novalidate>
- <div data-abide-error class="alert callout" style="display: none;">
- <p><i class="fi-alert"></i> There are some errors in your form.</p>
- </div>
- <div class="row">
- <div class="small-12 columns">
- <label>Number Required
- <input type="text" placeholder="1234" aria-describedby="exampleHelpText" required pattern="number">
- <span class="form-error">
- Yo, you had better fill this out, it's required.
- </span>
- </label>
- <p class="help-text" id="exampleHelpText">Here's how you use this input field!</p>
- </div>
- <div class="small-12 columns">
- <label>Nothing Required!
- <input type="text" placeholder="Use me, or don't" aria-describedby="exampleHelpTex" data-abide-ignore>
- </label>
- <p class="help-text" id="exampleHelpTex">This input is ignored by Abide using `data-abide-ignore`</p>
- </div>
- <div class="small-12 columns">
- <label>Password Required
- <input type="password" id="password" placeholder="yeti4preZ" aria-describedby="exampleHelpText" required >
- <span class="form-error">
- I'm required!
- </span>
- </label>
- <p class="help-text" id="exampleHelpText">Enter a password please.</p>
- </div>
- <div class="small-12 columns">
- <label>Re-enter Password
- <input type="password" placeholder="yeti4preZ" aria-describedby="exampleHelpText2" required pattern="alpha_numeric" data-equalto="password">
- <span class="form-error">
- Hey, passwords are supposed to match!
- </span>
- </label>
- <p class="help-text" id="exampleHelpText2">This field is using the `data-equalto="password"` attribute, causing it to match the password field above.</p>
- </div>
- </div>
- <div class="row">
- <div class="medium-6 columns">
- <label>URL Pattern, not required, but throws error if it doesn't match the Regular Expression for a valid URL.
- <input type="text" placeholder="https://get.foundation" pattern="url">
- </label>
- </div>
- <div class="medium-6 columns">
- <label>European Cars, Choose One, it can't be the blank option.
- <select id="select" required>
- <option value=""></option>
- <option value="volvo">Volvo</option>
- <option value="saab">Saab</option>
- <option value="mercedes">Mercedes</option>
- <option value="audi">Audi</option>
- </select>
- </label>
- </div>
- </div>
- <div class="row">
- <fieldset class="large-6 columns">
- <legend>Choose Your Favorite, and this is required, so you have to pick one.</legend>
- <input type="radio" name="pokemon" value="Red" id="pokemonRed"><label for="pokemonRed">Red</label>
- <input type="radio" name="pokemon" value="Blue" id="pokemonBlue" required><label for="pokemonBlue">Blue</label>
- <input type="radio" name="pokemon" value="Yellow" id="pokemonYellow"><label for="pokemonYellow">Yellow</label>
- </fieldset>
- <fieldset class="large-6 columns">
- <legend>Choose Your Favorite - not required, you can leave this one blank.</legend>
- <input type="radio" name="pockets" value="Red" id="pocketsRed"><label for="pocketsRed">Red</label>
- <input type="radio" name="pockets" value="Blue" id="pocketsBlue"><label for="pocketsBlue">Blue</label>
- <input type="radio" name="pockets" value="Yellow" id="pocketsYellow"><label for="pocketsYellow">Yellow</label>
- </fieldset>
- <fieldset class="large-6 columns">
- <legend>Check these out</legend>
- <input id="checkbox1" type="checkbox"><label for="checkbox1">Checkbox 1</label>
- <input id="checkbox2" type="checkbox" required><label for="checkbox2">Checkbox 2</label>
- <input id="checkbox3" type="checkbox"><label for="checkbox3">Checkbox 3</label>
- </fieldset>
- </div>
- <div class="row">
- <fieldset class="large-6 columns">
- <button class="button" type="submit" value="Submit">Submit</button>
- </fieldset>
- <fieldset class="large-6 columns">
- <button class="button" type="reset" value="Reset">Reset</button>
- </fieldset>
- </div>
-</form></div><hr>
-<h2 id="accordion" class="docs-heading" data-magellan-target="accordion">Accordion<a class="docs-heading-icon" href="#accordion"></a></h2><div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion"</span> <span class="hljs-attr">data-accordion</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"tablist"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion-item is-active"</span>></span>
- <span class="hljs-comment"><!-- The tab title needs role="tab", an href, a unique ID, and aria-controls. --></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#panel1d"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"tab"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion-title"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"panel1d-heading"</span> <span class="hljs-attr">aria-controls</span>=<span class="hljs-string">"panel1d"</span>></span>Accordion 1<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-comment"><!-- The content pane needs an ID that matches the above href, role="tabpanel", data-tab-content, and aria-labelledby. --></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"panel1d"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion-content"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"tabpanel"</span> <span class="hljs-attr">data-tab-content</span> <span class="hljs-attr">aria-labelledby</span>=<span class="hljs-string">"panel1d-heading"</span>></span>
- Panel 1. Lorem ipsum dolor
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion-item"</span>></span>
- <span class="hljs-comment"><!-- The tab title needs role="tab", an href, a unique ID, and aria-controls. --></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#panel1d"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"tab"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion-title"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"panel1d-heading"</span> <span class="hljs-attr">aria-controls</span>=<span class="hljs-string">"panel1d"</span>></span>Accordion 1<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-comment"><!-- The content pane needs an ID that matches the above href, role="tabpanel", data-tab-content, and aria-labelledby. --></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"panel1d"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion-content"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"tabpanel"</span> <span class="hljs-attr">data-tab-content</span> <span class="hljs-attr">aria-labelledby</span>=<span class="hljs-string">"panel1d-heading"</span>></span>
- Panel 2. Lorem ipsum dolor
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion-item"</span>></span>
- <span class="hljs-comment"><!-- The tab title needs role="tab", an href, a unique ID, and aria-controls. --></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#panel1d"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"tab"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion-title"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"panel1d-heading"</span> <span class="hljs-attr">aria-controls</span>=<span class="hljs-string">"panel1d"</span>></span>Accordion 1<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-comment"><!-- The content pane needs an ID that matches the above href, role="tabpanel", data-tab-content, and aria-labelledby. --></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"panel1d"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion-content"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"tabpanel"</span> <span class="hljs-attr">data-tab-content</span> <span class="hljs-attr">aria-labelledby</span>=<span class="hljs-string">"panel1d-heading"</span>></span>
- Panel 3. Lorem ipsum dolor
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">li</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">ul</span>></span></code></pre></div>
-
-<div class="docs-code-live"><ul class="accordion" data-accordion role="tablist">
- <li class="accordion-item is-active">
- <!-- The tab title needs role="tab", an href, a unique ID, and aria-controls. -->
- <a href="#panel1d" role="tab" class="accordion-title" id="panel1d-heading" aria-controls="panel1d">Accordion 1</a>
- <!-- The content pane needs an ID that matches the above href, role="tabpanel", data-tab-content, and aria-labelledby. -->
- <div id="panel1d" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel1d-heading">
- Panel 1. Lorem ipsum dolor
- </div>
- </li>
- <li class="accordion-item">
- <!-- The tab title needs role="tab", an href, a unique ID, and aria-controls. -->
- <a href="#panel1d" role="tab" class="accordion-title" id="panel1d-heading" aria-controls="panel1d">Accordion 1</a>
- <!-- The content pane needs an ID that matches the above href, role="tabpanel", data-tab-content, and aria-labelledby. -->
- <div id="panel1d" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel1d-heading">
- Panel 2. Lorem ipsum dolor
- </div>
- </li>
- <li class="accordion-item">
- <!-- The tab title needs role="tab", an href, a unique ID, and aria-controls. -->
- <a href="#panel1d" role="tab" class="accordion-title" id="panel1d-heading" aria-controls="panel1d">Accordion 1</a>
- <!-- The content pane needs an ID that matches the above href, role="tabpanel", data-tab-content, and aria-labelledby. -->
- <div id="panel1d" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel1d-heading">
- Panel 3. Lorem ipsum dolor
- </div>
- </li>
-</ul></div><hr>
-<h2 id="accordion-menu" class="docs-heading" data-magellan-target="accordion-menu">Accordion Menu<a class="docs-heading-icon" href="#accordion-menu"></a></h2><div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"vertical menu"</span> <span class="hljs-attr">data-accordion-menu</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 1<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu vertical nested is-active"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 1A<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu vertical nested"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 1Ai<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 1Aii<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 1Aiii<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 1B<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 1C<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 2<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu vertical nested"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 2A<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 2B<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 3<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">ul</span>></span></code></pre></div>
-
-<div class="docs-code-live"><ul class="vertical menu" data-accordion-menu>
- <li>
- <a href="#">Item 1</a>
- <ul class="menu vertical nested is-active">
- <li>
- <a href="#">Item 1A</a>
- <ul class="menu vertical nested">
- <li><a href="#">Item 1Ai</a></li>
- <li><a href="#">Item 1Aii</a></li>
- <li><a href="#">Item 1Aiii</a></li>
- </ul>
- </li>
- <li><a href="#">Item 1B</a></li>
- <li><a href="#">Item 1C</a></li>
- </ul>
- </li>
- <li>
- <a href="#">Item 2</a>
- <ul class="menu vertical nested">
- <li><a href="#">Item 2A</a></li>
- <li><a href="#">Item 2B</a></li>
- </ul>
- </li>
- <li><a href="#">Item 3</a></li>
-</ul></div><hr>
-<h2 id="badge" class="docs-heading" data-magellan-target="badge">Badge<a class="docs-heading-icon" href="#badge"></a></h2><div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"secondary badge"</span>></span>2<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"success badge"</span>></span>3<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"alert badge"</span>></span>A<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"warning badge"</span>></span>B<span class="hljs-tag"></<span class="hljs-name">span</span>></span></code></pre></div>
-
-<div class="docs-code-live"><span class="secondary badge">2</span>
-<span class="success badge">3</span>
-<span class="alert badge">A</span>
-<span class="warning badge">B</span></div><hr>
-<h2 id="breadcrumbs" class="docs-heading" data-magellan-target="breadcrumbs">Breadcrumbs<a class="docs-heading-icon" href="#breadcrumbs"></a></h2><div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">nav</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"You are here:"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"navigation"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"breadcrumbs"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Home<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Features<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"disabled"</span>></span>Gene Splicing<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"show-for-sr"</span>></span>Current: <span class="hljs-tag"></<span class="hljs-name">span</span>></span> Cloning
- <span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">nav</span>></span></code></pre></div>
-
-<div class="docs-code-live"><nav aria-label="You are here:" role="navigation">
- <ul class="breadcrumbs">
- <li><a href="#">Home</a></li>
- <li><a href="#">Features</a></li>
- <li class="disabled">Gene Splicing</li>
- <li>
- <span class="show-for-sr">Current: </span> Cloning
- </li>
- </ul>
-</nav></div><hr>
-<h2 id="button" class="docs-heading" data-magellan-target="button">Button<a class="docs-heading-icon" href="#button"></a></h2><div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-comment"><!-- Anchors (links) --></span>
-<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button"</span>></span>Learn More<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#features"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button"</span>></span>View All Features<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
-
-<span class="hljs-comment"><!-- Buttons (actions) --></span>
-<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"success button"</span>></span>Save<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"alert button"</span>></span>Delete<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
-
-<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tiny button"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>So Tiny<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small button"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>So Small<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"large button"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>So Large<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"expanded button"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Such Expand<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
-
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button-group"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button"</span>></span>One<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button"</span>></span>Two<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button"</span>></span>Three<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><!-- Anchors (links) -->
-<a href="#" class="button">Learn More</a>
-<a href="#features" class="button">View All Features</a>
-
-<!-- Buttons (actions) -->
-<button type="button" class="success button">Save</button>
-<button type="button" class="alert button">Delete</button>
-
-<a class="tiny button" href="#">So Tiny</a>
-<a class="small button" href="#">So Small</a>
-<a class="large button" href="#">So Large</a>
-<a class="expanded button" href="#">Such Expand</a>
-
-<div class="button-group">
- <a class="button">One</a>
- <a class="button">Two</a>
- <a class="button">Three</a>
-</div></div><hr>
-<h2 id="callout" class="docs-heading" data-magellan-target="callout">Callout<a class="docs-heading-icon" href="#callout"></a></h2><div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"callout"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">h5</span>></span>This is a callout.<span class="hljs-tag"></<span class="hljs-name">h5</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span>It has an easy to override visual style, and is appropriately subdued.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>It's dangerous to go alone, take this.<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"callout secondary"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">h5</span>></span>This is a secondary callout<span class="hljs-tag"></<span class="hljs-name">h5</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span>It has an easy to override visual style, and is appropriately subdued.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>It's dangerous to go alone, take this.<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"callout success"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">h5</span>></span>This is a success callout<span class="hljs-tag"></<span class="hljs-name">h5</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span>It has an easy to override visual style, and is appropriately subdued.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>It's dangerous to go alone, take this.<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"callout warning"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">h5</span>></span>This is a warning callout<span class="hljs-tag"></<span class="hljs-name">h5</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span>It has an easy to override visual style, and is appropriately subdued.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>It's dangerous to go alone, take this.<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"callout alert"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">h5</span>></span>This is an alert callout<span class="hljs-tag"></<span class="hljs-name">h5</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span>It has an easy to override visual style, and is appropriately subdued.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>It's dangerous to go alone, take this.<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="callout">
- <h5>This is a callout.</h5>
- <p>It has an easy to override visual style, and is appropriately subdued.</p>
- <a href="#">It's dangerous to go alone, take this.</a>
-</div>
-
-<div class="callout secondary">
- <h5>This is a secondary callout</h5>
- <p>It has an easy to override visual style, and is appropriately subdued.</p>
- <a href="#">It's dangerous to go alone, take this.</a>
-</div>
-
-<div class="callout success">
- <h5>This is a success callout</h5>
- <p>It has an easy to override visual style, and is appropriately subdued.</p>
- <a href="#">It's dangerous to go alone, take this.</a>
-</div>
-
-<div class="callout warning">
- <h5>This is a warning callout</h5>
- <p>It has an easy to override visual style, and is appropriately subdued.</p>
- <a href="#">It's dangerous to go alone, take this.</a>
-</div>
-
-<div class="callout alert">
- <h5>This is an alert callout</h5>
- <p>It has an easy to override visual style, and is appropriately subdued.</p>
- <a href="#">It's dangerous to go alone, take this.</a>
-</div></div><hr>
-<h2 id="close-button" class="docs-heading" data-magellan-target="close-button">Close Button<a class="docs-heading-icon" href="#close-button"></a></h2><div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"callout"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"close-button"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close alert"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">aria-hidden</span>=<span class="hljs-string">"true"</span>></span>&times;<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">button</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span>This is a static close button example.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="callout">
- <button class="close-button" aria-label="Close alert" type="button">
- <span aria-hidden="true">×</span>
- </button>
- <p>This is a static close button example.</p>
-</div></div><hr>
-<h2 id="drilldown-menu" class="docs-heading" data-magellan-target="drilldown-menu">Drilldown Menu<a class="docs-heading-icon" href="#drilldown-menu"></a></h2><div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"vertical menu"</span> <span class="hljs-attr">data-drilldown</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 200px"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"m1"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 1<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"vertical menu"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"m2"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 1A<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"vertical menu"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"m3"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 1Aa<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 1Ba<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 1Ca<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 1Da<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 1Ea<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 1B<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 1C<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 1D<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 1E<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 2<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"vertical menu"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 2A<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 2B<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 2C<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 2D<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 2E<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 3<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"vertical menu"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 3A<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 3B<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 3C<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 3D<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 3E<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">'#'</span>></span> Item 4<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">ul</span>></span></code></pre></div>
-
-<div class="docs-code-live"><ul class="vertical menu" data-drilldown style="width: 200px" id="m1">
- <li>
- <a href="#">Item 1</a>
- <ul class="vertical menu" id="m2">
- <li>
- <a href="#">Item 1A</a>
- <ul class="vertical menu" id="m3">
- <li><a href="#">Item 1Aa</a></li>
- <li><a href="#">Item 1Ba</a></li>
- <li><a href="#">Item 1Ca</a></li>
- <li><a href="#">Item 1Da</a></li>
- <li><a href="#">Item 1Ea</a></li>
- </ul>
- </li>
- <li><a href="#">Item 1B</a></li>
- <li><a href="#">Item 1C</a></li>
- <li><a href="#">Item 1D</a></li>
- <li><a href="#">Item 1E</a></li>
- </ul>
- </li>
- <li>
- <a href="#">Item 2</a>
- <ul class="vertical menu">
- <li><a href="#">Item 2A</a></li>
- <li><a href="#">Item 2B</a></li>
- <li><a href="#">Item 2C</a></li>
- <li><a href="#">Item 2D</a></li>
- <li><a href="#">Item 2E</a></li>
- </ul>
- </li>
- <li>
- <a href="#">Item 3</a>
- <ul class="vertical menu">
- <li><a href="#">Item 3A</a></li>
- <li><a href="#">Item 3B</a></li>
- <li><a href="#">Item 3C</a></li>
- <li><a href="#">Item 3D</a></li>
- <li><a href="#">Item 3E</a></li>
- </ul>
- </li>
- <li><a href='#'> Item 4</a></li>
-</ul></div><hr>
-<h2 id="dropdown-menu" class="docs-heading" data-magellan-target="dropdown-menu">Dropdown Menu<a class="docs-heading-icon" href="#dropdown-menu"></a></h2><div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"dropdown menu"</span> <span class="hljs-attr">data-dropdown-menu</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span>></span>Item 1<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 1A Loooong<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">'#'</span>></span> Item 1 sub<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">'menu'</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">'#'</span>></span>Item 1 subA<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">'#'</span>></span>Item 1 subB<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">'#'</span>></span> Item 1 sub<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">'menu'</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">'#'</span>></span>Item 1 subA<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">'#'</span>></span>Item 1 subB<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">'#'</span>></span> Item 1 sub<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">'menu'</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">'#'</span>></span>Item 1 subA<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 1B<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 2<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 2A<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 2B<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 3<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">'#'</span>></span>Item 4<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">ul</span>></span></code></pre></div>
-
-<div class="docs-code-live"><ul class="dropdown menu" data-dropdown-menu>
- <li>
- <a>Item 1</a>
- <ul class="menu">
- <li><a href="#">Item 1A Loooong</a></li>
- <li>
- <a href='#'> Item 1 sub</a>
- <ul class='menu'>
- <li><a href='#'>Item 1 subA</a></li>
- <li><a href='#'>Item 1 subB</a></li>
- <li>
- <a href='#'> Item 1 sub</a>
- <ul class='menu'>
- <li><a href='#'>Item 1 subA</a></li>
- <li><a href='#'>Item 1 subB</a></li>
- </ul>
- </li>
- <li>
- <a href='#'> Item 1 sub</a>
- <ul class='menu'>
- <li><a href='#'>Item 1 subA</a></li>
- </ul>
- </li>
- </ul>
- </li>
- <li><a href="#">Item 1B</a></li>
- </ul>
- </li>
- <li>
- <a href="#">Item 2</a>
- <ul class="menu">
- <li><a href="#">Item 2A</a></li>
- <li><a href="#">Item 2B</a></li>
- </ul>
- </li>
- <li><a href="#">Item 3</a></li>
- <li><a href='#'>Item 4</a></li>
-</ul></div><hr>
-<h2 id="dropdown-pane" class="docs-heading" data-magellan-target="dropdown-pane">Dropdown Pane<a class="docs-heading-icon" href="#dropdown-pane"></a></h2><div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">data-toggle</span>=<span class="hljs-string">"example-dropdown"</span>></span>Toggle Dropdown<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"dropdown-pane"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example-dropdown"</span> <span class="hljs-attr">data-dropdown</span>></span>
- Just some junk that needs to be said. Or not. Your choice.
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><button class="button" type="button" data-toggle="example-dropdown">Toggle Dropdown</button>
-<div class="dropdown-pane" id="example-dropdown" data-dropdown>
- Just some junk that needs to be said. Or not. Your choice.
-</div></div><hr>
-<h2 id="equalizer" class="docs-heading" data-magellan-target="equalizer">Equalizer<a class="docs-heading-icon" href="#equalizer"></a></h2><div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span> <span class="hljs-attr">data-equalizer</span> <span class="hljs-attr">data-equalize-on</span>=<span class="hljs-string">"medium"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"test-eq"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"medium-4 columns"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"callout"</span> <span class="hljs-attr">data-equalizer-watch</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>= <span class="hljs-string">"assets/img/generic/square-1.jpg"</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"medium-4 columns"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"callout"</span> <span class="hljs-attr">data-equalizer-watch</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Pellentesque habitant morbi tristique senectus et netus et, ante.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"medium-4 columns"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"callout"</span> <span class="hljs-attr">data-equalizer-watch</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>= <span class="hljs-string">"assets/img/generic/rectangle-1.jpg"</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="row" data-equalizer data-equalize-on="medium" id="test-eq">
- <div class="medium-4 columns">
- <div class="callout" data-equalizer-watch>
- <img src= "assets/img/generic/square-1.jpg">
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="callout" data-equalizer-watch>
- <p>Pellentesque habitant morbi tristique senectus et netus et, ante.</p>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="callout" data-equalizer-watch>
- <img src= "assets/img/generic/rectangle-1.jpg">
- </div>
- </div>
-</div></div><hr>
-<h2 id="flex-grid" class="docs-heading" data-magellan-target="flex-grid">Flex Grid<a class="docs-heading-icon" href="#flex-grid"></a></h2><div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-6 columns"</span>></span>6 columns<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-6 columns"</span>></span>6 columns<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"medium-6 large-4 columns"</span>></span>12/6/4 columns<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"medium-6 large-8 columns"</span>></span>12/6/8 columns<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div><div class="row display">
- <div class="small-6 columns">6 columns</div>
- <div class="small-6 columns">6 columns</div>
-</div>
-<div class="row display">
- <div class="medium-6 large-4 columns">12/6/4 columns</div>
- <div class="medium-6 large-8 columns">12/6/8 columns</div>
-</div>
-
-<hr>
-<h2 id="flex-video" class="docs-heading" data-magellan-target="flex-video">Flex Video<a class="docs-heading-icon" href="#flex-video"></a></h2><div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex-video"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">iframe</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"420"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"315"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://www.youtube.com/embed/V9gkYw35Vws"</span> <span class="hljs-attr">frameborder</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">allowfullscreen</span>></span><span class="hljs-tag"></<span class="hljs-name">iframe</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="flex-video">
- <iframe width="420" height="315" src="https://www.youtube.com/embed/V9gkYw35Vws" frameborder="0" allowfullscreen></iframe>
-</div></div><hr>
-<h2 id="float-classes" class="docs-heading" data-magellan-target="float-classes">Float Classes<a class="docs-heading-icon" href="#float-classes"></a></h2><div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"callout clearfix"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button float-left"</span>></span>Left<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button float-right"</span>></span>Right<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="callout clearfix">
- <a class="button float-left">Left</a>
- <a class="button float-right">Right</a>
-</div></div><hr>
-<h2 id="forms" class="docs-heading" data-magellan-target="forms">Forms<a class="docs-heading-icon" href="#forms"></a></h2><div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">form</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Input Label
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">".small-12.columns"</span> <span class="hljs-attr">aria-describedby</span>=<span class="hljs-string">"exampleHelpText"</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"help-text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"exampleHelpText"</span>></span>Here's how you use this input field!<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">label</span>></span>
- How many puppies?
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"number"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"100"</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">label</span>></span>
- What books did you read over summer break?
- <span class="hljs-tag"><<span class="hljs-name">textarea</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"None"</span>></span><span class="hljs-tag"></<span class="hljs-name">textarea</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Select Menu
- <span class="hljs-tag"><<span class="hljs-name">select</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"husker"</span>></span>Husker<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"starbuck"</span>></span>Starbuck<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"hotdog"</span>></span>Hot Dog<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"apollo"</span>></span>Apollo<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">select</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">fieldset</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"large-6 columns"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">legend</span>></span>Choose Your Favorite<span class="hljs-tag"></<span class="hljs-name">legend</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"pokemon"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"Red"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"pokemonRed"</span> <span class="hljs-attr">required</span>></span><span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"pokemonRed"</span>></span>Red<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"pokemon"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"Blue"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"pokemonBlue"</span>></span><span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"pokemonBlue"</span>></span>Blue<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"pokemon"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"Yellow"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"pokemonYellow"</span>></span><span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"pokemonYellow"</span>></span>Yellow<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">fieldset</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">fieldset</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"large-6 columns"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">legend</span>></span>Check these out<span class="hljs-tag"></<span class="hljs-name">legend</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"checkbox1"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>></span><span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"checkbox1"</span>></span>Checkbox 1<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"checkbox2"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>></span><span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"checkbox2"</span>></span>Checkbox 2<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"checkbox3"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>></span><span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"checkbox3"</span>></span>Checkbox 3<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">fieldset</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-3 columns"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"middle-label"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-right middle"</span>></span>Label<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-9 columns"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"middle-label"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Right- and middle-aligned text input"</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"input-group"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"input-group-label"</span>></span>$<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"input-group-field"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"url"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"input-group-button button"</span>></span>Submit<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">form</span>></span></code></pre></div>
-
-<div class="docs-code-live"><form>
- <label>Input Label
- <input type="text" placeholder=".small-12.columns" aria-describedby="exampleHelpText">
- </label>
- <p class="help-text" id="exampleHelpText">Here's how you use this input field!</p>
- <label>
- How many puppies?
- <input type="number" value="100">
- </label>
- <label>
- What books did you read over summer break?
- <textarea placeholder="None"></textarea>
- </label>
- <label>Select Menu
- <select>
- <option value="husker">Husker</option>
- <option value="starbuck">Starbuck</option>
- <option value="hotdog">Hot Dog</option>
- <option value="apollo">Apollo</option>
- </select>
- </label>
- <div class="row">
- <fieldset class="large-6 columns">
- <legend>Choose Your Favorite</legend>
- <input type="radio" name="pokemon" value="Red" id="pokemonRed" required><label for="pokemonRed">Red</label>
- <input type="radio" name="pokemon" value="Blue" id="pokemonBlue"><label for="pokemonBlue">Blue</label>
- <input type="radio" name="pokemon" value="Yellow" id="pokemonYellow"><label for="pokemonYellow">Yellow</label>
- </fieldset>
- <fieldset class="large-6 columns">
- <legend>Check these out</legend>
- <input id="checkbox1" type="checkbox"><label for="checkbox1">Checkbox 1</label>
- <input id="checkbox2" type="checkbox"><label for="checkbox2">Checkbox 2</label>
- <input id="checkbox3" type="checkbox"><label for="checkbox3">Checkbox 3</label>
- </fieldset>
- </div>
- <div class="row">
- <div class="small-3 columns">
- <label for="middle-label" class="text-right middle">Label</label>
- </div>
- <div class="small-9 columns">
- <input type="text" id="middle-label" placeholder="Right- and middle-aligned text input">
- </div>
- </div>
- <div class="input-group">
- <span class="input-group-label">$</span>
- <input class="input-group-field" type="url">
- <a class="input-group-button button">Submit</a>
- </div>
-</form></div><hr>
-<h2 id="grid" class="docs-heading" data-magellan-target="grid">Grid<a class="docs-heading-icon" href="#grid"></a></h2><div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-2 medium-3 large-4 columns"</span>></span>2/3/4 columns<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-4 medium-3 large-4 columns"</span>></span>4/3/4 columns<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-6 large-4 columns"</span>></span>6/6/4 columns<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"large-3 columns"</span>></span>12/12/3 columns<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"large-6 columns"</span>></span>12/12/6 columns<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"large-3 columns"</span>></span>12/12/3 columns<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-6 large-2 columns"</span>></span>6/6/2 columns<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-6 large-8 columns"</span>></span>6/6/8 columns<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-12 large-2 columns"</span>></span>12/12/2 columns<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-3 columns"</span>></span>3 columns<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-9 columns"</span>></span>9 columns<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"medium-8 large-4 columns"</span>></span>12/8/4 columns<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"medium-4 large-8 columns"</span>></span>12/4/8 columns<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div><div class="row display">
- <div class="small-2 medium-3 large-4 columns">2/3/4 columns</div>
- <div class="small-4 medium-3 large-4 columns">4/3/4 columns</div>
- <div class="small-6 large-4 columns">6/6/4 columns</div>
-</div>
-<div class="row display">
- <div class="large-3 columns">12/12/3 columns</div>
- <div class="large-6 columns">12/12/6 columns</div>
- <div class="large-3 columns">12/12/3 columns</div>
-</div>
-<div class="row display">
- <div class="small-6 large-2 columns">6/6/2 columns</div>
- <div class="small-6 large-8 columns">6/6/8 columns</div>
- <div class="small-12 large-2 columns">12/12/2 columns</div>
-</div>
-<div class="row display">
- <div class="small-3 columns">3 columns</div>
- <div class="small-9 columns">9 columns</div>
-</div>
-<div class="row display">
- <div class="medium-8 large-4 columns">12/8/4 columns</div>
- <div class="medium-4 large-8 columns">12/4/8 columns</div>
-</div>
-
-<hr>
-<h2 id="interchange" class="docs-heading" data-magellan-target="interchange">Interchange<a class="docs-heading-icon" href="#interchange"></a></h2><div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">data-interchange</span>=<span class="hljs-string">"[assets/img/interchange/small.jpg, small], [assets/img/interchange/medium.jpg, medium], [assets/img/interchange/large.jpg, large]"</span>></span></code></pre></div>
-
-<div class="docs-code-live"><img data-interchange="[assets/img/interchange/small.jpg, small], [assets/img/interchange/medium.jpg, medium], [assets/img/interchange/large.jpg, large]"></div><hr>
-<h2 id="label" class="docs-heading" data-magellan-target="label">Label<a class="docs-heading-icon" href="#label"></a></h2><div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"secondary label"</span>></span>Secondary Label<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"success label"</span>></span>Success Label<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"alert label"</span>></span>Alert Label<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"warning label"</span>></span>Warning Label<span class="hljs-tag"></<span class="hljs-name">span</span>></span></code></pre></div>
-
-<div class="docs-code-live"><span class="secondary label">Secondary Label</span>
-<span class="success label">Success Label</span>
-<span class="alert label">Alert Label</span>
-<span class="warning label">Warning Label</span></div><hr>
-<h2 id="magellan" class="docs-heading" data-magellan-target="magellan">Magellan<a class="docs-heading-icon" href="#magellan"></a></h2><div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"horizontal menu"</span> <span class="hljs-attr">data-magellan</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#first"</span>></span>First Arrival<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#second"</span>></span>Second Arrival<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#third"</span>></span>Third Arrival<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"sections"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">section</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"first"</span> <span class="hljs-attr">data-magellan-target</span>=<span class="hljs-string">"first"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">h4</span>></span>First section<span class="hljs-tag"></<span class="hljs-name">h4</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Duis scelerisque ligula ut metus rhoncus scelerisque. Integer ut egestas metus. Nulla facilisi. Aenean luctus magna lobortis ligula rhoncus, sit amet lacinia lorem sagittis. Sed ultrices at metus id aliquet. Vestibulum in condimentum quam, id ornare erat. Vivamus nec justo quis ex fringilla condimentum ac non quam.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">section</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">section</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"second"</span> <span class="hljs-attr">data-magellan-target</span>=<span class="hljs-string">"second"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">h4</span>></span>Second section<span class="hljs-tag"></<span class="hljs-name">h4</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Sed vulputate, felis interdum molestie viverra, neque urna placerat dui, ac efficitur est magna eu tellus. Nunc sodales consequat eros at bibendum. Vestibulum hendrerit gravida elit non eleifend. Nunc at vehicula ipsum. Vestibulum eu suscipit felis. Proin ipsum felis, consequat congue quam ac, efficitur tincidunt ex. Morbi accumsan sem iaculis nunc malesuada tincidunt.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">section</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">section</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"third"</span> <span class="hljs-attr">data-magellan-target</span>=<span class="hljs-string">"third"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">h4</span>></span>Second section<span class="hljs-tag"></<span class="hljs-name">h4</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Aliquam orci orci, maximus a pulvinar id, tincidunt a neque. Suspendisse eros diam, finibus et faucibus ac, suscipit feugiat orci. Morbi scelerisque sem id blandit malesuada. Donec suscipit tincidunt dolor in blandit. Nam rhoncus risus vitae lacinia dictum. Cras lobortis, nulla non faucibus mattis, tellus nibh condimentum eros, posuere volutpat arcu risus vel ante. In ut ullamcorper eros, et vestibulum risus. Fusce auctor risus vitae diam viverra tincidunt.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">section</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div><ul class="horizontal menu" data-magellan>
- <li><a href="#first">First Arrival</a></li>
- <li><a href="#second">Second Arrival</a></li>
- <li><a href="#third">Third Arrival</a></li>
-</ul>
-
-<hr>
-<h2 id="media-object" class="docs-heading" data-magellan-target="media-object">Media Object<a class="docs-heading-icon" href="#media-object"></a></h2><div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"media-object"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"media-object-section"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>= <span class="hljs-string">"http://placeimg.com/200/200/people"</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"media-object-section"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">h4</span>></span>Dreams feel real while we're in them.<span class="hljs-tag"></<span class="hljs-name">h4</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span>I'm going to improvise. Listen, there's something you should know about me... about inception. An idea is like a virus, resilient, highly contagious. The smallest seed of an idea can grow. It can grow to define or destroy you.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="media-object">
- <div class="media-object-section">
- <img src= "http://placeimg.com/200/200/people">
- </div>
- <div class="media-object-section">
- <h4>Dreams feel real while we're in them.</h4>
- <p>I'm going to improvise. Listen, there's something you should know about me... about inception. An idea is like a virus, resilient, highly contagious. The smallest seed of an idea can grow. It can grow to define or destroy you.</p>
- </div>
-</div></div><hr>
-<h2 id="menu" class="docs-heading" data-magellan-target="menu">Menu<a class="docs-heading-icon" href="#menu"></a></h2><div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>One<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Two<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Three<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Four<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
-
-<span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu icon-top"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"fi-list"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span>></span>One<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"fi-list"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span>></span>Two<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"fi-list"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span>></span>Three<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"fi-list"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span>></span>Four<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">ul</span>></span></code></pre></div>
-
-<div class="docs-code-live"><ul class="menu">
- <li><a href="#">One</a></li>
- <li><a href="#">Two</a></li>
- <li><a href="#">Three</a></li>
- <li><a href="#">Four</a></li>
-</ul>
-
-<ul class="menu icon-top">
- <li><a href="#"><i class="fi-list"></i> <span>One</span></a></li>
- <li><a href="#"><i class="fi-list"></i> <span>Two</span></a></li>
- <li><a href="#"><i class="fi-list"></i> <span>Three</span></a></li>
- <li><a href="#"><i class="fi-list"></i> <span>Four</span></a></li>
-</ul></div><hr>
-<h2 id="off-canvas" class="docs-heading" data-magellan-target="off-canvas">Off-canvas<a class="docs-heading-icon" href="#off-canvas"></a></h2><div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">body</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"off-canvas-wrapper"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"off-canvas-wrapper-inner"</span> <span class="hljs-attr">data-off-canvas-wrapper</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"off-canvas position-left"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"offCanvasLeft"</span> <span class="hljs-attr">data-off-canvas</span>></span>
- <span class="hljs-comment"><!-- left off-canvas markup --></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"off-canvas position-right"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"offCanvasRight"</span> <span class="hljs-attr">data-off-canvas</span> <span class="hljs-attr">data-position</span>=<span class="hljs-string">"right"</span>></span>
- <span class="hljs-comment"><!-- right off-canvas markup --></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"off-canvas-content"</span> <span class="hljs-attr">data-off-canvas-content</span>></span>
- <span class="hljs-comment"><!-- page content --></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">body</span>></span></code></pre></div><div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">data-toggle</span>=<span class="hljs-string">"offCanvasLeft"</span>></span>Open Menu<span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></pre></div>
-
-<div class="docs-code-live"><button type="button" class="button" data-toggle="offCanvasLeft">Open Menu</button></div><hr>
-<h2 id="orbit" class="docs-heading" data-magellan-target="orbit">Orbit<a class="docs-heading-icon" href="#orbit"></a></h2><div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"orbit"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"region"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Favorite Space Pictures"</span> <span class="hljs-attr">data-orbit</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"orbit-container"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"orbit-previous"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"previous"</span>></span><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"show-for-sr"</span>></span>Previous Slide<span class="hljs-tag"></<span class="hljs-name">span</span>></span>&#9664;<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"orbit-next"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"next"</span>></span><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"show-for-sr"</span>></span>Next Slide<span class="hljs-tag"></<span class="hljs-name">span</span>></span>&#9654;<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"is-active orbit-slide"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">h3</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center"</span>></span>You can also throw some text in here!<span class="hljs-tag"></<span class="hljs-name">h3</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center"</span>></span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">h3</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center"</span>></span>This Orbit slide has chill<span class="hljs-tag"></<span class="hljs-name">h3</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"orbit-slide"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">h3</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center"</span>></span>You can also throw some text in here!<span class="hljs-tag"></<span class="hljs-name">h3</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center"</span>></span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">h3</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center"</span>></span>This Orbit slide has chill<span class="hljs-tag"></<span class="hljs-name">h3</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"orbit-slide"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">h3</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center"</span>></span>You can also throw some text in here!<span class="hljs-tag"></<span class="hljs-name">h3</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center"</span>></span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">h3</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center"</span>></span>This Orbit slide has chill<span class="hljs-tag"></<span class="hljs-name">h3</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"orbit-slide"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">h3</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center"</span>></span>You can also throw some text in here!<span class="hljs-tag"></<span class="hljs-name">h3</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center"</span>></span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">h3</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center"</span>></span>This Orbit slide has chill<span class="hljs-tag"></<span class="hljs-name">h3</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">nav</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"orbit-bullets"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"is-active"</span> <span class="hljs-attr">data-slide</span>=<span class="hljs-string">"0"</span>></span><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"show-for-sr"</span>></span>First slide details.<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"show-for-sr"</span>></span>Current Slide<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">data-slide</span>=<span class="hljs-string">"1"</span>></span><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"show-for-sr"</span>></span>Second slide details.<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">data-slide</span>=<span class="hljs-string">"2"</span>></span><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"show-for-sr"</span>></span>Third slide details.<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">data-slide</span>=<span class="hljs-string">"3"</span>></span><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"show-for-sr"</span>></span>Fourth slide details.<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">nav</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
- <ul class="orbit-container">
- <button class="orbit-previous" aria-label="previous"><span class="show-for-sr">Previous Slide</span>◀</button>
- <button class="orbit-next" aria-label="next"><span class="show-for-sr">Next Slide</span>▶</button>
- <li class="is-active orbit-slide">
- <div>
- <h3 class="text-center">You can also throw some text in here!</h3>
- <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.</p>
- <h3 class="text-center">This Orbit slide has chill</h3>
- </div>
- </li>
- <li class="orbit-slide">
- <div>
- <h3 class="text-center">You can also throw some text in here!</h3>
- <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.</p>
- <h3 class="text-center">This Orbit slide has chill</h3>
- </div>
- </li>
- <li class="orbit-slide">
- <div>
- <h3 class="text-center">You can also throw some text in here!</h3>
- <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.</p>
- <h3 class="text-center">This Orbit slide has chill</h3>
- </div>
- </li>
- <li class="orbit-slide">
- <div>
- <h3 class="text-center">You can also throw some text in here!</h3>
- <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.</p>
- <h3 class="text-center">This Orbit slide has chill</h3>
- </div>
- </li>
- </ul>
- <nav class="orbit-bullets">
- <button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
- <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
- <button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
- <button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
- </nav>
-</div></div><hr>
-<h2 id="pagination" class="docs-heading" data-magellan-target="pagination">Pagination<a class="docs-heading-icon" href="#pagination"></a></h2><div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"pagination"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"navigation"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Pagination"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"disabled"</span>></span>Previous <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"show-for-sr"</span>></span>page<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"current"</span>></span><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"show-for-sr"</span>></span>You're on page<span class="hljs-tag"></<span class="hljs-name">span</span>></span> 1<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Page 2"</span>></span>2<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Page 3"</span>></span>3<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Page 4"</span>></span>4<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ellipsis"</span> <span class="hljs-attr">aria-hidden</span>=<span class="hljs-string">"true"</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Page 12"</span>></span>12<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Page 13"</span>></span>13<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Next page"</span>></span>Next <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"show-for-sr"</span>></span>page<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">ul</span>></span></code></pre></div>
-
-<div class="docs-code-live"><ul class="pagination" role="navigation" aria-label="Pagination">
- <li class="disabled">Previous <span class="show-for-sr">page</span></li>
- <li class="current"><span class="show-for-sr">You're on page</span> 1</li>
- <li><a href="#" aria-label="Page 2">2</a></li>
- <li><a href="#" aria-label="Page 3">3</a></li>
- <li><a href="#" aria-label="Page 4">4</a></li>
- <li class="ellipsis" aria-hidden="true"></li>
- <li><a href="#" aria-label="Page 12">12</a></li>
- <li><a href="#" aria-label="Page 13">13</a></li>
- <li><a href="#" aria-label="Next page">Next <span class="show-for-sr">page</span></a></li>
-</ul></div><hr>
-<h2 id="progress-bar" class="docs-heading" data-magellan-target="progress-bar">Progress Bar<a class="docs-heading-icon" href="#progress-bar"></a></h2><div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"success progress"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"progressbar"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">aria-valuenow</span>=<span class="hljs-string">"25"</span> <span class="hljs-attr">aria-valuemin</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">aria-valuetext</span>=<span class="hljs-string">"25 percent"</span> <span class="hljs-attr">aria-valuemax</span>=<span class="hljs-string">"100"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"progress-meter"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 25%"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"progress-meter-text"</span>></span>25%<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"warning progress"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"progress-meter"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 50%"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"progress-meter-text"</span>></span>50%<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"alert progress"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"progress-meter"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 75%"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"progress-meter-text"</span>></span>75%<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="success progress" role="progressbar" tabindex="0" aria-valuenow="25" aria-valuemin="0" aria-valuetext="25 percent" aria-valuemax="100">
- <div class="progress-meter" style="width: 25%">
- <p class="progress-meter-text">25%</p>
- </div>
-</div>
-
-<div class="warning progress">
- <div class="progress-meter" style="width: 50%">
- <p class="progress-meter-text">50%</p>
- </div>
-</div>
-
-<div class="alert progress">
- <div class="progress-meter" style="width: 75%">
- <p class="progress-meter-text">75%</p>
- </div>
-</div></div><hr>
-<h2 id="responsive-menu" class="docs-heading" data-magellan-target="responsive-menu">Responsive Menu<a class="docs-heading-icon" href="#responsive-menu"></a></h2><div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"vertical medium-horizontal menu"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 1<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 2<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 3<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">ul</span>></span></code></pre></div>
-
-<div class="docs-code-live"><ul class="vertical medium-horizontal menu">
- <li><a href="#">Item 1</a></li>
- <li><a href="#">Item 2</a></li>
- <li><a href="#">Item 3</a></li>
-</ul></div><hr>
-<h2 id="responsive-toggle" class="docs-heading" data-magellan-target="responsive-toggle">Responsive Toggle<a class="docs-heading-icon" href="#responsive-toggle"></a></h2><div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar"</span> <span class="hljs-attr">data-responsive-toggle</span>=<span class="hljs-string">"example-menu"</span> <span class="hljs-attr">data-hide-for</span>=<span class="hljs-string">"medium"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu-icon"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">data-toggle</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar-title"</span>></span>Menu<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"top-bar"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example-menu"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"top-bar-left"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"dropdown menu"</span> <span class="hljs-attr">data-dropdown-menu</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu-text"</span>></span>Site Title<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"has-submenu"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>One<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"submenu menu vertical"</span> <span class="hljs-attr">data-submenu</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>One<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Two<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Three<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Two<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Three<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"top-bar-right"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"search"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Search"</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button"</span>></span>Search<span class="hljs-tag"></<span class="hljs-name">button</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
- <button class="menu-icon" type="button" data-toggle></button>
- <div class="title-bar-title">Menu</div>
-</div>
-
-<div class="top-bar" id="example-menu">
- <div class="top-bar-left">
- <ul class="dropdown menu" data-dropdown-menu>
- <li class="menu-text">Site Title</li>
- <li class="has-submenu">
- <a href="#">One</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="#">One</a></li>
- <li><a href="#">Two</a></li>
- <li><a href="#">Three</a></li>
- </ul>
- </li>
- <li><a href="#">Two</a></li>
- <li><a href="#">Three</a></li>
- </ul>
- </div>
- <div class="top-bar-right">
- <ul class="menu">
- <li><input type="search" placeholder="Search"></li>
- <li><button type="button" class="button">Search</button></li>
- </ul>
- </div>
-</div></div><hr>
-<h2 id="reveal" class="docs-heading" data-magellan-target="reveal">Reveal<a class="docs-heading-icon" href="#reveal"></a></h2><div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">p</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">data-open</span>=<span class="hljs-string">"exampleModal1"</span>></span>Click me for a modal<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">p</span>></span>
-
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"reveal"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"exampleModal1"</span> <span class="hljs-attr">data-reveal</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">h1</span>></span>Awesome. I Have It.<span class="hljs-tag"></<span class="hljs-name">h1</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"lead"</span>></span>Your couch. It is mine.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span>I'm a cool paragraph that lives inside of an even cooler modal. Wins!<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"close-button"</span> <span class="hljs-attr">data-close</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close reveal"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">aria-hidden</span>=<span class="hljs-string">"true"</span>></span>&times;<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">button</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><p><a data-open="exampleModal1">Click me for a modal</a></p>
-
-<div class="reveal" id="exampleModal1" data-reveal>
- <h1>Awesome. I Have It.</h1>
- <p class="lead">Your couch. It is mine.</p>
- <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
- <button class="close-button" data-close aria-label="Close reveal" type="button">
- <span aria-hidden="true">×</span>
- </button>
-</div></div><hr>
-<h2 id="slider" class="docs-heading" data-magellan-target="slider">Slider<a class="docs-heading-icon" href="#slider"></a></h2><div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"slider"</span> <span class="hljs-attr">data-slider</span> <span class="hljs-attr">data-initial-start</span>=<span class="hljs-string">'50'</span> <span class="hljs-attr">data-end</span>=<span class="hljs-string">'200'</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"slider-handle"</span> <span class="hljs-attr">data-slider-handle</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"slider"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"1"</span>></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"slider-fill"</span> <span class="hljs-attr">data-slider-fill</span>></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"hidden"</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"slider vertical"</span> <span class="hljs-attr">data-slider</span> <span class="hljs-attr">data-initial-start</span>=<span class="hljs-string">'25'</span> <span class="hljs-attr">data-end</span>=<span class="hljs-string">'200'</span> <span class="hljs-attr">data-vertical</span>=<span class="hljs-string">"true"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"slider-handle"</span> <span class="hljs-attr">data-slider-handle</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"slider"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"1"</span>></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"slider-fill"</span> <span class="hljs-attr">data-slider-fill</span>></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"hidden"</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"slider"</span> <span class="hljs-attr">data-slider</span> <span class="hljs-attr">data-initial-start</span>=<span class="hljs-string">'25'</span> <span class="hljs-attr">data-initial-end</span>=<span class="hljs-string">'75'</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"slider-handle"</span> <span class="hljs-attr">data-slider-handle</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"slider"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"1"</span>></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"slider-fill"</span> <span class="hljs-attr">data-slider-fill</span>></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"slider-handle"</span> <span class="hljs-attr">data-slider-handle</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"slider"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"1"</span>></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"hidden"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"hidden"</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="slider" data-slider data-initial-start='50' data-end='200'>
- <span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
- <span class="slider-fill" data-slider-fill></span>
- <input type="hidden">
-</div>
-
-<div class="slider vertical" data-slider data-initial-start='25' data-end='200' data-vertical="true">
- <span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
- <span class="slider-fill" data-slider-fill></span>
- <input type="hidden">
-</div>
-
-<div class="slider" data-slider data-initial-start='25' data-initial-end='75'>
- <span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
- <span class="slider-fill" data-slider-fill></span>
- <span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
- <input type="hidden">
- <input type="hidden">
-</div></div><hr>
-<h2 id="sticky" class="docs-heading" data-magellan-target="sticky">Sticky<a class="docs-heading-icon" href="#sticky"></a></h2><div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns small-12"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns small-6"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example1"</span> <span class="hljs-attr">data-something</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"doodle"</span>></span>
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- <span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span>
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- <span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span>
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- <span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span>
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- <span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns small-6 right"</span> <span class="hljs-attr">data-sticky-container</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"sticky"</span> <span class="hljs-attr">data-sticky</span> <span class="hljs-attr">data-anchor</span>=<span class="hljs-string">"example1"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"thumbnail"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"assets/img/generic/rectangle-3.jpg"</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="row">
- <div class="columns small-12">
- <div class="columns small-6" id="example1" data-something>
- <p id="doodle">
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- </p>
- <p>
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- </p>
- <p>
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- </p>
- <p>
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- </p>
- </div>
- <div class="columns small-6 right" data-sticky-container>
- <div class="sticky" data-sticky data-anchor="example1">
- <img class="thumbnail" src="assets/img/generic/rectangle-3.jpg">
- </div>
- </div>
- </div>
-</div></div><hr>
-<h2 id="switch" class="docs-heading" data-magellan-target="switch">Switch<a class="docs-heading-icon" href="#switch"></a></h2><div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"switch tiny"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"switch-input"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"tinySwitch"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"exampleSwitch"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"switch-paddle"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tinySwitch"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"show-for-sr"</span>></span>Tiny Sandwiches Enabled<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">label</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"switch small"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"switch-input"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"smallSwitch"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"exampleSwitch"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"switch-paddle"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"smallSwitch"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"show-for-sr"</span>></span>Small Portions Only<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">label</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"switch large"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"switch-input"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"largeSwitch"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"exampleSwitch"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"switch-paddle"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"largeSwitch"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"show-for-sr"</span>></span>Show Large Elephants<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">label</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="switch tiny">
- <input class="switch-input" id="tinySwitch" type="checkbox" name="exampleSwitch">
- <label class="switch-paddle" for="tinySwitch">
- <span class="show-for-sr">Tiny Sandwiches Enabled</span>
- </label>
-</div>
-
-<div class="switch small">
- <input class="switch-input" id="smallSwitch" type="checkbox" name="exampleSwitch">
- <label class="switch-paddle" for="smallSwitch">
- <span class="show-for-sr">Small Portions Only</span>
- </label>
-</div>
-
-<div class="switch large">
- <input class="switch-input" id="largeSwitch" type="checkbox" name="exampleSwitch">
- <label class="switch-paddle" for="largeSwitch">
- <span class="show-for-sr">Show Large Elephants</span>
- </label>
-</div></div><hr>
-<h2 id="table" class="docs-heading" data-magellan-target="table">Table<a class="docs-heading-icon" href="#table"></a></h2><div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">table</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">thead</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">tr</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">th</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"200"</span>></span>Table Header<span class="hljs-tag"></<span class="hljs-name">th</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">th</span>></span>Table Header<span class="hljs-tag"></<span class="hljs-name">th</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">th</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"150"</span>></span>Table Header<span class="hljs-tag"></<span class="hljs-name">th</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">th</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"150"</span>></span>Table Header<span class="hljs-tag"></<span class="hljs-name">th</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">thead</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">tbody</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">tr</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Content Goes Here<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">td</span>></span>This is longer content Donec id elit non mi porta gravida at eget metus.<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Content Goes Here<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Content Goes Here<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">tr</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Content Goes Here<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">td</span>></span>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Content Goes Here<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Content Goes Here<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">tr</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Content Goes Here<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">td</span>></span>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Content Goes Here<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Content Goes Here<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">tbody</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">table</span>></span></code></pre></div>
-
-<div class="docs-code-live"><table>
- <thead>
- <tr>
- <th width="200">Table Header</th>
- <th>Table Header</th>
- <th width="150">Table Header</th>
- <th width="150">Table Header</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>Content Goes Here</td>
- <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
- <td>Content Goes Here</td>
- <td>Content Goes Here</td>
- </tr>
- <tr>
- <td>Content Goes Here</td>
- <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
- <td>Content Goes Here</td>
- <td>Content Goes Here</td>
- </tr>
- <tr>
- <td>Content Goes Here</td>
- <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
- <td>Content Goes Here</td>
- <td>Content Goes Here</td>
- </tr>
- </tbody>
-</table></div><hr>
-<h2 id="tabs" class="docs-heading" data-magellan-target="tabs">Tabs<a class="docs-heading-icon" href="#tabs"></a></h2><div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tabs"</span> <span class="hljs-attr">data-tabs</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example-tabs"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tabs-title is-active"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#panel1"</span> <span class="hljs-attr">aria-selected</span>=<span class="hljs-string">"true"</span>></span>Tab 1<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tabs-title"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#panel2"</span>></span>Tab 2<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tabs-title"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#panel3"</span>></span>Tab 3<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tabs-title"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#panel4"</span>></span>Tab 4<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tabs-title"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#panel5"</span>></span>Tab 5<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tabs-title"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#panel6"</span>></span>Tab 6<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
-
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tabs-content"</span> <span class="hljs-attr">data-tabs-content</span>=<span class="hljs-string">"example-tabs"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tabs-panel is-active"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"panel1"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span>one<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Check me out! I'm a super cool Tab panel with text content!<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tabs-panel"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"panel2"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span>two<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"thumbnail"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"assets/img/generic/rectangle-7.jpg"</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tabs-panel"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"panel3"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span>three<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Check me out! I'm a super cool Tab panel with text content!<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tabs-panel"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"panel4"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span>four<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"thumbnail"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"assets/img/generic/rectangle-2.jpg"</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tabs-panel"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"panel5"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span>five<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Check me out! I'm a super cool Tab panel with text content!<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tabs-panel"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"panel6"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span>six<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"thumbnail"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"assets/img/generic/rectangle-8.jpg"</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><ul class="tabs" data-tabs id="example-tabs">
- <li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Tab 1</a></li>
- <li class="tabs-title"><a href="#panel2">Tab 2</a></li>
- <li class="tabs-title"><a href="#panel3">Tab 3</a></li>
- <li class="tabs-title"><a href="#panel4">Tab 4</a></li>
- <li class="tabs-title"><a href="#panel5">Tab 5</a></li>
- <li class="tabs-title"><a href="#panel6">Tab 6</a></li>
-</ul>
-
-<div class="tabs-content" data-tabs-content="example-tabs">
- <div class="tabs-panel is-active" id="panel1">
- <p>one</p>
- <p>Check me out! I'm a super cool Tab panel with text content!</p>
- </div>
- <div class="tabs-panel" id="panel2">
- <p>two</p>
- <img class="thumbnail" src="assets/img/generic/rectangle-7.jpg">
- </div>
- <div class="tabs-panel" id="panel3">
- <p>three</p>
- <p>Check me out! I'm a super cool Tab panel with text content!</p>
- </div>
- <div class="tabs-panel" id="panel4">
- <p>four</p>
- <img class="thumbnail" src="assets/img/generic/rectangle-2.jpg">
- </div>
- <div class="tabs-panel" id="panel5">
- <p>five</p>
- <p>Check me out! I'm a super cool Tab panel with text content!</p>
- </div>
- <div class="tabs-panel" id="panel6">
- <p>six</p>
- <img class="thumbnail" src="assets/img/generic/rectangle-8.jpg">
- </div>
-</div></div><hr>
-<h2 id="thumbnail" class="docs-heading" data-magellan-target="thumbnail">Thumbnail<a class="docs-heading-icon" href="#thumbnail"></a></h2><div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-4 columns"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"thumbnail"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"assets/img/thumbnail/01.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Photo of Uranus."</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-4 columns"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"thumbnail"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"assets/img/thumbnail/02.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Photo of Neptune."</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-4 columns"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"thumbnail"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"assets/img/thumbnail/03.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Photo of Pluto."</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="row">
- <div class="small-4 columns">
- <img class="thumbnail" src="assets/img/thumbnail/01.jpg" alt="Photo of Uranus.">
- </div>
- <div class="small-4 columns">
- <img class="thumbnail" src="assets/img/thumbnail/02.jpg" alt="Photo of Neptune.">
- </div>
- <div class="small-4 columns">
- <img class="thumbnail" src="assets/img/thumbnail/03.jpg" alt="Photo of Pluto.">
- </div>
-</div></div><hr>
-<h2 id="title-bar" class="docs-heading" data-magellan-target="title-bar">Title Bar<a class="docs-heading-icon" href="#title-bar"></a></h2><div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar-left"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu-icon"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar-title"</span>></span>Foundation<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar-right"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu-icon"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="title-bar">
- <div class="title-bar-left">
- <button class="menu-icon" type="button"></button>
- <span class="title-bar-title">Foundation</span>
- </div>
- <div class="title-bar-right">
- <button class="menu-icon" type="button"></button>
- </div>
-</div></div><hr>
-<h2 id="toggler" class="docs-heading" data-magellan-target="toggler">Toggler<a class="docs-heading-icon" href="#toggler"></a></h2><div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">p</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">data-toggle</span>=<span class="hljs-string">"menuBar"</span>></span>Expand!<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">p</span>></span>
-
-<span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"menuBar"</span> <span class="hljs-attr">data-toggler</span>=<span class="hljs-string">".expanded"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>One<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Two<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Three<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Four<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">ul</span>></span></code></pre></div>
-
-<div class="docs-code-live"><p><a data-toggle="menuBar">Expand!</a></p>
-
-<ul class="menu" id="menuBar" data-toggler=".expanded">
- <li><a href="#">One</a></li>
- <li><a href="#">Two</a></li>
- <li><a href="#">Three</a></li>
- <li><a href="#">Four</a></li>
-</ul></div><hr>
-<h2 id="tooltip" class="docs-heading" data-magellan-target="tooltip">Tooltip<a class="docs-heading-icon" href="#tooltip"></a></h2><div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">p</span>></span>The <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">data-tooltip</span> <span class="hljs-attr">aria-haspopup</span>=<span class="hljs-string">"true"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"has-tip"</span> <span class="hljs-attr">data-disable-hover</span>=<span class="hljs-string">'false'</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">1</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Fancy word for a beetle."</span>></span>scarabaeus<span class="hljs-tag"></<span class="hljs-name">span</span>></span> hung quite clear of any branches, and, if allowed to fall, would have fallen at our feet. Legrand immediately took the scythe, and cleared with it a circular space, three or four yards in diameter, just beneath the insect, and, having accomplished this, ordered Jupiter to let go the string and come down from the tree.<span class="hljs-tag"></<span class="hljs-name">p</span>></span></code></pre></div>
-
-<div class="docs-code-live"><p>The <span data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover='false' tabindex=1 title="Fancy word for a beetle.">scarabaeus</span> hung quite clear of any branches, and, if allowed to fall, would have fallen at our feet. Legrand immediately took the scythe, and cleared with it a circular space, three or four yards in diameter, just beneath the insect, and, having accomplished this, ordered Jupiter to let go the string and come down from the tree.</p></div><hr>
-<h2 id="top-bar" class="docs-heading" data-magellan-target="top-bar">Top Bar<a class="docs-heading-icon" href="#top-bar"></a></h2><div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"top-bar"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"top-bar-left"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"dropdown menu"</span> <span class="hljs-attr">data-dropdown-menu</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu-text"</span>></span>Site Title<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"has-submenu"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>One<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"submenu menu vertical"</span> <span class="hljs-attr">data-submenu</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>One<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Two<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Three<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Two<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Three<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"top-bar-right"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"search"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Search"</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button"</span>></span>Search<span class="hljs-tag"></<span class="hljs-name">button</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="top-bar">
- <div class="top-bar-left">
- <ul class="dropdown menu" data-dropdown-menu>
- <li class="menu-text">Site Title</li>
- <li class="has-submenu">
- <a href="#">One</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="#">One</a></li>
- <li><a href="#">Two</a></li>
- <li><a href="#">Three</a></li>
- </ul>
- </li>
- <li><a href="#">Two</a></li>
- <li><a href="#">Three</a></li>
- </ul>
- </div>
- <div class="top-bar-right">
- <ul class="menu">
- <li><input type="search" placeholder="Search"></li>
- <li><button type="button" class="button">Search</button></li>
- </ul>
- </div>
-</div></div><hr>
-<h2 id="visibility-classes" class="docs-heading" data-magellan-target="visibility-classes">Visibility Classes<a class="docs-heading-icon" href="#visibility-classes"></a></h2><div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">p</span>></span>You are on a small screen or larger.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"show-for-medium"</span>></span>You are on a medium screen or larger.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"show-for-large"</span>></span>You are on a large screen or larger.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"show-for-small-only"</span>></span>You are <span class="hljs-tag"><<span class="hljs-name">em</span>></span>definitely<span class="hljs-tag"></<span class="hljs-name">em</span>></span> on a small screen.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"show-for-medium-only"</span>></span>You are <span class="hljs-tag"><<span class="hljs-name">em</span>></span>definitely<span class="hljs-tag"></<span class="hljs-name">em</span>></span> on a medium screen.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"show-for-large-only"</span>></span>You are <span class="hljs-tag"><<span class="hljs-name">em</span>></span>definitely<span class="hljs-tag"></<span class="hljs-name">em</span>></span> on a large screen.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
-
-<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hide-for-medium"</span>></span>You are <span class="hljs-tag"><<span class="hljs-name">em</span>></span>not<span class="hljs-tag"></<span class="hljs-name">em</span>></span> on a medium screen or larger.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hide-for-large"</span>></span>You are <span class="hljs-tag"><<span class="hljs-name">em</span>></span>not<span class="hljs-tag"></<span class="hljs-name">em</span>></span> on a large screen or larger.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hide-for-small-only"</span>></span>You are <span class="hljs-tag"><<span class="hljs-name">em</span>></span>definitely not<span class="hljs-tag"></<span class="hljs-name">em</span>></span> on a small screen.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hide-for-medium-only"</span>></span>You are <span class="hljs-tag"><<span class="hljs-name">em</span>></span>definitely not<span class="hljs-tag"></<span class="hljs-name">em</span>></span> on a medium screen.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hide-for-large-only"</span>></span>You are <span class="hljs-tag"><<span class="hljs-name">em</span>></span>definitely not<span class="hljs-tag"></<span class="hljs-name">em</span>></span> on a large screen.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hide"</span>></span>Can't touch this.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
-
-<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"invisible"</span>></span>Can sort of touch this.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
-
-<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"show-for-landscape"</span>></span>You are in landscape orientation.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"show-for-portrait"</span>></span>You are in portrait orientation.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
-
-<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"show-for-sr"</span>></span>This text can only be read by a screen reader.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">p</span>></span>There's a line of text above this one, you just can't see it.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
-
-<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">aria-hidden</span>=<span class="hljs-string">"true"</span>></span>This text can be seen, but won't be read by a screen reader.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
-
-<span class="hljs-tag"><<span class="hljs-name">p</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"show-on-focus"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#mainContent"</span>></span>Skip to Content<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">p</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">header</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"header"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"banner"</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">header</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">main</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"mainContent"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"main"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"0"</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">main</span>></span></code></pre></div>
-
-<div class="docs-code-live"><p>You are on a small screen or larger.</p>
-<p class="show-for-medium">You are on a medium screen or larger.</p>
-<p class="show-for-large">You are on a large screen or larger.</p>
-<p class="show-for-small-only">You are <em>definitely</em> on a small screen.</p>
-<p class="show-for-medium-only">You are <em>definitely</em> on a medium screen.</p>
-<p class="show-for-large-only">You are <em>definitely</em> on a large screen.</p>
-
-<p class="hide-for-medium">You are <em>not</em> on a medium screen or larger.</p>
-<p class="hide-for-large">You are <em>not</em> on a large screen or larger.</p>
-<p class="hide-for-small-only">You are <em>definitely not</em> on a small screen.</p>
-<p class="hide-for-medium-only">You are <em>definitely not</em> on a medium screen.</p>
-<p class="hide-for-large-only">You are <em>definitely not</em> on a large screen.</p>
-<p class="hide">Can't touch this.</p>
-
-<p class="invisible">Can sort of touch this.</p>
-
-<p class="show-for-landscape">You are in landscape orientation.</p>
-<p class="show-for-portrait">You are in portrait orientation.</p>
-
-<p class="show-for-sr">This text can only be read by a screen reader.</p>
-<p>There's a line of text above this one, you just can't see it.</p>
-
-<p aria-hidden="true">This text can be seen, but won't be read by a screen reader.</p>
-
-<p><a class="show-on-focus" href="#mainContent">Skip to Content</a></p>
-<header id="header" role="banner">
-</header>
-<main id="mainContent" role="main" tabindex="0">
-</main></div>
-
-
-
-
-</div>
-
-<div class="large-3 columns" data-sticky-container>
- <nav class="columns docs-toc-wrap" data-sticky data-anchor="docs" data-sticky-on="large">
- <div class="docs-toc hide" id="docsTOC">
- <ul class="vertical menu" data-docs-toc>
- <li class="docs-nav-title">On this page:</li>
- </ul>
- </div>
- <div class="foundation-toc-ad-unit" id="TOCAdUnit">
- </div>
- </nav>
-</div>
-
-</div>
-
-</article>
-
- </div>
- <div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
- <ul class="vertical menu docs-nav" id="docs-menu">
- <p class="docs-nav-version">
- <span data-docs-version></span>
- <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">(Changelog)</a>
- </p>
-
- <li class="docs-nav-title">Getting Started</li>
- <li><a href="installation.html">Installation</a></li>
- <li><a href="starter-projects.html">Starter Projects</a></li>
- <li><a href="compatibility.html">Compatibility</a></li>
- <li><a href="accessibility.html">Accessibility</a></li>
- <li class="current"><a href="kitchen-sink.html">Kitchen Sink</a></li>
-
- <li class="docs-nav-title">Setup</li>
- <li><a href="global.html">Global Styles</a></li>
- <li><a href="rtl.html">Right-to-Left Support</a></li>
- <li><a href="flexbox.html">Flexbox</a></li>
- <li><a href="sass.html">Sass</a></li>
- <li><a href="javascript.html">JavaScript</a></li>
- <li><a href="javascript-utilities.html">JavaScript Utilities</a></li>
- <li><a href="media-queries.html">Media Queries</a></li>
-
- <li class="docs-nav-title">General</li>
- <li><a href="grid.html">Grid</a></li>
- <li><a href="flex-grid.html">Flex Grid</a></li>
- <li><a href="forms.html">Forms</a></li>
- <li><a href="visibility.html">Visibility Classes</a></li>
- <li><a href="float-classes.html">Float Classes</a></li>
-
- <li class="docs-nav-title">Typography</li>
- <li><a href="typography-base.html">Base Styles</a></li>
- <li><a href="typography-helpers.html">Helper Classes</a></li>
-
- <li class="docs-nav-title">Controls</li>
- <li><a href="button.html">Button</a></li>
- <li><a href="button-group.html">Button Group</a></li>
- <li><a href="close-button.html">Close Button</a></li>
- <li><a href="slider.html">Slider <span class="label">JS</span></a></li>
- <li><a href="switch.html">Switch</a></li>
-
- <li class="docs-nav-title">Navigation</li>
- <li><a href="navigation.html">Overview</a></li>
- <li><a href="menu.html">Menu</a></li>
- <li><a href="dropdown-menu.html">Dropdown Menu <span class="label">JS</span></a></li>
- <li><a href="drilldown-menu.html">Drilldown Menu <span class="label">JS</span></a></li>
- <li><a href="accordion-menu.html">Accordion Menu <span class="label">JS</span></a></li>
- <li><a href="top-bar.html">Top Bar</a></li>
- <li><a href="responsive-navigation.html">Responsive Navigation</a></li>
- <li><a href="magellan.html">Magellan <span class="label">JS</span></a></li>
- <li><a href="pagination.html">Pagination</a></li>
- <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
-
- <li class="docs-nav-title">Containers</li>
- <li><a href="accordion.html">Accordion <span class="label">JS</span></a></li>
- <li><a href="callout.html">Callout</a></li>
- <li><a href="dropdown.html">Dropdown <span class="label">JS</span></a></li>
- <li><a href="media-object.html">Media Object</a></li>
- <li><a href="off-canvas.html">Off-canvas <span class="label">JS</span></a></li>
- <li><a href="reveal.html">Reveal <span class="label">JS</span> <small>Modal</small></a></li>
- <li><a href="table.html">Table</a></li>
- <li><a href="tabs.html">Tabs <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Media</li>
- <li><a href="badge.html">Badge</a></li>
- <li><a href="flex-video.html">Flex Video</a></li>
- <li><a href="label.html">Label</a></li>
- <li><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
- <li><a href="progress-bar.html">Progress Bar</a></li>
- <li><a href="thumbnail.html">Thumbnail</a></li>
- <li><a href="tooltip.html">Tooltip <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Plugins</li>
- <li><a href="abide.html">Abide <small>Form Validation</small></a></li>
- <li><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
- <li><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
- <li><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
- <li><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
-
- <li class="docs-nav-title">Sass</li>
- <li><a href="sass-functions.html">Functions</a></li>
- <li><a href="sass-mixins.html">Mixins</a></li>
-
- <li class="docs-nav-title">Libraries</li>
- <li><a href="motion-ui.html">Motion UI</a></li>
- <li><a href="panini.html">Panini</a></li>
- <li><a href="style-sherpa.html">Style Sherpa</a></li>
-
- <li class="docs-nav-title">Older Versions</li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
- <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
- <li><a href="https://get.foundation/sites/docs/v/3.2.5/">Foundation 3</a></li>
- <li><a href="https://get.foundation/sites/docs/v/2.2.1/">Foundation 2</a></li>
- </ul>
-
- </div>
- </div>
-
- <!-- Small Business(Docs) -->
- <section id="studiosCallout">
- <div class="row">
- <div class="medium-4 large-4 columns">
- <img src="https://get.foundation/assets/img/smallbiz-footer.svg" alt="">
- </div>
- <div class="medium-8 large-8 columns banner-info">
- <div class="row column property-label">ZURB Foundation</div>
- <h3 class="light">Yeah, we can help with that.</h3>
- <p class="lead"> We’ll collaborate with your team throughout the entire project life cycle. We’ll take your concept and move it through ideation, hi-fi wireframes, visual design and code, all while informing you on the whys and hows along the way.</p>
- <div class="course-buttons">
- <a href="https://get.foundation/get-involved/premium-support.html" class="studios button" data-zcom-event="studios_foundation_click" id="foundationSmallV1">Show Me How →</a>
- </div>
- </div>
- </div>
- </section>
-
- <div class="docs-newsletter">
- <div class="row">
- <div class="medium-7 large-8 columns">
- <a target="_blank" href="https://get.foundation/learn/responsive-reading.html">
- <h5 class="">Download ZURB’s 21 Responsive Trends That Will Shape 2017</h5>
- <p style="margin-bottom: 0;">Stay informed with amazing responsive trends each month from ZURB.</p>
- </a>
- </div>
- <div class="medium-5 large-4 footer-signup-form columns">
- <a style="margin-bottom: 0;" target="_blank" href="https://get.foundation/learn/responsive-reading.html" class="button expanded">Download the PDF</a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-top bg-fblue">
- <div class="row property">
- <div class="medium-4 columns">
- <div class="property-info">
- <h3>Foundation for Sites</h3>
- <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
- </p>
- </div>
- </div>
-
- <div class="medium-8 columns">
- <div class="row collapse">
- <div class="medium-4 columns">
- <div class="learn-links">
- <h4 class="hide-for-small">Want more?</h4>
- <ul>
- <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
- <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
- <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
- <li><a href="http://zurb.com/university/courses">Training</a></li>
- <li><a href="http://zurb.com/library">Design Resources</a></li>
- </ul>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="support-links">
- <h4 class="hide-for-small">Talk to us</h4>
- <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
- <p><a href="https://get.foundation/get-involved/contribute.html">Get involved in<br>our amazing community.</a></p>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="connect-links">
- <h4 class="hide-for-small">Stay Updated</h4>
- <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
- <a href="http://zurb.com/news" class="small button">Stay Connected</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="row global">
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/studios" class="footer-link-block services">
- <span class="title">Studios</span>
- <span>Helping more than 200 startups succeed since 1998.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="https://get.foundation/" class="footer-link-block foundation">
- <span class="title">Foundation</span>
- <span>The most advanced front-end framework in the world.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/notable" class="footer-link-block apps">
- <span class="title">Notable Design Apps</span>
- <span>Prototype, iterate and collect feedback on your products.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/university" class="footer-link-block expo">
- <span class="title">University</span>
- <span>Ideas, thoughts and design resources shared with you.</span>
- </a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-bottom">
- <div class="row">
- <div class="medium-4 medium-push-8 columns">
- <ul class="home-social">
- <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
- <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
- <li><a href="http://zurb.com/contact" class="mail"></a></li>
- </ul>
- </div>
- <div class="medium-8 medium-pull-4 columns">
- <a href="http://www.zurb.com" class="zurb-logo regular"></a>
- <ul class="zurb-links">
- <li><a href="http://zurb.com/about">About</a></li>
- <li><a href="http://zurb.com/blog">Blog</a></li>
- <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
- <li><a href="http://zurb.com/contact">Contact</a></li>
- <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
- </ul>
- <p class="copyright">© 1998‐2016 ZURB, Inc. All rights reserved.</p>
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- <script>
- var _gaq = _gaq || [];
- _gaq.push(
- ['_setAccount', 'UA-2195009-2'],
- ['_trackPageview'],
- ['b._setAccount', 'UA-2195009-27'],
- ['b._trackPageview']
- );
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
-
- <script src="assets/js/vendor.js?hash=10f989bed0efb872720747f45ac58243"></script>
- <script src="assets/js/foundation.js?hash=7f44ce58d77b490dee58d8675a0df2de"></script>
- <script src="assets/js/docs.js?hash=1189e0306691b863a5dbe8988814ca66"></script>
- <script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
-</body>
-</html>
+++ /dev/null
-<!doctype html>
-<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
-<html class="no-js" lang="en" dir="ltr">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="Labels are useful inline styles that can be dropped into body copy to call out certain sections or to attach metadata. For example, you can attach a label that notes when something was updated.">
- <link rel="icon" href="assets/img/icons/foundation-favicon.ico" type="image/x-icon">
- <title>Foundation for Sites 6 Docs | Label</title>
- <link href="assets/css/docs.css?hash=739fecdc206f7c969f9584974dc66d6c" rel="stylesheet" />
- <link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=191f15481e7b605deaa9252ba4c75fa2" rel="stylesheet">
- <!-- <link rel="stylesheet" href="./node_modules/motion-ui/dist/motion-ui.css" /> -->
-</head>
-<body>
-
- <div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
-
- <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="mobile-ofc vertical menu">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
-
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/support.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/sort/unanswered">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
- </div>
-
- <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="vertical menu">
- <li><a href="#">Foundation</a></li>
- <li><a href="#">Dot</a></li>
- <li><a href="#">ZURB</a></li>
- <li><a href="#">Com</a></li>
- <li><a href="#">Slash</a></li>
- <li><a href="#">Sites</a></li>
- </ul>
- </div>
-
-
- <div class="off-canvas-content" data-off-canvas-content>
- <!-- Info Banner For Announcements or Links -->
- <!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
- <div class="info">
- <h5>Foundation 6 is here!</h5>
- </div>
- </a> -->
-
- <nav class="marketing-topbar show-for-medium">
-
- <ul class="menu">
- <li class="topbar-title"><a href="https://get.foundation/index.html"><img src="assets/img/logos/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
- </ul>
-
- <ul class="dropdown menu" data-dropdown-menu data-click-open="false">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/" target="_blank">F5 Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="https://get.foundation/emails/docs/" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
-
- </nav>
-
- <div class="title-bar hide-for-medium">
- <div class="title-bar-left">
- <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
- <span class="title-bar-title">Foundation</span>
- </div>
- </div>
-
-
- <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
-
- <div class="expanded row">
- <div class="medium-9 large-10 medium-push-3 large-push-2 columns">
-
-<article class="docs-component" id="docs-label">
-
-<a href="#docs-menu" class="small secondary expanded button hide-for-medium">Jump to Nav</a>
-
-<header>
- <h1 class="docs-page-title">Label</h1>
-
-
- <p class="lead docs-page-lead">Labels are useful inline styles that can be dropped into body copy to call out certain sections or to attach metadata. For example, you can attach a label that notes when something was updated.</p>
-
- <ul class="menu simple docs-contribute-menu">
- <li><a href="https://github.com/zurb/foundation-sites/edit/master/docs/pages/label.md" target="_blank"><i class="fi-pencil"></i>Edit this Page</a></li>
- <li><a href="https://github.com/zurb/foundation-sites/issues/new?title=%5BLabel%5D%20ISSUE%20NAME%20HERE" target="_blank"><i class="fi-social-github"></i>Report a Bug</a></li>
- <li><a href="https://get.foundation/forum" target="_blank"><i class="fi-comment"></i>Get Help</a></li>
- </ul>
-</header>
-
-<hr>
-
-<div class="row">
-
-<div class="large-9 columns" id="docs">
-
-<h2 id="basics" class="docs-heading" data-magellan-target="basics">Basics<a class="docs-heading-icon" href="#basics"></a></h2><p>Add the <code>.label</code> class to an element to create a label. In the below example, we're using <code><span></code>, but any tag will work fine.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"label"</span>></span>Default Label<span class="hljs-tag"></<span class="hljs-name">span</span>></span></code></pre></div>
-
-<div class="docs-code-live"><span class="label">Default Label</span></div><p><br></p>
-<p>A label will typically be describing another element on the page. To bind the two elements together, give the label a unique ID, and reference that ID in an <code>aria-describedby</code> attribute on the main element.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">aria-describedby</span>=<span class="hljs-string">"emailLabel"</span>></span>Re: re: re: you won't believe what's in this email!<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"label"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"emailLabel"</span>></span>High Priority<span class="hljs-tag"><<span class="hljs-name">span</span>></span></code></pre></div><p>If an element is described by multiple labels, place multiple IDs inside of <code>aria-describedby</code>.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">aria-describedby</span>=<span class="hljs-string">"emailLabel1 emailLabel2"</span>></span>Re: re: re: you won't believe what's in this email!<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"label"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"emailLabel1"</span>></span>High Priority<span class="hljs-tag"><<span class="hljs-name">span</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"label"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"emailLabel2"</span>></span>Unread<span class="hljs-tag"><<span class="hljs-name">span</span>></span></code></pre></div><hr>
-<h2 id="coloring" class="docs-heading" data-magellan-target="coloring">Coloring<a class="docs-heading-icon" href="#coloring"></a></h2><p>Labels can be colored with the same classes used for buttons and other components.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"secondary label"</span>></span>Secondary Label<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"success label"</span>></span>Success Label<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"alert label"</span>></span>Alert Label<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"warning label"</span>></span>Warning Label<span class="hljs-tag"></<span class="hljs-name">span</span>></span></code></pre></div>
-
-<div class="docs-code-live"><span class="secondary label">Secondary Label</span>
-<span class="success label">Success Label</span>
-<span class="alert label">Alert Label</span>
-<span class="warning label">Warning Label</span></div><hr>
-<h3 id="with-icons" class="docs-heading">With Icons<a class="docs-heading-icon" href="#with-icons"></a></h3><p>An icon can be dropped into a label just fine. We're using the <a href="http://zurb.com/playground/foundation-icon-fonts-3">Foundation icon font</a> here, but any icon fonts or image-based icons will work fine.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"alert label"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"fi-x-circle"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> Alert Label<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"warning label"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"fi-x"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> Warning Label<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"info label"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"fi-widget"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> Info Label<span class="hljs-tag"></<span class="hljs-name">span</span>></span></code></pre></div>
-
-<div class="docs-code-live"><span class="alert label"><i class="fi-x-circle"></i> Alert Label</span>
-<span class="warning label"><i class="fi-x"></i> Warning Label</span>
-<span class="info label"><i class="fi-widget"></i> Info Label</span></div>
-
-<hr>
-<section>
- <h2 id="sass-reference" class="docs-heading" data-magellan-target="sass-reference">Sass Reference<a class="docs-heading-icon" href="#sass-reference"></a></h2>
-
- <section>
- <h3 id="sass-variables" class="docs-heading">Variables<a class="docs-heading-icon" href="#sass-variables"></a></h3>
-
- <p>The default styles of this component can be customized using these Sass variables in your project's <a href="sass.html#the-settings-file">settings file</a>.</p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td class="name"><code>$label-background</code></td>
- <td>Color</td>
- <td class="color"><code>$primary-color</code></td>
- <td><p>Default background color for labels.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$label-color</code></td>
- <td>Color</td>
- <td class="color"><code>foreground($label-background)</code></td>
- <td><p>Default text color for labels.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$label-font-size</code></td>
- <td>Number</td>
- <td class="number"><code>0.8rem</code></td>
- <td><p>Default font size for labels.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$label-padding</code></td>
- <td>Number</td>
- <td class="number"><code>0.33333rem 0.5rem</code></td>
- <td><p>Default padding inside labels.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$label-radius</code></td>
- <td>Number</td>
- <td class="number"><code>$global-radius</code></td>
- <td><p>Default radius of labels.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="sass-mixins" class="docs-heading">Mixins<a class="docs-heading-icon" href="#sass-mixins"></a></h3>
-
- <p>We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.</p>
-
-
- <section >
- <h4 id="label" class="docs-heading">label<a class="docs-heading-icon" href="#label"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> label;</code></pre>
- </div>
-
- <p>Generates base styles for a label.</p>
-
-
-
-
-
- </section>
-
-
-
-
-
- </section>
-
-
-</section>
-
-
-<!-- <hr> -->
-<!-- <section class="docs-building-blocks">
- <h2 id="building-blocks" class="docs-heading" data-magellan-target="building-blocks">Building Blocks<a class="docs-heading-icon" href="#building-blocks"></a></h2>
-
- <p><a href="http://zurb.com/building-blocks">Building Blocks</a> is a ZURB-curated resource with useful code snippets that use Foundation components. Here are a few for this component:</p>
-
- <div class="warning callout">
- <p>These are placeholder items. If you have ideas for building blocks for this component, <a href="https://github.com/zurb/foundation-sites-6/issues/118">we're taking ideas on GitHub</a>.</p>
- </div>
-
- <div data-building-blocks></div>
-</section> -->
-
-</div>
-
-<div class="large-3 columns" data-sticky-container>
- <nav class="columns docs-toc-wrap" data-sticky data-anchor="docs" data-sticky-on="large">
- <div class="docs-toc hide" id="docsTOC">
- <ul class="vertical menu" data-docs-toc>
- <li class="docs-nav-title">On this page:</li>
- </ul>
- </div>
- <div class="foundation-toc-ad-unit" id="TOCAdUnit">
- </div>
- </nav>
-</div>
-
-</div>
-
-</article>
-
- </div>
- <div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
- <ul class="vertical menu docs-nav" id="docs-menu">
- <p class="docs-nav-version">
- <span data-docs-version></span>
- <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">(Changelog)</a>
- </p>
-
- <li class="docs-nav-title">Getting Started</li>
- <li><a href="installation.html">Installation</a></li>
- <li><a href="starter-projects.html">Starter Projects</a></li>
- <li><a href="compatibility.html">Compatibility</a></li>
- <li><a href="accessibility.html">Accessibility</a></li>
- <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
-
- <li class="docs-nav-title">Setup</li>
- <li><a href="global.html">Global Styles</a></li>
- <li><a href="rtl.html">Right-to-Left Support</a></li>
- <li><a href="flexbox.html">Flexbox</a></li>
- <li><a href="sass.html">Sass</a></li>
- <li><a href="javascript.html">JavaScript</a></li>
- <li><a href="javascript-utilities.html">JavaScript Utilities</a></li>
- <li><a href="media-queries.html">Media Queries</a></li>
-
- <li class="docs-nav-title">General</li>
- <li><a href="grid.html">Grid</a></li>
- <li><a href="flex-grid.html">Flex Grid</a></li>
- <li><a href="forms.html">Forms</a></li>
- <li><a href="visibility.html">Visibility Classes</a></li>
- <li><a href="float-classes.html">Float Classes</a></li>
-
- <li class="docs-nav-title">Typography</li>
- <li><a href="typography-base.html">Base Styles</a></li>
- <li><a href="typography-helpers.html">Helper Classes</a></li>
-
- <li class="docs-nav-title">Controls</li>
- <li><a href="button.html">Button</a></li>
- <li><a href="button-group.html">Button Group</a></li>
- <li><a href="close-button.html">Close Button</a></li>
- <li><a href="slider.html">Slider <span class="label">JS</span></a></li>
- <li><a href="switch.html">Switch</a></li>
-
- <li class="docs-nav-title">Navigation</li>
- <li><a href="navigation.html">Overview</a></li>
- <li><a href="menu.html">Menu</a></li>
- <li><a href="dropdown-menu.html">Dropdown Menu <span class="label">JS</span></a></li>
- <li><a href="drilldown-menu.html">Drilldown Menu <span class="label">JS</span></a></li>
- <li><a href="accordion-menu.html">Accordion Menu <span class="label">JS</span></a></li>
- <li><a href="top-bar.html">Top Bar</a></li>
- <li><a href="responsive-navigation.html">Responsive Navigation</a></li>
- <li><a href="magellan.html">Magellan <span class="label">JS</span></a></li>
- <li><a href="pagination.html">Pagination</a></li>
- <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
-
- <li class="docs-nav-title">Containers</li>
- <li><a href="accordion.html">Accordion <span class="label">JS</span></a></li>
- <li><a href="callout.html">Callout</a></li>
- <li><a href="dropdown.html">Dropdown <span class="label">JS</span></a></li>
- <li><a href="media-object.html">Media Object</a></li>
- <li><a href="off-canvas.html">Off-canvas <span class="label">JS</span></a></li>
- <li><a href="reveal.html">Reveal <span class="label">JS</span> <small>Modal</small></a></li>
- <li><a href="table.html">Table</a></li>
- <li><a href="tabs.html">Tabs <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Media</li>
- <li><a href="badge.html">Badge</a></li>
- <li><a href="flex-video.html">Flex Video</a></li>
- <li class="current"><a href="label.html">Label</a></li>
- <li><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
- <li><a href="progress-bar.html">Progress Bar</a></li>
- <li><a href="thumbnail.html">Thumbnail</a></li>
- <li><a href="tooltip.html">Tooltip <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Plugins</li>
- <li><a href="abide.html">Abide <small>Form Validation</small></a></li>
- <li><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
- <li><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
- <li><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
- <li><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
-
- <li class="docs-nav-title">Sass</li>
- <li><a href="sass-functions.html">Functions</a></li>
- <li><a href="sass-mixins.html">Mixins</a></li>
-
- <li class="docs-nav-title">Libraries</li>
- <li><a href="motion-ui.html">Motion UI</a></li>
- <li><a href="panini.html">Panini</a></li>
- <li><a href="style-sherpa.html">Style Sherpa</a></li>
-
- <li class="docs-nav-title">Older Versions</li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
- <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
- <li><a href="https://get.foundation/sites/docs/v/3.2.5/">Foundation 3</a></li>
- <li><a href="https://get.foundation/sites/docs/v/2.2.1/">Foundation 2</a></li>
- </ul>
-
- </div>
- </div>
-
- <!-- Small Business(Docs) -->
- <section id="studiosCallout">
- <div class="row">
- <div class="medium-4 large-4 columns">
- <img src="https://get.foundation/assets/img/smallbiz-footer.svg" alt="">
- </div>
- <div class="medium-8 large-8 columns banner-info">
- <div class="row column property-label">ZURB Foundation</div>
- <h3 class="light">Yeah, we can help with that.</h3>
- <p class="lead"> We’ll collaborate with your team throughout the entire project life cycle. We’ll take your concept and move it through ideation, hi-fi wireframes, visual design and code, all while informing you on the whys and hows along the way.</p>
- <div class="course-buttons">
- <a href="https://get.foundation/get-involved/premium-support.html" class="studios button" data-zcom-event="studios_foundation_click" id="foundationSmallV1">Show Me How →</a>
- </div>
- </div>
- </div>
- </section>
-
- <div class="docs-newsletter">
- <div class="row">
- <div class="medium-7 large-8 columns">
- <a target="_blank" href="https://get.foundation/learn/responsive-reading.html">
- <h5 class="">Download ZURB’s 21 Responsive Trends That Will Shape 2017</h5>
- <p style="margin-bottom: 0;">Stay informed with amazing responsive trends each month from ZURB.</p>
- </a>
- </div>
- <div class="medium-5 large-4 footer-signup-form columns">
- <a style="margin-bottom: 0;" target="_blank" href="https://get.foundation/learn/responsive-reading.html" class="button expanded">Download the PDF</a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-top bg-fblue">
- <div class="row property">
- <div class="medium-4 columns">
- <div class="property-info">
- <h3>Foundation for Sites</h3>
- <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
- </p>
- </div>
- </div>
-
- <div class="medium-8 columns">
- <div class="row collapse">
- <div class="medium-4 columns">
- <div class="learn-links">
- <h4 class="hide-for-small">Want more?</h4>
- <ul>
- <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
- <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
- <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
- <li><a href="http://zurb.com/university/courses">Training</a></li>
- <li><a href="http://zurb.com/library">Design Resources</a></li>
- </ul>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="support-links">
- <h4 class="hide-for-small">Talk to us</h4>
- <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
- <p><a href="https://get.foundation/get-involved/contribute.html">Get involved in<br>our amazing community.</a></p>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="connect-links">
- <h4 class="hide-for-small">Stay Updated</h4>
- <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
- <a href="http://zurb.com/news" class="small button">Stay Connected</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="row global">
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/studios" class="footer-link-block services">
- <span class="title">Studios</span>
- <span>Helping more than 200 startups succeed since 1998.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="https://get.foundation/" class="footer-link-block foundation">
- <span class="title">Foundation</span>
- <span>The most advanced front-end framework in the world.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/notable" class="footer-link-block apps">
- <span class="title">Notable Design Apps</span>
- <span>Prototype, iterate and collect feedback on your products.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/university" class="footer-link-block expo">
- <span class="title">University</span>
- <span>Ideas, thoughts and design resources shared with you.</span>
- </a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-bottom">
- <div class="row">
- <div class="medium-4 medium-push-8 columns">
- <ul class="home-social">
- <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
- <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
- <li><a href="http://zurb.com/contact" class="mail"></a></li>
- </ul>
- </div>
- <div class="medium-8 medium-pull-4 columns">
- <a href="http://www.zurb.com" class="zurb-logo regular"></a>
- <ul class="zurb-links">
- <li><a href="http://zurb.com/about">About</a></li>
- <li><a href="http://zurb.com/blog">Blog</a></li>
- <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
- <li><a href="http://zurb.com/contact">Contact</a></li>
- <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
- </ul>
- <p class="copyright">© 1998‐2016 ZURB, Inc. All rights reserved.</p>
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- <script>
- var _gaq = _gaq || [];
- _gaq.push(
- ['_setAccount', 'UA-2195009-2'],
- ['_trackPageview'],
- ['b._setAccount', 'UA-2195009-27'],
- ['b._trackPageview']
- );
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
-
- <script src="assets/js/vendor.js?hash=2510c3dad7aa36ad2105bd7cb98edbb5"></script>
- <script src="assets/js/foundation.js?hash=90cd614aa00ec331cc87e0ce388a5c92"></script>
- <script src="assets/js/docs.js?hash=891c8118c320aa712feea354edb0e427"></script>
- <script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
-</body>
-</html>
+++ /dev/null
-<!doctype html>
-<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
-<html class="no-js" lang="en" dir="ltr">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="Magellan allows you to create navigation that tracks the active section of a page your user is in. Pair it with our Sticky plugin to create a fixed navigation element.">
- <link rel="icon" href="assets/img/icons/foundation-favicon.ico" type="image/x-icon">
- <title>Foundation for Sites 6 Docs | Magellan</title>
- <link href="assets/css/docs.css?hash=0d096259c3c574dbcb3f80e933f32736" rel="stylesheet" />
- <link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=e59d077371168bdfb941978ed4773a93" rel="stylesheet">
- <!-- <link rel="stylesheet" href="./node_modules/motion-ui/dist/motion-ui.css" /> -->
-</head>
-<body>
-
- <div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
-
- <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="mobile-ofc vertical menu">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
-
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/support.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/sort/unanswered">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
- </div>
-
- <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="vertical menu">
- <li><a href="#">Foundation</a></li>
- <li><a href="#">Dot</a></li>
- <li><a href="#">ZURB</a></li>
- <li><a href="#">Com</a></li>
- <li><a href="#">Slash</a></li>
- <li><a href="#">Sites</a></li>
- </ul>
- </div>
-
-
- <div class="off-canvas-content" data-off-canvas-content>
- <!-- Info Banner For Announcements or Links -->
- <!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
- <div class="info">
- <h5>Foundation 6 is here!</h5>
- </div>
- </a> -->
-
- <nav class="marketing-topbar show-for-medium">
-
- <ul class="menu">
- <li class="topbar-title"><a href="https://get.foundation/index.html"><img src="assets/img/logos/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
- </ul>
-
- <ul class="dropdown menu" data-dropdown-menu data-click-open="false">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/" target="_blank">F5 Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="https://get.foundation/emails/docs/" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
-
- </nav>
-
- <div class="title-bar hide-for-medium">
- <div class="title-bar-left">
- <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
- <span class="title-bar-title">Foundation</span>
- </div>
- </div>
-
-
- <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
-
- <div class="expanded row">
- <div class="medium-9 large-10 medium-push-3 large-push-2 columns">
-
-<article class="docs-component" id="docs-magellan">
-
-<a href="#docs-menu" class="small secondary expanded button hide-for-medium">Jump to Nav</a>
-
-<header>
- <h1 class="docs-page-title">Magellan</h1>
-
- <span data-tooltip title="Requires a JavaScript library." class="docs-js label">JavaScript</span>
-
- <p class="lead docs-page-lead">Magellan allows you to create navigation that tracks the active section of a page your user is in. Pair it with our Sticky plugin to create a fixed navigation element.</p>
-
- <ul class="menu simple docs-contribute-menu">
- <li><a href="https://github.com/zurb/foundation-sites/edit/master/docs/pages/magellan.md" target="_blank"><i class="fi-pencil"></i>Edit this Page</a></li>
- <li><a href="https://github.com/zurb/foundation-sites/issues/new?title=%5BMagellan%5D%20ISSUE%20NAME%20HERE" target="_blank"><i class="fi-social-github"></i>Report a Bug</a></li>
- <li><a href="https://get.foundation/forum" target="_blank"><i class="fi-comment"></i>Get Help</a></li>
- </ul>
-</header>
-
-<hr>
-
-<div class="row">
-
-<div class="large-9 columns" id="docs">
-
-<div data-sticky-container>
- <div class="sticky" id="sticky-magellan" style="width:100%;" data-sticky data-margin-top="0" data-margin-bottom="0" data-top-anchor="setup" data-btm-anchor="destroy:bottom">
- <nav data-magellan class="sticky-mag" data-bar-offset="25">
- <ul class="horizontal menu expanded">
- <li><a href="#setup">Setup</a></li>
- <li><a href="#sticky-navigation">Sticky Navigation</a></li>
- <li><a href="#javascript-reference">JavaScript Reference</a></li>
- </ul>
- </nav>
- </div>
-</div>
-
-<p><br></p>
-<h2 id="setup" class="docs-heading" data-magellan-target="setup">Setup<a class="docs-heading-icon" href="#setup"></a></h2><p>You can use Magellan with any navigation element, like our <a href="menu.html">Menu</a> or your own custom component. Just add the attribute <code>data-magellan</code> to the container, and links to specific sections of your page. Each section needs a unique ID.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"horizontal menu"</span> <span class="hljs-attr">data-magellan</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#first"</span>></span>First Arrival<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#second"</span>></span>Second Arrival<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#third"</span>></span>Third Arrival<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"sections"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">section</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"first"</span> <span class="hljs-attr">data-magellan-target</span>=<span class="hljs-string">"first"</span>></span>First Section<span class="hljs-tag"></<span class="hljs-name">section</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">section</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"second"</span> <span class="hljs-attr">data-magellan-target</span>=<span class="hljs-string">"second"</span>></span>Second Section<span class="hljs-tag"></<span class="hljs-name">section</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">section</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"third"</span> <span class="hljs-attr">data-magellan-target</span>=<span class="hljs-string">"third"</span>></span>Third Section<span class="hljs-tag"></<span class="hljs-name">section</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div><hr>
-<h2 id="sticky-navigation" class="docs-heading" data-magellan-target="sticky-navigation">Sticky Navigation<a class="docs-heading-icon" href="#sticky-navigation"></a></h2><p>You can use Magellan with our Sticky plugin to create a persistent navigation header or sidebar.</p>
-<p>This first example is a simplified version of the table of contents on the right side of this page:</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"large-3 columns"</span> <span class="hljs-attr">data-sticky-container</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">nav</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns sticky"</span> <span class="hljs-attr">data-sticky</span> <span class="hljs-attr">data-anchor</span>=<span class="hljs-string">"exampleId"</span> <span class="hljs-attr">data-sticky-on</span>=<span class="hljs-string">"large"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"vertical menu"</span> <span class="hljs-attr">data-magellan</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#first"</span>></span>First Arrival<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#second"</span>></span>Second Arrival<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#third"</span>></span>Third Arrival<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">nav</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div><p>This example is the menu bar floating at the top of the page.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">data-sticky-container</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"sticky"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example"</span> <span class="hljs-attr">data-sticky</span> <span class="hljs-attr">data-margin-top</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width:100%;"</span> <span class="hljs-attr">data-margin-bottom</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">data-top-anchor</span>=<span class="hljs-string">"topAnchorExample"</span> <span class="hljs-attr">data-btm-anchor</span>=<span class="hljs-string">"bottomOfContentId:bottom"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">nav</span> <span class="hljs-attr">data-magellan</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"horizontal menu expanded"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#first"</span>></span>First Arrival<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#second"</span>></span>Second Arrival<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#third"</span>></span>Third Arrival<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">nav</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-
-<hr>
-<section>
- <h2 id="javascript-reference" class="docs-heading" data-magellan-target="javascript-reference">JavaScript Reference<a class="docs-heading-icon" href="#javascript-reference"></a></h2>
-
-
- <section>
- <h3 id="js-module" class="docs-heading">Initializing<a class="docs-heading-icon" href="#js-module"></a></h3>
-
- <p>The file <code>foundation.magellan.js</code> must be included in your JavaScript to use this plugin, along with <code>foundation.core.js</code>.</p>
-
-
-
- </section>
-
-
- <section>
- <h3 id="js-class" class="docs-heading">Foundation.Magellan<a class="docs-heading-icon" href="#js-class"></a></h3>
-
- <p>Creates a new instance of Magellan.</p>
-
-
- <div class="docs-code"><pre><code><span class="hljs-keyword">var</span> elem = <span class="hljs-keyword">new</span> Foundation.Magellan(element, options);</code></pre></div>
-
- <p><strong>Fires these events:</strong>
- Magellan#event:init
- </p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>element</code></td>
- <td>Object</td>
- <td>jQuery object to add the trigger to.</td>
- </tr>
- <tr>
- <td><code>options</code></td>
- <td>Object</td>
- <td>Overrides to the default plugin settings.</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="js-options" class="docs-heading">Plugin Options<a class="docs-heading-icon" href="#js-options"></a></h3>
-
- <p>Use these options to customize an instance of Magellan. Plugin options can be set as individual data attributes, one combined <code>data-options</code> attribute, or as an object passed to the plugin's constructor. <a href="javascript.html#initializing">Learn more about how JavaScript plugins are initialized.</a></p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Default</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>data-animation-duration</code></td>
- <td><code>500</code></td>
- <td>Amount of time, in ms, the animated scrolling should take between locations.</td>
- </tr>
- <tr>
- <td><code>data-animation-easing</code></td>
- <td><code>ease-in-out</code></td>
- <td>Animation style to use when scrolling between locations.</td>
- </tr>
- <tr>
- <td><code>data-threshold</code></td>
- <td><code>50</code></td>
- <td>Number of pixels to use as a marker for location changes.</td>
- </tr>
- <tr>
- <td><code>data-active-class</code></td>
- <td><code>active</code></td>
- <td>Class applied to the active locations link on the magellan container.</td>
- </tr>
- <tr>
- <td><code>data-deep-linking</code></td>
- <td><code>true</code></td>
- <td>Allows the script to manipulate the url of the current page, and if supported, alter the history.</td>
- </tr>
- <tr>
- <td><code>data-bar-offset</code></td>
- <td><code>25</code></td>
- <td>Number of pixels to offset the scroll of the page on item click if using a sticky nav bar.</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="js-events" class="docs-heading">Events<a class="docs-heading-icon" href="#js-events"></a></h3>
-
- <p>These events will fire from any element with a Magellan plugin attached.</p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>update.zf.magellan</code></td>
- <td>Fires when magellan is finished updating to the new active element.</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="js-functions" class="docs-heading">Methods<a class="docs-heading-icon" href="#js-functions"></a></h3>
-
- <section>
- <h4 id="calcpoints" class="docs-heading">calcPoints<a class="docs-heading-icon" href="#calcpoints"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'calcPoints'</span>);</code></pre>
- </div>
-
- <p>Calculates an array of pixel values that are the demarcation lines between locations on the page.
-Can be invoked if new elements are added or the size of a location changes.</p>
-
-
-
-
- <hr>
- </section>
- <section>
- <h4 id="scrolltoloc" class="docs-heading">scrollToLoc<a class="docs-heading-icon" href="#scrolltoloc"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'scrollToLoc'</span>, loc);</code></pre>
- </div>
-
- <p>Function to scroll to a given location on the page.</p>
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>loc</code></td>
- <td>String</td>
- <td>a properly formatted jQuery id selector. Example: '#foo'</td>
- </tr>
- </table>
-
- <hr>
- </section>
- <section>
- <h4 id="reflow" class="docs-heading">reflow<a class="docs-heading-icon" href="#reflow"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'reflow'</span>);</code></pre>
- </div>
-
- <p>Calls necessary functions to update Magellan upon DOM change</p>
-
-
-
-
- <hr>
- </section>
- <section>
- <h4 id="destroy" class="docs-heading">destroy<a class="docs-heading-icon" href="#destroy"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'destroy'</span>);</code></pre>
- </div>
-
- <p>Destroys an instance of Magellan and resets the url of the window.</p>
-
-
-
-
-
- </section>
- </section>
-</section>
-
-
-</div>
-
-<div class="large-3 columns" data-sticky-container>
- <nav class="columns docs-toc-wrap" data-sticky data-anchor="docs" data-sticky-on="large">
- <div class="docs-toc hide" id="docsTOC">
- <ul class="vertical menu" data-docs-toc>
- <li class="docs-nav-title">On this page:</li>
- </ul>
- </div>
- <div class="foundation-toc-ad-unit" id="TOCAdUnit">
- </div>
- </nav>
-</div>
-
-</div>
-
-</article>
-
- </div>
- <div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
- <ul class="vertical menu docs-nav" id="docs-menu">
- <p class="docs-nav-version">
- <span data-docs-version></span>
- <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">(Changelog)</a>
- </p>
-
- <li class="docs-nav-title">Getting Started</li>
- <li><a href="installation.html">Installation</a></li>
- <li><a href="starter-projects.html">Starter Projects</a></li>
- <li><a href="compatibility.html">Compatibility</a></li>
- <li><a href="accessibility.html">Accessibility</a></li>
- <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
-
- <li class="docs-nav-title">Setup</li>
- <li><a href="global.html">Global Styles</a></li>
- <li><a href="rtl.html">Right-to-Left Support</a></li>
- <li><a href="flexbox.html">Flexbox</a></li>
- <li><a href="sass.html">Sass</a></li>
- <li><a href="javascript.html">JavaScript</a></li>
- <li><a href="javascript-utilities.html">JavaScript Utilities</a></li>
- <li><a href="media-queries.html">Media Queries</a></li>
-
- <li class="docs-nav-title">General</li>
- <li><a href="grid.html">Grid</a></li>
- <li><a href="flex-grid.html">Flex Grid</a></li>
- <li><a href="forms.html">Forms</a></li>
- <li><a href="visibility.html">Visibility Classes</a></li>
- <li><a href="float-classes.html">Float Classes</a></li>
-
- <li class="docs-nav-title">Typography</li>
- <li><a href="typography-base.html">Base Styles</a></li>
- <li><a href="typography-helpers.html">Helper Classes</a></li>
-
- <li class="docs-nav-title">Controls</li>
- <li><a href="button.html">Button</a></li>
- <li><a href="button-group.html">Button Group</a></li>
- <li><a href="close-button.html">Close Button</a></li>
- <li><a href="slider.html">Slider <span class="label">JS</span></a></li>
- <li><a href="switch.html">Switch</a></li>
-
- <li class="docs-nav-title">Navigation</li>
- <li><a href="navigation.html">Overview</a></li>
- <li><a href="menu.html">Menu</a></li>
- <li><a href="dropdown-menu.html">Dropdown Menu <span class="label">JS</span></a></li>
- <li><a href="drilldown-menu.html">Drilldown Menu <span class="label">JS</span></a></li>
- <li><a href="accordion-menu.html">Accordion Menu <span class="label">JS</span></a></li>
- <li><a href="top-bar.html">Top Bar</a></li>
- <li><a href="responsive-navigation.html">Responsive Navigation</a></li>
- <li class="current"><a href="magellan.html">Magellan <span class="label">JS</span></a></li>
- <li><a href="pagination.html">Pagination</a></li>
- <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
-
- <li class="docs-nav-title">Containers</li>
- <li><a href="accordion.html">Accordion <span class="label">JS</span></a></li>
- <li><a href="callout.html">Callout</a></li>
- <li><a href="dropdown.html">Dropdown <span class="label">JS</span></a></li>
- <li><a href="media-object.html">Media Object</a></li>
- <li><a href="off-canvas.html">Off-canvas <span class="label">JS</span></a></li>
- <li><a href="reveal.html">Reveal <span class="label">JS</span> <small>Modal</small></a></li>
- <li><a href="table.html">Table</a></li>
- <li><a href="tabs.html">Tabs <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Media</li>
- <li><a href="badge.html">Badge</a></li>
- <li><a href="flex-video.html">Flex Video</a></li>
- <li><a href="label.html">Label</a></li>
- <li><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
- <li><a href="progress-bar.html">Progress Bar</a></li>
- <li><a href="thumbnail.html">Thumbnail</a></li>
- <li><a href="tooltip.html">Tooltip <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Plugins</li>
- <li><a href="abide.html">Abide <small>Form Validation</small></a></li>
- <li><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
- <li><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
- <li><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
- <li><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
-
- <li class="docs-nav-title">Sass</li>
- <li><a href="sass-functions.html">Functions</a></li>
- <li><a href="sass-mixins.html">Mixins</a></li>
-
- <li class="docs-nav-title">Libraries</li>
- <li><a href="motion-ui.html">Motion UI</a></li>
- <li><a href="panini.html">Panini</a></li>
- <li><a href="style-sherpa.html">Style Sherpa</a></li>
-
- <li class="docs-nav-title">Older Versions</li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
- <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
- <li><a href="https://get.foundation/sites/docs/v/3.2.5/">Foundation 3</a></li>
- <li><a href="https://get.foundation/sites/docs/v/2.2.1/">Foundation 2</a></li>
- </ul>
-
- </div>
- </div>
-
- <!-- Small Business(Docs) -->
- <section id="studiosCallout">
- <div class="row">
- <div class="medium-4 large-4 columns">
- <img src="https://get.foundation/assets/img/smallbiz-footer.svg" alt="">
- </div>
- <div class="medium-8 large-8 columns banner-info">
- <div class="row column property-label">ZURB Foundation</div>
- <h3 class="light">Yeah, we can help with that.</h3>
- <p class="lead"> We’ll collaborate with your team throughout the entire project life cycle. We’ll take your concept and move it through ideation, hi-fi wireframes, visual design and code, all while informing you on the whys and hows along the way.</p>
- <div class="course-buttons">
- <a href="https://get.foundation/get-involved/premium-support.html" class="studios button" data-zcom-event="studios_foundation_click" id="foundationSmallV1">Show Me How →</a>
- </div>
- </div>
- </div>
- </section>
-
- <div class="docs-newsletter">
- <div class="row">
- <div class="medium-7 large-8 columns">
- <a target="_blank" href="https://get.foundation/learn/responsive-reading.html">
- <h5 class="">Download ZURB’s 21 Responsive Trends That Will Shape 2017</h5>
- <p style="margin-bottom: 0;">Stay informed with amazing responsive trends each month from ZURB.</p>
- </a>
- </div>
- <div class="medium-5 large-4 footer-signup-form columns">
- <a style="margin-bottom: 0;" target="_blank" href="https://get.foundation/learn/responsive-reading.html" class="button expanded">Download the PDF</a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-top bg-fblue">
- <div class="row property">
- <div class="medium-4 columns">
- <div class="property-info">
- <h3>Foundation for Sites</h3>
- <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
- </p>
- </div>
- </div>
-
- <div class="medium-8 columns">
- <div class="row collapse">
- <div class="medium-4 columns">
- <div class="learn-links">
- <h4 class="hide-for-small">Want more?</h4>
- <ul>
- <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
- <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
- <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
- <li><a href="http://zurb.com/university/courses">Training</a></li>
- <li><a href="http://zurb.com/library">Design Resources</a></li>
- </ul>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="support-links">
- <h4 class="hide-for-small">Talk to us</h4>
- <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
- <p><a href="https://get.foundation/get-involved/contribute.html">Get involved in<br>our amazing community.</a></p>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="connect-links">
- <h4 class="hide-for-small">Stay Updated</h4>
- <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
- <a href="http://zurb.com/news" class="small button">Stay Connected</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="row global">
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/studios" class="footer-link-block services">
- <span class="title">Studios</span>
- <span>Helping more than 200 startups succeed since 1998.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="https://get.foundation/" class="footer-link-block foundation">
- <span class="title">Foundation</span>
- <span>The most advanced front-end framework in the world.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/notable" class="footer-link-block apps">
- <span class="title">Notable Design Apps</span>
- <span>Prototype, iterate and collect feedback on your products.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/university" class="footer-link-block expo">
- <span class="title">University</span>
- <span>Ideas, thoughts and design resources shared with you.</span>
- </a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-bottom">
- <div class="row">
- <div class="medium-4 medium-push-8 columns">
- <ul class="home-social">
- <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
- <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
- <li><a href="http://zurb.com/contact" class="mail"></a></li>
- </ul>
- </div>
- <div class="medium-8 medium-pull-4 columns">
- <a href="http://www.zurb.com" class="zurb-logo regular"></a>
- <ul class="zurb-links">
- <li><a href="http://zurb.com/about">About</a></li>
- <li><a href="http://zurb.com/blog">Blog</a></li>
- <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
- <li><a href="http://zurb.com/contact">Contact</a></li>
- <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
- </ul>
- <p class="copyright">© 1998‐2016 ZURB, Inc. All rights reserved.</p>
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- <script>
- var _gaq = _gaq || [];
- _gaq.push(
- ['_setAccount', 'UA-2195009-2'],
- ['_trackPageview'],
- ['b._setAccount', 'UA-2195009-27'],
- ['b._trackPageview']
- );
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
-
- <script src="assets/js/vendor.js?hash=993422ea29051e10b98d8361038a4db3"></script>
- <script src="assets/js/foundation.js?hash=4281a2311d9fe6651d794b414c820a54"></script>
- <script src="assets/js/docs.js?hash=173e22c8f5d3ad0e207ce95b5a86b933"></script>
- <script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
-</body>
-</html>
+++ /dev/null
-<!doctype html>
-<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
-<html class="no-js" lang="en" dir="ltr">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="Media objects are super useful components for displaying an item, usually an image, alongside some content, usually text. You could put lists, grids, or even other media objects inside.">
- <link rel="icon" href="assets/img/icons/foundation-favicon.ico" type="image/x-icon">
- <title>Foundation for Sites 6 Docs | Media Object</title>
- <link href="assets/css/docs.css?hash=822b3cff25d60c35b6f4e3ce05dfad44" rel="stylesheet" />
- <link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=187440e87578bdb623c2bb2589fc0961" rel="stylesheet">
- <!-- <link rel="stylesheet" href="./node_modules/motion-ui/dist/motion-ui.css" /> -->
-</head>
-<body>
-
- <div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
-
- <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="mobile-ofc vertical menu">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
-
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/support.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/sort/unanswered">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
- </div>
-
- <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="vertical menu">
- <li><a href="#">Foundation</a></li>
- <li><a href="#">Dot</a></li>
- <li><a href="#">ZURB</a></li>
- <li><a href="#">Com</a></li>
- <li><a href="#">Slash</a></li>
- <li><a href="#">Sites</a></li>
- </ul>
- </div>
-
-
- <div class="off-canvas-content" data-off-canvas-content>
- <!-- Info Banner For Announcements or Links -->
- <!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
- <div class="info">
- <h5>Foundation 6 is here!</h5>
- </div>
- </a> -->
-
- <nav class="marketing-topbar show-for-medium">
-
- <ul class="menu">
- <li class="topbar-title"><a href="https://get.foundation/index.html"><img src="assets/img/logos/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
- </ul>
-
- <ul class="dropdown menu" data-dropdown-menu data-click-open="false">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/" target="_blank">F5 Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="https://get.foundation/emails/docs/" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
-
- </nav>
-
- <div class="title-bar hide-for-medium">
- <div class="title-bar-left">
- <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
- <span class="title-bar-title">Foundation</span>
- </div>
- </div>
-
-
- <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
-
- <div class="expanded row">
- <div class="medium-9 large-10 medium-push-3 large-push-2 columns">
-
-<article class="docs-component" id="docs-media-object">
-
-<a href="#docs-menu" class="small secondary expanded button hide-for-medium">Jump to Nav</a>
-
-<header>
- <h1 class="docs-page-title">Media Object</h1>
-
-
- <p class="lead docs-page-lead">Media objects are super useful components for displaying an item, usually an image, alongside some content, usually text. You could put lists, grids, or even other media objects inside.</p>
-
- <ul class="menu simple docs-contribute-menu">
- <li><a href="https://github.com/zurb/foundation-sites/edit/master/docs/pages/media-object.md" target="_blank"><i class="fi-pencil"></i>Edit this Page</a></li>
- <li><a href="https://github.com/zurb/foundation-sites/issues/new?title=%5BMedia%20Object%5D%20ISSUE%20NAME%20HERE" target="_blank"><i class="fi-social-github"></i>Report a Bug</a></li>
- <li><a href="https://get.foundation/forum" target="_blank"><i class="fi-comment"></i>Get Help</a></li>
- </ul>
-</header>
-
-<hr>
-
-<div class="row">
-
-<div class="large-9 columns" id="docs">
-
-<h2 id="basics" class="docs-heading" data-magellan-target="basics">Basics<a class="docs-heading-icon" href="#basics"></a></h2><p>A media object is a container with the class <code>.media-object</code>, and two or three sections with the class <code>.media-object-section</code>.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"media-object"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"media-object-section"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"thumbnail"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>= <span class="hljs-string">"assets/img/media-object/avatar-1.jpg"</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"media-object-section"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">h4</span>></span>Dreams feel real while we're in them.<span class="hljs-tag"></<span class="hljs-name">h4</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span>I'm going to improvise. Listen, there's something you should know about me... about inception. An idea is like a virus, resilient, highly contagious. The smallest seed of an idea can grow. It can grow to define or destroy you.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="media-object">
- <div class="media-object-section">
- <div class="thumbnail">
- <img src= "assets/img/media-object/avatar-1.jpg">
- </div>
- </div>
- <div class="media-object-section">
- <h4>Dreams feel real while we're in them.</h4>
- <p>I'm going to improvise. Listen, there's something you should know about me... about inception. An idea is like a virus, resilient, highly contagious. The smallest seed of an idea can grow. It can grow to define or destroy you.</p>
- </div>
-</div></div><div class="primary callout">
- <p>In flexbox mode, the class <code>.main-section</code> must be added to your center section in order to properly size it.</p>
-</div>
-
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"media-object"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"media-object-section"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"thumbnail"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>= <span class="hljs-string">"assets/img/media-object/avatar-1.jpg"</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"media-object-section main-section"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">h4</span>></span>Dreams feel real while we're in them.<span class="hljs-tag"></<span class="hljs-name">h4</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span>I'm going to improvise. Listen, there's something you should know about me... about inception. An idea is like a virus, resilient, highly contagious. The smallest seed of an idea can grow. It can grow to define or destroy you.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div><hr>
-<h2 id="section-alignment" class="docs-heading" data-magellan-target="section-alignment">Section Alignment<a class="docs-heading-icon" href="#section-alignment"></a></h2><p>Each section aligns to the top by default, but individual sections can also be middle- or bottom-aligned with the <code>.middle</code> and <code>.bottom</code> classes.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"media-object"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"media-object-section middle"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"thumbnail"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>= <span class="hljs-string">"assets/img/media-object/avatar-2.jpg"</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"media-object-section"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">h4</span>></span>Why is it so important to dream?<span class="hljs-tag"></<span class="hljs-name">h4</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span>So, once we've made the plant, how do we go out? Hope you have something more elegant in mind than shooting me in the head? A kick. What's a kick? This, Ariadne, would be a kick.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span>What is the most resilient parasite? Bacteria? A virus? An intestinal worm? An idea. Resilient... highly contagious. Once an idea has taken hold of the brain it's almost impossible to eradicate. An idea that is fully formed - fully understood - that sticks; right in there somewhere.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"media-object-section bottom"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"thumbnail"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>= <span class="hljs-string">"assets/img/media-object/avatar-3.jpg"</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="media-object">
- <div class="media-object-section middle">
- <div class="thumbnail">
- <img src= "assets/img/media-object/avatar-2.jpg">
- </div>
- </div>
- <div class="media-object-section">
- <h4>Why is it so important to dream?</h4>
- <p>So, once we've made the plant, how do we go out? Hope you have something more elegant in mind than shooting me in the head? A kick. What's a kick? This, Ariadne, would be a kick.</p>
- <p>What is the most resilient parasite? Bacteria? A virus? An intestinal worm? An idea. Resilient... highly contagious. Once an idea has taken hold of the brain it's almost impossible to eradicate. An idea that is fully formed - fully understood - that sticks; right in there somewhere.</p>
- </div>
- <div class="media-object-section bottom">
- <div class="thumbnail">
- <img src= "assets/img/media-object/avatar-3.jpg">
- </div>
- </div>
-</div></div><p>In flexbox mode, you can use the <a href="flexbox.html#helper-classes">flexbox helper classes</a> instead to get the same result. The <code>.align-*</code> classes can be used on the container to align every child section at once, or individual child sections can be aligned with <code>.align-self-*</code> classes.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"media-object"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"media-object-section align-self-center"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"thumbnail"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>= <span class="hljs-string">"assets/img/media-object/avatar-2.jpg"</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"media-object-section main-section"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">h4</span>></span>Why is it so important to dream?<span class="hljs-tag"></<span class="hljs-name">h4</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span>So, once we've made the plant, how do we go out? Hope you have something more elegant in mind than shooting me in the head? A kick. What's a kick? This, Ariadne, would be a kick.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span>What is the most resilient parasite? Bacteria? A virus? An intestinal worm? An idea. Resilient... highly contagious. Once an idea has taken hold of the brain it's almost impossible to eradicate. An idea that is fully formed - fully understood - that sticks; right in there somewhere.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"media-object-section align-self-bottom"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"thumbnail"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>= <span class="hljs-string">"assets/img/media-object/avatar-3.jpg"</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div><hr>
-<h3 id="stack-on-small" class="docs-heading">Stack on Small<a class="docs-heading-icon" href="#stack-on-small"></a></h3><p>By adding the <code>.stack-for-small</code> class, you can make your media object responsive. Images will get a width of 100%, but this can be changed.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"media-object stack-for-small"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"media-object-section"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"thumbnail"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>= <span class="hljs-string">"assets/img/generic/rectangle-1.jpg"</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"media-object-section"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">h4</span>></span>I Can Stack.<span class="hljs-tag"></<span class="hljs-name">h4</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Shrink the browser width to see me stack. I do tricks for dog treats, but I'm not a dog.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="media-object stack-for-small">
- <div class="media-object-section">
- <div class="thumbnail">
- <img src= "assets/img/generic/rectangle-1.jpg">
- </div>
- </div>
- <div class="media-object-section">
- <h4>I Can Stack.</h4>
- <p>Shrink the browser width to see me stack. I do tricks for dog treats, but I'm not a dog.</p>
- </div>
-</div></div><hr>
-<h3 id="nesting-media-objects" class="docs-heading">Nesting Media Objects<a class="docs-heading-icon" href="#nesting-media-objects"></a></h3><p>By nesting a media object into the media-object-section section, you can easily indent it. This is great for comment strings.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"media-object"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"media-object-section"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"thumbnail"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>= <span class="hljs-string">"assets/img/media-object/avatar-1.jpg"</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"media-object-section"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">h4</span>></span>I'm First!<span class="hljs-tag"></<span class="hljs-name">h4</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro at, tenetur cum beatae excepturi id ipsa? Esse dolor laboriosam itaque ea nesciunt, earum, ipsum commodi beatae velit id enim repellat.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-comment"><!-- Nested media object starts here --></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"media-object"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"media-object-section"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"thumbnail"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>= <span class="hljs-string">"assets/img/media-object/avatar-2.jpg"</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"media-object-section"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">h4</span>></span>I'm Second!<span class="hljs-tag"></<span class="hljs-name">h4</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas magni, quam mollitia voluptatum in, animi suscipit tempora ea consequuntur non nulla vitae doloremque. Eius rerum, cum earum quae eveniet odio.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-comment"><!-- And ends here --></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="media-object">
- <div class="media-object-section">
- <div class="thumbnail">
- <img src= "assets/img/media-object/avatar-1.jpg">
- </div>
- </div>
- <div class="media-object-section">
- <h4>I'm First!</h4>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro at, tenetur cum beatae excepturi id ipsa? Esse dolor laboriosam itaque ea nesciunt, earum, ipsum commodi beatae velit id enim repellat.</p>
- <!-- Nested media object starts here -->
- <div class="media-object">
- <div class="media-object-section">
- <div class="thumbnail">
- <img src= "assets/img/media-object/avatar-2.jpg">
- </div>
- </div>
- <div class="media-object-section">
- <h4>I'm Second!</h4>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas magni, quam mollitia voluptatum in, animi suscipit tempora ea consequuntur non nulla vitae doloremque. Eius rerum, cum earum quae eveniet odio.</p>
- </div>
- </div>
- <!-- And ends here -->
- </div>
-</div></div>
-
-<hr>
-<section>
- <h2 id="sass-reference" class="docs-heading" data-magellan-target="sass-reference">Sass Reference<a class="docs-heading-icon" href="#sass-reference"></a></h2>
-
- <section>
- <h3 id="sass-variables" class="docs-heading">Variables<a class="docs-heading-icon" href="#sass-variables"></a></h3>
-
- <p>The default styles of this component can be customized using these Sass variables in your project's <a href="sass.html#the-settings-file">settings file</a>.</p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td class="name"><code>$mediaobject-margin-bottom</code></td>
- <td>Number</td>
- <td class="number"><code>$global-margin</code></td>
- <td><p>Bottom margin of a media object.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$mediaobject-section-padding</code></td>
- <td>Number</td>
- <td class="number"><code>$global-padding</code></td>
- <td><p>Left and right padding on sections within a media object.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$mediaobject-image-width-stacked</code></td>
- <td>Number</td>
- <td class="number"><code>100%</code></td>
- <td><p>Width of images within a media object, when the object is stacked vertically. Set to 'auto' to use the image's natural width.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="sass-mixins" class="docs-heading">Mixins<a class="docs-heading-icon" href="#sass-mixins"></a></h3>
-
- <p>We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.</p>
-
-
- <section >
- <h4 id="media-object-container" class="docs-heading">media-object-container<a class="docs-heading-icon" href="#media-object-container"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> media-object-container;</code></pre>
- </div>
-
- <p>Adds styles for a media object container.</p>
-
-
-
-
-
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="media-object-section" class="docs-heading">media-object-section<a class="docs-heading-icon" href="#media-object-section"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> media-object-section(<span class="hljs-variable">$padding</span>);</code></pre>
- </div>
-
- <p>Adds styles for sections within a media object.</p>
-
-
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$padding</code></td>
- <td>Number</td>
- <td><code>$mediaobject-section-padding</code></td>
- <td><p>Padding between sections.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="media-object-stack" class="docs-heading">media-object-stack<a class="docs-heading-icon" href="#media-object-stack"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> media-object-stack;</code></pre>
- </div>
-
- <p>Adds styles to stack sections of a media object. Apply this to the section elements, not the container.</p>
-
-
-
-
-
- </section>
-
-
-
-
-
- </section>
-
-
-</section>
-
-
-<!-- <hr> -->
-<!-- <section class="docs-building-blocks">
- <h2 id="building-blocks" class="docs-heading" data-magellan-target="building-blocks">Building Blocks<a class="docs-heading-icon" href="#building-blocks"></a></h2>
-
- <p><a href="http://zurb.com/building-blocks">Building Blocks</a> is a ZURB-curated resource with useful code snippets that use Foundation components. Here are a few for this component:</p>
-
- <div class="warning callout">
- <p>These are placeholder items. If you have ideas for building blocks for this component, <a href="https://github.com/zurb/foundation-sites-6/issues/118">we're taking ideas on GitHub</a>.</p>
- </div>
-
- <div data-building-blocks></div>
-</section> -->
-
-</div>
-
-<div class="large-3 columns" data-sticky-container>
- <nav class="columns docs-toc-wrap" data-sticky data-anchor="docs" data-sticky-on="large">
- <div class="docs-toc hide" id="docsTOC">
- <ul class="vertical menu" data-docs-toc>
- <li class="docs-nav-title">On this page:</li>
- </ul>
- </div>
- <div class="foundation-toc-ad-unit" id="TOCAdUnit">
- </div>
- </nav>
-</div>
-
-</div>
-
-</article>
-
- </div>
- <div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
- <ul class="vertical menu docs-nav" id="docs-menu">
- <p class="docs-nav-version">
- <span data-docs-version></span>
- <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">(Changelog)</a>
- </p>
-
- <li class="docs-nav-title">Getting Started</li>
- <li><a href="installation.html">Installation</a></li>
- <li><a href="starter-projects.html">Starter Projects</a></li>
- <li><a href="compatibility.html">Compatibility</a></li>
- <li><a href="accessibility.html">Accessibility</a></li>
- <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
-
- <li class="docs-nav-title">Setup</li>
- <li><a href="global.html">Global Styles</a></li>
- <li><a href="rtl.html">Right-to-Left Support</a></li>
- <li><a href="flexbox.html">Flexbox</a></li>
- <li><a href="sass.html">Sass</a></li>
- <li><a href="javascript.html">JavaScript</a></li>
- <li><a href="javascript-utilities.html">JavaScript Utilities</a></li>
- <li><a href="media-queries.html">Media Queries</a></li>
-
- <li class="docs-nav-title">General</li>
- <li><a href="grid.html">Grid</a></li>
- <li><a href="flex-grid.html">Flex Grid</a></li>
- <li><a href="forms.html">Forms</a></li>
- <li><a href="visibility.html">Visibility Classes</a></li>
- <li><a href="float-classes.html">Float Classes</a></li>
-
- <li class="docs-nav-title">Typography</li>
- <li><a href="typography-base.html">Base Styles</a></li>
- <li><a href="typography-helpers.html">Helper Classes</a></li>
-
- <li class="docs-nav-title">Controls</li>
- <li><a href="button.html">Button</a></li>
- <li><a href="button-group.html">Button Group</a></li>
- <li><a href="close-button.html">Close Button</a></li>
- <li><a href="slider.html">Slider <span class="label">JS</span></a></li>
- <li><a href="switch.html">Switch</a></li>
-
- <li class="docs-nav-title">Navigation</li>
- <li><a href="navigation.html">Overview</a></li>
- <li><a href="menu.html">Menu</a></li>
- <li><a href="dropdown-menu.html">Dropdown Menu <span class="label">JS</span></a></li>
- <li><a href="drilldown-menu.html">Drilldown Menu <span class="label">JS</span></a></li>
- <li><a href="accordion-menu.html">Accordion Menu <span class="label">JS</span></a></li>
- <li><a href="top-bar.html">Top Bar</a></li>
- <li><a href="responsive-navigation.html">Responsive Navigation</a></li>
- <li><a href="magellan.html">Magellan <span class="label">JS</span></a></li>
- <li><a href="pagination.html">Pagination</a></li>
- <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
-
- <li class="docs-nav-title">Containers</li>
- <li><a href="accordion.html">Accordion <span class="label">JS</span></a></li>
- <li><a href="callout.html">Callout</a></li>
- <li><a href="dropdown.html">Dropdown <span class="label">JS</span></a></li>
- <li class="current"><a href="media-object.html">Media Object</a></li>
- <li><a href="off-canvas.html">Off-canvas <span class="label">JS</span></a></li>
- <li><a href="reveal.html">Reveal <span class="label">JS</span> <small>Modal</small></a></li>
- <li><a href="table.html">Table</a></li>
- <li><a href="tabs.html">Tabs <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Media</li>
- <li><a href="badge.html">Badge</a></li>
- <li><a href="flex-video.html">Flex Video</a></li>
- <li><a href="label.html">Label</a></li>
- <li><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
- <li><a href="progress-bar.html">Progress Bar</a></li>
- <li><a href="thumbnail.html">Thumbnail</a></li>
- <li><a href="tooltip.html">Tooltip <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Plugins</li>
- <li><a href="abide.html">Abide <small>Form Validation</small></a></li>
- <li><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
- <li><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
- <li><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
- <li><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
-
- <li class="docs-nav-title">Sass</li>
- <li><a href="sass-functions.html">Functions</a></li>
- <li><a href="sass-mixins.html">Mixins</a></li>
-
- <li class="docs-nav-title">Libraries</li>
- <li><a href="motion-ui.html">Motion UI</a></li>
- <li><a href="panini.html">Panini</a></li>
- <li><a href="style-sherpa.html">Style Sherpa</a></li>
-
- <li class="docs-nav-title">Older Versions</li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
- <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
- <li><a href="https://get.foundation/sites/docs/v/3.2.5/">Foundation 3</a></li>
- <li><a href="https://get.foundation/sites/docs/v/2.2.1/">Foundation 2</a></li>
- </ul>
-
- </div>
- </div>
-
- <!-- Small Business(Docs) -->
- <section id="studiosCallout">
- <div class="row">
- <div class="medium-4 large-4 columns">
- <img src="https://get.foundation/assets/img/smallbiz-footer.svg" alt="">
- </div>
- <div class="medium-8 large-8 columns banner-info">
- <div class="row column property-label">ZURB Foundation</div>
- <h3 class="light">Yeah, we can help with that.</h3>
- <p class="lead"> We’ll collaborate with your team throughout the entire project life cycle. We’ll take your concept and move it through ideation, hi-fi wireframes, visual design and code, all while informing you on the whys and hows along the way.</p>
- <div class="course-buttons">
- <a href="https://get.foundation/get-involved/premium-support.html" class="studios button" data-zcom-event="studios_foundation_click" id="foundationSmallV1">Show Me How →</a>
- </div>
- </div>
- </div>
- </section>
-
- <div class="docs-newsletter">
- <div class="row">
- <div class="medium-7 large-8 columns">
- <a target="_blank" href="https://get.foundation/learn/responsive-reading.html">
- <h5 class="">Download ZURB’s 21 Responsive Trends That Will Shape 2017</h5>
- <p style="margin-bottom: 0;">Stay informed with amazing responsive trends each month from ZURB.</p>
- </a>
- </div>
- <div class="medium-5 large-4 footer-signup-form columns">
- <a style="margin-bottom: 0;" target="_blank" href="https://get.foundation/learn/responsive-reading.html" class="button expanded">Download the PDF</a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-top bg-fblue">
- <div class="row property">
- <div class="medium-4 columns">
- <div class="property-info">
- <h3>Foundation for Sites</h3>
- <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
- </p>
- </div>
- </div>
-
- <div class="medium-8 columns">
- <div class="row collapse">
- <div class="medium-4 columns">
- <div class="learn-links">
- <h4 class="hide-for-small">Want more?</h4>
- <ul>
- <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
- <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
- <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
- <li><a href="http://zurb.com/university/courses">Training</a></li>
- <li><a href="http://zurb.com/library">Design Resources</a></li>
- </ul>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="support-links">
- <h4 class="hide-for-small">Talk to us</h4>
- <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
- <p><a href="https://get.foundation/get-involved/contribute.html">Get involved in<br>our amazing community.</a></p>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="connect-links">
- <h4 class="hide-for-small">Stay Updated</h4>
- <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
- <a href="http://zurb.com/news" class="small button">Stay Connected</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="row global">
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/studios" class="footer-link-block services">
- <span class="title">Studios</span>
- <span>Helping more than 200 startups succeed since 1998.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="https://get.foundation/" class="footer-link-block foundation">
- <span class="title">Foundation</span>
- <span>The most advanced front-end framework in the world.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/notable" class="footer-link-block apps">
- <span class="title">Notable Design Apps</span>
- <span>Prototype, iterate and collect feedback on your products.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/university" class="footer-link-block expo">
- <span class="title">University</span>
- <span>Ideas, thoughts and design resources shared with you.</span>
- </a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-bottom">
- <div class="row">
- <div class="medium-4 medium-push-8 columns">
- <ul class="home-social">
- <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
- <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
- <li><a href="http://zurb.com/contact" class="mail"></a></li>
- </ul>
- </div>
- <div class="medium-8 medium-pull-4 columns">
- <a href="http://www.zurb.com" class="zurb-logo regular"></a>
- <ul class="zurb-links">
- <li><a href="http://zurb.com/about">About</a></li>
- <li><a href="http://zurb.com/blog">Blog</a></li>
- <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
- <li><a href="http://zurb.com/contact">Contact</a></li>
- <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
- </ul>
- <p class="copyright">© 1998‐2016 ZURB, Inc. All rights reserved.</p>
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- <script>
- var _gaq = _gaq || [];
- _gaq.push(
- ['_setAccount', 'UA-2195009-2'],
- ['_trackPageview'],
- ['b._setAccount', 'UA-2195009-27'],
- ['b._trackPageview']
- );
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
-
- <script src="assets/js/vendor.js?hash=c6c04d6ed2f03bf94dbac6da148678b7"></script>
- <script src="assets/js/foundation.js?hash=b2f05b5cff2b975f7638f8dadcd65327"></script>
- <script src="assets/js/docs.js?hash=076a3ae5e2fdd680ff468c93cc87078e"></script>
- <script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
-</body>
-</html>
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="CSS media queries allow us to adjust the display and orientation of content at different screen sizes.">
- <link rel="icon" href="assets/img/icons/foundation-favicon.ico" type="image/x-icon">
- <title>Foundation for Sites 6 Docs | Media Queries</title>
- <link href="assets/css/docs.css?hash=3c0f3f179247f671207bfc031136fdc7" rel="stylesheet" />
- <link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=20da267de4329505cde86b16786ec549" rel="stylesheet">
- <!-- <link rel="stylesheet" href="./node_modules/motion-ui/dist/motion-ui.css" /> -->
-</head>
-<body>
-
- <div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
-
- <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="mobile-ofc vertical menu">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
-
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/support.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/sort/unanswered">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
- </div>
-
- <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="vertical menu">
- <li><a href="#">Foundation</a></li>
- <li><a href="#">Dot</a></li>
- <li><a href="#">ZURB</a></li>
- <li><a href="#">Com</a></li>
- <li><a href="#">Slash</a></li>
- <li><a href="#">Sites</a></li>
- </ul>
- </div>
-
-
- <div class="off-canvas-content" data-off-canvas-content>
- <!-- Info Banner For Announcements or Links -->
- <!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
- <div class="info">
- <h5>Foundation 6 is here!</h5>
- </div>
- </a> -->
-
- <nav class="marketing-topbar show-for-medium">
-
- <ul class="menu">
- <li class="topbar-title"><a href="https://get.foundation/index.html"><img src="assets/img/logos/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
- </ul>
-
- <ul class="dropdown menu" data-dropdown-menu data-click-open="false">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/" target="_blank">F5 Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="https://get.foundation/emails/docs/" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
-
- </nav>
-
- <div class="title-bar hide-for-medium">
- <div class="title-bar-left">
- <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
- <span class="title-bar-title">Foundation</span>
- </div>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <title>Media Queries | Foundation Docs</title>
+ <link rel="icon" href="assets/img/icons/oundation-favicon.ico" type="image/x-icon">
+ <!-- For third-generation iPad with high-resolution Retina display: -->
+ <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/img/icons/apple-touch-icon-144x144-precomposed.png">
+ <!-- For iPhone with high-resolution Retina display: -->
+ <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/img/icons/apple-touch-icon-114x114-precomposed.png">
+ <!-- For first- and second-generation iPad: -->
+ <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/img/icons/apple-touch-icon-72x72-precomposed.png">
+ <!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
+ <link rel="apple-touch-icon-precomposed" href="assets/img/icons/apple-touch-icon-precomposed.png">
+
+ <meta name="description" content="Documentation and reference library for ZURB Foundation. JavaScript, CSS, components, grid and more.">
+ <meta name="author" content="ZURB, inc. ZURB network also includes zurb.com">
+ <meta name="copyright" content="ZURB, inc. Copyright (c) 2014">
+
+ <link href="assets/css/docs.css" rel="stylesheet" />
+ <link href="http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" rel="stylesheet" />
+ <script src="assets/js/modernizr.js"></script>
+ </head>
+ <body class="antialiased hide-extras">
+
+ <!-- Info Banner For Announcements or Links -->
+ <!-- <a href="https://get.foundation" id="notice">
+ <div class="info">
+ <h5>Foundation 6 is here!</h5>
</div>
-
+ </a> -->
- <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
- <div class="expanded row">
- <div class="medium-9 large-10 medium-push-3 large-push-2 columns">
+ <div class="marketing off-canvas-wrap" data-offcanvas>
+ <div class="inner-wrap">
-<article class="docs-component" id="docs-media-queries">
-
-<a href="#docs-menu" class="small secondary expanded button hide-for-medium">Jump to Nav</a>
+
-<header>
- <h1 class="docs-page-title">Media Queries</h1>
- <span data-tooltip title="Requires a JavaScript library." class="docs-js label">JavaScript</span>
+<!-- <nav class="tab-bar show-for-small">
+ <a class="off-canvas-left-toggle menu-icon ">
+ <span></span>
+ </a>
+</nav> -->
- <p class="lead docs-page-lead">CSS media queries allow us to adjust the display and orientation of content at different screen sizes.</p>
- <ul class="menu simple docs-contribute-menu">
- <li><a href="https://github.com/zurb/foundation-sites/edit/master/docs/pages/media-queries.md" target="_blank"><i class="fi-pencil"></i>Edit this Page</a></li>
- <li><a href="https://github.com/zurb/foundation-sites/issues/new?title=%5BMedia%20Queries%5D%20ISSUE%20NAME%20HERE" target="_blank"><i class="fi-social-github"></i>Report a Bug</a></li>
- <li><a href="https://get.foundation/forum" target="_blank"><i class="fi-comment"></i>Get Help</a></li>
+<nav class="top-bar docs-bar hide-for-small" data-topbar>
+ <ul class="title-area">
+ <li class="name">
+ <h1>
+ <a href="https://get.foundation/">
+ <span>Foundation</span>
+ </a>
+ </h1>
+ </li>
</ul>
-</header>
-
-<hr>
-
-<div class="row">
-
-<div class="large-9 columns" id="docs">
-
-<h2 id="default-media-queries" class="docs-heading" data-magellan-target="default-media-queries">Default Media Queries<a class="docs-heading-icon" href="#default-media-queries"></a></h2><p>Foundation for Sites has three core breakpoints:</p>
-<ul>
-<li><strong>Small:</strong> any screen.</li>
-<li><strong>Medium:</strong> any screen 640 pixels or wider.</li>
-<li><strong>Large:</strong> any screen 1024 pixels or wider.</li>
-</ul>
-<p>Many components can be modified at different screen sizes using special <em>breakpoint classes</em>. The grid is the most obvious example. In the code below, the left-hand column is six columns wide on small screens, hence <code>.small-6</code>. On medium-sized screens, the class <code>.medium-4</code> overrides the small style, changing the column to be four wide.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-6 medium-4 columns"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-6 medium-8 columns"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div><p>If you're using the CSS version of Foundation, use these media queries to imitate the three core breakpoints:</p>
-<div class="docs-code" data-docs-code><pre><code class="css"><span class="hljs-comment">/* Small only */</span>
-@<span class="hljs-keyword">media</span> screen and (max-width: <span class="hljs-number">39.9375em</span>) {}
-
-<span class="hljs-comment">/* Medium and up */</span>
-@<span class="hljs-keyword">media</span> screen and (min-width: <span class="hljs-number">40em</span>) {}
-
-<span class="hljs-comment">/* Medium only */</span>
-@<span class="hljs-keyword">media</span> screen and (min-width: <span class="hljs-number">40em</span>) and (max-width: <span class="hljs-number">63.9375em</span>) {}
-
-<span class="hljs-comment">/* Large and up */</span>
-@<span class="hljs-keyword">media</span> screen and (min-width: <span class="hljs-number">64em</span>) {}
-
-<span class="hljs-comment">/* Large only */</span>
-@<span class="hljs-keyword">media</span> screen and (min-width: <span class="hljs-number">64em</span>) and (max-width: <span class="hljs-number">74.9375em</span>) {}</code></pre></div><hr>
-<h2 id="upgrading-from-foundation-5" class="docs-heading" data-magellan-target="upgrading-from-foundation-5">Upgrading from Foundation 5<a class="docs-heading-icon" href="#upgrading-from-foundation-5"></a></h2><p>In Foundation 5, breakpoints were accessed using a series of Sass variables named <code>$small-up</code>, <code>$small-only</code>, <code>$medium-only</code>, and so on. In Foundation 6, this method of writing media queries has been replaced with a dedicated <a href="#the-breakpoint-mixin">breakpoint mixin</a>, described below. <strong>The legacy variables will be removed in Foundation 6.3.</strong></p>
-<p>To upgrade your existing media queries, replace rulesets like this:</p>
-<div class="docs-code" data-docs-code><pre><code class="scss">@<span class="hljs-keyword">media</span> #{<span class="hljs-variable">$medium-only</span>} {
-}</code></pre></div><p>With this:</p>
-<div class="docs-code" data-docs-code><pre><code class="scss">@<span class="hljs-keyword">include</span> breakpoint(medium only) {
-}</code></pre></div><hr>
-<h2 id="changing-the-breakpoints" class="docs-heading" data-magellan-target="changing-the-breakpoints">Changing the Breakpoints<a class="docs-heading-icon" href="#changing-the-breakpoints"></a></h2><p>If you're using the Sass version of Foundation, the default breakpoints can be changed. The names of the breakpoints, and their widths, are stored in a <code>$breakpoints</code> variable in the settings file.</p>
-<div class="docs-code" data-docs-code><pre><code class="scss"><span class="hljs-variable">$breakpoints</span>: (
- small: <span class="hljs-number">0px</span>,
- medium: <span class="hljs-number">640px</span>,
- large: <span class="hljs-number">1024px</span>,
- xlarge: <span class="hljs-number">1200px</span>,
- xxlarge: <span class="hljs-number">1440px</span>,
-);</code></pre></div><div class="primary callout">
- <p>Even though the above values are in pixels, they're converted to ems at the end for use in media queries.</p>
-</div>
-<p>Changing the widths of any of the breakpoints is as easy as changing the pixel values in this map. Note that here there are two extra breakpoints: <code>xlarge</code> and <code>xxlarge</code>. We don't use these for any components, and also don't output any CSS classes that use them by default.</p>
-<p>You can change that by modifying the <code>$breakpoint-classes</code> variable in your settings file. This is a list of breakpoint names. Adding or removing names from the list will change the CSS class output. It looks like this by default:</p>
-<div class="docs-code" data-docs-code><pre><code class="scss"><span class="hljs-variable">$breakpoint-classes</span>: (small medium large);</code></pre></div><p>For example, to get <code>.xlarge</code> classes in your CSS, for use in the grid, Menu, and more, just add it to the end of the list:</p>
-<div class="docs-code" data-docs-code><pre><code class="scss"><span class="hljs-variable">$breakpoint-classes</span>: (small medium large xlarge);</code></pre></div><hr>
-<h2 id="sass" class="docs-heading" data-magellan-target="sass">Sass<a class="docs-heading-icon" href="#sass"></a></h2><h3 id="the-breakpoint-mixin" class="docs-heading">The Breakpoint Mixin<a class="docs-heading-icon" href="#the-breakpoint-mixin"></a></h3><p>Our <code>breakpoint()</code> mixin makes it easy to write media queries. You can use the named breakpoints, or a custom pixel, rem, or em value.</p>
-<p>To use the mixin, call it with <code>@include</code>, and then include the CSS content you want inside the curly braces.</p>
-<div class="docs-code" data-docs-code><pre><code class="scss"><span class="hljs-selector-class">.element</span> {
- <span class="hljs-comment">// Only affects medium screens and larger</span>
- @<span class="hljs-keyword">include</span> breakpoint(medium) {
- <span class="hljs-comment">// All CSS in here goes inside the media query</span>
- }
-}</code></pre></div><p>The behavior of the media query can be changed by adding the keyword <code>down</code> or <code>only</code> after the breakpoint value, separated by a space.</p>
-<div class="docs-code" data-docs-code><pre><code class="scss"><span class="hljs-selector-class">.element</span> {
- <span class="hljs-comment">// Only affects medium screens and smaller</span>
- @<span class="hljs-keyword">include</span> breakpoint(medium down) { }
- <span class="hljs-comment">// Only affects medium screens, not small or large</span>
- @<span class="hljs-keyword">include</span> breakpoint(medium only) { }
-}</code></pre></div><p>It's also possible to pass in custom values. You can enter a pixel, rem, or em value—all values are converted to em at the end.</p>
-<div class="docs-code" data-docs-code><pre><code class="scss"><span class="hljs-selector-class">.element</span> {
- <span class="hljs-comment">// Converted to 20em</span>
- @<span class="hljs-keyword">include</span> breakpoint(<span class="hljs-number">320px</span>) { }
- <span class="hljs-comment">// Unitless values are assumed to be pixels</span>
- @<span class="hljs-keyword">include</span> breakpoint(<span class="hljs-number">320</span>) { }
- <span class="hljs-comment">// Converted to 40em</span>
- @<span class="hljs-keyword">include</span> breakpoint(<span class="hljs-number">40rem</span>) { }
-}</code></pre></div><p>Lastly, there are three special media queries that are not width-based: <code>portrait</code>, <code>landscape</code>, and <code>retina</code>. Using these keywords with the <code>breakpoint()</code> mixin will output a media query for device orientation or pixel density, rather than screen width.</p>
-<div class="docs-code" data-docs-code><pre><code class="scss"><span class="hljs-selector-class">.element</span> {
- @<span class="hljs-keyword">include</span> breakpoint(landscape) {
- <span class="hljs-comment">// CSS for landscape-oriented devices only</span>
- }
- @<span class="hljs-keyword">include</span> breakpoint(retina) {
- <span class="hljs-comment">// CSS for high-resolution displays only</span>
- }
-}</code></pre></div><hr>
-<h3 id="breakpoint-function" class="docs-heading">Breakpoint Function<a class="docs-heading-icon" href="#breakpoint-function"></a></h3><p>The functionality of the <code>breakpoint()</code> mixin comes from an internal function, also called <code>breakpoint()</code>. If you want to write your own media queries, you can use the <code>breakpoint()</code> function to access the logic of the mixin directly.</p>
-<div class="docs-code" data-docs-code><pre><code class="scss">@<span class="hljs-keyword">media</span> screen and #{breakpoint(medium)} {
- <span class="hljs-comment">// Medium and up styles</span>
-}</code></pre></div><p>This can be used to combine multiple media queries together.</p>
-<div class="docs-code" data-docs-code><pre><code class="scss">@<span class="hljs-keyword">media</span> screen and #{breakpoint(medium)} and #{breakpoint(xlarge down)} {
- <span class="hljs-comment">// Medium to extra large styles</span>
-}</code></pre></div><hr>
-<h2 id="javascript" class="docs-heading" data-magellan-target="javascript">JavaScript<a class="docs-heading-icon" href="#javascript"></a></h2><h3 id="working-with-media-queries" class="docs-heading">Working with Media Queries<a class="docs-heading-icon" href="#working-with-media-queries"></a></h3><p>The Foundation JavaScript includes a set of helper functions for working with media queries. They're all on the <code>Foundation.MediaQuery</code> object.</p>
-<p>Get the name of the current breakpoint with <code>MediaQuery.current</code>.</p>
-<div class="docs-code" data-docs-code><pre><code class="js">Foundation.MediaQuery.current <span class="hljs-comment">// => 'small', 'medium', etc.</span></code></pre></div><p>To see if the screen is currently a certain breakpoint or larger, use <code>MediaQuery.atLeast</code>.</p>
-<div class="docs-code" data-docs-code><pre><code class="js"><span class="hljs-keyword">if</span> (Foundation.MediaQuery.atLeast(<span class="hljs-string">'medium'</span>)) {
- <span class="hljs-comment">// True if medium or large</span>
- <span class="hljs-comment">// False if small</span>
-}</code></pre></div><p>To get the media query of a breakpoint, use <code>MediaQuery.get</code>.</p>
-<div class="docs-code" data-docs-code><pre><code class="js">Foundation.MediaQuery.get(<span class="hljs-string">'medium'</span>) <span class="hljs-comment">// => only screen and (min-width: 640px)</span></code></pre></div><hr>
-<h3 id="watching-for-breakpoint-changes" class="docs-heading">Watching for Breakpoint Changes<a class="docs-heading-icon" href="#watching-for-breakpoint-changes"></a></h3><p>The media query helper broadcasts an event on the window every time the breakpoint changes. We use this internally with plugins like Interchange to detect a shift in breakpoint. You can also subscribe to the event yourself.</p>
-<div class="docs-code" data-docs-code><pre><code class="js">$(<span class="hljs-built_in">window</span>).on(<span class="hljs-string">'changed.zf.mediaquery'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">event, newSize, oldSize</span>) </span>{
- <span class="hljs-comment">// newSize is the name of the now-current breakpoint, oldSize is the previous breakpoint</span>
-});</code></pre></div>
-
-<hr>
-<section>
- <h2 id="sass-reference" class="docs-heading" data-magellan-target="sass-reference">Sass Reference<a class="docs-heading-icon" href="#sass-reference"></a></h2>
-
- <section>
- <h3 id="sass-variables" class="docs-heading">Variables<a class="docs-heading-icon" href="#sass-variables"></a></h3>
-
- <p>The default styles of this component can be customized using these Sass variables in your project's <a href="sass.html#the-settings-file">settings file</a>.</p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td class="name"><code>$breakpoints</code></td>
- <td>Map</td>
- <td class="map"><code>
- small: 0<br>
- medium: 640px<br>
- large: 1024px<br>
- xlarge: 1200px<br>
- xxlarge: 1440px<br>
-</code></td>
- <td><p>A list of named breakpoints. You can use these with the <code>breakpoint()</code> mixin to quickly create media queries.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$breakpoint-classes</code></td>
- <td>List</td>
- <td class="list"><code>small medium large</code></td>
- <td><p>All of the names in this list will be output as classes in your CSS, like <code>.small-12</code>, <code>.medium-6</code>, and so on. Each value in this list must also be in the <code>$breakpoints</code> map.</p>
-</td>
- </tr>
- </table>
+ <section class="top-bar-section">
+ <ul class="right">
+ <li class="divider"></li>
+ <li class="has-dropdown">
+ <a target="_blank" href="https://zurb.com/responsive">Showcase <i class="fa fa-external-link"></i></a>
+ <ul class="dropdown">
+ <li><a target="_blank" href="https://zurb.com/responsive">Showcase <i class="fa fa-external-link"></i></a></li>
+ <li><a href="https://get.foundation/showcase/brands.html">Brands</a></li>
+ <li><a href="https://get.foundation/showcase/case-studies.html">Case Studies</a></li>
+ <li><a href="https://get.foundation/showcase/blog.html">Blog</a></li>
+ <li><a href="https://get.foundation/showcase/buzz.html">Buzz</a></li>
+ <li><a href="https://get.foundation/showcase/about.html">About Foundation</a></li>
+ </ul>
+ </li>
+ <li class="divider"></li>
+ <li class="has-dropdown">
+ <a href="https://get.foundation/develop/getting-started.html" class="">Develop</a>
+ <ul class="dropdown">
+ <li class="title">Frameworks</li>
+ <li><a class="" href="https://get.foundation/sites.html">Foundation for Sites</a></li>
+ <li><a class="" href="https://get.foundation/apps.html">Foundation for Apps</a></li>
+ <li><a class="spaced-list-item" href="https://get.foundation/emails.html">Foundation for Emails</a></li>
+ <li class="spaced-divider"><hr></li>
+ <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
+ <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
+ <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
+ <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
+ </ul>
+ </li>
+ <li class="divider"></li>
+ <li class="has-dropdown">
+ <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
+ <ul class="dropdown">
+ <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
+ <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
+ <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
+ <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
+ <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
+ </ul>
+ </li>
+ <li class="divider"></li>
+ <li class="has-dropdown">
+ <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
+ <ul class="dropdown">
+ <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
+ <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
+ <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
+ <li><a href="https://get.foundation/learn/events.html">Events</a></li>
+ <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
+ <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
+ <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
+ </ul>
+ </li>
+ <li class="divider"></li>
+ <li class="has-dropdown">
+ <a href="https://get.foundation/sites/docs/v/5.5.3/">Docs</a>
+ <ul class="dropdown">
+ <li><a href="https://get.foundation/sites/docs/v/5.5.3/">F5 Sites Docs</a></li>
+ <li><a href="https://get.foundation/sites/docs">F6 Sites Docs</a></li>
+ <li><a href="https://get.foundation/emails/docs">Emails Docs</a></li>
+ <li><a href="https://get.foundation/apps/docs">Apps Docs</a></li>
+ </ul>
+ </li>
+ <li class="divider"></li>
+ <li class="has-form">
+ <a href="https://get.foundation/sites/getting-started.html">Getting Started</a>
+ </ul>
</section>
+</nav>
+ <nav class="tab-bar show-for-small">
+ <a class="left-off-canvas-toggle menu-icon">
+ <span>Foundation</span>
+ </a>
+</nav>
+
+<aside class="marketing-left-off-canvas-menu">
+
+ <ul class="off-canvas-list">
+ <li><label class="first">Foundation</label></li>
+ <li><a href="https://get.foundation">Home</a></li>
+ </ul>
<hr>
- <section>
- <h3 id="sass-mixins" class="docs-heading">Mixins<a class="docs-heading-icon" href="#sass-mixins"></a></h3>
-
- <p>We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.</p>
-
-
- <section >
- <h4 id="breakpoint" class="docs-heading">breakpoint<a class="docs-heading-icon" href="#breakpoint"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> breakpoint(<span class="hljs-variable">$value</span>) { }</code></pre>
- </div>
-
- <p>Wraps a media query around the content you put inside the mixin. This mixin accepts a number of values:</p>
-<ul>
-<li>If a string is passed, the mixin will look for it in the <code>$breakpoints</code> map, and use a media query there.</li>
-<li>If a pixel value is passed, it will be converted to an em value using <code>$global-font-size</code> as the base.</li>
-<li>If a rem value is passed, the unit will be changed to em.</li>
-<li>If an em value is passed, the value will be used as-is.</li>
-</ul>
-
-
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$value</code></td>
- <td>Keyword or Number</td>
- <td><code><span style="color: #999;">None</span></code></td>
- <td><p>Breakpoint name, or px, rem, or em value to process.</p>
-</td>
- </tr>
- </table>
- </section>
-
-
+ <ul class="off-canvas-list">
+ <li><label>Setup</label></li>
+
+ <li><a href="index.html" data-search="">Getting Started</a></li>
+ <li><a href="css.html" data-search="Styles">CSS</a></li>
+ <li><a href="sass.html" data-search="Sass">Sass</a></li>
+ <li><a href="sass-files.html" data-search="Sass,Sass - What You Get, How to Use Sass">Sass Files</a></li>
+ <li><a href="using-sass.html" data-search="Sass,Sass - What You Get, How to Use Sass">Using Sass</a></li>
+ <li><a href="applications.html" data-search="Rails,Gem">Applications</a></li>
+ <li><a href="javascript.html" data-search="">Javascript</a></li>
+ <li><a href="components/global.html" data-search="Global Styles,Global Mixins,Global Variables,Useful HTML Classes">Global Styles</a></li>
+ <li><a href="components/kitchen_sink.html" data-search="">Kitchen Sink</a></li>
+ <li><a href="upgrading.html" data-search="Migration">Upgrading</a></li>
+
+ <li class="divider"></li>
+ <li><label>Structure</label></li>
+ <li><a href="media-queries.html" data-search="Breakpoints">Media Queries</a></li>
+ <li><a href="components/visibility.html" data-search="">Visibility</a></li>
+ <li><a href="components/grid.html" data-search="">Grid</a></li>
+ <li><a href="components/block_grid.html" data-search="">Block Grid</a></li>
+ <li><a href="components/interchange.html" data-search="Responsive Images">Interchange Responsive Content <span class="label">JS</span></a></li>
+ <li><a href="utility-classes.html" data-search="">Utility Classes</a></li>
+ <li><a href="javascript-utilities.html" data-search="">Javascript Utilities</a></li>
+ <li><a href="components/rtl.html" data-search="RTL">Right-to-Left Support</a></li>
+
+ <li class="divider"></li>
+ <li><label>Navigation</label></li>
+ <li><a href="components/offcanvas.html" data-search="Off Canvas">Off-canvas <span class="label">JS</span></a></li>
+ <li><a href="components/topbar.html" data-search="Nav Bar,Navigation,Sticky">Top Bar <span class="label">JS</span></a></li>
+ <li><a href="components/icon-bar.html" data-search="">Icon Bar</a></li>
+ <li><a href="components/sidenav.html" data-search="">Side Nav</a></li>
+ <li><a href="components/magellan.html" data-search="Scrollspy">Magellan Sticky Nav <span class="label">JS</span></a></li>
+ <li><a href="components/subnav.html" data-search="">Sub Nav</a></li>
+ <li><a href="components/breadcrumbs.html" data-search="Navigation Path,Cookie Crumb">Breadcrumbs</a></li>
+ <li><a href="components/pagination.html" data-search="">Pagination</a></li>
+
+ <li class="divider"></li>
+ <li><label>Media</label></li>
+ <li><a href="components/orbit.html" data-search="Carousel,Slider,Slideshow">Orbit Slider <span class="label">JS</span></a></li>
+ <li><a href="components/thumbnails.html" data-search="Images">Thumbnails</a></li>
+ <li><a href="components/clearing.html" data-search="Responsive Lightbox,Lightbox">Clearing Lightbox <span class="label">JS</span></a></li>
+ <li><a href="components/flex_video.html" data-search="Responsive Video">Flex Video</a></li>
+
+ <li class="divider"></li>
+ <li><label>Forms</label></li>
+ <li><a href="components/forms.html" data-search="">Forms</a></li>
+ <li><a href="components/switch.html" data-search="">Switches</a></li>
+ <li><a href="components/range_slider.html" data-search="Range Slider">Sliders <span class="label">JS</span></a></li>
+ <li><a href="components/abide.html" data-search="Form Validation,Field Validation">Abide Validation <span class="label">JS</span></a></li>
+
+ <li class="divider"></li>
+ <li><label>Buttons</label></li>
+ <li><a href="components/buttons.html" data-search="">Buttons</a></li>
+ <li><a href="components/button_groups.html" data-search="Button Bar">Button Groups</a></li>
+ <li><a href="components/split_buttons.html" data-search="">Split Buttons <span class="label">JS</span></a></li>
+ <li><a href="components/dropdown_buttons.html" data-search="">Dropdown Buttons <span class="label">JS</span></a></li>
+
+ <li class="divider"></li>
+ <li><label>Typography</label></li>
+ <li><a href="components/typography.html" data-search="Typography,Type-setting,Composition">Type</a></li>
+ <li><a href="components/inline_lists.html" data-search="Lists">Inline Lists</a></li>
+ <li><a href="components/labels.html" data-search="Tags">Labels</a></li>
+ <li><a href="components/keystrokes.html" data-search="">Keystrokes</a></li>
+
+ <li class="divider"></li>
+ <li class="heading"><label>Callouts & Prompts</label></li>
+ <li><a href="components/reveal.html" data-search="Modal">Reveal Modal <span class="label">JS</span></a></li>
+ <li><a href="components/alert_boxes.html" data-search="Error,Success,Warning">Alerts <span class="label">JS</span></a></li>
+ <li><a href="components/panels.html" data-search="Wells">Panels</a></li>
+ <li><a href="components/tooltips.html" data-search="Popover">Tooltips <span class="label">JS</span></a></li>
+ <li><a href="components/joyride.html" data-search="Tooltip Tour,Guider,Tooltip Walk-through">Joyride <span class="label">JS</span></a></li>
+
+ <li class="divider"></li>
+ <li><label>Content</label></li>
+ <li><a href="components/dropdown.html" data-search="">Dropdowns <span class="label">JS</span></a></li>
+ <li><a href="components/pricing_tables.html" data-search="">Pricing Tables</a></li>
+ <li><a href="components/progress_bars.html" data-search="">Progress Bars</a></li>
+ <li><a href="components/tables.html" data-search="">Tables</a></li>
+ <li><a href="components/accordion.html" data-search="">Accordion <span class="label">JS</span></a></li>
+ <li><a href="components/tabs.html" data-search="">Tabs <span class="label">JS</span></a></li>
+ <li><a href="components/equalizer.html" data-search="">Equalizer <span class="label">JS</span></a></li>
+
+ <li class="divider"></li>
+ <li><label>Support</label></li>
+
+ <li><a href="changelog.html" data-search="">Changelog</a></li>
+ <li><a href="compatibility.html" data-search="">Compatibility</a></li>
+
+ <li class="divider"></li>
+ <li class="heading"><label>Older Docs</label></li>
+ <li><a href="/docs/v/4.3.2/" data-search="">Foundation 4</a></li>
+ <li><a href="/docs/v/3.2.5/" data-search="">Foundation 3</a></li>
+ <li><a href="/docs/v/2.2.1/" data-search="">Foundation 2</a></li>
+ </ul>
+ <hr>
-
- </section>
+ <div class="zurb-links">
+ <ul class="top">
+ <li class="logo"><a href="http://zurb.com"></a></li>
+ <li><a href="http://zurb.com/about">About</a></li>
+ <li><a href="http://zurb.com/blog">Blog</a></li>
+ <li><a href="http://zurb.com/contact">Contact</a></li>
+ </ul>
+ <ul class="pillars">
+ <li>
+ <a href="http://www.zurb.com/studios" class="footer-link-block services">
+ <span class="title">Studios</span>
+ <span>Helping startups win since '98.</span>
+ </a>
+ </li>
+ <li>
+ <a href="https://get.foundation/" class="footer-link-block foundation">
+ <span class="title">Foundation</span>
+ <span>World's most advanced responsive framework.</span>
+ </a>
+ </li>
+ <li>
+ <a href="http://zurb.com/notable" class="footer-link-block apps">
+ <span class="title">Notable</span>
+ <span>Tools to rapidly prototype and iterate.</span>
+ </a>
+ </li>
+ <li>
+ <a href="http://zurb.com/university" class="footer-link-block expo">
+ <span class="title">University</span>
+ <span>Online training for smarter product design.</span>
+ </a>
+ </li>
+ </ul>
+</div>
- <hr>
+</aside>
+
+<a class="exit-off-canvas" href="#"></a>
+
+
+ <section role="main" class="scroll-container">
+
+ <div class="row">
+ <div class="large-3 medium-4 columns">
+ <div class="hide-for-small">
+ <div class="sidebar">
+ <h5>Foundation Documentation</h5>
+ <!-- <form>
+ <label>Search Documentation</label>
+ <input tabindex="1" id="autocomplete" type="search" placeholder="Search Docs: e.g. forms">
+ </form>
+
+ <a href="https://get.foundation/sites/download.html" class="download button expand">Download Foundation</a> -->
+
+ <nav>
+ <ul class="side-nav">
+ <li class="heading">Setup</li>
+
+ <li><a href="index.html" data-search="">Getting Started</a></li>
+ <li><a href="css.html" data-search="Styles">CSS</a></li>
+ <li><a href="sass.html" data-search="Sass">Sass</a></li>
+ <li><a href="sass-files.html" data-search="Sass,Sass - What You Get, How to Use Sass">Sass Files</a></li>
+ <li><a href="using-sass.html" data-search="Sass,Sass - What You Get, How to Use Sass">Using Sass</a></li>
+ <li><a href="applications.html" data-search="Rails,Gem">Applications</a></li>
+ <li><a href="javascript.html" data-search="">JavaScript</a></li>
+ <li><a href="components/global.html" data-search="Global Styles,Global Mixins,Global Variables,Useful HTML Classes">Global Styles</a></li>
+ <li><a href="components/kitchen_sink.html" data-search="">Kitchen Sink</a></li>
+ <li><a href="accessibility.html" data-search="accessibility">Accessibility</a></li>
+ <li><a href="upgrading.html" data-search="Migration">Upgrading</a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Structure</li>
+ <li><a href="media-queries.html" data-search="Breakpoints">Media Queries</a></li>
+ <li><a href="components/visibility.html" data-search="">Visibility</a></li>
+ <li><a href="components/grid.html" data-search="">Grid</a></li>
+ <li><a href="components/block_grid.html" data-search="">Block Grid</a></li>
+ <li><a href="components/interchange.html" data-search="Responsive Images">Interchange Responsive Content <span class="label">JS</span></a></li>
+ <li><a href="utility-classes.html" data-search="">Utility Classes</a></li>
+ <li><a href="javascript-utilities.html" data-search="">Javascript Utilities</a></li>
+ <li><a href="components/rtl.html" data-search="RTL">Right-to-Left Support</a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Navigation</li>
+ <li><a href="components/offcanvas.html" data-search="Off Canvas">Off-canvas <span class="label">JS</span></a></li>
+ <li><a href="components/topbar.html" data-search="Nav Bar,Navigation,Sticky">Top Bar <span class="label">JS</span></a></li>
+ <li><a href="components/icon-bar.html" data-search="">Icon Bar</a></li>
+ <li><a href="components/sidenav.html" data-search="">Side Nav</a></li>
+ <li><a href="components/magellan.html" data-search="Scrollspy">Magellan Sticky Nav <span class="label">JS</span></a></li>
+ <li><a href="components/subnav.html" data-search="">Sub Nav</a></li>
+ <li><a href="components/breadcrumbs.html" data-search="Navigation Path,Cookie Crumb">Breadcrumbs</a></li>
+ <li><a href="components/pagination.html" data-search="">Pagination</a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Media</li>
+ <li><a href="components/orbit.html" data-search="Carousel,Slider,Slideshow">Orbit Slider <span class="label">JS</span></a></li>
+ <li><a href="components/thumbnails.html" data-search="Images">Thumbnails</a></li>
+ <li><a href="components/clearing.html" data-search="Responsive Lightbox,Lightbox">Clearing Lightbox <span class="label">JS</span></a></li>
+ <li><a href="components/flex_video.html" data-search="Responsive Video">Flex Video</a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Forms</li>
+ <li><a href="components/forms.html" data-search="">Forms</a></li>
+ <li><a href="components/switch.html" data-search="">Switches</a></li>
+ <li><a href="components/range_slider.html" data-search="Range Slider">Range Sliders <span class="label">JS</span></a></li>
+ <li><a href="components/abide.html" data-search="Form Validation,Field Validation">Abide Validation <span class="label">JS</span></a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Buttons</li>
+ <li><a href="components/buttons.html" data-search="">Buttons</a></li>
+ <li><a href="components/button_groups.html" data-search="Button Bar">Button Groups</a></li>
+ <li><a href="components/split_buttons.html" data-search="">Split Buttons <span class="label">JS</span></a></li>
+ <li><a href="components/dropdown_buttons.html" data-search="">Dropdown Buttons <span class="label">JS</span></a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Typography</li>
+ <li><a href="components/typography.html" data-search="Typography,Type-setting,Composition">Type</a></li>
+ <li><a href="components/inline_lists.html" data-search="Lists">Inline Lists</a></li>
+ <li><a href="components/labels.html" data-search="Tags">Labels</a></li>
+ <li><a href="components/keystrokes.html" data-search="">Keystrokes</a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Callouts & Prompts</li>
+ <li><a href="components/reveal.html" data-search="Modal">Reveal Modal <span class="label">JS</span></a></li>
+ <li><a href="components/alert_boxes.html" data-search="Error,Success,Warning">Alerts <span class="label">JS</span></a></li>
+ <li><a href="components/panels.html" data-search="Wells">Panels</a></li>
+ <li><a href="components/tooltips.html" data-search="Popover">Tooltips <span class="label">JS</span></a></li>
+ <li><a href="components/joyride.html" data-search="Tooltip Tour,Guider,Tooltip Walk-through">Joyride <span class="label">JS</span></a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Content</li>
+ <li><a href="components/dropdown.html" data-search="">Dropdowns <span class="label">JS</span></a></li>
+ <li><a href="components/pricing_tables.html" data-search="">Pricing Tables</a></li>
+ <li><a href="components/progress_bars.html" data-search="">Progress Bars</a></li>
+ <li><a href="components/tables.html" data-search="">Tables</a></li>
+ <li><a href="components/accordion.html" data-search="">Accordion <span class="label">JS</span></a></li>
+ <li><a href="components/tabs.html" data-search="">Tabs <span class="label">JS</span></a></li>
+ <li><a href="components/equalizer.html" data-search="">Equalizer <span class="label">JS</span></a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Support</li>
+
+ <li><a href="changelog.html" data-search="">Changelog</a></li>
+ <li><a href="compatibility.html" data-search="">Compatibility</a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Older Docs</li>
+ <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html" data-search="">Foundation 4</a></li>
+ <li><a href="https://get.foundation/sites/docs/v/3.2.5/" data-search="">Foundation 3</a></li>
+ <li><a href="https://get.foundation/sites/docs/v/2.2.1/" data-search="">Foundation 2</a></li>
+
+ </ul>
+ </nav>
- <section>
- <h3 id="sass-functions" class="docs-heading">Functions<a class="docs-heading-icon" href="#sass-functions"></a></h3>
+</div>
+ </div>
+ </div>
+ <div class="large-9 medium-8 columns">
+ <h1 id="media-queries">Media Queries</h1>
+ <h3 class="subheader">We keep media queries fairly simple in Foundation and let the percentage-based grid do the heavy lifting across various screen sizes.</h3>
-
- <section >
- <h4 id="breakpoint" class="docs-heading">breakpoint<a class="docs-heading-icon" href="#breakpoint"></a></h4>
+<hr>
+<h3>Basic</h3>
+<p>Media queries are built using ems in Foundation. At some point in time we will move to rem's, however, at the moment not all browsers like rem's in media queries.</p>
+<h4>CSS</h4>
+<pre><code class="language-scss"><div class="code-container"><span class="comment">// Small screens</span>
+<span class="at_rule">@<span class="keyword">media</span><span class="preprocessor"> only</span><span class="preprocessor"> screen</span> {</span> } <span class="comment">/* Define mobile styles */</span>
- <div class="docs-code">
- <pre><code>breakpoint(<span class="hljs-variable">$val</span>)</code></pre>
- </div>
+<span class="at_rule">@<span class="keyword">media</span><span class="preprocessor"> only</span><span class="preprocessor"> screen</span><span class="preprocessor"> and</span> (max-width:<span class="preprocessor"> 40em</span>) {</span> } <span class="comment">/* max-width 640px, mobile-only styles, use when QAing mobile issues */</span>
- <p>Generates a media query string matching the input value. Refer to the documentation for the <code>breakpoint()</code> mixin to see what the possible inputs are.</p>
+<span class="comment">// Medium screens</span>
+<span class="at_rule">@<span class="keyword">media</span><span class="preprocessor"> only</span><span class="preprocessor"> screen</span><span class="preprocessor"> and</span> (min-width:<span class="preprocessor"> 40.063em</span>) {</span> } <span class="comment">/* min-width 641px, medium screens */</span>
+<span class="at_rule">@<span class="keyword">media</span><span class="preprocessor"> only</span><span class="preprocessor"> screen</span><span class="preprocessor"> and</span> (min-width:<span class="preprocessor"> 40.063em</span>)<span class="preprocessor"> and</span> (max-width:<span class="preprocessor"> 64em</span>) {</span> } <span class="comment">/* min-width 641px and max-width 1024px, use when QAing tablet-only issues */</span>
-
+<span class="comment">// Large screens</span>
+<span class="at_rule">@<span class="keyword">media</span><span class="preprocessor"> only</span><span class="preprocessor"> screen</span><span class="preprocessor"> and</span> (min-width:<span class="preprocessor"> 64.063em</span>) {</span> } <span class="comment">/* min-width 1025px, large screens */</span>
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$val</code></td>
- <td>Keyword or Number</td>
- <td><code>small</code></td>
- <td><p>Breakpoint name, or px, rem, or em value to process.</p>
-</td>
- </tr>
- </table>
- </section>
+<span class="at_rule">@<span class="keyword">media</span><span class="preprocessor"> only</span><span class="preprocessor"> screen</span><span class="preprocessor"> and</span> (min-width:<span class="preprocessor"> 64.063em</span>)<span class="preprocessor"> and</span> (max-width:<span class="preprocessor"> 90em</span>) {</span> } <span class="comment">/* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */</span>
- <hr>
-
- </section>
+<span class="comment">// XLarge screens</span>
+<span class="at_rule">@<span class="keyword">media</span><span class="preprocessor"> only</span><span class="preprocessor"> screen</span><span class="preprocessor"> and</span> (min-width:<span class="preprocessor"> 90.063em</span>) {</span> } <span class="comment">/* min-width 1441px, xlarge screens */</span>
-</section>
+<span class="at_rule">@<span class="keyword">media</span><span class="preprocessor"> only</span><span class="preprocessor"> screen</span><span class="preprocessor"> and</span> (min-width:<span class="preprocessor"> 90.063em</span>)<span class="preprocessor"> and</span> (max-width:<span class="preprocessor"> 120em</span>) {</span> } <span class="comment">/* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */</span>
+<span class="comment">// XXLarge screens</span>
+<span class="at_rule">@<span class="keyword">media</span><span class="preprocessor"> only</span><span class="preprocessor"> screen</span><span class="preprocessor"> and</span> (min-width:<span class="preprocessor"> 120.063em</span>) {</span> } <span class="comment">/* min-width 1921px, xxlarge screens */</span></div></code></pre>
<hr>
-<section>
- <h2 id="javascript-reference" class="docs-heading" data-magellan-target="javascript-reference">JavaScript Reference<a class="docs-heading-icon" href="#javascript-reference"></a></h2>
-
-
-
-
- <hr>
-
+<h3 id="customize-with-sass">Customize With Sass</h3>
+<p>Media queries can be easily customized by changing the variable values in <code>_settings.scss</code>.</p>
+<h4>SCSS</h4>
- <hr>
-
-
- <hr>
+<pre><code class="language-scss"><div class="code-container"><span class="comment">// Here we define the breakpoints which will become the upper border for each media size.</span>
+<span class="comment">// The function em-calc() calculates the em-value from a px-value.</span>
+$<span class="tag">small</span>-breakpoint<span class="value">: em-calc(<span class="number">640</span>) !default;</span>
+$<span class="value">medium</span>-breakpoint<span class="value">: em-calc(<span class="number">1024</span>) !default;</span>
+$large-breakpoint<span class="value">: em-calc(<span class="number">1440</span>) !default;</span>
+$xlarge-breakpoint<span class="value">: em-calc(<span class="number">1920</span>) !default;</span>
- <section>
- <h3 id="js-functions" class="docs-heading">Methods<a class="docs-heading-icon" href="#js-functions"></a></h3>
+<span class="comment">// Here we define the lower and upper bounds for each media size</span>
+$<span class="tag">small</span>-range<span class="value">: (<span class="number">0</span>, $small-breakpoint) !default;</span> <span class="comment">/* 0, 640px */</span>
+$<span class="value">medium</span>-range<span class="value">: ($small-breakpoint + em-calc(<span class="number">1</span>), $medium-breakpoint) !default;</span> <span class="comment">/* 641px, 1024px */</span>
+$large-range<span class="value">: ($medium-breakpoint + em-calc(<span class="number">1</span>), $large-breakpoint) !default;</span> <span class="comment">/* 1025px, 1440px */</span>
+$xlarge-range<span class="value">: ($large-breakpoint + em-calc(<span class="number">1</span>), $xlarge-breakpoint) !default;</span> <span class="comment">/* 1441px, 1920px */</span>
+$xxlarge-range<span class="value">: ($xlarge-breakpoint + em-calc(<span class="number">1</span>), em-calc(<span class="number">99999999</span>)) !default;</span> <span class="comment">/* 1921px, ... */</span>
- <section>
- <h4 id="atleast" class="docs-heading">atLeast<a class="docs-heading-icon" href="#atleast"></a></h4>
+<span class="comment">// Media Queries</span>
+$screen<span class="value">: <span class="string">"only screen"</span> !default;</span>
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'atLeast'</span>, size);</code></pre>
- </div>
-
- <p>Checks if the screen is at least as wide as a breakpoint.</p>
+$landscape<span class="value">: <span class="string">"#{$screen} and (orientation: landscape)"</span> !default;</span>
+$portrait<span class="value">: <span class="string">"#{$screen} and (orientation: portrait)"</span> !default;</span>
+$<span class="tag">small</span>-up<span class="value">: $screen !default;</span>
+$<span class="tag">small</span>-only<span class="value">: <span class="string">"#{$screen} and (max-width: #{upper-bound($small-range)})"</span> !default;</span>
+$<span class="value">medium</span>-up<span class="value">: <span class="string">"#{$screen} and (min-width:#{lower-bound($medium-range)})"</span> !default;</span>
+$<span class="value">medium</span>-only<span class="value">: <span class="string">"#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})"</span> !default;</span>
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>size</code></td>
- <td>String</td>
- <td>Name of the breakpoint to check.</td>
- </tr>
- </table>
+$large-up<span class="value">: <span class="string">"#{$screen} and (min-width:#{lower-bound($large-range)})"</span> !default;</span>
+$large-only<span class="value">: <span class="string">"#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})"</span> !default;</span>
- <hr>
- </section>
- <section>
- <h4 id="get" class="docs-heading">get<a class="docs-heading-icon" href="#get"></a></h4>
+$xlarge-up<span class="value">: <span class="string">"#{$screen} and (min-width:#{lower-bound($xlarge-range)})"</span> !default;</span>
+$xlarge-only<span class="value">: <span class="string">"#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})"</span> !default;</span>
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'get'</span>, size);</code></pre>
- </div>
+$xxlarge-up<span class="value">: <span class="string">"#{$screen} and (min-width:#{lower-bound($xxlarge-range)})"</span> !default;</span>
+$xxlarge-only<span class="value">: <span class="string">"#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})"</span> !default;</span>
- <p>Gets the media query of a breakpoint.</p>
+$retina<span class="value">: (
+ <span class="string">"#{$screen} and (-webkit-min-device-pixel-ratio: 2)"</span>,
+ <span class="string">"#{$screen} and (min--moz-device-pixel-ratio: 2)"</span>,
+ <span class="string">"#{$screen} and (-o-min-device-pixel-ratio: 2/1)"</span>,
+ <span class="string">"#{$screen} and (min-device-pixel-ratio: 2)"</span>,
+ <span class="string">"#{$screen} and (min-resolution: 192dpi)"</span>,
+ <span class="string">"#{$screen} and (min-resolution: 2dppx)"</span>
+);</span></div></code></pre>
+<h3>Style With Sass</h3>
+<p>Use these media queries with the variables specified above.</p>
+<h4>SCSS</h4>
+<pre><code class="language-scss"><div class="code-container"><span class="at_rule">@<span class="keyword">media</span> #{</span>$<span class="tag">small</span>-up} { }
+<span class="at_rule">@<span class="keyword">media</span> #{</span>$<span class="tag">small</span>-only} { }
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>size</code></td>
- <td>String</td>
- <td>Name of the breakpoint to get.</td>
- </tr>
- </table>
+<span class="at_rule">@<span class="keyword">media</span> #{</span>$<span class="value">medium</span>-up} { }
+<span class="at_rule">@<span class="keyword">media</span> #{</span>$<span class="value">medium</span>-only} { }
-
- </section>
- </section>
-</section>
+<span class="at_rule">@<span class="keyword">media</span> #{</span>$large-up} { }
+<span class="at_rule">@<span class="keyword">media</span> #{</span>$large-only} { }
-<!-- <hr> -->
-<!-- <section class="docs-building-blocks">
- <h2 id="building-blocks" class="docs-heading" data-magellan-target="building-blocks">Building Blocks<a class="docs-heading-icon" href="#building-blocks"></a></h2>
+<span class="at_rule">@<span class="keyword">media</span> #{</span>$xlarge-up} { }
+<span class="at_rule">@<span class="keyword">media</span> #{</span>$xlarge-only} { }
- <p><a href="http://zurb.com/building-blocks">Building Blocks</a> is a ZURB-curated resource with useful code snippets that use Foundation components. Here are a few for this component:</p>
+<span class="at_rule">@<span class="keyword">media</span> #{</span>$xxlarge-up} { }
+<span class="at_rule">@<span class="keyword">media</span> #{</span>$xxlarge-only} { }</div></code></pre>
- <div class="warning callout">
- <p>These are placeholder items. If you have ideas for building blocks for this component, <a href="https://github.com/zurb/foundation-sites-6/issues/118">we're taking ideas on GitHub</a>.</p>
+ </div>
+ </div>
+ <!-- <section id="courses-banner-large">
+ <div class="row">
+ <div class="large-5 medium-5 columns banner-image">
+ <img src="https://get.foundation/assets/img/responsive-banner-main.svg" alt="responsive design">
+ </div>
+ <div class="large-7 medium-7 columns banner-info">
+ <h3>Get a running start with Foundation</h3>
+ <p>Learn the fundamentals of the world's most advanced responsive framework in our <strong>Intro to Foundation class.</strong> You'll learn from the creators themselves on how to use Foundation and jumpstart your next project. <a href="http://zurb.com/university/courses" class="inline-hide">Learn more about classes »</a></p>
+ <a href="http://zurb.com/university/foundation-intro?utm_source=Foundation%20Docs&utm_medium=Large%20Banner&utm_campaign=Intro%20to%20Foundation" class="button">Learn More</a>
+ <a href="http://zurb.com/university/courses" class="learn-more hide-for-medium-up">Learn more about classes »</a>
+ </div>
</div>
-
- <div data-building-blocks></div>
</section> -->
-
-</div>
-
-<div class="large-3 columns" data-sticky-container>
- <nav class="columns docs-toc-wrap" data-sticky data-anchor="docs" data-sticky-on="large">
- <div class="docs-toc hide" id="docsTOC">
- <ul class="vertical menu" data-docs-toc>
- <li class="docs-nav-title">On this page:</li>
- </ul>
+ <div id="newsletter">
+ <div class="row">
+ <div class="medium-8 columns">
+ <h5>Stay on top of what’s happening in <a href="http://zurb.com/responsive">responsive design</a>.</h5>
+ <p>Sign up to receive monthly Responsive Reading highlights. <a href="http://zurb.com/responsive/reading">Read Last Month's Edition »</a></p>
</div>
- <div class="foundation-toc-ad-unit" id="TOCAdUnit">
+ <div class="medium-4 columns">
+ <form action="http://zurb.createsend.com/t/y/s/xlitlu/" method="post" id="subForm">
+ <div class="row collapse margintop-20px">
+ <div class="small-8 medium-8 columns">
+ <input id="fieldEmail" name="cm-xlitlu-xlitlu" type="email" placeholder="signup@example.com">
+ </div>
+ <div class="small-4 medium-4 columns">
+ <input type="submit" href="#" class="postfix button" value="Sign Up">
+ </div>
+ </div>
+ </form>
</div>
- </nav>
-</div>
-
+ </div>
</div>
-</article>
- </div>
- <div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
- <ul class="vertical menu docs-nav" id="docs-menu">
- <p class="docs-nav-version">
- <span data-docs-version></span>
- <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">(Changelog)</a>
- </p>
-
- <li class="docs-nav-title">Getting Started</li>
- <li><a href="installation.html">Installation</a></li>
- <li><a href="starter-projects.html">Starter Projects</a></li>
- <li><a href="compatibility.html">Compatibility</a></li>
- <li><a href="accessibility.html">Accessibility</a></li>
- <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
-
- <li class="docs-nav-title">Setup</li>
- <li><a href="global.html">Global Styles</a></li>
- <li><a href="rtl.html">Right-to-Left Support</a></li>
- <li><a href="flexbox.html">Flexbox</a></li>
- <li><a href="sass.html">Sass</a></li>
- <li><a href="javascript.html">JavaScript</a></li>
- <li><a href="javascript-utilities.html">JavaScript Utilities</a></li>
- <li class="current"><a href="media-queries.html">Media Queries</a></li>
-
- <li class="docs-nav-title">General</li>
- <li><a href="grid.html">Grid</a></li>
- <li><a href="flex-grid.html">Flex Grid</a></li>
- <li><a href="forms.html">Forms</a></li>
- <li><a href="visibility.html">Visibility Classes</a></li>
- <li><a href="float-classes.html">Float Classes</a></li>
-
- <li class="docs-nav-title">Typography</li>
- <li><a href="typography-base.html">Base Styles</a></li>
- <li><a href="typography-helpers.html">Helper Classes</a></li>
-
- <li class="docs-nav-title">Controls</li>
- <li><a href="button.html">Button</a></li>
- <li><a href="button-group.html">Button Group</a></li>
- <li><a href="close-button.html">Close Button</a></li>
- <li><a href="slider.html">Slider <span class="label">JS</span></a></li>
- <li><a href="switch.html">Switch</a></li>
-
- <li class="docs-nav-title">Navigation</li>
- <li><a href="navigation.html">Overview</a></li>
- <li><a href="menu.html">Menu</a></li>
- <li><a href="dropdown-menu.html">Dropdown Menu <span class="label">JS</span></a></li>
- <li><a href="drilldown-menu.html">Drilldown Menu <span class="label">JS</span></a></li>
- <li><a href="accordion-menu.html">Accordion Menu <span class="label">JS</span></a></li>
- <li><a href="top-bar.html">Top Bar</a></li>
- <li><a href="responsive-navigation.html">Responsive Navigation</a></li>
- <li><a href="magellan.html">Magellan <span class="label">JS</span></a></li>
- <li><a href="pagination.html">Pagination</a></li>
- <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
-
- <li class="docs-nav-title">Containers</li>
- <li><a href="accordion.html">Accordion <span class="label">JS</span></a></li>
- <li><a href="callout.html">Callout</a></li>
- <li><a href="dropdown.html">Dropdown <span class="label">JS</span></a></li>
- <li><a href="media-object.html">Media Object</a></li>
- <li><a href="off-canvas.html">Off-canvas <span class="label">JS</span></a></li>
- <li><a href="reveal.html">Reveal <span class="label">JS</span> <small>Modal</small></a></li>
- <li><a href="table.html">Table</a></li>
- <li><a href="tabs.html">Tabs <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Media</li>
- <li><a href="badge.html">Badge</a></li>
- <li><a href="flex-video.html">Flex Video</a></li>
- <li><a href="label.html">Label</a></li>
- <li><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
- <li><a href="progress-bar.html">Progress Bar</a></li>
- <li><a href="thumbnail.html">Thumbnail</a></li>
- <li><a href="tooltip.html">Tooltip <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Plugins</li>
- <li><a href="abide.html">Abide <small>Form Validation</small></a></li>
- <li><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
- <li><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
- <li><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
- <li><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
-
- <li class="docs-nav-title">Sass</li>
- <li><a href="sass-functions.html">Functions</a></li>
- <li><a href="sass-mixins.html">Mixins</a></li>
-
- <li class="docs-nav-title">Libraries</li>
- <li><a href="motion-ui.html">Motion UI</a></li>
- <li><a href="panini.html">Panini</a></li>
- <li><a href="style-sherpa.html">Style Sherpa</a></li>
-
- <li class="docs-nav-title">Older Versions</li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
- <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
- <li><a href="https://get.foundation/sites/docs/v/3.2.5/">Foundation 3</a></li>
- <li><a href="https://get.foundation/sites/docs/v/2.2.1/">Foundation 2</a></li>
- </ul>
-
- </div>
+<div class="zurb-footer-top bg-fblue">
+ <div class="row property">
+ <div class="medium-4 columns">
+ <div class="property-info">
+ <h3>Foundation for Sites</h3>
+ <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
+ </p>
</div>
+ </div>
- <!-- Small Business(Docs) -->
- <section id="studiosCallout">
- <div class="row">
- <div class="medium-4 large-4 columns">
- <img src="https://get.foundation/assets/img/smallbiz-footer.svg" alt="">
- </div>
- <div class="medium-8 large-8 columns banner-info">
- <div class="row column property-label">ZURB Foundation</div>
- <h3 class="light">Yeah, we can help with that.</h3>
- <p class="lead"> We’ll collaborate with your team throughout the entire project life cycle. We’ll take your concept and move it through ideation, hi-fi wireframes, visual design and code, all while informing you on the whys and hows along the way.</p>
- <div class="course-buttons">
- <a href="https://get.foundation/get-involved/premium-support.html" class="studios button" data-zcom-event="studios_foundation_click" id="foundationSmallV1">Show Me How →</a>
- </div>
- </div>
- </div>
- </section>
-
- <div class="docs-newsletter">
- <div class="row">
- <div class="medium-7 large-8 columns">
- <a target="_blank" href="https://get.foundation/learn/responsive-reading.html">
- <h5 class="">Download ZURB’s 21 Responsive Trends That Will Shape 2017</h5>
- <p style="margin-bottom: 0;">Stay informed with amazing responsive trends each month from ZURB.</p>
- </a>
- </div>
- <div class="medium-5 large-4 footer-signup-form columns">
- <a style="margin-bottom: 0;" target="_blank" href="https://get.foundation/learn/responsive-reading.html" class="button expanded">Download the PDF</a>
+ <div class="medium-8 columns">
+ <div class="row collapse">
+ <div class="medium-4 columns">
+ <div class="learn-links">
+ <h4 class="hide-for-small">Want more?</h4>
+ <ul>
+ <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
+ <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
+ <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
+ <li><a href="http://zurb.com/university/courses">Training</a></li>
+ <li><a href="http://zurb.com/library">Design Resources</a></li>
+ </ul>
</div>
</div>
- </div>
-
- <div class="zurb-footer-top bg-fblue">
- <div class="row property">
<div class="medium-4 columns">
- <div class="property-info">
- <h3>Foundation for Sites</h3>
- <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
- </p>
+ <div class="support-links">
+ <h4 class="hide-for-small">Talk to us</h4>
+ <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
+ <p><a href="https://get.foundation/business/business-support.html">Business Support</a></p>
+ <p>Or check our <a href="https://get.foundation/support/support.html">support page</a></p>
</div>
</div>
-
- <div class="medium-8 columns">
- <div class="row collapse">
- <div class="medium-4 columns">
- <div class="learn-links">
- <h4 class="hide-for-small">Want more?</h4>
- <ul>
- <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
- <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
- <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
- <li><a href="http://zurb.com/university/courses">Training</a></li>
- <li><a href="http://zurb.com/library">Design Resources</a></li>
- </ul>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="support-links">
- <h4 class="hide-for-small">Talk to us</h4>
- <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
- <p><a href="https://get.foundation/get-involved/contribute.html">Get involved in<br>our amazing community.</a></p>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="connect-links">
- <h4 class="hide-for-small">Stay Updated</h4>
- <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
- <a href="http://zurb.com/news" class="small button">Stay Connected</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="row global">
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/studios" class="footer-link-block services">
- <span class="title">Studios</span>
- <span>Helping more than 200 startups succeed since 1998.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="https://get.foundation/" class="footer-link-block foundation">
- <span class="title">Foundation</span>
- <span>The most advanced front-end framework in the world.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/notable" class="footer-link-block apps">
- <span class="title">Notable Design Apps</span>
- <span>Prototype, iterate and collect feedback on your products.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/university" class="footer-link-block expo">
- <span class="title">University</span>
- <span>Ideas, thoughts and design resources shared with you.</span>
- </a>
+ <div class="medium-4 columns">
+ <div class="connect-links">
+ <h4 class="hide-for-small">Stay Updated</h4>
+ <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
+ <a href="http://zurb.com/news" class="small button">Stay Connected</a>
</div>
</div>
</div>
-
- <div class="zurb-footer-bottom">
- <div class="row">
- <div class="medium-4 medium-push-8 columns">
- <ul class="home-social">
- <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
- <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
- <li><a href="http://zurb.com/contact" class="mail"></a></li>
- </ul>
- </div>
- <div class="medium-8 medium-pull-4 columns">
- <a href="http://www.zurb.com" class="zurb-logo regular"></a>
- <ul class="zurb-links">
- <li><a href="http://zurb.com/about">About</a></li>
- <li><a href="http://zurb.com/blog">Blog</a></li>
- <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
- <li><a href="http://zurb.com/contact">Contact</a></li>
- <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
- </ul>
- <p class="copyright">© 1998‐2016 ZURB, Inc. All rights reserved.</p>
- </div>
- </div>
- </div>
-
</div>
</div>
+ <div class="row global">
+ <div class="medium-3 small-6 columns">
+ <a href="http://zurb.com/studios" class="footer-link-block services">
+ <span class="title">Studios</span>
+ <span>Helping more than 200 startups succeed since 1998.</span>
+ </a>
+ </div>
+ <div class="medium-3 small-6 columns">
+ <a href="https://get.foundation/" class="footer-link-block foundation">
+ <span class="title">Foundation</span>
+ <span>The most advanced front-end framework in the world.</span>
+ </a>
+ </div>
+ <div class="medium-3 small-6 columns">
+ <a href="http://zurb.com/notable" class="footer-link-block apps">
+ <span class="title">Notable Design Apps</span>
+ <span>Prototype, iterate and collect feedback on your products.</span>
+ </a>
+ </div>
+ <div class="medium-3 small-6 columns">
+ <a href="http://zurb.com/university" class="footer-link-block expo">
+ <span class="title">University</span>
+ <span>Ideas, thoughts and design resources shared with you.</span>
+ </a>
+ </div>
+ </div>
+</div>
+
+<div class="zurb-footer-bottom">
+ <div class="row">
+ <div class="medium-4 medium-4 push-8 columns">
+ <ul class="home-social">
+ <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
+ <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
+ <li><a href="http://zurb.com/contact" class="mail"></a></li>
+ </ul>
+ </div>
+ <div class="medium-8 medium-8 pull-4 columns">
+ <a href="http://www.zurb.com" class="zurb-logo regular"></a>
+ <ul class="zurb-links">
+ <li><a href="http://zurb.com/about">About</a></li>
+ <li><a href="http://zurb.com/blog">Blog</a></li>
+ <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
+ <li><a href="http://zurb.com/contact">Contact</a></li>
+ <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
+ </ul>
+ <p class="copyright">© 1998‐2015 ZURB, Inc. All rights reserved.</p>
+ </div>
+ </div>
+</div>
+
+ </section>
+
+ </div>
+ </div>
+
+ <script src="assets/js/templates.js"></script>
+ <script src="assets/js/all.js"></script>
+ <script>
+ var _gaq = _gaq || [];
+ _gaq.push(
+ ['_setAccount', 'UA-2195009-2'],
+ ['_trackPageview'],
+ ['b._setAccount', 'UA-2195009-27'],
+ ['b._trackPageview']
+ );
+
+ (function() {
+ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+ })();
+ </script>
+ <script>
+ $(document).foundation().foundation('joyride', 'start');
+ </script>
+ </body>
+
- <script>
- var _gaq = _gaq || [];
- _gaq.push(
- ['_setAccount', 'UA-2195009-2'],
- ['_trackPageview'],
- ['b._setAccount', 'UA-2195009-27'],
- ['b._trackPageview']
- );
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
-
- <script src="assets/js/vendor.js?hash=96e812932e8d0bf26378f25652785640"></script>
- <script src="assets/js/foundation.js?hash=42dbc273fe4fb5760fafbd05c60ab192"></script>
- <script src="assets/js/docs.js?hash=81f88db20304c5e7df5109a0e33cf5d9"></script>
- <script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
-</body>
</html>
+++ /dev/null
-<!doctype html>
-<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
-<html class="no-js" lang="en" dir="ltr">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="Our flexible menu component makes it easy to build many common navigation patterns, all with the same markup.">
- <link rel="icon" href="assets/img/icons/foundation-favicon.ico" type="image/x-icon">
- <title>Foundation for Sites 6 Docs | Menu</title>
- <link href="assets/css/docs.css?hash=090dcbba0c3fd7e3c7136e06dad3b572" rel="stylesheet" />
- <link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=1e43c1a26e7743d827ea559c857549d7" rel="stylesheet">
- <!-- <link rel="stylesheet" href="./node_modules/motion-ui/dist/motion-ui.css" /> -->
-</head>
-<body>
-
- <div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
-
- <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="mobile-ofc vertical menu">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
-
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/support.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/sort/unanswered">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
- </div>
-
- <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="vertical menu">
- <li><a href="#">Foundation</a></li>
- <li><a href="#">Dot</a></li>
- <li><a href="#">ZURB</a></li>
- <li><a href="#">Com</a></li>
- <li><a href="#">Slash</a></li>
- <li><a href="#">Sites</a></li>
- </ul>
- </div>
-
-
- <div class="off-canvas-content" data-off-canvas-content>
- <!-- Info Banner For Announcements or Links -->
- <!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
- <div class="info">
- <h5>Foundation 6 is here!</h5>
- </div>
- </a> -->
-
- <nav class="marketing-topbar show-for-medium">
-
- <ul class="menu">
- <li class="topbar-title"><a href="https://get.foundation/index.html"><img src="assets/img/logos/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
- </ul>
-
- <ul class="dropdown menu" data-dropdown-menu data-click-open="false">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/" target="_blank">F5 Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="https://get.foundation/emails/docs/" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
-
- </nav>
-
- <div class="title-bar hide-for-medium">
- <div class="title-bar-left">
- <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
- <span class="title-bar-title">Foundation</span>
- </div>
- </div>
-
-
- <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
-
- <div class="expanded row">
- <div class="medium-9 large-10 medium-push-3 large-push-2 columns">
-
-<article class="docs-component" id="docs-menu">
-
-<a href="#docs-menu" class="small secondary expanded button hide-for-medium">Jump to Nav</a>
-
-<header>
- <h1 class="docs-page-title">Menu</h1>
-
-
- <p class="lead docs-page-lead">Our flexible menu component makes it easy to build many common navigation patterns, all with the same markup.</p>
-
- <ul class="menu simple docs-contribute-menu">
- <li><a href="https://github.com/zurb/foundation-sites/edit/master/docs/pages/menu.md" target="_blank"><i class="fi-pencil"></i>Edit this Page</a></li>
- <li><a href="https://github.com/zurb/foundation-sites/issues/new?title=%5BMenu%5D%20ISSUE%20NAME%20HERE" target="_blank"><i class="fi-social-github"></i>Report a Bug</a></li>
- <li><a href="https://get.foundation/forum" target="_blank"><i class="fi-comment"></i>Get Help</a></li>
- </ul>
-</header>
-
-<hr>
-
-<div class="row">
-
-<div class="large-9 columns" id="docs">
-
-<p>The menu is a flexible, all-purpose component for navigation. It replaces Foundation 5's inline list, side nav, sub nav, and icon bar, unifying them into one component.</p>
-<hr>
-<h2 id="basic-menu" class="docs-heading" data-magellan-target="basic-menu">Basic Menu<a class="docs-heading-icon" href="#basic-menu"></a></h2><p>All versions of the menu are a <code><ul></code> filled with <code><li></code> elements containing links. By default, a Menu is horizontally oriented.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>One<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Two<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Three<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Four<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">ul</span>></span></code></pre></div>
-
-<div class="docs-code-live"><ul class="menu">
- <li><a href="#">One</a></li>
- <li><a href="#">Two</a></li>
- <li><a href="#">Three</a></li>
- <li><a href="#">Four</a></li>
-</ul></div><hr>
-<h2 id="item-alignment" class="docs-heading" data-magellan-target="item-alignment">Item Alignment<a class="docs-heading-icon" href="#item-alignment"></a></h2><p>By default, each item in the menu aligns to the left. They can also be aligned to the right with the <code>.align-right</code> class.</p>
-<div class="warning callout">
- <p>In a <a href="rtl.html">right-to-left</a> environment, items align to the right by default, and the class <code>.align-left</code> can be used to reverse direction.</p>
-</div>
-
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu align-right"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>One<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Two<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Three<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Four<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">ul</span>></span></code></pre></div>
-
-<div class="docs-code-live"><ul class="menu align-right">
- <li><a href="#">One</a></li>
- <li><a href="#">Two</a></li>
- <li><a href="#">Three</a></li>
- <li><a href="#">Four</a></li>
-</ul></div><p><br></p>
-<p>To align items in the middle, add a wrapping element with the class <code>.menu-centered</code>.</p>
-<div class="primary callout">
- <p>If you're using <a href="flexbox.html">Flexbox mode</a>, you don't need the wrapper class. Instead, you can just add the class <code>.align-center</code> to the menu.</p>
-</div>
-
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu-centered"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>One<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Two<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Three<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Four<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="menu-centered">
- <ul class="menu">
- <li><a href="#">One</a></li>
- <li><a href="#">Two</a></li>
- <li><a href="#">Three</a></li>
- <li><a href="#">Four</a></li>
- </ul>
-</div></div><p><br></p>
-<p>Items can also be set to expand out and take up an even amount of space, with the <code>.expanded</code> class. Thanks to the magic of CSS, the items will automatically size themselves equally depending on how many are inside the menu.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu expanded"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>One<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Two<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">ul</span>></span></code></pre></div>
-
-<div class="docs-code-live"><ul class="menu expanded">
- <li><a href="#">One</a></li>
- <li><a href="#">Two</a></li>
-</ul></div><ul class="menu expanded">
- <li><a href="#">One</a></li>
- <li><a href="#">Two</a></li>
- <li><a href="#">Three</a></li>
-</ul>
-
-<ul class="menu expanded">
- <li><a href="#">One</a></li>
- <li><a href="#">Two</a></li>
- <li><a href="#">Three</a></li>
- <li><a href="#">Four</a></li>
-</ul>
-
-<hr>
-<h2 id="vertical-menu" class="docs-heading" data-magellan-target="vertical-menu">Vertical Menu<a class="docs-heading-icon" href="#vertical-menu"></a></h2><p>Add the <code>.vertical</code> class to a Menu to switch its orientation.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu vertical"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>One<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Two<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Three<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Four<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">ul</span>></span></code></pre></div>
-
-<div class="docs-code-live"><ul class="menu vertical">
- <li><a href="#">One</a></li>
- <li><a href="#">Two</a></li>
- <li><a href="#">Three</a></li>
- <li><a href="#">Four</a></li>
-</ul></div><hr>
-<h2 id="simple-style" class="docs-heading" data-magellan-target="simple-style">Simple Style<a class="docs-heading-icon" href="#simple-style"></a></h2><p>Add the <code>.simple</code> class to a Menu to remove the padding and color change. This style imitates the inline list from Foundation 5.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu simple"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>One<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Two<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Three<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Four<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">ul</span>></span></code></pre></div>
-
-<div class="docs-code-live"><ul class="menu simple">
- <li>One</li>
- <li><a href="#">Two</a></li>
- <li><a href="#">Three</a></li>
- <li><a href="#">Four</a></li>
-</ul></div><hr>
-<h2 id="nested-style" class="docs-heading" data-magellan-target="nested-style">Nested Style<a class="docs-heading-icon" href="#nested-style"></a></h2><p>Add a new menu inside the <code><li></code> of a Menu and add the class <code>.nested</code> to create a nested menu. The nested Menu has extra padding on the inside.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"vertical menu"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>One<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nested vertical menu"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>One<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Two<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Three<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Four<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Two<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Three<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Four<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">ul</span>></span></code></pre></div>
-
-<div class="docs-code-live"><ul class="vertical menu">
- <li>
- <a href="#">One</a>
- <ul class="nested vertical menu">
- <li><a href="#">One</a></li>
- <li><a href="#">Two</a></li>
- <li><a href="#">Three</a></li>
- <li><a href="#">Four</a></li>
- </ul>
- </li>
- <li><a href="#">Two</a></li>
- <li><a href="#">Three</a></li>
- <li><a href="#">Four</a></li>
-</ul></div><hr>
-<h2 id="active-state" class="docs-heading" data-magellan-target="active-state">Active State<a class="docs-heading-icon" href="#active-state"></a></h2><p>Add the class <code>.active</code> to any <code><li></code> to create an active state. You could apply this server-side to mark the active page, or dynamically with JavaScript.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"active"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span>></span>Home<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span>></span>About<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span>></span>Nachos<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">ul</span>></span></code></pre></div>
-
-<div class="docs-code-live"><ul class="menu">
- <li class="active"><a>Home</a></li>
- <li><a>About</a></li>
- <li><a>Nachos</a></li>
-</ul></div><hr>
-<h2 id="text" class="docs-heading" data-magellan-target="text">Text<a class="docs-heading-icon" href="#text"></a></h2><p>Because the padding of the menu item is applied to the <code><a></code>, if you try to add an item that's text only, it will be misaligned. To get around this, add the class <code>.menu-text</code> to any <code><li></code> that doesn't have a link inside of it.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu-text"</span>></span>Site Title<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>One<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Two<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Three<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">ul</span>></span></code></pre></div>
-
-<div class="docs-code-live"><ul class="menu">
- <li class="menu-text">Site Title</li>
- <li><a href="#">One</a></li>
- <li><a href="#">Two</a></li>
- <li><a href="#">Three</a></li>
-</ul></div><hr>
-<h2 id="icons" class="docs-heading" data-magellan-target="icons">Icons<a class="docs-heading-icon" href="#icons"></a></h2><p>Menu items can have icons. Wrap the text of the item in a <code><span></code>, and then add an <code><img></code> element before the <code><span></code>. If you're using the Foundation icon font, the <code><img></code> will be an <code><i></code> instead.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"fi-list"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span>></span>One<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"fi-list"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span>></span>Two<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"fi-list"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span>></span>Three<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"fi-list"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span>></span>Four<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">ul</span>></span></code></pre></div>
-
-<div class="docs-code-live"><ul class="menu">
- <li><a href="#"><i class="fi-list"></i> <span>One</span></a></li>
- <li><a href="#"><i class="fi-list"></i> <span>Two</span></a></li>
- <li><a href="#"><i class="fi-list"></i> <span>Three</span></a></li>
- <li><a href="#"><i class="fi-list"></i> <span>Four</span></a></li>
-</ul></div><hr>
-<p>Add the class <code>.icon-top</code> to the Menu to orient icons above the text.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu icon-top"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"fi-list"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span>></span>One<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"fi-list"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span>></span>Two<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"fi-list"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span>></span>Three<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"fi-list"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span>></span>Four<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">ul</span>></span></code></pre></div>
-
-<div class="docs-code-live"><ul class="menu icon-top">
- <li><a href="#"><i class="fi-list"></i> <span>One</span></a></li>
- <li><a href="#"><i class="fi-list"></i> <span>Two</span></a></li>
- <li><a href="#"><i class="fi-list"></i> <span>Three</span></a></li>
- <li><a href="#"><i class="fi-list"></i> <span>Four</span></a></li>
-</ul></div><hr>
-<h2 id="sticky-navigation" class="docs-heading" data-magellan-target="sticky-navigation">Sticky Navigation<a class="docs-heading-icon" href="#sticky-navigation"></a></h2><p>See the documentation for the <a href="sticky.html#sticky-navigation">Sticky</a> plugin to see how to easily make a sticky nav bar.</p>
-
-
-<hr>
-<section>
- <h2 id="sass-reference" class="docs-heading" data-magellan-target="sass-reference">Sass Reference<a class="docs-heading-icon" href="#sass-reference"></a></h2>
-
- <section>
- <h3 id="sass-variables" class="docs-heading">Variables<a class="docs-heading-icon" href="#sass-variables"></a></h3>
-
- <p>The default styles of this component can be customized using these Sass variables in your project's <a href="sass.html#the-settings-file">settings file</a>.</p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td class="name"><code>$menu-margin</code></td>
- <td>Number</td>
- <td class="number"><code>0</code></td>
- <td><p>Margin of a menu.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$menu-margin-nested</code></td>
- <td>Number</td>
- <td class="number"><code>1rem</code></td>
- <td><p>Left-hand margin of a nested menu.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$menu-item-padding</code></td>
- <td>Number</td>
- <td class="number"><code>0.7rem 1rem</code></td>
- <td><p>Padding for items in a menu.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$menu-item-color-active</code></td>
- <td>Color</td>
- <td class="color"><code>$white</code></td>
- <td><p>Text color of an active menu item.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$menu-item-background-active</code></td>
- <td>Color</td>
- <td class="color"><code>map-get($foundation-palette, primary)</code></td>
- <td><p>Background color of an active menu item.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$menu-icon-spacing</code></td>
- <td>Number</td>
- <td class="number"><code>0.25rem</code></td>
- <td><p>Spacing between an icon and text in a menu item.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="sass-mixins" class="docs-heading">Mixins<a class="docs-heading-icon" href="#sass-mixins"></a></h3>
-
- <p>We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.</p>
-
-
- <section >
- <h4 id="menu-base" class="docs-heading">menu-base<a class="docs-heading-icon" href="#menu-base"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> menu-base;</code></pre>
- </div>
-
- <p>Creates the base styles for a Menu.</p>
-
-
-
-
-
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="menu-expand" class="docs-heading">menu-expand<a class="docs-heading-icon" href="#menu-expand"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> menu-expand;</code></pre>
- </div>
-
- <p>Expands the items of a Menu, so each item is the same width.</p>
-
-
-
-
-
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="menu-direction" class="docs-heading">menu-direction<a class="docs-heading-icon" href="#menu-direction"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> menu-direction(<span class="hljs-variable">$dir</span>);</code></pre>
- </div>
-
- <p>Sets the direction of a Menu.</p>
-
-
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$dir</code></td>
- <td>Keyword</td>
- <td><code>horizontal</code></td>
- <td><p>Direction of the Menu. Can be <code>horizontal</code> or <code>vertical</code>.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="menu-simple" class="docs-heading">menu-simple<a class="docs-heading-icon" href="#menu-simple"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> menu-simple;</code></pre>
- </div>
-
- <p>Creates a simple Menu, which has no padding or hover state.</p>
-
-
-
-
-
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="menu-nested" class="docs-heading">menu-nested<a class="docs-heading-icon" href="#menu-nested"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> menu-nested(<span class="hljs-variable">$padding</span>);</code></pre>
- </div>
-
- <p>Adds styles for a nested Menu, by adding <code>margin-left</code> to the menu.</p>
-
-
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$padding</code></td>
- <td>Keyword or Number</td>
- <td><code>auto</code></td>
- <td><p>Length of the margin.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="menu-icons" class="docs-heading">menu-icons<a class="docs-heading-icon" href="#menu-icons"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> menu-icons(<span class="hljs-variable">$position</span>, <span class="hljs-variable">$base</span>);</code></pre>
- </div>
-
- <p>Adds support for icons to Menu items.</p>
-
-
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$position</code></td>
- <td>Keyword</td>
- <td><code>side</code></td>
- <td><p>Positioning for icons. Can be <code>side</code> (left, or right on RTL) or <code>top</code>.</p>
-</td>
- </tr>
- <tr>
- <td><code>$base</code></td>
- <td>Boolean</td>
- <td><code>true</code></td>
- <td><p>Set to <code>false</code> to prevent the shared CSS between side- and top-aligned icons from being printed. Set this to <code>false</code> if you're calling the mixin multiple times on the same element.</p>
-</td>
- </tr>
- </table>
- </section>
-
-
-
-
-
- </section>
-
-
-</section>
-
-
-<!-- <hr> -->
-<!-- <section class="docs-building-blocks">
- <h2 id="building-blocks" class="docs-heading" data-magellan-target="building-blocks">Building Blocks<a class="docs-heading-icon" href="#building-blocks"></a></h2>
-
- <p><a href="http://zurb.com/building-blocks">Building Blocks</a> is a ZURB-curated resource with useful code snippets that use Foundation components. Here are a few for this component:</p>
-
- <div class="warning callout">
- <p>These are placeholder items. If you have ideas for building blocks for this component, <a href="https://github.com/zurb/foundation-sites-6/issues/118">we're taking ideas on GitHub</a>.</p>
- </div>
-
- <div data-building-blocks></div>
-</section> -->
-
-</div>
-
-<div class="large-3 columns" data-sticky-container>
- <nav class="columns docs-toc-wrap" data-sticky data-anchor="docs" data-sticky-on="large">
- <div class="docs-toc hide" id="docsTOC">
- <ul class="vertical menu" data-docs-toc>
- <li class="docs-nav-title">On this page:</li>
- </ul>
- </div>
- <div class="foundation-toc-ad-unit" id="TOCAdUnit">
- </div>
- </nav>
-</div>
-
-</div>
-
-</article>
-
- </div>
- <div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
- <ul class="vertical menu docs-nav" id="docs-menu">
- <p class="docs-nav-version">
- <span data-docs-version></span>
- <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">(Changelog)</a>
- </p>
-
- <li class="docs-nav-title">Getting Started</li>
- <li><a href="installation.html">Installation</a></li>
- <li><a href="starter-projects.html">Starter Projects</a></li>
- <li><a href="compatibility.html">Compatibility</a></li>
- <li><a href="accessibility.html">Accessibility</a></li>
- <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
-
- <li class="docs-nav-title">Setup</li>
- <li><a href="global.html">Global Styles</a></li>
- <li><a href="rtl.html">Right-to-Left Support</a></li>
- <li><a href="flexbox.html">Flexbox</a></li>
- <li><a href="sass.html">Sass</a></li>
- <li><a href="javascript.html">JavaScript</a></li>
- <li><a href="javascript-utilities.html">JavaScript Utilities</a></li>
- <li><a href="media-queries.html">Media Queries</a></li>
-
- <li class="docs-nav-title">General</li>
- <li><a href="grid.html">Grid</a></li>
- <li><a href="flex-grid.html">Flex Grid</a></li>
- <li><a href="forms.html">Forms</a></li>
- <li><a href="visibility.html">Visibility Classes</a></li>
- <li><a href="float-classes.html">Float Classes</a></li>
-
- <li class="docs-nav-title">Typography</li>
- <li><a href="typography-base.html">Base Styles</a></li>
- <li><a href="typography-helpers.html">Helper Classes</a></li>
-
- <li class="docs-nav-title">Controls</li>
- <li><a href="button.html">Button</a></li>
- <li><a href="button-group.html">Button Group</a></li>
- <li><a href="close-button.html">Close Button</a></li>
- <li><a href="slider.html">Slider <span class="label">JS</span></a></li>
- <li><a href="switch.html">Switch</a></li>
-
- <li class="docs-nav-title">Navigation</li>
- <li><a href="navigation.html">Overview</a></li>
- <li class="current"><a href="menu.html">Menu</a></li>
- <li><a href="dropdown-menu.html">Dropdown Menu <span class="label">JS</span></a></li>
- <li><a href="drilldown-menu.html">Drilldown Menu <span class="label">JS</span></a></li>
- <li><a href="accordion-menu.html">Accordion Menu <span class="label">JS</span></a></li>
- <li><a href="top-bar.html">Top Bar</a></li>
- <li><a href="responsive-navigation.html">Responsive Navigation</a></li>
- <li><a href="magellan.html">Magellan <span class="label">JS</span></a></li>
- <li><a href="pagination.html">Pagination</a></li>
- <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
-
- <li class="docs-nav-title">Containers</li>
- <li><a href="accordion.html">Accordion <span class="label">JS</span></a></li>
- <li><a href="callout.html">Callout</a></li>
- <li><a href="dropdown.html">Dropdown <span class="label">JS</span></a></li>
- <li><a href="media-object.html">Media Object</a></li>
- <li><a href="off-canvas.html">Off-canvas <span class="label">JS</span></a></li>
- <li><a href="reveal.html">Reveal <span class="label">JS</span> <small>Modal</small></a></li>
- <li><a href="table.html">Table</a></li>
- <li><a href="tabs.html">Tabs <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Media</li>
- <li><a href="badge.html">Badge</a></li>
- <li><a href="flex-video.html">Flex Video</a></li>
- <li><a href="label.html">Label</a></li>
- <li><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
- <li><a href="progress-bar.html">Progress Bar</a></li>
- <li><a href="thumbnail.html">Thumbnail</a></li>
- <li><a href="tooltip.html">Tooltip <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Plugins</li>
- <li><a href="abide.html">Abide <small>Form Validation</small></a></li>
- <li><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
- <li><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
- <li><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
- <li><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
-
- <li class="docs-nav-title">Sass</li>
- <li><a href="sass-functions.html">Functions</a></li>
- <li><a href="sass-mixins.html">Mixins</a></li>
-
- <li class="docs-nav-title">Libraries</li>
- <li><a href="motion-ui.html">Motion UI</a></li>
- <li><a href="panini.html">Panini</a></li>
- <li><a href="style-sherpa.html">Style Sherpa</a></li>
-
- <li class="docs-nav-title">Older Versions</li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
- <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
- <li><a href="https://get.foundation/sites/docs/v/3.2.5/">Foundation 3</a></li>
- <li><a href="https://get.foundation/sites/docs/v/2.2.1/">Foundation 2</a></li>
- </ul>
-
- </div>
- </div>
-
- <!-- Small Business(Docs) -->
- <section id="studiosCallout">
- <div class="row">
- <div class="medium-4 large-4 columns">
- <img src="https://get.foundation/assets/img/smallbiz-footer.svg" alt="">
- </div>
- <div class="medium-8 large-8 columns banner-info">
- <div class="row column property-label">ZURB Foundation</div>
- <h3 class="light">Yeah, we can help with that.</h3>
- <p class="lead"> We’ll collaborate with your team throughout the entire project life cycle. We’ll take your concept and move it through ideation, hi-fi wireframes, visual design and code, all while informing you on the whys and hows along the way.</p>
- <div class="course-buttons">
- <a href="https://get.foundation/get-involved/premium-support.html" class="studios button" data-zcom-event="studios_foundation_click" id="foundationSmallV1">Show Me How →</a>
- </div>
- </div>
- </div>
- </section>
-
- <div class="docs-newsletter">
- <div class="row">
- <div class="medium-7 large-8 columns">
- <a target="_blank" href="https://get.foundation/learn/responsive-reading.html">
- <h5 class="">Download ZURB’s 21 Responsive Trends That Will Shape 2017</h5>
- <p style="margin-bottom: 0;">Stay informed with amazing responsive trends each month from ZURB.</p>
- </a>
- </div>
- <div class="medium-5 large-4 footer-signup-form columns">
- <a style="margin-bottom: 0;" target="_blank" href="https://get.foundation/learn/responsive-reading.html" class="button expanded">Download the PDF</a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-top bg-fblue">
- <div class="row property">
- <div class="medium-4 columns">
- <div class="property-info">
- <h3>Foundation for Sites</h3>
- <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
- </p>
- </div>
- </div>
-
- <div class="medium-8 columns">
- <div class="row collapse">
- <div class="medium-4 columns">
- <div class="learn-links">
- <h4 class="hide-for-small">Want more?</h4>
- <ul>
- <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
- <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
- <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
- <li><a href="http://zurb.com/university/courses">Training</a></li>
- <li><a href="http://zurb.com/library">Design Resources</a></li>
- </ul>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="support-links">
- <h4 class="hide-for-small">Talk to us</h4>
- <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
- <p><a href="https://get.foundation/get-involved/contribute.html">Get involved in<br>our amazing community.</a></p>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="connect-links">
- <h4 class="hide-for-small">Stay Updated</h4>
- <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
- <a href="http://zurb.com/news" class="small button">Stay Connected</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="row global">
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/studios" class="footer-link-block services">
- <span class="title">Studios</span>
- <span>Helping more than 200 startups succeed since 1998.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="https://get.foundation/" class="footer-link-block foundation">
- <span class="title">Foundation</span>
- <span>The most advanced front-end framework in the world.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/notable" class="footer-link-block apps">
- <span class="title">Notable Design Apps</span>
- <span>Prototype, iterate and collect feedback on your products.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/university" class="footer-link-block expo">
- <span class="title">University</span>
- <span>Ideas, thoughts and design resources shared with you.</span>
- </a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-bottom">
- <div class="row">
- <div class="medium-4 medium-push-8 columns">
- <ul class="home-social">
- <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
- <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
- <li><a href="http://zurb.com/contact" class="mail"></a></li>
- </ul>
- </div>
- <div class="medium-8 medium-pull-4 columns">
- <a href="http://www.zurb.com" class="zurb-logo regular"></a>
- <ul class="zurb-links">
- <li><a href="http://zurb.com/about">About</a></li>
- <li><a href="http://zurb.com/blog">Blog</a></li>
- <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
- <li><a href="http://zurb.com/contact">Contact</a></li>
- <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
- </ul>
- <p class="copyright">© 1998‐2016 ZURB, Inc. All rights reserved.</p>
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- <script>
- var _gaq = _gaq || [];
- _gaq.push(
- ['_setAccount', 'UA-2195009-2'],
- ['_trackPageview'],
- ['b._setAccount', 'UA-2195009-27'],
- ['b._trackPageview']
- );
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
-
- <script src="assets/js/vendor.js?hash=2d2b603233972d4c6048bfaf3ea1e4ae"></script>
- <script src="assets/js/foundation.js?hash=fda4bd0deeff274a5e45af03f8f59616"></script>
- <script src="assets/js/docs.js?hash=b8825234e048d56467d4929995899bb4"></script>
- <script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
-</body>
-</html>
+++ /dev/null
-<!doctype html>
-<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
-<html class="no-js" lang="en" dir="ltr">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="A Sass library for creating flexible UI transitions and animations.">
- <link rel="icon" href="assets/img/icons/foundation-favicon.ico" type="image/x-icon">
- <title>Foundation for Sites 6 Docs | Motion UI</title>
- <link href="assets/css/docs.css?hash=9f7657c0d138b0f576681d67fff70cb7" rel="stylesheet" />
- <link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=e6afe4f3e44983ff226c200bd6249781" rel="stylesheet">
- <!-- <link rel="stylesheet" href="./node_modules/motion-ui/dist/motion-ui.css" /> -->
-</head>
-<body>
-
- <div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
-
- <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="mobile-ofc vertical menu">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
-
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/support.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/sort/unanswered">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
- </div>
-
- <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="vertical menu">
- <li><a href="#">Foundation</a></li>
- <li><a href="#">Dot</a></li>
- <li><a href="#">ZURB</a></li>
- <li><a href="#">Com</a></li>
- <li><a href="#">Slash</a></li>
- <li><a href="#">Sites</a></li>
- </ul>
- </div>
-
-
- <div class="off-canvas-content" data-off-canvas-content>
- <!-- Info Banner For Announcements or Links -->
- <!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
- <div class="info">
- <h5>Foundation 6 is here!</h5>
- </div>
- </a> -->
-
- <nav class="marketing-topbar show-for-medium">
-
- <ul class="menu">
- <li class="topbar-title"><a href="https://get.foundation/index.html"><img src="assets/img/logos/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
- </ul>
-
- <ul class="dropdown menu" data-dropdown-menu data-click-open="false">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/" target="_blank">F5 Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="https://get.foundation/emails/docs/" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
-
- </nav>
-
- <div class="title-bar hide-for-medium">
- <div class="title-bar-left">
- <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
- <span class="title-bar-title">Foundation</span>
- </div>
- </div>
-
-
- <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
-
- <div class="expanded row">
- <div class="medium-9 large-10 medium-push-3 large-push-2 columns">
-
-<article class="docs-component" id="docs-motion-ui">
-
-<a href="#docs-menu" class="small secondary expanded button hide-for-medium">Jump to Nav</a>
-
-<header>
- <h1 class="docs-page-title">Motion UI</h1>
-
- <span data-tooltip title="This is an external library." class="docs-lib label"><a href="https://github.com/zurb/motion-ui" target="_blank">Library</a></span>
-
- <p class="lead docs-page-lead">A Sass library for creating flexible UI transitions and animations.</p>
-
- <ul class="menu simple docs-contribute-menu">
- <li><a href="https://github.com/zurb/foundation-sites/edit/master/docs/pages/motion-ui.md" target="_blank"><i class="fi-pencil"></i>Edit this Page</a></li>
- <li><a href="https://github.com/zurb/motion-ui/issues" target="_blank"><i class="fi-social-github"></i>Report a Bug</a></li>
- <li><a href="https://get.foundation/forum" target="_blank"><i class="fi-comment"></i>Get Help</a></li>
- </ul>
-</header>
-
-<hr>
-
-<div class="row">
-
-<div class="large-9 columns" id="docs">
-
-<p>Motion UI is a standalone library that powers the transition effects used in a number of Foundation components, including <a href="toggler.html">Toggler</a>, <a href="reveal.html">Reveal</a>, and <a href="orbit.html">Orbit</a>. The transitions are powered by special transition classes that the Motion UI Sass creates. For example, here are two instances of Toggler—one using fade classes (<code>.fade-in</code> and <code>.fade-out</code>), and one using slide classes (<code>.slide-in-down</code> and <code>.slide-out-up</code>).</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">data-toggler</span> <span class="hljs-attr">data-animate</span>=<span class="hljs-string">"fade-in fade-out"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"callout secondary"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span>This panel fades.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">data-toggler</span> <span class="hljs-attr">data-animate</span>=<span class="hljs-string">"slide-in-down slide-out-up"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"callout secondary"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span>This panel slides.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div><p><button type="button" class="button" data-toggle="motion-example-1">Fade</button><button type="button" class="button" data-toggle="motion-example-2">Slide</button></p>
-<div class="row">
- <div class="small-6 columns">
- <div data-toggler data-animate="fade-in fade-out" class="callout secondary ease" id="motion-example-1">
- <p>This panel <strong>fades</strong>.</p>
- </div>
- </div>
- <div class="small-6 columns">
- <div data-toggler data-animate="slide-in-down slide-out-up" class="callout secondary ease" id="motion-example-2">
- <p>This panel <strong>slides</strong>.</p>
- </div>
- </div>
-</div>
-
-<hr>
-<h2 id="installing" class="docs-heading" data-magellan-target="installing">Installing<a class="docs-heading-icon" href="#installing"></a></h2><p><strong>Motion UI is already included in both <a href="starter-projects.html">starter projects</a>.</strong> If you want to add it to an existing project, follow these steps.</p>
-<p>First, install the library with npm or Bower.</p>
-<div class="docs-code" data-docs-code><pre><code class="bash">npm install motion-ui --save-dev
- bower install motion-ui --save-dev</code></pre></div><p>Next, add the path <code>[modules_folder]/motion-ui/src</code> to your Sass compiler's import path list. Here's what you would add in Compass, via <code>config.rb</code>:</p>
-<div class="docs-code" data-docs-code><pre><code class="ruby">add_import_path <span class="hljs-string">'node_modules/motion-ui/src'</span></code></pre></div><p>Here's how it works using gulp-sass:</p>
-<div class="docs-code" data-docs-code><pre><code class="js">gulp.src(<span class="hljs-string">'./src/scss/app.scss'</span>)
- .pipe(sass({
- includePaths: [<span class="hljs-string">'node_modules/motion-ui/src'</span>]
- }));</code></pre></div><p>Finally, import the library into your Sass file.</p>
-<div class="docs-code" data-docs-code><pre><code class="scss">@<span class="hljs-keyword">import</span> <span class="hljs-string">'motion-ui'</span></code></pre></div><p>Or, another way to start using Motion UI is through a CDN.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-comment"><!-- Insert this within your head tag and after foundation.css --></span>
-<span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.1.1/motion-ui.min.css"</span> /></span></code></pre></div><hr>
-<h2 id="built-in-transitions" class="docs-heading" data-magellan-target="built-in-transitions">Built-in Transitions<a class="docs-heading-icon" href="#built-in-transitions"></a></h2><p>Motion UI includes more than two dozen built-in transition classes. They can be enabled by adding this line to your Sass file, after you've imported the library:</p>
-<div class="docs-code" data-docs-code><pre><code class="scss">@<span class="hljs-keyword">include</span> motion-ui-transitions;</code></pre></div><div>
- <select name="docs-transitions" class="docs-transitions">
- <optgroup label="Slide">
- <option value="slide-in-down">slide-in-down</option>
- <option value="slide-in-left">slide-in-left</option>
- <option value="slide-in-up">slide-in-up</option>
- <option value="slide-in-right">slide-in-right</option>
- <option value="slide-out-down">slide-out-down</option>
- <option value="slide-out-left">slide-out-left</option>
- <option value="slide-out-up">slide-out-up</option>
- <option value="slide-out-right">slide-out-right</option>
- </optgroup>
- <optgroup label="Fade">
- <option value="fade-in">fade-in</option>
- <option value="fade-out">fade-out</option>
- </optgroup>
- <optgroup label="Hinge">
- <option value="hinge-in-from-top">hinge-in-from-top</option>
- <option value="hinge-in-from-right">hinge-in-from-right</option>
- <option value="hinge-in-from-bottom">hinge-in-from-bottom</option>
- <option value="hinge-in-from-left">hinge-in-from-left</option>
- <option value="hinge-in-from-middle-x">hinge-in-from-middle-x</option>
- <option value="hinge-in-from-middle-y">hinge-in-from-middle-y</option>
- <option value="hinge-out-from-top">hinge-out-from-top</option>
- <option value="hinge-out-from-right">hinge-out-from-right</option>
- <option value="hinge-out-from-bottom">hinge-out-from-bottom</option>
- <option value="hinge-out-from-left">hinge-out-from-left</option>
- <option value="hinge-out-from-middle-x">hinge-out-from-middle-x</option>
- <option value="hinge-out-from-middle-y">hinge-out-from-middle-y</option>
- </optgroup>
- <optgroup label="Scale">
- <option value="scale-in-up">scale-in-up</option>
- <option value="scale-in-down">scale-in-down</option>
- <option value="scale-out-up">scale-out-up</option>
- <option value="scale-out-down">scale-out-down</option>
- </optgroup>
- <optgroup label="Spin">
- <option value="spin-in">spin-in</option>
- <option value="spin-out">spin-out</option>
- <option value="spin-in-ccw">spin-in-ccw</option>
- <option value="spin-out-ccw">spin-out-ccw</option>
- </optgroup>
- </select>
- <img src="assets/img/generic/voyager.jpg" class="docs-transition-demo">
-</div>
-
-<hr>
-<h2 id="custom-transitions" class="docs-heading" data-magellan-target="custom-transitions">Custom Transitions<a class="docs-heading-icon" href="#custom-transitions"></a></h2><p>Custom transition classes can be made using Motion UI's mixin library. Here's an example of a custom hinge. <strong>Refer to <a href="https://github.com/zurb/motion-ui/blob/master/docs/transitions.md">Motion UI's transition documentation</a> to learn more.</strong></p>
-<div class="docs-code" data-docs-code><pre><code class="scss">@<span class="hljs-keyword">include</span> mui-hinge(
- <span class="hljs-variable">$state</span>: in,
- <span class="hljs-variable">$from</span>: top,
- <span class="hljs-variable">$turn-origin</span>: from-back,
- <span class="hljs-variable">$duration</span>: 0.5s,
- <span class="hljs-variable">$timing</span>: easeInOut
-);</code></pre></div><hr>
-<h2 id="animation" class="docs-heading" data-magellan-target="animation">Animation<a class="docs-heading-icon" href="#animation"></a></h2><p>You can use the same five transition effects to create CSS animations as well. The library also allows you to create series effects, with animations on multiple elements happening in a queue. <strong>Refer to <a href="https://github.com/zurb/motion-ui/blob/master/docs/animations.md">Motion UI's animation documentation</a> to learn more.</strong></p>
-<p><button type="button" class="button" data-docs-example-series>Play Animation</button></p>
-<div class="row" id="series-example">
- <div class="small-4 columns">
- <img class="thumbnail" src= "assets/img/generic/square-1.jpg" id="series-example-1">
- </div>
- <div class="small-4 columns">
- <img class="thumbnail" src= "assets/img/generic/square-2.jpg" id="series-example-2">
- </div>
- <div class="small-4 columns">
- <img class="thumbnail" src= "assets/img/generic/square-3.jpg" id="series-example-3">
- </div>
-</div>
-
-<hr>
-<h2 id="javascript-reference" class="docs-heading" data-magellan-target="javascript-reference">JavaScript Reference<a class="docs-heading-icon" href="#javascript-reference"></a></h2><p>Motion UI includes a tiny JavaScript utility that will work anywhere as long as jQuery is loaded. However, Foundation 6 includes a customized version of this code that is included in <code>js/foundation.util.motion.js</code>. If you are using the Foundation version of this utility, and you wish to animate your own elements, trigger it this way:</p>
-<div class="docs-code" data-docs-code><pre><code class="js"><span class="hljs-keyword">var</span> elem = $(<span class="hljs-string">'#elem-to-animate'</span>);
-
-Foundation.Motion.animateIn(elem, animationClass [, callback]);
-Foundation.Motion.animateOut(elem, animationClass [, callback]);</code></pre></div><p>The callback is optional in this case, and will fire when the animation is complete.</p>
-<div class="callout primary">
- <p>Please note that the duration/animation speed for Motion UI animations are controlled via Sass mixin variables. The JavaScript handles the addition and removal of classes and event listener/callback firing only.
- <br>
- If you are individually including your <code><script></code> tags, make sure you are including the <code>js/foundation.util.motion.js</code> path.
- </p>
-</div>
-
-
-
-
-
-</div>
-
-<div class="large-3 columns" data-sticky-container>
- <nav class="columns docs-toc-wrap" data-sticky data-anchor="docs" data-sticky-on="large">
- <div class="docs-toc hide" id="docsTOC">
- <ul class="vertical menu" data-docs-toc>
- <li class="docs-nav-title">On this page:</li>
- </ul>
- </div>
- <div class="foundation-toc-ad-unit" id="TOCAdUnit">
- </div>
- </nav>
-</div>
-
-</div>
-
-</article>
-
- </div>
- <div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
- <ul class="vertical menu docs-nav" id="docs-menu">
- <p class="docs-nav-version">
- <span data-docs-version></span>
- <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">(Changelog)</a>
- </p>
-
- <li class="docs-nav-title">Getting Started</li>
- <li><a href="installation.html">Installation</a></li>
- <li><a href="starter-projects.html">Starter Projects</a></li>
- <li><a href="compatibility.html">Compatibility</a></li>
- <li><a href="accessibility.html">Accessibility</a></li>
- <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
-
- <li class="docs-nav-title">Setup</li>
- <li><a href="global.html">Global Styles</a></li>
- <li><a href="rtl.html">Right-to-Left Support</a></li>
- <li><a href="flexbox.html">Flexbox</a></li>
- <li><a href="sass.html">Sass</a></li>
- <li><a href="javascript.html">JavaScript</a></li>
- <li><a href="javascript-utilities.html">JavaScript Utilities</a></li>
- <li><a href="media-queries.html">Media Queries</a></li>
-
- <li class="docs-nav-title">General</li>
- <li><a href="grid.html">Grid</a></li>
- <li><a href="flex-grid.html">Flex Grid</a></li>
- <li><a href="forms.html">Forms</a></li>
- <li><a href="visibility.html">Visibility Classes</a></li>
- <li><a href="float-classes.html">Float Classes</a></li>
-
- <li class="docs-nav-title">Typography</li>
- <li><a href="typography-base.html">Base Styles</a></li>
- <li><a href="typography-helpers.html">Helper Classes</a></li>
-
- <li class="docs-nav-title">Controls</li>
- <li><a href="button.html">Button</a></li>
- <li><a href="button-group.html">Button Group</a></li>
- <li><a href="close-button.html">Close Button</a></li>
- <li><a href="slider.html">Slider <span class="label">JS</span></a></li>
- <li><a href="switch.html">Switch</a></li>
-
- <li class="docs-nav-title">Navigation</li>
- <li><a href="navigation.html">Overview</a></li>
- <li><a href="menu.html">Menu</a></li>
- <li><a href="dropdown-menu.html">Dropdown Menu <span class="label">JS</span></a></li>
- <li><a href="drilldown-menu.html">Drilldown Menu <span class="label">JS</span></a></li>
- <li><a href="accordion-menu.html">Accordion Menu <span class="label">JS</span></a></li>
- <li><a href="top-bar.html">Top Bar</a></li>
- <li><a href="responsive-navigation.html">Responsive Navigation</a></li>
- <li><a href="magellan.html">Magellan <span class="label">JS</span></a></li>
- <li><a href="pagination.html">Pagination</a></li>
- <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
-
- <li class="docs-nav-title">Containers</li>
- <li><a href="accordion.html">Accordion <span class="label">JS</span></a></li>
- <li><a href="callout.html">Callout</a></li>
- <li><a href="dropdown.html">Dropdown <span class="label">JS</span></a></li>
- <li><a href="media-object.html">Media Object</a></li>
- <li><a href="off-canvas.html">Off-canvas <span class="label">JS</span></a></li>
- <li><a href="reveal.html">Reveal <span class="label">JS</span> <small>Modal</small></a></li>
- <li><a href="table.html">Table</a></li>
- <li><a href="tabs.html">Tabs <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Media</li>
- <li><a href="badge.html">Badge</a></li>
- <li><a href="flex-video.html">Flex Video</a></li>
- <li><a href="label.html">Label</a></li>
- <li><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
- <li><a href="progress-bar.html">Progress Bar</a></li>
- <li><a href="thumbnail.html">Thumbnail</a></li>
- <li><a href="tooltip.html">Tooltip <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Plugins</li>
- <li><a href="abide.html">Abide <small>Form Validation</small></a></li>
- <li><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
- <li><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
- <li><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
- <li><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
-
- <li class="docs-nav-title">Sass</li>
- <li><a href="sass-functions.html">Functions</a></li>
- <li><a href="sass-mixins.html">Mixins</a></li>
-
- <li class="docs-nav-title">Libraries</li>
- <li class="current"><a href="motion-ui.html">Motion UI</a></li>
- <li><a href="panini.html">Panini</a></li>
- <li><a href="style-sherpa.html">Style Sherpa</a></li>
-
- <li class="docs-nav-title">Older Versions</li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
- <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
- <li><a href="https://get.foundation/sites/docs/v/3.2.5/">Foundation 3</a></li>
- <li><a href="https://get.foundation/sites/docs/v/2.2.1/">Foundation 2</a></li>
- </ul>
-
- </div>
- </div>
-
- <!-- Small Business(Docs) -->
- <section id="studiosCallout">
- <div class="row">
- <div class="medium-4 large-4 columns">
- <img src="https://get.foundation/assets/img/smallbiz-footer.svg" alt="">
- </div>
- <div class="medium-8 large-8 columns banner-info">
- <div class="row column property-label">ZURB Foundation</div>
- <h3 class="light">Yeah, we can help with that.</h3>
- <p class="lead"> We’ll collaborate with your team throughout the entire project life cycle. We’ll take your concept and move it through ideation, hi-fi wireframes, visual design and code, all while informing you on the whys and hows along the way.</p>
- <div class="course-buttons">
- <a href="https://get.foundation/get-involved/premium-support.html" class="studios button" data-zcom-event="studios_foundation_click" id="foundationSmallV1">Show Me How →</a>
- </div>
- </div>
- </div>
- </section>
-
- <div class="docs-newsletter">
- <div class="row">
- <div class="medium-7 large-8 columns">
- <a target="_blank" href="https://get.foundation/learn/responsive-reading.html">
- <h5 class="">Download ZURB’s 21 Responsive Trends That Will Shape 2017</h5>
- <p style="margin-bottom: 0;">Stay informed with amazing responsive trends each month from ZURB.</p>
- </a>
- </div>
- <div class="medium-5 large-4 footer-signup-form columns">
- <a style="margin-bottom: 0;" target="_blank" href="https://get.foundation/learn/responsive-reading.html" class="button expanded">Download the PDF</a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-top bg-fblue">
- <div class="row property">
- <div class="medium-4 columns">
- <div class="property-info">
- <h3>Foundation for Sites</h3>
- <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
- </p>
- </div>
- </div>
-
- <div class="medium-8 columns">
- <div class="row collapse">
- <div class="medium-4 columns">
- <div class="learn-links">
- <h4 class="hide-for-small">Want more?</h4>
- <ul>
- <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
- <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
- <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
- <li><a href="http://zurb.com/university/courses">Training</a></li>
- <li><a href="http://zurb.com/library">Design Resources</a></li>
- </ul>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="support-links">
- <h4 class="hide-for-small">Talk to us</h4>
- <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
- <p><a href="https://get.foundation/get-involved/contribute.html">Get involved in<br>our amazing community.</a></p>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="connect-links">
- <h4 class="hide-for-small">Stay Updated</h4>
- <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
- <a href="http://zurb.com/news" class="small button">Stay Connected</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="row global">
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/studios" class="footer-link-block services">
- <span class="title">Studios</span>
- <span>Helping more than 200 startups succeed since 1998.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="https://get.foundation/" class="footer-link-block foundation">
- <span class="title">Foundation</span>
- <span>The most advanced front-end framework in the world.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/notable" class="footer-link-block apps">
- <span class="title">Notable Design Apps</span>
- <span>Prototype, iterate and collect feedback on your products.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/university" class="footer-link-block expo">
- <span class="title">University</span>
- <span>Ideas, thoughts and design resources shared with you.</span>
- </a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-bottom">
- <div class="row">
- <div class="medium-4 medium-push-8 columns">
- <ul class="home-social">
- <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
- <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
- <li><a href="http://zurb.com/contact" class="mail"></a></li>
- </ul>
- </div>
- <div class="medium-8 medium-pull-4 columns">
- <a href="http://www.zurb.com" class="zurb-logo regular"></a>
- <ul class="zurb-links">
- <li><a href="http://zurb.com/about">About</a></li>
- <li><a href="http://zurb.com/blog">Blog</a></li>
- <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
- <li><a href="http://zurb.com/contact">Contact</a></li>
- <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
- </ul>
- <p class="copyright">© 1998‐2016 ZURB, Inc. All rights reserved.</p>
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- <script>
- var _gaq = _gaq || [];
- _gaq.push(
- ['_setAccount', 'UA-2195009-2'],
- ['_trackPageview'],
- ['b._setAccount', 'UA-2195009-27'],
- ['b._trackPageview']
- );
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
-
- <script src="assets/js/vendor.js?hash=53f5f85eaf3226e9fc3a3ba41c7127c2"></script>
- <script src="assets/js/foundation.js?hash=66731e615829a4a1fe18165a9085e578"></script>
- <script src="assets/js/docs.js?hash=18de9b438b1133e6165f687ec979655c"></script>
- <script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
-</body>
-</html>
+++ /dev/null
-<!doctype html>
-<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
-<html class="no-js" lang="en" dir="ltr">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="Foundation is bundled with many simple navigation patterns, which can be combined to form more complex, robust responsive navigation solutions.">
- <link rel="icon" href="assets/img/icons/foundation-favicon.ico" type="image/x-icon">
- <title>Foundation for Sites 6 Docs | Navigation</title>
- <link href="assets/css/docs.css?hash=fd338d28c600c7c314c5fd329634b217" rel="stylesheet" />
- <link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=fed7b0de18feb2e96b3fb447bea81448" rel="stylesheet">
- <!-- <link rel="stylesheet" href="./node_modules/motion-ui/dist/motion-ui.css" /> -->
-</head>
-<body>
-
- <div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
-
- <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="mobile-ofc vertical menu">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
-
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/support.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/sort/unanswered">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
- </div>
-
- <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="vertical menu">
- <li><a href="#">Foundation</a></li>
- <li><a href="#">Dot</a></li>
- <li><a href="#">ZURB</a></li>
- <li><a href="#">Com</a></li>
- <li><a href="#">Slash</a></li>
- <li><a href="#">Sites</a></li>
- </ul>
- </div>
-
-
- <div class="off-canvas-content" data-off-canvas-content>
- <!-- Info Banner For Announcements or Links -->
- <!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
- <div class="info">
- <h5>Foundation 6 is here!</h5>
- </div>
- </a> -->
-
- <nav class="marketing-topbar show-for-medium">
-
- <ul class="menu">
- <li class="topbar-title"><a href="https://get.foundation/index.html"><img src="assets/img/logos/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
- </ul>
-
- <ul class="dropdown menu" data-dropdown-menu data-click-open="false">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/" target="_blank">F5 Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="https://get.foundation/emails/docs/" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
-
- </nav>
-
- <div class="title-bar hide-for-medium">
- <div class="title-bar-left">
- <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
- <span class="title-bar-title">Foundation</span>
- </div>
- </div>
-
-
- <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
-
- <div class="expanded row">
- <div class="medium-9 large-10 medium-push-3 large-push-2 columns">
-
-<article class="docs-component" id="docs-navigation">
-
-<a href="#docs-menu" class="small secondary expanded button hide-for-medium">Jump to Nav</a>
-
-<header>
- <h1 class="docs-page-title">Navigation</h1>
-
-
- <p class="lead docs-page-lead">Foundation is bundled with many simple navigation patterns, which can be combined to form more complex, robust responsive navigation solutions.</p>
-
- <ul class="menu simple docs-contribute-menu">
- <li><a href="https://github.com/zurb/foundation-sites/edit/master/docs/pages/navigation.md" target="_blank"><i class="fi-pencil"></i>Edit this Page</a></li>
- <li><a href="https://github.com/zurb/foundation-sites/issues/new?title=%5BNavigation%5D%20ISSUE%20NAME%20HERE" target="_blank"><i class="fi-social-github"></i>Report a Bug</a></li>
- <li><a href="https://get.foundation/forum" target="_blank"><i class="fi-comment"></i>Get Help</a></li>
- </ul>
-</header>
-
-<hr>
-
-<div class="row">
-
-<div class="large-9 columns" id="docs">
-
-<h2 id="basics-menu" class="docs-heading" data-magellan-target="basics-menu">Basics: Menu<a class="docs-heading-icon" href="#basics-menu"></a></h2><p>The Menu is an all-purpose navigation component. It can be aligned horizontally or vertically, can be nested, and supports icons. <a href="menu.html">Learn more about the Menu.</a></p>
-<p>All menus use the <code>ul > li > a</code> pattern. The markup is a little strict, but this makes it easy to attach a navigation plugin to any menu, as you'll see below.</p>
-<p>Here's a basic Menu.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item One<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item Two<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item Three<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">ul</span>></span></code></pre></div>
-
-<div class="docs-code-live"><ul class="menu">
- <li><a href="#">Item One</a></li>
- <li><a href="#">Item Two</a></li>
- <li><a href="#">Item Three</a></li>
-</ul></div><hr>
-<p>To nest menus, add a new <code><ul></code> inside of an <code><li></code>, <em>after</em> the <code><a></code> inside.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item One<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item One-one<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item Two<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item Three<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">ul</span>></span></code></pre></div><hr>
-<h2 id="top-bar" class="docs-heading" data-magellan-target="top-bar">Top Bar<a class="docs-heading-icon" href="#top-bar"></a></h2><p>Top bar is a simple wrapper around these menu patterns. It supports a left-hand and right-hand section, which collapse on top of each other on small screens. <a href="top-bar.html">Learn more about the top bar.</a></p>
-<div class="top-bar">
- <div class="top-bar-left">
- <ul class="dropdown menu" data-dropdown-menu>
- <li class="menu-text">Site Title</li>
- <li><a href="#">One</a></li>
- <li><a href="#">Two</a></li>
- <li><a href="#">Three</a></li>
- </ul>
- </div>
- <div class="top-bar-right">
- <ul class="menu">
- <li><input type="search" placeholder="Search"></li>
- <li><button type="button" class="button">Search</button></li>
- </ul>
- </div>
-</div>
-
-<hr>
-<h2 id="menu-plugins" class="docs-heading" data-magellan-target="menu-plugins">Menu Plugins<a class="docs-heading-icon" href="#menu-plugins"></a></h2><p>The basic Menu can be enhanced with one of three <strong>Menu plugins</strong>. All three use the exact same markup to create a different style of multi-tier navigation.</p>
-<h3 id="dropdown-menu" class="docs-heading">Dropdown Menu<a class="docs-heading-icon" href="#dropdown-menu"></a></h3><p>The dropdown menu plugin (<code>data-dropdown-menu</code>) converts a nested menu into a series of dropdown menus. The nested menus can be opened through hover, click, or keyboard. <a href="dropdown-menu.html">Learn more about the dropdown menu.</a></p>
-<ul class="dropdown menu" data-dropdown-menu>
- <li class="has-submenu">
- <a>Item 1</a>
- <ul class="submenu menu" data-submenu>
- <li><a href="#">Item 1A Loooong</a></li>
- <li class="has-submenu">
- <a href="#"> Item 1 sub</a>
- <ul class="submenu menu" data-submenu>
- <li><a href="#">Item 1 subA</a></li>
- <li><a href="#">Item 1 subB</a></li>
- <li class="has-submenu">
- <a href="#"> Item 1 sub</a>
- <ul class="submenu menu" data-submenu>
- <li><a href="#">Item 1 subA</a></li>
- <li><a href="#">Item 1 subB</a></li>
- </ul>
- </li>
- <li class="has-submenu">
- <a href="#">Item 1 sub</a>
- <ul class="submenu menu" data-submenu>
- <li><a href="#">Item 1 subA</a></li>
- <li><a href="#">Item 1 subB</a></li>
- </ul>
- </li>
-
- </ul>
- </li>
- <li><a href="#">Item 1B</a></li>
- </ul>
- </li>
- <li class="has-submenu">
- <a href="#">Item 2</a>
- <ul class="submenu menu" data-submenu>
- <li><a href="#">Item 2A</a></li>
- <li><a href="#">Item 2B</a></li>
- </ul>
- </li>
- <li class="has-submenu">
- <a href="#">Item 3</a>
- <ul class="submenu menu" data-submenu>
- <li><a href="#">Item 3A</a></li>
- <li><a href="#">Item 3B</a></li>
- </ul>
- </li>
- <li><a href="#">Item 4</a></li>
-</ul>
-
-<hr>
-<h3 id="drilldown-menu" class="docs-heading">Drilldown Menu<a class="docs-heading-icon" href="#drilldown-menu"></a></h3><p>The drilldown menu plugin (<code>data-drilldown</code>) converts a nested menu into a series of sliding menus. Clicking an item slides the next level menu into view. <a href="drilldown-menu.html">Learn more about the drilldown menu.</a></p>
-<ul class="vertical menu" data-drilldown style="width: 300px;" id="m1">
- <li class="has-submenu">
- <a href="#">Item 1</a>
- <ul class="vertical menu" data-submenu id="m2">
- <li class="has-submenu">
- <a href="#">Item 1A</a>
- <ul class="vertical menu" data-submenu id="m3">
- <li><a href="#">Item 1Aa</a></li>
- <li><a href="#">Item 1Ba</a></li>
- <li><a href="#">Item 1Ca</a></li>
- <li><a href="#">Item 1Da</a></li>
- <li><a href="#">Item 1Ea</a></li>
- </ul>
- </li>
- <li><a href="#">Item 1B</a></li>
- <li><a href="#">Item 1C</a></li>
- <li><a href="#">Item 1D</a></li>
- <li><a href="#">Item 1E</a></li>
- </ul>
- </li>
- <li class="has-submenu">
- <a href="#">Item 2</a>
- <ul class="vertical menu" data-submenu>
- <li><a href="#">Item 2A</a></li>
- <li><a href="#">Item 2B</a></li>
- <li><a href="#">Item 2C</a></li>
- <li><a href="#">Item 2D</a></li>
- <li><a href="#">Item 2E</a></li>
- </ul>
- </li>
- <li class="has-submenu">
- <a href="#">Item 3</a>
- <ul class="vertical menu" data-submenu>
- <li><a href="#">Item 3A</a></li>
- <li><a href="#">Item 3B</a></li>
- <li><a href="#">Item 3C</a></li>
- <li><a href="#">Item 3D</a></li>
- <li><a href="#">Item 3E</a></li>
- </ul>
- </li>
- <li><a href="#"> Item 4</a></li>
-</ul>
-
-<hr>
-<h3 id="accordion-menu" class="docs-heading">Accordion Menu<a class="docs-heading-icon" href="#accordion-menu"></a></h3><p>The accordion menu plugin (<code>data-accordion-menu</code>) converts a nested menu into a series of collapsed accordions. Clicking an item slides down the nested menu. <a href="accordion-menu.html">Learn more about the accordion menu.</a></p>
-<div class="vertical menu" data-accordion-menu>
- <li class="has-submenu">
- <a href="#">Item 1</a>
- <ul class="menu vertical nested is-active" data-submenu>
- <li class="has-submenu">
- <a href="#">Item 1A</a>
- <ul class="menu vertical nested" data-submenu>
- <li><a href="#">Item 1Ai</a></li>
- <li><a href="#">Item 1Aii</a></li>
- <li><a href="#">Item 1Aiii</a></li>
- </ul>
- </li>
- <li><a href="#">Item 1B</a></li>
- <li><a href="#">Item 1C</a></li>
- </ul>
- </li>
- <li class="has-submenu">
- <a href="#">Item 2</a>
- <ul class="menu vertical nested" data-submenu>
- <li><a href="#">Item 2A</a></li>
- <li><a href="#">Item 2B</a></li>
- </ul>
- </li>
- <li><a href="#">Item 3</a></li>
-</div>
-
-<hr>
-<h2 id="responsive-navigation" class="docs-heading" data-magellan-target="responsive-navigation">Responsive Navigation<a class="docs-heading-icon" href="#responsive-navigation"></a></h2><p>Each of the above three patterns has a use in a specific context. But some patterns only work at certain screen sizes. For example, dropdown menus don't work as well on smaller screens, but the same navigation items might work better as a drilldown or an accordion menu at that screen size.</p>
-<p>Our responsive menu plugin (<code>data-responsive-menu</code>) allows you to take a Menu, and assign different navigation patterns to it at different screen sizes. In the below example, a drilldown menu changes to a dropdown menu at larger screen sizes. <a href="responsive-navigation.html#responsive-menu">Learn more about the responsive Menu plugin.</a></p>
-<ul class="vertical menu" data-responsive-menu="drilldown medium-dropdown" style="width: 300px;">
- <li class="has-submenu">
- <a href="#">Item 1</a>
- <ul class="vertical submenu menu" data-submenu id="m2">
- <li class="has-submenu">
- <a href="#">Item 1A</a>
- <ul class="vertical submenu menu" data-submenu id="m3">
- <li><a href="#">Item 1A</a></li>
- <li><a href="#">Item 1B</a></li>
- <li><a href="#">Item 1C</a></li>
- <li><a href="#">Item 1D</a></li>
- <li><a href="#">Item 1E</a></li>
- </ul>
- </li>
- <li><a href="#">Item 1B</a></li>
- </ul>
- </li>
- <li class="has-submenu">
- <a href="#">Item 2</a>
- <ul class="vertical submenu menu" data-submenu>
- <li><a href="#">Item 2A</a></li>
- <li><a href="#">Item 2B</a></li>
- </ul>
- </li>
- <li class="has-submenu">
- <a href="#">Item 3</a>
- <ul class="vertical submenu menu" data-submenu>
- <li><a href="#">Item 3A</a></li>
- <li><a href="#">Item 3B</a></li>
- </ul>
- </li>
-</ul>
-
-<hr>
-<p>In other situations, you may wish to always display a menu on a larger screen, but hide that same menu behind a click toggle on smaller screens. You can do this with the responsive toggle plugin (<code>data-responsive-toggle</code>). This plugin works with any container, not just a menu. <a href="responsive-navigation.html#responsive-toggle">Learn more about the responsive toggle plugin.</a></p>
-<p>To see the below example in action, scale your browser down. The top bar will be replaced by a smaller title bar. Clicking the icon inside the title bar reveals the top bar.</p>
-<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
- <button class="menu-icon" type="button" data-toggle></button>
- <div class="title-bar-title">Menu</div>
-</div>
-
-<div class="top-bar" id="example-menu">
- <div class="top-bar-left">
- <ul class="dropdown menu" data-dropdown-menu>
- <li class="menu-text">Site Title</li>
- <li class="has-submenu">
- <a href="#">One</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="#">One</a></li>
- <li><a href="#">Two</a></li>
- <li><a href="#">Three</a></li>
- </ul>
- </li>
- <li><a href="#">Two</a></li>
- <li><a href="#">Three</a></li>
- </ul>
- </div>
- <div class="top-bar-right">
- <ul class="menu">
- <li><input type="search" placeholder="Search"></li>
- <li><button type="button" class="button">Search</button></li>
- </ul>
- </div>
-</div>
-
-<hr>
-<h2 id="sticky-navigation" class="docs-heading" data-magellan-target="sticky-navigation">Sticky Navigation<a class="docs-heading-icon" href="#sticky-navigation"></a></h2><p>See the documentation for the <a href="sticky.html#sticky-navigation">Sticky</a> plugin to see how to easily make a sticky nav bar.</p>
-
-
-
-
-
-</div>
-
-<div class="large-3 columns" data-sticky-container>
- <nav class="columns docs-toc-wrap" data-sticky data-anchor="docs" data-sticky-on="large">
- <div class="docs-toc hide" id="docsTOC">
- <ul class="vertical menu" data-docs-toc>
- <li class="docs-nav-title">On this page:</li>
- </ul>
- </div>
- <div class="foundation-toc-ad-unit" id="TOCAdUnit">
- </div>
- </nav>
-</div>
-
-</div>
-
-</article>
-
- </div>
- <div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
- <ul class="vertical menu docs-nav" id="docs-menu">
- <p class="docs-nav-version">
- <span data-docs-version></span>
- <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">(Changelog)</a>
- </p>
-
- <li class="docs-nav-title">Getting Started</li>
- <li><a href="installation.html">Installation</a></li>
- <li><a href="starter-projects.html">Starter Projects</a></li>
- <li><a href="compatibility.html">Compatibility</a></li>
- <li><a href="accessibility.html">Accessibility</a></li>
- <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
-
- <li class="docs-nav-title">Setup</li>
- <li><a href="global.html">Global Styles</a></li>
- <li><a href="rtl.html">Right-to-Left Support</a></li>
- <li><a href="flexbox.html">Flexbox</a></li>
- <li><a href="sass.html">Sass</a></li>
- <li><a href="javascript.html">JavaScript</a></li>
- <li><a href="javascript-utilities.html">JavaScript Utilities</a></li>
- <li><a href="media-queries.html">Media Queries</a></li>
-
- <li class="docs-nav-title">General</li>
- <li><a href="grid.html">Grid</a></li>
- <li><a href="flex-grid.html">Flex Grid</a></li>
- <li><a href="forms.html">Forms</a></li>
- <li><a href="visibility.html">Visibility Classes</a></li>
- <li><a href="float-classes.html">Float Classes</a></li>
-
- <li class="docs-nav-title">Typography</li>
- <li><a href="typography-base.html">Base Styles</a></li>
- <li><a href="typography-helpers.html">Helper Classes</a></li>
-
- <li class="docs-nav-title">Controls</li>
- <li><a href="button.html">Button</a></li>
- <li><a href="button-group.html">Button Group</a></li>
- <li><a href="close-button.html">Close Button</a></li>
- <li><a href="slider.html">Slider <span class="label">JS</span></a></li>
- <li><a href="switch.html">Switch</a></li>
-
- <li class="docs-nav-title">Navigation</li>
- <li class="current"><a href="navigation.html">Overview</a></li>
- <li><a href="menu.html">Menu</a></li>
- <li><a href="dropdown-menu.html">Dropdown Menu <span class="label">JS</span></a></li>
- <li><a href="drilldown-menu.html">Drilldown Menu <span class="label">JS</span></a></li>
- <li><a href="accordion-menu.html">Accordion Menu <span class="label">JS</span></a></li>
- <li><a href="top-bar.html">Top Bar</a></li>
- <li><a href="responsive-navigation.html">Responsive Navigation</a></li>
- <li><a href="magellan.html">Magellan <span class="label">JS</span></a></li>
- <li><a href="pagination.html">Pagination</a></li>
- <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
-
- <li class="docs-nav-title">Containers</li>
- <li><a href="accordion.html">Accordion <span class="label">JS</span></a></li>
- <li><a href="callout.html">Callout</a></li>
- <li><a href="dropdown.html">Dropdown <span class="label">JS</span></a></li>
- <li><a href="media-object.html">Media Object</a></li>
- <li><a href="off-canvas.html">Off-canvas <span class="label">JS</span></a></li>
- <li><a href="reveal.html">Reveal <span class="label">JS</span> <small>Modal</small></a></li>
- <li><a href="table.html">Table</a></li>
- <li><a href="tabs.html">Tabs <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Media</li>
- <li><a href="badge.html">Badge</a></li>
- <li><a href="flex-video.html">Flex Video</a></li>
- <li><a href="label.html">Label</a></li>
- <li><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
- <li><a href="progress-bar.html">Progress Bar</a></li>
- <li><a href="thumbnail.html">Thumbnail</a></li>
- <li><a href="tooltip.html">Tooltip <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Plugins</li>
- <li><a href="abide.html">Abide <small>Form Validation</small></a></li>
- <li><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
- <li><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
- <li><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
- <li><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
-
- <li class="docs-nav-title">Sass</li>
- <li><a href="sass-functions.html">Functions</a></li>
- <li><a href="sass-mixins.html">Mixins</a></li>
-
- <li class="docs-nav-title">Libraries</li>
- <li><a href="motion-ui.html">Motion UI</a></li>
- <li><a href="panini.html">Panini</a></li>
- <li><a href="style-sherpa.html">Style Sherpa</a></li>
-
- <li class="docs-nav-title">Older Versions</li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
- <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
- <li><a href="https://get.foundation/sites/docs/v/3.2.5/">Foundation 3</a></li>
- <li><a href="https://get.foundation/sites/docs/v/2.2.1/">Foundation 2</a></li>
- </ul>
-
- </div>
- </div>
-
- <!-- Small Business(Docs) -->
- <section id="studiosCallout">
- <div class="row">
- <div class="medium-4 large-4 columns">
- <img src="https://get.foundation/assets/img/smallbiz-footer.svg" alt="">
- </div>
- <div class="medium-8 large-8 columns banner-info">
- <div class="row column property-label">ZURB Foundation</div>
- <h3 class="light">Yeah, we can help with that.</h3>
- <p class="lead"> We’ll collaborate with your team throughout the entire project life cycle. We’ll take your concept and move it through ideation, hi-fi wireframes, visual design and code, all while informing you on the whys and hows along the way.</p>
- <div class="course-buttons">
- <a href="https://get.foundation/get-involved/premium-support.html" class="studios button" data-zcom-event="studios_foundation_click" id="foundationSmallV1">Show Me How →</a>
- </div>
- </div>
- </div>
- </section>
-
- <div class="docs-newsletter">
- <div class="row">
- <div class="medium-7 large-8 columns">
- <a target="_blank" href="https://get.foundation/learn/responsive-reading.html">
- <h5 class="">Download ZURB’s 21 Responsive Trends That Will Shape 2017</h5>
- <p style="margin-bottom: 0;">Stay informed with amazing responsive trends each month from ZURB.</p>
- </a>
- </div>
- <div class="medium-5 large-4 footer-signup-form columns">
- <a style="margin-bottom: 0;" target="_blank" href="https://get.foundation/learn/responsive-reading.html" class="button expanded">Download the PDF</a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-top bg-fblue">
- <div class="row property">
- <div class="medium-4 columns">
- <div class="property-info">
- <h3>Foundation for Sites</h3>
- <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
- </p>
- </div>
- </div>
-
- <div class="medium-8 columns">
- <div class="row collapse">
- <div class="medium-4 columns">
- <div class="learn-links">
- <h4 class="hide-for-small">Want more?</h4>
- <ul>
- <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
- <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
- <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
- <li><a href="http://zurb.com/university/courses">Training</a></li>
- <li><a href="http://zurb.com/library">Design Resources</a></li>
- </ul>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="support-links">
- <h4 class="hide-for-small">Talk to us</h4>
- <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
- <p><a href="https://get.foundation/get-involved/contribute.html">Get involved in<br>our amazing community.</a></p>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="connect-links">
- <h4 class="hide-for-small">Stay Updated</h4>
- <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
- <a href="http://zurb.com/news" class="small button">Stay Connected</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="row global">
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/studios" class="footer-link-block services">
- <span class="title">Studios</span>
- <span>Helping more than 200 startups succeed since 1998.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="https://get.foundation/" class="footer-link-block foundation">
- <span class="title">Foundation</span>
- <span>The most advanced front-end framework in the world.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/notable" class="footer-link-block apps">
- <span class="title">Notable Design Apps</span>
- <span>Prototype, iterate and collect feedback on your products.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/university" class="footer-link-block expo">
- <span class="title">University</span>
- <span>Ideas, thoughts and design resources shared with you.</span>
- </a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-bottom">
- <div class="row">
- <div class="medium-4 medium-push-8 columns">
- <ul class="home-social">
- <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
- <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
- <li><a href="http://zurb.com/contact" class="mail"></a></li>
- </ul>
- </div>
- <div class="medium-8 medium-pull-4 columns">
- <a href="http://www.zurb.com" class="zurb-logo regular"></a>
- <ul class="zurb-links">
- <li><a href="http://zurb.com/about">About</a></li>
- <li><a href="http://zurb.com/blog">Blog</a></li>
- <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
- <li><a href="http://zurb.com/contact">Contact</a></li>
- <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
- </ul>
- <p class="copyright">© 1998‐2016 ZURB, Inc. All rights reserved.</p>
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- <script>
- var _gaq = _gaq || [];
- _gaq.push(
- ['_setAccount', 'UA-2195009-2'],
- ['_trackPageview'],
- ['b._setAccount', 'UA-2195009-27'],
- ['b._trackPageview']
- );
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
-
- <script src="assets/js/vendor.js?hash=1af7a90a2c0b6a274ce4ca03c35e23c8"></script>
- <script src="assets/js/foundation.js?hash=dafc5f98b7de062c71ef57dca081d6dc"></script>
- <script src="assets/js/docs.js?hash=cbc6290a3ce1ddafcc6ae51ea1be9118"></script>
- <script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
-</body>
-</html>
+++ /dev/null
-<!doctype html>
-<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
-<html class="no-js" lang="en" dir="ltr">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="Off-canvas menus are positioned outside of the viewport and slide in when activated. Setting up an off-canvas layout in Foundation is super easy.">
- <link rel="icon" href="assets/img/icons/foundation-favicon.ico" type="image/x-icon">
- <title>Foundation for Sites 6 Docs | Off-canvas</title>
- <link href="assets/css/docs.css?hash=ea72d8093b3edc042eaddbf0db90775b" rel="stylesheet" />
- <link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=f81108f9e6a4db83d04853c145178fe1" rel="stylesheet">
- <!-- <link rel="stylesheet" href="./node_modules/motion-ui/dist/motion-ui.css" /> -->
-</head>
-<body>
-
- <div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
-
- <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="mobile-ofc vertical menu">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
-
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/support.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/sort/unanswered">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
- </div>
-
- <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="vertical menu">
- <li><a href="#">Foundation</a></li>
- <li><a href="#">Dot</a></li>
- <li><a href="#">ZURB</a></li>
- <li><a href="#">Com</a></li>
- <li><a href="#">Slash</a></li>
- <li><a href="#">Sites</a></li>
- </ul>
- </div>
-
-
- <div class="off-canvas-content" data-off-canvas-content>
- <!-- Info Banner For Announcements or Links -->
- <!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
- <div class="info">
- <h5>Foundation 6 is here!</h5>
- </div>
- </a> -->
-
- <nav class="marketing-topbar show-for-medium">
-
- <ul class="menu">
- <li class="topbar-title"><a href="https://get.foundation/index.html"><img src="assets/img/logos/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
- </ul>
-
- <ul class="dropdown menu" data-dropdown-menu data-click-open="false">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/" target="_blank">F5 Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="https://get.foundation/emails/docs/" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
-
- </nav>
-
- <div class="title-bar hide-for-medium">
- <div class="title-bar-left">
- <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
- <span class="title-bar-title">Foundation</span>
- </div>
- </div>
-
-
- <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
-
- <div class="expanded row">
- <div class="medium-9 large-10 medium-push-3 large-push-2 columns">
-
-<article class="docs-component" id="docs-off-canvas">
-
-<a href="#docs-menu" class="small secondary expanded button hide-for-medium">Jump to Nav</a>
-
-<header>
- <h1 class="docs-page-title">Off-canvas</h1>
-
- <span data-tooltip title="Requires a JavaScript library." class="docs-js label">JavaScript</span>
-
- <p class="lead docs-page-lead">Off-canvas menus are positioned outside of the viewport and slide in when activated. Setting up an off-canvas layout in Foundation is super easy.</p>
-
- <ul class="menu simple docs-contribute-menu">
- <li><a href="https://github.com/zurb/foundation-sites/edit/master/docs/pages/off-canvas.md" target="_blank"><i class="fi-pencil"></i>Edit this Page</a></li>
- <li><a href="https://github.com/zurb/foundation-sites/issues/new?title=%5BOff-canvas%5D%20ISSUE%20NAME%20HERE" target="_blank"><i class="fi-social-github"></i>Report a Bug</a></li>
- <li><a href="https://get.foundation/forum" target="_blank"><i class="fi-comment"></i>Get Help</a></li>
- </ul>
-</header>
-
-<hr>
-
-<div class="row">
-
-<div class="large-9 columns" id="docs">
-
-<button class="button" type="button" data-toggle="offCanvasLeft">Toggle Off-canvas</button>
-
-<h2 id="setup" class="docs-heading" data-magellan-target="setup">Setup<a class="docs-heading-icon" href="#setup"></a></h2><p>To start, create two wrappers to house the page. These are necessary to prevent the off-canvas menus from being visible when they're not open. They also smooth out cross-browser bugs.</p>
-<ul>
-<li>The outer wrapper has the class <code>.off-canvas-wrapper</code>.</li>
-<li>The inner wrapper has the class <code>.off-canvas-wrapper-inner</code> and the attribute <code>data-off-canvas-wrapper</code>.</li>
-</ul>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">body</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"off-canvas-wrapper"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"off-canvas-wrapper-inner"</span> <span class="hljs-attr">data-off-canvas-wrapper</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">body</span>></span></code></pre></div><p>Inside these wrappers, create an off-canvas menu with the class <code>.off-canvas</code> and the attribute <code>data-off-canvas</code>. The menu also needs a positioning class, which can be <code>.position-left</code> or <code>.position-right</code>, and an attribute set for the position, <code>data-position="left"</code> or <code>data-position="right"</code>. Last, make sure the off-canvas has a unique ID so it can be targeted.</p>
-<p>Along with the menu, the main content of your page will be housed in its own container with the class <code>.off-canvas-content</code> and attribute <code>data-off-canvas-content</code>. You will be putting your actual page content inside a class of <code>.off-canvas-content</code>.)</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">body</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"off-canvas-wrapper"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"off-canvas-wrapper-inner"</span> <span class="hljs-attr">data-off-canvas-wrapper</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"off-canvas position-left"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"offCanvas"</span> <span class="hljs-attr">data-off-canvas</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"off-canvas-content"</span> <span class="hljs-attr">data-off-canvas-content</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">body</span>></span></code></pre></div><p>Here's a complete example that can be pasted into the <code><body></code> tag of your page. It includes a close button and basic menu styles.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">body</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"off-canvas-wrapper"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"off-canvas-wrapper-inner"</span> <span class="hljs-attr">data-off-canvas-wrapper</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"off-canvas position-left"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"offCanvas"</span> <span class="hljs-attr">data-off-canvas</span>></span>
-
- <span class="hljs-comment"><!-- Close button --></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"close-button"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close menu"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">data-close</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">aria-hidden</span>=<span class="hljs-string">"true"</span>></span>&times;<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">button</span>></span>
-
- <span class="hljs-comment"><!-- Menu --></span>
- <span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"vertical menu"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Foundation<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Dot<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>ZURB<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Com<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Slash<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Sites<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
-
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"off-canvas-content"</span> <span class="hljs-attr">data-off-canvas-content</span>></span>
- <span class="hljs-comment"><!-- Page content --></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">body</span>></span></code></pre></div><h3 id="click-triggers" class="docs-heading">Click Triggers<a class="docs-heading-icon" href="#click-triggers"></a></h3><p>To create a click trigger that opens the menu, add the attribute <code>data-open</code> or <code>data-toggle</code> to any element. That element will then open or toggle the menu when clicked on. The value of the data attribute should be the ID of the off-canvas.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">data-toggle</span>=<span class="hljs-string">"offCanvas"</span>></span>Open Menu<span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></pre></div><hr>
-<h2 id="multiple-menus" class="docs-heading" data-magellan-target="multiple-menus">Multiple Menus<a class="docs-heading-icon" href="#multiple-menus"></a></h2><p>A design can have two menus: one on the left, and one on the right. Be sure that both menus come <em>before</em> the <code>.off-canvas-content</code> wrapper—this is required for the CSS to apply correctly.</p>
-<div class="primary callout">
- <p>When using Foundation in <a href="rtl.html">right-to-left</a> mode, "right" still means right, and "left" still means left.</p>
-</div>
-
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">body</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"off-canvas-wrapper"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"off-canvas-wrapper-inner"</span> <span class="hljs-attr">data-off-canvas-wrapper</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"off-canvas position-left"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"offCanvasLeft"</span> <span class="hljs-attr">data-off-canvas</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"off-canvas position-right"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"offCanvasRight"</span> <span class="hljs-attr">data-off-canvas</span> <span class="hljs-attr">data-position</span>=<span class="hljs-string">"right"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"off-canvas-content"</span> <span class="hljs-attr">data-off-canvas-content</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">body</span>></span></code></pre></div><button class="button" type="button" data-toggle="offCanvasLeft">Open Left Menu</button>
-<button class="button" type="button" data-toggle="offCanvasRight">Open Right Menu</button>
-
-<hr>
-<h2 id="title-bar" class="docs-heading" data-magellan-target="title-bar">Title Bar<a class="docs-heading-icon" href="#title-bar"></a></h2><p>If you need a simple title bar to toggle the off-canvas, <code>.title-bar</code> is here to help. It supports left- and right-aligned sections.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar-left"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu-icon"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">data-open</span>=<span class="hljs-string">"offCanvasLeft"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar-title"</span>></span>Foundation<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar-right"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu-icon"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">data-open</span>=<span class="hljs-string">"offCanvasRight"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="title-bar">
- <div class="title-bar-left">
- <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
- <span class="title-bar-title">Foundation</span>
- </div>
- <div class="title-bar-right">
- <button class="menu-icon" type="button" data-open="offCanvasRight"></button>
- </div>
-</div></div><p><br></p>
-<h4 id="responsive-off-canvas-putting-it-all-together-" class="docs-heading">Responsive Off-Canvas (Putting it all together)<a class="docs-heading-icon" href="#responsive-off-canvas-putting-it-all-together-"></a></h4><p>For an example of off-canvas on small screens and Top Bar Menu with Dropdowns, check out this Building Block: <a href="http://zurb.com/building-blocks/top-bar-with-off-canvas">http://zurb.com/building-blocks/top-bar-with-off-canvas</a></p>
-<hr>
-<h2 id="reveal-on-larger-screens" class="docs-heading" data-magellan-target="reveal-on-larger-screens">Reveal on Larger Screens<a class="docs-heading-icon" href="#reveal-on-larger-screens"></a></h2><p>The left- and right-hand off-canvas panes can be set to be persistent on larger screens. Add the class <code>.reveal-for-medium</code> or <code>.reveal-for-large</code> to the off-canvas menu.</p>
-<p>The main content area (<code>.off-canvas-content</code>) will be padded to the left or right equal to the width of the container.</p>
-<div class="callout">
- <p>The menu will be fixed-position by default, meaning it follows you as you scroll up and down. The menu also gets its own scroll bar if it's taller than the window. To disable these features, set the <code>$offcanvas-fixed-reveal</code> variable to <code>false</code>.</p>
-</div>
-
-<div class="warning callout">
- <p>The slide in/out of the plugin still works when these classes are active. If you use this feature on a larger screen, be sure to hide any click triggers on those larger breakpoints as well. Foundation's <a href="visibility.html">visibility classes</a> can help you with that.</p>
-</div>
-
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"off-canvas position-left reveal-for-large"</span> <span class="hljs-attr">data-off-canvas</span>></span>
- <span class="hljs-comment"><!-- ... --></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div><button type="button" class="button" data-docs-example-ofc>Toggle Reveal Class</button>
-
-
-<hr>
-<section>
- <h2 id="sass-reference" class="docs-heading" data-magellan-target="sass-reference">Sass Reference<a class="docs-heading-icon" href="#sass-reference"></a></h2>
-
- <section>
- <h3 id="sass-variables" class="docs-heading">Variables<a class="docs-heading-icon" href="#sass-variables"></a></h3>
-
- <p>The default styles of this component can be customized using these Sass variables in your project's <a href="sass.html#the-settings-file">settings file</a>.</p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td class="name"><code>$offcanvas-size</code></td>
- <td>Number</td>
- <td class="number"><code>250px</code></td>
- <td><p>Width of an off-canvas menu.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$offcanvas-background</code></td>
- <td>Color</td>
- <td class="color"><code>$light-gray</code></td>
- <td><p>Background color of an off-canvas menu.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$offcanvas-zindex</code></td>
- <td>Number</td>
- <td class="number"><code>-1</code></td>
- <td><p>Z-index of an off-canvas menu.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$offcanvas-transition-length</code></td>
- <td>Number</td>
- <td class="number"><code>0.5s</code></td>
- <td><p>Length of the animation on an off-canvas menu.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$offcanvas-transition-timing</code></td>
- <td>Keyword</td>
- <td class="keyword"><code>ease</code></td>
- <td><p>Timing function of the animation on an off-canvas menu.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$offcanvas-fixed-reveal</code></td>
- <td></td>
- <td class=""><code>true</code></td>
- <td><p>If <code>true</code>, a revealed off-canvas will be fixed-position, and scroll with the screen.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$offcanvas-exit-background</code></td>
- <td>Color</td>
- <td class="color"><code>rgba($white, 0.25)</code></td>
- <td><p>Background color for the overlay that appears when an off-canvas menu is open.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$maincontent-class</code></td>
- <td></td>
- <td class=""><code>'off-canvas-content'</code></td>
- <td><p>CSS class used for the main content area. The off-canvas mixins use this to target the page body.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$maincontent-shadow</code></td>
- <td>Shadow</td>
- <td class="shadow"><code>0 0 10px rgba($black, 0.5)</code></td>
- <td><p>Box shadow to place under the main content area. This shadow overlaps the off-canvas menus.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$titlebar-background</code></td>
- <td>Color</td>
- <td class="color"><code>$black</code></td>
- <td><p>Background color of a title bar.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$titlebar-color</code></td>
- <td>Color</td>
- <td class="color"><code>$white</code></td>
- <td><p>Color of text inside a title bar.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$titlebar-padding</code></td>
- <td>Length</td>
- <td class="length"><code>0.5rem</code></td>
- <td><p>Padding inside a title bar.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$titlebar-text-font-weight</code></td>
- <td>Weight</td>
- <td class="weight"><code>bold</code></td>
- <td><p>Font weight of text inside a title bar.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$titlebar-icon-color</code></td>
- <td>Color</td>
- <td class="color"><code>$white</code></td>
- <td><p>Color of menu icons inside a title bar.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$titlebar-icon-color-hover</code></td>
- <td>Color</td>
- <td class="color"><code>$medium-gray</code></td>
- <td><p>Color of menu icons inside a title bar on hover.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$titlebar-icon-spacing</code></td>
- <td>Length</td>
- <td class="length"><code>0.25rem</code></td>
- <td><p>Spacing between the menu icon and text inside a title bar.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="sass-mixins" class="docs-heading">Mixins<a class="docs-heading-icon" href="#sass-mixins"></a></h3>
-
- <p>We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.</p>
-
-
- <section >
- <h4 id="off-canvas-basics" class="docs-heading">off-canvas-basics<a class="docs-heading-icon" href="#off-canvas-basics"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> off-canvas-basics;</code></pre>
- </div>
-
- <p>Adds baseline styles for off-canvas. This CSS is required to make the other pieces work.</p>
-
-
-
-
-
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="off-canvas-base" class="docs-heading">off-canvas-base<a class="docs-heading-icon" href="#off-canvas-base"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> off-canvas-base;</code></pre>
- </div>
-
- <p>Adds basic styles for an off-canvas menu.</p>
-
-
-
-
-
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="off-canvas-reveal" class="docs-heading">off-canvas-reveal<a class="docs-heading-icon" href="#off-canvas-reveal"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> off-canvas-reveal(<span class="hljs-variable">$position</span>);</code></pre>
- </div>
-
- <p>Adds styles that reveal an off-canvas menu.</p>
-
-
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$position</code></td>
- <td>Keyword</td>
- <td><code>left</code></td>
- <td><p>Position of the off-canvas menu being revealed.</p>
-</td>
- </tr>
- </table>
- </section>
-
-
-
-
-
- </section>
-
-
-</section>
-
-<hr>
-<section>
- <h2 id="javascript-reference" class="docs-heading" data-magellan-target="javascript-reference">JavaScript Reference<a class="docs-heading-icon" href="#javascript-reference"></a></h2>
-
-
- <section>
- <h3 id="js-module" class="docs-heading">Initializing<a class="docs-heading-icon" href="#js-module"></a></h3>
-
- <p>The file <code>foundation.offcanvas.js</code> must be included in your JavaScript to use this plugin, along with <code>foundation.core.js</code>. <strong>This plugin also requires these utility libraries:</strong></p>
-
-
- <ul>
- <li><code>foundation.util.mediaQuery.js</code></li>
- </ul>
-
- <ul>
- <li><code>foundation.util.triggers.js</code></li>
- </ul>
-
- <ul>
- <li><code>foundation.util.motion.js</code></li>
- </ul>
-
-
- </section>
-
-
- <section>
- <h3 id="js-class" class="docs-heading">Foundation.OffCanvas<a class="docs-heading-icon" href="#js-class"></a></h3>
-
- <p>Creates a new instance of an off-canvas wrapper.</p>
-
-
- <div class="docs-code"><pre><code><span class="hljs-keyword">var</span> elem = <span class="hljs-keyword">new</span> Foundation.OffCanvas(element, options);</code></pre></div>
-
- <p><strong>Fires these events:</strong>
- OffCanvas#event:init
- </p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>element</code></td>
- <td>Object</td>
- <td>jQuery object to initialize.</td>
- </tr>
- <tr>
- <td><code>options</code></td>
- <td>Object</td>
- <td>Overrides to the default plugin settings.</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="js-options" class="docs-heading">Plugin Options<a class="docs-heading-icon" href="#js-options"></a></h3>
-
- <p>Use these options to customize an instance of Off-canvas. Plugin options can be set as individual data attributes, one combined <code>data-options</code> attribute, or as an object passed to the plugin's constructor. <a href="javascript.html#initializing">Learn more about how JavaScript plugins are initialized.</a></p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Default</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>data-close-on-click</code></td>
- <td><code>true</code></td>
- <td>Allow the user to click outside of the menu to close it.</td>
- </tr>
- <tr>
- <td><code>data-transition-time</code></td>
- <td><code>500</code></td>
- <td>Amount of time in ms the open and close transition requires. If none selected, pulls from body style.</td>
- </tr>
- <tr>
- <td><code>data-position</code></td>
- <td><code>left</code></td>
- <td>Direction the offcanvas opens from. Determines class applied to body.</td>
- </tr>
- <tr>
- <td><code>data-force-top</code></td>
- <td><code>true</code></td>
- <td>Force the page to scroll to top on open.</td>
- </tr>
- <tr>
- <td><code>data-is-revealed</code></td>
- <td><code>false</code></td>
- <td>Allow the offcanvas to remain open for certain breakpoints.</td>
- </tr>
- <tr>
- <td><code>data-reveal-on</code></td>
- <td><code>reveal-for-large</code></td>
- <td>Breakpoint at which to reveal. JS will use a RegExp to target standard classes, if changing classnames, pass your class with the `revealClass` option.</td>
- </tr>
- <tr>
- <td><code>data-auto-focus</code></td>
- <td><code>true</code></td>
- <td>Force focus to the offcanvas on open. If true, will focus the opening trigger on close.</td>
- </tr>
- <tr>
- <td><code>data-reveal-class</code></td>
- <td><code>reveal-for-large</code></td>
- <td>Class used to force an offcanvas to remain open. Foundation defaults for this are `reveal-for-large` & `reveal-for-medium`.</td>
- </tr>
- <tr>
- <td><code>data-trap-focus</code></td>
- <td><code>true</code></td>
- <td>Triggers optional focus trapping when opening an offcanvas. Sets tabindex of [data-off-canvas-content] to -1 for accessibility purposes.</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="js-events" class="docs-heading">Events<a class="docs-heading-icon" href="#js-events"></a></h3>
-
- <p>These events will fire from any element with a Off-canvas plugin attached.</p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>opened.zf.offcanvas</code></td>
- <td>Fires when the off-canvas menu opens.</td>
- </tr>
- <tr>
- <td><code>closed.zf.offcanvas</code></td>
- <td>Fires when the off-canvas menu opens.</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="js-functions" class="docs-heading">Methods<a class="docs-heading-icon" href="#js-functions"></a></h3>
-
- <section>
- <h4 id="reveal" class="docs-heading">reveal<a class="docs-heading-icon" href="#reveal"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'reveal'</span>, isRevealed);</code></pre>
- </div>
-
- <p>Handles the revealing/hiding the off-canvas at breakpoints, not the same as open.</p>
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>isRevealed</code></td>
- <td>Boolean</td>
- <td>true if element should be revealed.</td>
- </tr>
- </table>
-
- <hr>
- </section>
- <section>
- <h4 id="open" class="docs-heading">open<a class="docs-heading-icon" href="#open"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'open'</span>, event, trigger);</code></pre>
- </div>
-
- <p>Opens the off-canvas menu.</p>
-
-
- <p><strong>Fires these events:</strong>
- OffCanvas#event:opened
- </p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>event</code></td>
- <td>Object</td>
- <td>Event object passed from listener.</td>
- </tr>
- <tr>
- <td><code>trigger</code></td>
- <td>jQuery</td>
- <td>element that triggered the off-canvas to open.</td>
- </tr>
- </table>
-
- <hr>
- </section>
- <section>
- <h4 id="close" class="docs-heading">close<a class="docs-heading-icon" href="#close"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'close'</span>, cb);</code></pre>
- </div>
-
- <p>Closes the off-canvas menu.</p>
-
-
- <p><strong>Fires these events:</strong>
- OffCanvas#event:closed
- </p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>cb</code></td>
- <td>function</td>
- <td>optional cb to fire after closure.</td>
- </tr>
- </table>
-
- <hr>
- </section>
- <section>
- <h4 id="toggle" class="docs-heading">toggle<a class="docs-heading-icon" href="#toggle"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'toggle'</span>, event, trigger);</code></pre>
- </div>
-
- <p>Toggles the off-canvas menu open or closed.</p>
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>event</code></td>
- <td>Object</td>
- <td>Event object passed from listener.</td>
- </tr>
- <tr>
- <td><code>trigger</code></td>
- <td>jQuery</td>
- <td>element that triggered the off-canvas to open.</td>
- </tr>
- </table>
-
- <hr>
- </section>
- <section>
- <h4 id="destroy" class="docs-heading">destroy<a class="docs-heading-icon" href="#destroy"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'destroy'</span>);</code></pre>
- </div>
-
- <p>Destroys the offcanvas plugin.</p>
-
-
-
-
-
- </section>
- </section>
-</section>
-
-<!-- <hr> -->
-<!-- <section class="docs-building-blocks">
- <h2 id="building-blocks" class="docs-heading" data-magellan-target="building-blocks">Building Blocks<a class="docs-heading-icon" href="#building-blocks"></a></h2>
-
- <p><a href="http://zurb.com/building-blocks">Building Blocks</a> is a ZURB-curated resource with useful code snippets that use Foundation components. Here are a few for this component:</p>
-
- <div class="warning callout">
- <p>These are placeholder items. If you have ideas for building blocks for this component, <a href="https://github.com/zurb/foundation-sites-6/issues/118">we're taking ideas on GitHub</a>.</p>
- </div>
-
- <div data-building-blocks></div>
-</section> -->
-
-</div>
-
-<div class="large-3 columns" data-sticky-container>
- <nav class="columns docs-toc-wrap" data-sticky data-anchor="docs" data-sticky-on="large">
- <div class="docs-toc hide" id="docsTOC">
- <ul class="vertical menu" data-docs-toc>
- <li class="docs-nav-title">On this page:</li>
- </ul>
- </div>
- <div class="foundation-toc-ad-unit" id="TOCAdUnit">
- </div>
- </nav>
-</div>
-
-</div>
-
-</article>
-
- </div>
- <div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
- <ul class="vertical menu docs-nav" id="docs-menu">
- <p class="docs-nav-version">
- <span data-docs-version></span>
- <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">(Changelog)</a>
- </p>
-
- <li class="docs-nav-title">Getting Started</li>
- <li><a href="installation.html">Installation</a></li>
- <li><a href="starter-projects.html">Starter Projects</a></li>
- <li><a href="compatibility.html">Compatibility</a></li>
- <li><a href="accessibility.html">Accessibility</a></li>
- <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
-
- <li class="docs-nav-title">Setup</li>
- <li><a href="global.html">Global Styles</a></li>
- <li><a href="rtl.html">Right-to-Left Support</a></li>
- <li><a href="flexbox.html">Flexbox</a></li>
- <li><a href="sass.html">Sass</a></li>
- <li><a href="javascript.html">JavaScript</a></li>
- <li><a href="javascript-utilities.html">JavaScript Utilities</a></li>
- <li><a href="media-queries.html">Media Queries</a></li>
-
- <li class="docs-nav-title">General</li>
- <li><a href="grid.html">Grid</a></li>
- <li><a href="flex-grid.html">Flex Grid</a></li>
- <li><a href="forms.html">Forms</a></li>
- <li><a href="visibility.html">Visibility Classes</a></li>
- <li><a href="float-classes.html">Float Classes</a></li>
-
- <li class="docs-nav-title">Typography</li>
- <li><a href="typography-base.html">Base Styles</a></li>
- <li><a href="typography-helpers.html">Helper Classes</a></li>
-
- <li class="docs-nav-title">Controls</li>
- <li><a href="button.html">Button</a></li>
- <li><a href="button-group.html">Button Group</a></li>
- <li><a href="close-button.html">Close Button</a></li>
- <li><a href="slider.html">Slider <span class="label">JS</span></a></li>
- <li><a href="switch.html">Switch</a></li>
-
- <li class="docs-nav-title">Navigation</li>
- <li><a href="navigation.html">Overview</a></li>
- <li><a href="menu.html">Menu</a></li>
- <li><a href="dropdown-menu.html">Dropdown Menu <span class="label">JS</span></a></li>
- <li><a href="drilldown-menu.html">Drilldown Menu <span class="label">JS</span></a></li>
- <li><a href="accordion-menu.html">Accordion Menu <span class="label">JS</span></a></li>
- <li><a href="top-bar.html">Top Bar</a></li>
- <li><a href="responsive-navigation.html">Responsive Navigation</a></li>
- <li><a href="magellan.html">Magellan <span class="label">JS</span></a></li>
- <li><a href="pagination.html">Pagination</a></li>
- <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
-
- <li class="docs-nav-title">Containers</li>
- <li><a href="accordion.html">Accordion <span class="label">JS</span></a></li>
- <li><a href="callout.html">Callout</a></li>
- <li><a href="dropdown.html">Dropdown <span class="label">JS</span></a></li>
- <li><a href="media-object.html">Media Object</a></li>
- <li class="current"><a href="off-canvas.html">Off-canvas <span class="label">JS</span></a></li>
- <li><a href="reveal.html">Reveal <span class="label">JS</span> <small>Modal</small></a></li>
- <li><a href="table.html">Table</a></li>
- <li><a href="tabs.html">Tabs <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Media</li>
- <li><a href="badge.html">Badge</a></li>
- <li><a href="flex-video.html">Flex Video</a></li>
- <li><a href="label.html">Label</a></li>
- <li><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
- <li><a href="progress-bar.html">Progress Bar</a></li>
- <li><a href="thumbnail.html">Thumbnail</a></li>
- <li><a href="tooltip.html">Tooltip <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Plugins</li>
- <li><a href="abide.html">Abide <small>Form Validation</small></a></li>
- <li><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
- <li><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
- <li><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
- <li><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
-
- <li class="docs-nav-title">Sass</li>
- <li><a href="sass-functions.html">Functions</a></li>
- <li><a href="sass-mixins.html">Mixins</a></li>
-
- <li class="docs-nav-title">Libraries</li>
- <li><a href="motion-ui.html">Motion UI</a></li>
- <li><a href="panini.html">Panini</a></li>
- <li><a href="style-sherpa.html">Style Sherpa</a></li>
-
- <li class="docs-nav-title">Older Versions</li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
- <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
- <li><a href="https://get.foundation/sites/docs/v/3.2.5/">Foundation 3</a></li>
- <li><a href="https://get.foundation/sites/docs/v/2.2.1/">Foundation 2</a></li>
- </ul>
-
- </div>
- </div>
-
- <!-- Small Business(Docs) -->
- <section id="studiosCallout">
- <div class="row">
- <div class="medium-4 large-4 columns">
- <img src="https://get.foundation/assets/img/smallbiz-footer.svg" alt="">
- </div>
- <div class="medium-8 large-8 columns banner-info">
- <div class="row column property-label">ZURB Foundation</div>
- <h3 class="light">Yeah, we can help with that.</h3>
- <p class="lead"> We’ll collaborate with your team throughout the entire project life cycle. We’ll take your concept and move it through ideation, hi-fi wireframes, visual design and code, all while informing you on the whys and hows along the way.</p>
- <div class="course-buttons">
- <a href="https://get.foundation/get-involved/premium-support.html" class="studios button" data-zcom-event="studios_foundation_click" id="foundationSmallV1">Show Me How →</a>
- </div>
- </div>
- </div>
- </section>
-
- <div class="docs-newsletter">
- <div class="row">
- <div class="medium-7 large-8 columns">
- <a target="_blank" href="https://get.foundation/learn/responsive-reading.html">
- <h5 class="">Download ZURB’s 21 Responsive Trends That Will Shape 2017</h5>
- <p style="margin-bottom: 0;">Stay informed with amazing responsive trends each month from ZURB.</p>
- </a>
- </div>
- <div class="medium-5 large-4 footer-signup-form columns">
- <a style="margin-bottom: 0;" target="_blank" href="https://get.foundation/learn/responsive-reading.html" class="button expanded">Download the PDF</a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-top bg-fblue">
- <div class="row property">
- <div class="medium-4 columns">
- <div class="property-info">
- <h3>Foundation for Sites</h3>
- <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
- </p>
- </div>
- </div>
-
- <div class="medium-8 columns">
- <div class="row collapse">
- <div class="medium-4 columns">
- <div class="learn-links">
- <h4 class="hide-for-small">Want more?</h4>
- <ul>
- <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
- <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
- <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
- <li><a href="http://zurb.com/university/courses">Training</a></li>
- <li><a href="http://zurb.com/library">Design Resources</a></li>
- </ul>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="support-links">
- <h4 class="hide-for-small">Talk to us</h4>
- <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
- <p><a href="https://get.foundation/get-involved/contribute.html">Get involved in<br>our amazing community.</a></p>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="connect-links">
- <h4 class="hide-for-small">Stay Updated</h4>
- <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
- <a href="http://zurb.com/news" class="small button">Stay Connected</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="row global">
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/studios" class="footer-link-block services">
- <span class="title">Studios</span>
- <span>Helping more than 200 startups succeed since 1998.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="https://get.foundation/" class="footer-link-block foundation">
- <span class="title">Foundation</span>
- <span>The most advanced front-end framework in the world.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/notable" class="footer-link-block apps">
- <span class="title">Notable Design Apps</span>
- <span>Prototype, iterate and collect feedback on your products.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/university" class="footer-link-block expo">
- <span class="title">University</span>
- <span>Ideas, thoughts and design resources shared with you.</span>
- </a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-bottom">
- <div class="row">
- <div class="medium-4 medium-push-8 columns">
- <ul class="home-social">
- <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
- <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
- <li><a href="http://zurb.com/contact" class="mail"></a></li>
- </ul>
- </div>
- <div class="medium-8 medium-pull-4 columns">
- <a href="http://www.zurb.com" class="zurb-logo regular"></a>
- <ul class="zurb-links">
- <li><a href="http://zurb.com/about">About</a></li>
- <li><a href="http://zurb.com/blog">Blog</a></li>
- <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
- <li><a href="http://zurb.com/contact">Contact</a></li>
- <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
- </ul>
- <p class="copyright">© 1998‐2016 ZURB, Inc. All rights reserved.</p>
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- <script>
- var _gaq = _gaq || [];
- _gaq.push(
- ['_setAccount', 'UA-2195009-2'],
- ['_trackPageview'],
- ['b._setAccount', 'UA-2195009-27'],
- ['b._trackPageview']
- );
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
-
- <script src="assets/js/vendor.js?hash=61b2ea0a368c17d3982c192412bca246"></script>
- <script src="assets/js/foundation.js?hash=16aded7e4960f2e15e833cedd0ab3a1c"></script>
- <script src="assets/js/docs.js?hash=91da6fb7b638ddf61417bd65b315b249"></script>
- <script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
-</body>
-</html>
+++ /dev/null
-<!doctype html>
-<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
-<html class="no-js" lang="en" dir="ltr">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="An image and content carousel with animation support and many customizable options.">
- <link rel="icon" href="assets/img/icons/foundation-favicon.ico" type="image/x-icon">
- <title>Foundation for Sites 6 Docs | Orbit</title>
- <link href="assets/css/docs.css?hash=5465326a12b73707f078d687aca65814" rel="stylesheet" />
- <link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=5fd2e362d830ade1848b5bf25173fa66" rel="stylesheet">
- <!-- <link rel="stylesheet" href="./node_modules/motion-ui/dist/motion-ui.css" /> -->
-</head>
-<body>
-
- <div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
-
- <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="mobile-ofc vertical menu">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
-
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/support.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/sort/unanswered">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
- </div>
-
- <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="vertical menu">
- <li><a href="#">Foundation</a></li>
- <li><a href="#">Dot</a></li>
- <li><a href="#">ZURB</a></li>
- <li><a href="#">Com</a></li>
- <li><a href="#">Slash</a></li>
- <li><a href="#">Sites</a></li>
- </ul>
- </div>
-
-
- <div class="off-canvas-content" data-off-canvas-content>
- <!-- Info Banner For Announcements or Links -->
- <!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
- <div class="info">
- <h5>Foundation 6 is here!</h5>
- </div>
- </a> -->
-
- <nav class="marketing-topbar show-for-medium">
-
- <ul class="menu">
- <li class="topbar-title"><a href="https://get.foundation/index.html"><img src="assets/img/logos/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
- </ul>
-
- <ul class="dropdown menu" data-dropdown-menu data-click-open="false">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/" target="_blank">F5 Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="https://get.foundation/emails/docs/" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
-
- </nav>
-
- <div class="title-bar hide-for-medium">
- <div class="title-bar-left">
- <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
- <span class="title-bar-title">Foundation</span>
- </div>
- </div>
-
-
- <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
-
- <div class="expanded row">
- <div class="medium-9 large-10 medium-push-3 large-push-2 columns">
-
-<article class="docs-component" id="docs-orbit">
-
-<a href="#docs-menu" class="small secondary expanded button hide-for-medium">Jump to Nav</a>
-
-<header>
- <h1 class="docs-page-title">Orbit</h1>
-
- <span data-tooltip title="Requires a JavaScript library." class="docs-js label">JavaScript</span>
- <span data-tooltip title="Supports Motion UI transitions." class="docs-mui label">Motion UI</span>
-
- <p class="lead docs-page-lead">An image and content carousel with animation support and many customizable options.</p>
-
- <ul class="menu simple docs-contribute-menu">
- <li><a href="https://github.com/zurb/foundation-sites/edit/master/docs/pages/orbit.md" target="_blank"><i class="fi-pencil"></i>Edit this Page</a></li>
- <li><a href="https://github.com/zurb/foundation-sites/issues/new?title=%5BOrbit%5D%20ISSUE%20NAME%20HERE" target="_blank"><i class="fi-social-github"></i>Report a Bug</a></li>
- <li><a href="https://get.foundation/forum" target="_blank"><i class="fi-comment"></i>Get Help</a></li>
- </ul>
-</header>
-
-<hr>
-
-<div class="row">
-
-<div class="large-9 columns" id="docs">
-
-<h2 id="basics" class="docs-heading" data-magellan-target="basics">Basics<a class="docs-heading-icon" href="#basics"></a></h2><p>Orbit doesn't automatically generate any HTML for you, giving you the flexibility to move around the various pieces of the plugin. Here's a complete example—we'll break down the individual pieces farther down.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"orbit"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"region"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Favorite Space Pictures"</span> <span class="hljs-attr">data-orbit</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"orbit-container"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"orbit-previous"</span>></span><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"show-for-sr"</span>></span>Previous Slide<span class="hljs-tag"></<span class="hljs-name">span</span>></span>&#9664;&#xFE0E;<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"orbit-next"</span>></span><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"show-for-sr"</span>></span>Next Slide<span class="hljs-tag"></<span class="hljs-name">span</span>></span>&#9654;&#xFE0E;<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"is-active orbit-slide"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"orbit-image"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"assets/img/orbit/01.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Space"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">figcaption</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"orbit-caption"</span>></span>Space, the final frontier.<span class="hljs-tag"></<span class="hljs-name">figcaption</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"orbit-slide"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"orbit-image"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"assets/img/orbit/02.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Space"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">figcaption</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"orbit-caption"</span>></span>Lets Rocket!<span class="hljs-tag"></<span class="hljs-name">figcaption</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"orbit-slide"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"orbit-image"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"assets/img/orbit/03.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Space"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">figcaption</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"orbit-caption"</span>></span>Encapsulating<span class="hljs-tag"></<span class="hljs-name">figcaption</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"orbit-slide"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"orbit-image"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"assets/img/orbit/04.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Space"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">figcaption</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"orbit-caption"</span>></span>Outta This World<span class="hljs-tag"></<span class="hljs-name">figcaption</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">nav</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"orbit-bullets"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"is-active"</span> <span class="hljs-attr">data-slide</span>=<span class="hljs-string">"0"</span>></span><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"show-for-sr"</span>></span>First slide details.<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"show-for-sr"</span>></span>Current Slide<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">data-slide</span>=<span class="hljs-string">"1"</span>></span><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"show-for-sr"</span>></span>Second slide details.<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">data-slide</span>=<span class="hljs-string">"2"</span>></span><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"show-for-sr"</span>></span>Third slide details.<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">data-slide</span>=<span class="hljs-string">"3"</span>></span><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"show-for-sr"</span>></span>Fourth slide details.<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">nav</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
- <ul class="orbit-container">
- <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>◀︎</button>
- <button class="orbit-next"><span class="show-for-sr">Next Slide</span>▶︎</button>
- <li class="is-active orbit-slide">
- <img class="orbit-image" src="assets/img/orbit/01.jpg" alt="Space">
- <figcaption class="orbit-caption">Space, the final frontier.</figcaption>
- </li>
- <li class="orbit-slide">
- <img class="orbit-image" src="assets/img/orbit/02.jpg" alt="Space">
- <figcaption class="orbit-caption">Lets Rocket!</figcaption>
- </li>
- <li class="orbit-slide">
- <img class="orbit-image" src="assets/img/orbit/03.jpg" alt="Space">
- <figcaption class="orbit-caption">Encapsulating</figcaption>
- </li>
- <li class="orbit-slide">
- <img class="orbit-image" src="assets/img/orbit/04.jpg" alt="Space">
- <figcaption class="orbit-caption">Outta This World</figcaption>
- </li>
- </ul>
- <nav class="orbit-bullets">
- <button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
- <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
- <button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
- <button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
- </nav>
-</div></div><hr>
-<h3 id="wrapper" class="docs-heading">Wrapper<a class="docs-heading-icon" href="#wrapper"></a></h3><p>The wrapper houses the entire carousel. We use the <code>aria-label</code> attribute to label what the carousel is, for assistive technology.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"orbit"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"region"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Favorite Space Pictures"</span> <span class="hljs-attr">data-orbit</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div><h3 id="slide-container" class="docs-heading">Slide Container<a class="docs-heading-icon" href="#slide-container"></a></h3><p>The slide container houses each individual slide. In our above markup example, we also placed the buttons in here, so we can anchor them to the center edge of the slide container. However, they can be moved anywhere within the <code>data-orbit</code> wrapper.</p>
-<p>Each slide is an <code><li></code> with the class <code>.orbit-slide</code>. The first slide is marked with the <code>.is-active</code> class to indicate it's the default. You can place any HTML you want inside of the slide, but we have some premade styles for image-based slides with a caption.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"orbit-container"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"orbit-slide is-active"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"orbit-image"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"assets/img/orbit/01.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Space"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">figcaption</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"orbit-caption"</span>></span>Space, the final frontier.<span class="hljs-tag"></<span class="hljs-name">figcaption</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-comment"><!-- More slides... --></span>
-<span class="hljs-tag"></<span class="hljs-name">ul</span>></span></code></pre></div><h3 id="next-previous-arrows" class="docs-heading">Next/Previous Arrows<a class="docs-heading-icon" href="#next-previous-arrows"></a></h3><p>Orbit controls use the class <code>.orbit-previous</code> and <code>.orbit-next</code>. The below example has an important accessibility hook: since we're using ASCII arrows for the carousel controls, we add screen reader-only text (wrapped in the class <code>.show-for-sr</code>) that explain what the controls do.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"orbit-previous"</span>></span><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"show-for-sr"</span>></span>Previous Slide<span class="hljs-tag"></<span class="hljs-name">span</span>></span> &#9664;&#xFE0E;<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"orbit-next"</span>></span><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"show-for-sr"</span>></span>Next Slide<span class="hljs-tag"></<span class="hljs-name">span</span>></span> &#9654;&#xFE0E;<span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></pre></div><h3 id="bullets" class="docs-heading">Bullets<a class="docs-heading-icon" href="#bullets"></a></h3><p>The bullets serve two purposes: they mark the current slide, and can be clicked on to navigate to another slide. Like with the controls, the bullets also have screen reader-friendly labels.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">nav</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"orbit-bullets"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"is-active"</span> <span class="hljs-attr">data-slide</span>=<span class="hljs-string">"0"</span>></span><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"show-for-sr"</span>></span>First slide details.<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"show-for-sr"</span>></span>Current Slide<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">data-slide</span>=<span class="hljs-string">"1"</span>></span><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"show-for-sr"</span>></span>Second slide details.<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">data-slide</span>=<span class="hljs-string">"2"</span>></span><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"show-for-sr"</span>></span>Third slide details.<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">data-slide</span>=<span class="hljs-string">"3"</span>></span><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"show-for-sr"</span>></span>Fourth slide details.<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">nav</span>></span></code></pre></div><!-- <div class="callout"><p>
- The new Orbit slider was designed to be a tool for rapid prototyping. While you are welcome to use it in production, if you want something more robust, we welcome you to try [Owl Carousel](http://owlgraphic.com/owlcarousel/).
-</p>
-<div class="callout alert">
- <p>
- If animations are desired with the Orbit slider, such as the example below, [Motion-UI](https://github.com/zurb/motion-ui) is required. If you want a simple slide replacement, set the option `useMUI` to false for animation free slides.
- </p>
-</div>
-</div> -->
-<hr>
-<h2 id="slide-contents" class="docs-heading" data-magellan-target="slide-contents">Slide Contents<a class="docs-heading-icon" href="#slide-contents"></a></h2><p>A carousel slide can contain images or HTML—you can even mix between slides in one carousel!</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"orbit-slide"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">h3</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center"</span>></span>2: You can also throw some text in here!<span class="hljs-tag"></<span class="hljs-name">h3</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center"</span>></span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">h3</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center"</span>></span>This Orbit slider does not use animations.<span class="hljs-tag"></<span class="hljs-name">h3</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">li</span>></span></code></pre></div><div class="orbit" role="region" aria-label="Favorite Text Ever" data-orbit>
- <ul class="orbit-container">
- <button class="orbit-previous" aria-label="previous"><span class="show-for-sr">Previous Slide</span>◀</button>
- <button class="orbit-next" aria-label="next"><span class="show-for-sr">Next Slide</span>▶</button>
- <li class="is-active orbit-slide">
- <div class="docs-example-orbit-slide">
- <p><strong>This is dodgerblue.</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- </div>
- </li>
- <li class="orbit-slide">
- <div class="docs-example-orbit-slide">
- <p><strong>This is rebeccapurple.</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- </div>
- </li>
- <li class="orbit-slide">
- <div class="docs-example-orbit-slide">
- <p><strong>This is darkgoldenrod.</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- </div>
- </li>
- <li class="orbit-slide">
- <div class="docs-example-orbit-slide">
- <p><strong>This is lightseagreen.</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- </div>
- </li>
- </ul>
- <nav class="orbit-bullets">
- <button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
- <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
- <button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
- <button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
- </nav>
-</div>
-
-<hr>
-<h2 id="using-animation" class="docs-heading" data-magellan-target="using-animation">Using Animation<a class="docs-heading-icon" href="#using-animation"></a></h2><p>Orbit uses <a href="motion-ui.html">Motion UI</a> CSS classes to animate slides around.</p>
-<div class="callout warning">
- <p>Without the inclusion of the <code>motion-ui</code> <a href="motion-ui.html">Motion UI</a> CSS file in your template, Orbit slider fails to work properly. </p>
-</div>
-
-<p>There are four plugin options you can set to change the default effects:</p>
-<ul>
-<li><code>data-anim-in-from-left</code>: transition to play when a slide comes <em>in from the left</em>.</li>
-<li><code>data-anim-in-from-right</code>: transition to play when a slide comes <em>in from the right</em>.</li>
-<li><code>data-anim-out-from-left</code>: transition to play when a slide comes <em>out from the left</em>.</li>
-<li><code>data-anim-out-from-right</code>: transition to play when a slide comes <em>out from the right</em>.</li>
-</ul>
-<p>Since those option names are pretty <em>long</em>, you can also set them all in one HTML attribute, using <code>data-options</code>:</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"orbit"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"region"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Favorite Space Pictures"</span> <span class="hljs-attr">data-orbit</span> <span class="hljs-attr">data-options</span>=<span class="hljs-string">"animInFromLeft:fade-in; animInFromRight:fade-in; animOutToLeft:fade-out; animOutToRight:fade-out;"</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div><div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit data-options="animInFromLeft:fade-in; animInFromRight:fade-in; animOutToLeft:fade-out; animOutToRight:fade-out;">
- <ul class="orbit-container">
- <button class="orbit-previous" aria-label="previous"><span class="show-for-sr">Previous Slide</span>◀</button>
- <button class="orbit-next" aria-label="next"><span class="show-for-sr">Next Slide</span>▶</button>
- <li class="is-active orbit-slide">
- <img class="orbit-image" src="assets/img/orbit/01.jpg" alt="Space">
- <figcaption class="orbit-caption">Space, the final frontier.</figcaption>
- </li>
- <li class="orbit-slide">
- <img class="orbit-image" src="assets/img/orbit/02.jpg" alt="Space">
- <figcaption class="orbit-caption">Lets Rocket!</figcaption>
- </li>
- <li class="orbit-slide">
- <img class="orbit-image" src="assets/img/orbit/03.jpg" alt="Space">
- <figcaption class="orbit-caption">Encapsulating</figcaption>
- </li>
- <li class="orbit-slide">
- <img class="orbit-image" src="assets/img/orbit/04.jpg" alt="Space">
- <figcaption class="orbit-caption">Outta This World</figcaption>
- </li>
- </ul>
- <nav class="orbit-bullets">
- <button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
- <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
- <button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
- <button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
- </nav>
-</div>
-
-<hr>
-<h3 id="disabling-animation" class="docs-heading">Disabling Animation<a class="docs-heading-icon" href="#disabling-animation"></a></h3><p>To disable Motion UI, set the plugin option <code>useMUI</code> to <code>false</code>. Written as an HTML attribute, that's <code>data-use-m-u-i="false"</code>.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"orbit"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"region"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Favorite Space Pictures"</span> <span class="hljs-attr">data-orbit</span> <span class="hljs-attr">data-use-m-u-i</span>=<span class="hljs-string">"false"</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div><div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit data-use-m-u-i="false">
- <ul class="orbit-container">
- <button class="orbit-previous" aria-label="previous"><span class="show-for-sr">Previous Slide</span>◀</button>
- <button class="orbit-next" aria-label="next"><span class="show-for-sr">Next Slide</span>▶</button>
- <li class="is-active orbit-slide">
- <img class="orbit-image" src="assets/img/orbit/01.jpg" alt="Space">
- <figcaption class="orbit-caption">Space, the final frontier.</figcaption>
- </li>
- <li class="orbit-slide">
- <img class="orbit-image" src="assets/img/orbit/02.jpg" alt="Space">
- <figcaption class="orbit-caption">Lets Rocket!</figcaption>
- </li>
- <li class="orbit-slide">
- <img class="orbit-image" src="assets/img/orbit/03.jpg" alt="Space">
- <figcaption class="orbit-caption">Encapsulating</figcaption>
- </li>
- <li class="orbit-slide">
- <img class="orbit-image" src="assets/img/orbit/04.jpg" alt="Space">
- <figcaption class="orbit-caption">Outta This World</figcaption>
- </li>
- </ul>
- <nav class="orbit-bullets">
- <button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
- <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
- <button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
- <button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
- </nav>
-</div>
-
-
-<hr>
-<section>
- <h2 id="sass-reference" class="docs-heading" data-magellan-target="sass-reference">Sass Reference<a class="docs-heading-icon" href="#sass-reference"></a></h2>
-
- <section>
- <h3 id="sass-variables" class="docs-heading">Variables<a class="docs-heading-icon" href="#sass-variables"></a></h3>
-
- <p>The default styles of this component can be customized using these Sass variables in your project's <a href="sass.html#the-settings-file">settings file</a>.</p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td class="name"><code>$orbit-bullet-background</code></td>
- <td>Color</td>
- <td class="color"><code>$medium-gray</code></td>
- <td><p>Default color for Orbit's bullets.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$orbit-bullet-background-active</code></td>
- <td>Color</td>
- <td class="color"><code>$dark-gray</code></td>
- <td><p>Default active color for Orbit's bullets.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$orbit-bullet-diameter</code></td>
- <td>Number</td>
- <td class="number"><code>1.2rem</code></td>
- <td><p>Default diameter for Orbit's bullets.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$orbit-bullet-margin</code></td>
- <td>Number</td>
- <td class="number"><code>0.1rem</code></td>
- <td><p>Default margin between Orbit's bullets.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$orbit-bullet-margin-top</code></td>
- <td>Number</td>
- <td class="number"><code>0.8rem</code></td>
- <td><p>Default distance from slide region for Orbit's bullets.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$orbit-bullet-margin-bottom</code></td>
- <td>Number</td>
- <td class="number"><code>0.8rem</code></td>
- <td><p>Default bottom margin from Orbit's bullets to whatever content may lurk below it.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$orbit-caption-background</code></td>
- <td>Color</td>
- <td class="color"><code>rgba($black, 0.5)</code></td>
- <td><p>Default background color for Orbit's caption.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$orbit-caption-padding</code></td>
- <td>Number</td>
- <td class="number"><code>1rem</code></td>
- <td><p>Default padding for Orbit's caption.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$orbit-control-background-hover</code></td>
- <td>Color</td>
- <td class="color"><code>rgba($black, 0.5)</code></td>
- <td><p>Default background color for Orbit's controls when hovered.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$orbit-control-padding</code></td>
- <td>Number</td>
- <td class="number"><code>1rem</code></td>
- <td><p>Default padding for Orbit's controls.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$orbit-control-zindex</code></td>
- <td>Number</td>
- <td class="number"><code>10</code></td>
- <td><p>Default z-index for Orbit's controls.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="sass-mixins" class="docs-heading">Mixins<a class="docs-heading-icon" href="#sass-mixins"></a></h3>
-
- <p>We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.</p>
-
-
- <section >
- <h4 id="orbit-wrapper" class="docs-heading">orbit-wrapper<a class="docs-heading-icon" href="#orbit-wrapper"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> orbit-wrapper;</code></pre>
- </div>
-
- <p>Adds styles for the outer Orbit wrapper. These styles are used on the <code>.orbit</code> class.</p>
-
-
-
-
-
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="orbit-container" class="docs-heading">orbit-container<a class="docs-heading-icon" href="#orbit-container"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> orbit-container;</code></pre>
- </div>
-
- <p>Adds styles for the inner Orbit slide container. These styles are used on the <code>.orbit-container</code> class.</p>
-
-
-
-
-
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="orbit-slide" class="docs-heading">orbit-slide<a class="docs-heading-icon" href="#orbit-slide"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> orbit-slide;</code></pre>
- </div>
-
- <p>Adds styles for the individual slides of an Orbit slider. These styles are used on the <code>.orbit-slide</code> class.</p>
-
-
-
-
-
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="orbit-image" class="docs-heading">orbit-image<a class="docs-heading-icon" href="#orbit-image"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> orbit-image;</code></pre>
- </div>
-
- <p>Adds styles for a slide containing an image. These styles are used on the <code>.orbit-image</code> class.</p>
-
-
-
-
-
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="orbit-caption" class="docs-heading">orbit-caption<a class="docs-heading-icon" href="#orbit-caption"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> orbit-caption;</code></pre>
- </div>
-
- <p>Adds styles for an orbit slide caption. These styles are used on the <code>.orbit-caption</code> class.</p>
-
-
-
-
-
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="orbit-control" class="docs-heading">orbit-control<a class="docs-heading-icon" href="#orbit-control"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> orbit-control;</code></pre>
- </div>
-
- <p>Adds base styles for the next/previous buttons in an Orbit slider. These styles are shared between the <code>.orbit-next</code> and <code>.orbit-previous</code> classes in the default CSS.</p>
-
-
-
-
-
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="orbit-previous" class="docs-heading">orbit-previous<a class="docs-heading-icon" href="#orbit-previous"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> orbit-previous;</code></pre>
- </div>
-
- <p>Adds styles for the Orbit previous button. These styles are used on the <code>.orbit-previous</code> class.</p>
-
-
-
-
-
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="orbit-next" class="docs-heading">orbit-next<a class="docs-heading-icon" href="#orbit-next"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> orbit-next;</code></pre>
- </div>
-
- <p>Adds styles for the Orbit next button. These styles are used on the <code>.orbit-next</code> class.</p>
-
-
-
-
-
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="orbit-bullets" class="docs-heading">orbit-bullets<a class="docs-heading-icon" href="#orbit-bullets"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> orbit-bullets;</code></pre>
- </div>
-
- <p>Adds styles for a container of Orbit bullets. Adds styles for the Orbit previous button. These styles are used on the <code>.orbit-bullets</code> class.</p>
-
-
-
-
-
- </section>
-
-
-
-
-
- </section>
-
-
-</section>
-
-<hr>
-<section>
- <h2 id="javascript-reference" class="docs-heading" data-magellan-target="javascript-reference">JavaScript Reference<a class="docs-heading-icon" href="#javascript-reference"></a></h2>
-
-
- <section>
- <h3 id="js-module" class="docs-heading">Initializing<a class="docs-heading-icon" href="#js-module"></a></h3>
-
- <p>The file <code>foundation.orbit.js</code> must be included in your JavaScript to use this plugin, along with <code>foundation.core.js</code>. <strong>This plugin also requires these utility libraries:</strong></p>
-
-
- <ul>
- <li><code>foundation.util.keyboard.js</code></li>
- </ul>
-
- <ul>
- <li><code>foundation.util.motion.js</code></li>
- </ul>
-
- <ul>
- <li><code>foundation.util.timerAndImageLoader.js</code></li>
- </ul>
-
- <ul>
- <li><code>foundation.util.touch.js</code></li>
- </ul>
-
-
- </section>
-
-
- <section>
- <h3 id="js-class" class="docs-heading">Foundation.Orbit<a class="docs-heading-icon" href="#js-class"></a></h3>
-
- <p>Creates a new instance of an orbit carousel.</p>
-
-
- <div class="docs-code"><pre><code><span class="hljs-keyword">var</span> elem = <span class="hljs-keyword">new</span> Foundation.Orbit(element, options);</code></pre></div>
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>element</code></td>
- <td>jQuery</td>
- <td>jQuery object to make into an Orbit Carousel.</td>
- </tr>
- <tr>
- <td><code>options</code></td>
- <td>Object</td>
- <td>Overrides to the default plugin settings.</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="js-options" class="docs-heading">Plugin Options<a class="docs-heading-icon" href="#js-options"></a></h3>
-
- <p>Use these options to customize an instance of Orbit. Plugin options can be set as individual data attributes, one combined <code>data-options</code> attribute, or as an object passed to the plugin's constructor. <a href="javascript.html#initializing">Learn more about how JavaScript plugins are initialized.</a></p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Default</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>data-bullets</code></td>
- <td><code>true</code></td>
- <td>Tells the JS to look for and loadBullets.</td>
- </tr>
- <tr>
- <td><code>data-nav-buttons</code></td>
- <td><code>true</code></td>
- <td>Tells the JS to apply event listeners to nav buttons</td>
- </tr>
- <tr>
- <td><code>data-anim-in-from-right</code></td>
- <td><code>slide-in-right</code></td>
- <td>motion-ui animation class to apply</td>
- </tr>
- <tr>
- <td><code>data-anim-out-to-right</code></td>
- <td><code>slide-out-right</code></td>
- <td>motion-ui animation class to apply</td>
- </tr>
- <tr>
- <td><code>data-anim-in-from-left</code></td>
- <td><code>slide-in-left</code></td>
- <td>motion-ui animation class to apply</td>
- </tr>
- <tr>
- <td><code>data-anim-out-to-left</code></td>
- <td><code>slide-out-left</code></td>
- <td>motion-ui animation class to apply</td>
- </tr>
- <tr>
- <td><code>data-auto-play</code></td>
- <td><code>true</code></td>
- <td>Allows Orbit to automatically animate on page load.</td>
- </tr>
- <tr>
- <td><code>data-timer-delay</code></td>
- <td><code>5000</code></td>
- <td>Amount of time, in ms, between slide transitions</td>
- </tr>
- <tr>
- <td><code>data-infinite-wrap</code></td>
- <td><code>true</code></td>
- <td>Allows Orbit to infinitely loop through the slides</td>
- </tr>
- <tr>
- <td><code>data-swipe</code></td>
- <td><code>true</code></td>
- <td>Allows the Orbit slides to bind to swipe events for mobile, requires an additional util library</td>
- </tr>
- <tr>
- <td><code>data-pause-on-hover</code></td>
- <td><code>true</code></td>
- <td>Allows the timing function to pause animation on hover.</td>
- </tr>
- <tr>
- <td><code>data-accessible</code></td>
- <td><code>true</code></td>
- <td>Allows Orbit to bind keyboard events to the slider, to animate frames with arrow keys</td>
- </tr>
- <tr>
- <td><code>data-container-class</code></td>
- <td><code>orbit-container</code></td>
- <td>Class applied to the container of Orbit</td>
- </tr>
- <tr>
- <td><code>data-slide-class</code></td>
- <td><code>orbit-slide</code></td>
- <td>Class applied to individual slides.</td>
- </tr>
- <tr>
- <td><code>data-box-of-bullets</code></td>
- <td><code>orbit-bullets</code></td>
- <td>Class applied to the bullet container. You're welcome.</td>
- </tr>
- <tr>
- <td><code>data-next-class</code></td>
- <td><code>orbit-next</code></td>
- <td>Class applied to the `next` navigation button.</td>
- </tr>
- <tr>
- <td><code>data-prev-class</code></td>
- <td><code>orbit-previous</code></td>
- <td>Class applied to the `previous` navigation button.</td>
- </tr>
- <tr>
- <td><code>data-use-m-u-i</code></td>
- <td><code>true</code></td>
- <td>Boolean to flag the js to use motion ui classes or not. Default to true for backwards compatability.</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="js-events" class="docs-heading">Events<a class="docs-heading-icon" href="#js-events"></a></h3>
-
- <p>These events will fire from any element with a Orbit plugin attached.</p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>slidechange.zf.orbit</code></td>
- <td>Triggers when the slide has finished animating in.</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="js-functions" class="docs-heading">Methods<a class="docs-heading-icon" href="#js-functions"></a></h3>
-
- <section>
- <h4 id="geosync" class="docs-heading">geoSync<a class="docs-heading-icon" href="#geosync"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'geoSync'</span>);</code></pre>
- </div>
-
- <p>Sets a <code>timer</code> object on the orbit, and starts the counter for the next slide.</p>
-
-
-
-
- <hr>
- </section>
- <section>
- <h4 id="changeslide" class="docs-heading">changeSlide<a class="docs-heading-icon" href="#changeslide"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'changeSlide'</span>, isLTR, chosenSlide, idx);</code></pre>
- </div>
-
- <p>Changes the current slide to a new one.</p>
-
-
- <p><strong>Fires these events:</strong>
- Orbit#event:slidechange
- </p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>isLTR</code></td>
- <td>Boolean</td>
- <td>flag if the slide should move left to right.</td>
- </tr>
- <tr>
- <td><code>chosenSlide</code></td>
- <td>jQuery</td>
- <td>the jQuery element of the slide to show next, if one is selected.</td>
- </tr>
- <tr>
- <td><code>idx</code></td>
- <td>Number</td>
- <td>the index of the new slide in its collection, if one chosen.</td>
- </tr>
- </table>
-
- <hr>
- </section>
- <section>
- <h4 id="destroy" class="docs-heading">destroy<a class="docs-heading-icon" href="#destroy"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'destroy'</span>);</code></pre>
- </div>
-
- <p>Destroys the carousel and hides the element.</p>
-
-
-
-
-
- </section>
- </section>
-</section>
-
-<!-- <hr> -->
-<!-- <section class="docs-building-blocks">
- <h2 id="building-blocks" class="docs-heading" data-magellan-target="building-blocks">Building Blocks<a class="docs-heading-icon" href="#building-blocks"></a></h2>
-
- <p><a href="http://zurb.com/building-blocks">Building Blocks</a> is a ZURB-curated resource with useful code snippets that use Foundation components. Here are a few for this component:</p>
-
- <div class="warning callout">
- <p>These are placeholder items. If you have ideas for building blocks for this component, <a href="https://github.com/zurb/foundation-sites-6/issues/118">we're taking ideas on GitHub</a>.</p>
- </div>
-
- <div data-building-blocks></div>
-</section> -->
-
-</div>
-
-<div class="large-3 columns" data-sticky-container>
- <nav class="columns docs-toc-wrap" data-sticky data-anchor="docs" data-sticky-on="large">
- <div class="docs-toc hide" id="docsTOC">
- <ul class="vertical menu" data-docs-toc>
- <li class="docs-nav-title">On this page:</li>
- </ul>
- </div>
- <div class="foundation-toc-ad-unit" id="TOCAdUnit">
- </div>
- </nav>
-</div>
-
-</div>
-
-</article>
-
- </div>
- <div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
- <ul class="vertical menu docs-nav" id="docs-menu">
- <p class="docs-nav-version">
- <span data-docs-version></span>
- <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">(Changelog)</a>
- </p>
-
- <li class="docs-nav-title">Getting Started</li>
- <li><a href="installation.html">Installation</a></li>
- <li><a href="starter-projects.html">Starter Projects</a></li>
- <li><a href="compatibility.html">Compatibility</a></li>
- <li><a href="accessibility.html">Accessibility</a></li>
- <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
-
- <li class="docs-nav-title">Setup</li>
- <li><a href="global.html">Global Styles</a></li>
- <li><a href="rtl.html">Right-to-Left Support</a></li>
- <li><a href="flexbox.html">Flexbox</a></li>
- <li><a href="sass.html">Sass</a></li>
- <li><a href="javascript.html">JavaScript</a></li>
- <li><a href="javascript-utilities.html">JavaScript Utilities</a></li>
- <li><a href="media-queries.html">Media Queries</a></li>
-
- <li class="docs-nav-title">General</li>
- <li><a href="grid.html">Grid</a></li>
- <li><a href="flex-grid.html">Flex Grid</a></li>
- <li><a href="forms.html">Forms</a></li>
- <li><a href="visibility.html">Visibility Classes</a></li>
- <li><a href="float-classes.html">Float Classes</a></li>
-
- <li class="docs-nav-title">Typography</li>
- <li><a href="typography-base.html">Base Styles</a></li>
- <li><a href="typography-helpers.html">Helper Classes</a></li>
-
- <li class="docs-nav-title">Controls</li>
- <li><a href="button.html">Button</a></li>
- <li><a href="button-group.html">Button Group</a></li>
- <li><a href="close-button.html">Close Button</a></li>
- <li><a href="slider.html">Slider <span class="label">JS</span></a></li>
- <li><a href="switch.html">Switch</a></li>
-
- <li class="docs-nav-title">Navigation</li>
- <li><a href="navigation.html">Overview</a></li>
- <li><a href="menu.html">Menu</a></li>
- <li><a href="dropdown-menu.html">Dropdown Menu <span class="label">JS</span></a></li>
- <li><a href="drilldown-menu.html">Drilldown Menu <span class="label">JS</span></a></li>
- <li><a href="accordion-menu.html">Accordion Menu <span class="label">JS</span></a></li>
- <li><a href="top-bar.html">Top Bar</a></li>
- <li><a href="responsive-navigation.html">Responsive Navigation</a></li>
- <li><a href="magellan.html">Magellan <span class="label">JS</span></a></li>
- <li><a href="pagination.html">Pagination</a></li>
- <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
-
- <li class="docs-nav-title">Containers</li>
- <li><a href="accordion.html">Accordion <span class="label">JS</span></a></li>
- <li><a href="callout.html">Callout</a></li>
- <li><a href="dropdown.html">Dropdown <span class="label">JS</span></a></li>
- <li><a href="media-object.html">Media Object</a></li>
- <li><a href="off-canvas.html">Off-canvas <span class="label">JS</span></a></li>
- <li><a href="reveal.html">Reveal <span class="label">JS</span> <small>Modal</small></a></li>
- <li><a href="table.html">Table</a></li>
- <li><a href="tabs.html">Tabs <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Media</li>
- <li><a href="badge.html">Badge</a></li>
- <li><a href="flex-video.html">Flex Video</a></li>
- <li><a href="label.html">Label</a></li>
- <li class="current"><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
- <li><a href="progress-bar.html">Progress Bar</a></li>
- <li><a href="thumbnail.html">Thumbnail</a></li>
- <li><a href="tooltip.html">Tooltip <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Plugins</li>
- <li><a href="abide.html">Abide <small>Form Validation</small></a></li>
- <li><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
- <li><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
- <li><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
- <li><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
-
- <li class="docs-nav-title">Sass</li>
- <li><a href="sass-functions.html">Functions</a></li>
- <li><a href="sass-mixins.html">Mixins</a></li>
-
- <li class="docs-nav-title">Libraries</li>
- <li><a href="motion-ui.html">Motion UI</a></li>
- <li><a href="panini.html">Panini</a></li>
- <li><a href="style-sherpa.html">Style Sherpa</a></li>
-
- <li class="docs-nav-title">Older Versions</li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
- <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
- <li><a href="https://get.foundation/sites/docs/v/3.2.5/">Foundation 3</a></li>
- <li><a href="https://get.foundation/sites/docs/v/2.2.1/">Foundation 2</a></li>
- </ul>
-
- </div>
- </div>
-
- <!-- Small Business(Docs) -->
- <section id="studiosCallout">
- <div class="row">
- <div class="medium-4 large-4 columns">
- <img src="https://get.foundation/assets/img/smallbiz-footer.svg" alt="">
- </div>
- <div class="medium-8 large-8 columns banner-info">
- <div class="row column property-label">ZURB Foundation</div>
- <h3 class="light">Yeah, we can help with that.</h3>
- <p class="lead"> We’ll collaborate with your team throughout the entire project life cycle. We’ll take your concept and move it through ideation, hi-fi wireframes, visual design and code, all while informing you on the whys and hows along the way.</p>
- <div class="course-buttons">
- <a href="https://get.foundation/get-involved/premium-support.html" class="studios button" data-zcom-event="studios_foundation_click" id="foundationSmallV1">Show Me How →</a>
- </div>
- </div>
- </div>
- </section>
-
- <div class="docs-newsletter">
- <div class="row">
- <div class="medium-7 large-8 columns">
- <a target="_blank" href="https://get.foundation/learn/responsive-reading.html">
- <h5 class="">Download ZURB’s 21 Responsive Trends That Will Shape 2017</h5>
- <p style="margin-bottom: 0;">Stay informed with amazing responsive trends each month from ZURB.</p>
- </a>
- </div>
- <div class="medium-5 large-4 footer-signup-form columns">
- <a style="margin-bottom: 0;" target="_blank" href="https://get.foundation/learn/responsive-reading.html" class="button expanded">Download the PDF</a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-top bg-fblue">
- <div class="row property">
- <div class="medium-4 columns">
- <div class="property-info">
- <h3>Foundation for Sites</h3>
- <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
- </p>
- </div>
- </div>
-
- <div class="medium-8 columns">
- <div class="row collapse">
- <div class="medium-4 columns">
- <div class="learn-links">
- <h4 class="hide-for-small">Want more?</h4>
- <ul>
- <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
- <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
- <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
- <li><a href="http://zurb.com/university/courses">Training</a></li>
- <li><a href="http://zurb.com/library">Design Resources</a></li>
- </ul>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="support-links">
- <h4 class="hide-for-small">Talk to us</h4>
- <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
- <p><a href="https://get.foundation/get-involved/contribute.html">Get involved in<br>our amazing community.</a></p>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="connect-links">
- <h4 class="hide-for-small">Stay Updated</h4>
- <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
- <a href="http://zurb.com/news" class="small button">Stay Connected</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="row global">
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/studios" class="footer-link-block services">
- <span class="title">Studios</span>
- <span>Helping more than 200 startups succeed since 1998.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="https://get.foundation/" class="footer-link-block foundation">
- <span class="title">Foundation</span>
- <span>The most advanced front-end framework in the world.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/notable" class="footer-link-block apps">
- <span class="title">Notable Design Apps</span>
- <span>Prototype, iterate and collect feedback on your products.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/university" class="footer-link-block expo">
- <span class="title">University</span>
- <span>Ideas, thoughts and design resources shared with you.</span>
- </a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-bottom">
- <div class="row">
- <div class="medium-4 medium-push-8 columns">
- <ul class="home-social">
- <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
- <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
- <li><a href="http://zurb.com/contact" class="mail"></a></li>
- </ul>
- </div>
- <div class="medium-8 medium-pull-4 columns">
- <a href="http://www.zurb.com" class="zurb-logo regular"></a>
- <ul class="zurb-links">
- <li><a href="http://zurb.com/about">About</a></li>
- <li><a href="http://zurb.com/blog">Blog</a></li>
- <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
- <li><a href="http://zurb.com/contact">Contact</a></li>
- <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
- </ul>
- <p class="copyright">© 1998‐2016 ZURB, Inc. All rights reserved.</p>
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- <script>
- var _gaq = _gaq || [];
- _gaq.push(
- ['_setAccount', 'UA-2195009-2'],
- ['_trackPageview'],
- ['b._setAccount', 'UA-2195009-27'],
- ['b._trackPageview']
- );
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
-
- <script src="assets/js/vendor.js?hash=d3991b841328f05a00bd6ef2c47f924a"></script>
- <script src="assets/js/foundation.js?hash=d5a097561118b8409a430071243b41a8"></script>
- <script src="assets/js/docs.js?hash=1f6f4785fe034b33917bfdea34dbfed4"></script>
- <script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
-</body>
-</html>
+++ /dev/null
-<!doctype html>
-<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
-<html class="no-js" lang="en" dir="ltr">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="Pagination is a type of navigation that lets users click through pages of search results, products, or other related items.">
- <link rel="icon" href="assets/img/icons/foundation-favicon.ico" type="image/x-icon">
- <title>Foundation for Sites 6 Docs | Pagination</title>
- <link href="assets/css/docs.css?hash=3258611ff74091ebb383fca933ff167e" rel="stylesheet" />
- <link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=25a1233a265034aea5ae510f75e95e37" rel="stylesheet">
- <!-- <link rel="stylesheet" href="./node_modules/motion-ui/dist/motion-ui.css" /> -->
-</head>
-<body>
-
- <div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
-
- <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="mobile-ofc vertical menu">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
-
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/support.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/sort/unanswered">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
- </div>
-
- <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="vertical menu">
- <li><a href="#">Foundation</a></li>
- <li><a href="#">Dot</a></li>
- <li><a href="#">ZURB</a></li>
- <li><a href="#">Com</a></li>
- <li><a href="#">Slash</a></li>
- <li><a href="#">Sites</a></li>
- </ul>
- </div>
-
-
- <div class="off-canvas-content" data-off-canvas-content>
- <!-- Info Banner For Announcements or Links -->
- <!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
- <div class="info">
- <h5>Foundation 6 is here!</h5>
- </div>
- </a> -->
-
- <nav class="marketing-topbar show-for-medium">
-
- <ul class="menu">
- <li class="topbar-title"><a href="https://get.foundation/index.html"><img src="assets/img/logos/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
- </ul>
-
- <ul class="dropdown menu" data-dropdown-menu data-click-open="false">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/" target="_blank">F5 Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="https://get.foundation/emails/docs/" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
-
- </nav>
-
- <div class="title-bar hide-for-medium">
- <div class="title-bar-left">
- <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
- <span class="title-bar-title">Foundation</span>
- </div>
- </div>
-
-
- <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
-
- <div class="expanded row">
- <div class="medium-9 large-10 medium-push-3 large-push-2 columns">
-
-<article class="docs-component" id="docs-pagination">
-
-<a href="#docs-menu" class="small secondary expanded button hide-for-medium">Jump to Nav</a>
-
-<header>
- <h1 class="docs-page-title">Pagination</h1>
-
-
- <p class="lead docs-page-lead">Pagination is a type of navigation that lets users click through pages of search results, products, or other related items.</p>
-
- <ul class="menu simple docs-contribute-menu">
- <li><a href="https://github.com/zurb/foundation-sites/edit/master/docs/pages/pagination.md" target="_blank"><i class="fi-pencil"></i>Edit this Page</a></li>
- <li><a href="https://github.com/zurb/foundation-sites/issues/new?title=%5BPagination%5D%20ISSUE%20NAME%20HERE" target="_blank"><i class="fi-social-github"></i>Report a Bug</a></li>
- <li><a href="https://get.foundation/forum" target="_blank"><i class="fi-comment"></i>Get Help</a></li>
- </ul>
-</header>
-
-<hr>
-
-<div class="row">
-
-<div class="large-9 columns" id="docs">
-
-<h2 id="basics" class="docs-heading" data-magellan-target="basics">Basics<a class="docs-heading-icon" href="#basics"></a></h2><p>A pagination list is just a <code><ul></code> with the class <code>.pagination</code>, and a series of <code><li></code>/<code><a></code> pairs. Add the class <code>.current</code> to an <code><li></code> to mark the current page, or <code>.disabled</code> to add disabled styles to a link.</p>
-<p>Note that the container has the attributes <code>role="navigation"</code> and <code>aria-label="Pagination"</code>. These explain the purpose of the component to assistive technologies.</p>
-<p>Extra screen reader-only text should also be added to a pagination element. In the below example, users reading the page will just see "Next" and "Previous", but screen readers will read it as "Next page" and "Previous page". Additionally, the text for the current page will read as "You're on page one".</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"pagination"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"navigation"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Pagination"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"pagination-previous disabled"</span>></span>Previous <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"show-for-sr"</span>></span>page<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"current"</span>></span><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"show-for-sr"</span>></span>You're on page<span class="hljs-tag"></<span class="hljs-name">span</span>></span> 1<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Page 2"</span>></span>2<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Page 3"</span>></span>3<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Page 4"</span>></span>4<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ellipsis"</span> <span class="hljs-attr">aria-hidden</span>=<span class="hljs-string">"true"</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Page 12"</span>></span>12<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Page 13"</span>></span>13<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"pagination-next"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Next page"</span>></span>Next <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"show-for-sr"</span>></span>page<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">ul</span>></span></code></pre></div>
-
-<div class="docs-code-live"><ul class="pagination" role="navigation" aria-label="Pagination">
- <li class="pagination-previous disabled">Previous <span class="show-for-sr">page</span></li>
- <li class="current"><span class="show-for-sr">You're on page</span> 1</li>
- <li><a href="#" aria-label="Page 2">2</a></li>
- <li><a href="#" aria-label="Page 3">3</a></li>
- <li><a href="#" aria-label="Page 4">4</a></li>
- <li class="ellipsis" aria-hidden="true"></li>
- <li><a href="#" aria-label="Page 12">12</a></li>
- <li><a href="#" aria-label="Page 13">13</a></li>
- <li class="pagination-next"><a href="#" aria-label="Next page">Next <span class="show-for-sr">page</span></a></li>
-</ul></div><hr>
-<h2 id="centered" class="docs-heading" data-magellan-target="centered">Centered<a class="docs-heading-icon" href="#centered"></a></h2><p>The items in a pagination list are <code>display: inline-block</code>, which makes centering them easy. Use our built-in <code>.text-center</code> class, or add <code>text-align: center</code> in your CSS.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"pagination text-center"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"navigation"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Pagination"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"pagination-previous disabled"</span>></span>Previous<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"current"</span>></span><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"show-for-sr"</span>></span>You're on page<span class="hljs-tag"></<span class="hljs-name">span</span>></span> 1<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Page 2"</span>></span>2<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Page 3"</span>></span>3<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Page 4"</span>></span>4<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ellipsis"</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Page 12"</span>></span>12<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Page 13"</span>></span>13<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"pagination-next"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Next page"</span>></span>Next<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">ul</span>></span></code></pre></div>
-
-<div class="docs-code-live"><ul class="pagination text-center" role="navigation" aria-label="Pagination">
- <li class="pagination-previous disabled">Previous</li>
- <li class="current"><span class="show-for-sr">You're on page</span> 1</li>
- <li><a href="#" aria-label="Page 2">2</a></li>
- <li><a href="#" aria-label="Page 3">3</a></li>
- <li><a href="#" aria-label="Page 4">4</a></li>
- <li class="ellipsis"></li>
- <li><a href="#" aria-label="Page 12">12</a></li>
- <li><a href="#" aria-label="Page 13">13</a></li>
- <li class="pagination-next"><a href="#" aria-label="Next page">Next</a></li>
-</ul></div>
-
-<hr>
-<section>
- <h2 id="sass-reference" class="docs-heading" data-magellan-target="sass-reference">Sass Reference<a class="docs-heading-icon" href="#sass-reference"></a></h2>
-
- <section>
- <h3 id="sass-variables" class="docs-heading">Variables<a class="docs-heading-icon" href="#sass-variables"></a></h3>
-
- <p>The default styles of this component can be customized using these Sass variables in your project's <a href="sass.html#the-settings-file">settings file</a>.</p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td class="name"><code>$pagination-font-size</code></td>
- <td>Number</td>
- <td class="number"><code>rem-calc(14)</code></td>
- <td><p>Font size of pagination items.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$pagination-margin-bottom</code></td>
- <td>Number</td>
- <td class="number"><code>$global-margin</code></td>
- <td><p>Default bottom margin of the pagination object.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$pagination-item-color</code></td>
- <td>Color</td>
- <td class="color"><code>$black</code></td>
- <td><p>Text color of pagination items.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$pagination-item-padding</code></td>
- <td>Number</td>
- <td class="number"><code>rem-calc(3 10)</code></td>
- <td><p>Padding inside of pagination items.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$pagination-item-spacing</code></td>
- <td>Number</td>
- <td class="number"><code>rem-calc(1)</code></td>
- <td><p>Right margin to separate pagination items.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$pagination-radius</code></td>
- <td>Number</td>
- <td class="number"><code>$global-radius</code></td>
- <td><p>Default radius for pagination items.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$pagination-item-background-hover</code></td>
- <td>Color</td>
- <td class="color"><code>$light-gray</code></td>
- <td><p>Background color of pagination items on hover.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$pagination-item-background-current</code></td>
- <td>Color</td>
- <td class="color"><code>$primary-color</code></td>
- <td><p>Background color of pagination item for the current page.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$pagination-item-color-current</code></td>
- <td>Color</td>
- <td class="color"><code>foreground($pagination-item-background-current)</code></td>
- <td><p>Text color of the pagination item for the current page.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$pagination-item-color-disabled</code></td>
- <td>Color</td>
- <td class="color"><code>$medium-gray</code></td>
- <td><p>Text color of a disabled pagination item.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$pagination-ellipsis-color</code></td>
- <td>Color</td>
- <td class="color"><code>$black</code></td>
- <td><p>Color of the ellipsis in a pagination menu.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$pagination-mobile-items</code></td>
- <td>Boolean</td>
- <td class="boolean"><code>false</code></td>
- <td><p>If <code>false</code>, don't display page number links on mobile, only next/previous links.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$pagination-arrows</code></td>
- <td>Boolean</td>
- <td class="boolean"><code>true</code></td>
- <td><p>If <code>true</code>, arrows are added to the next and previous links of pagination.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="sass-mixins" class="docs-heading">Mixins<a class="docs-heading-icon" href="#sass-mixins"></a></h3>
-
- <p>We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.</p>
-
-
- <section >
- <h4 id="pagination-container" class="docs-heading">pagination-container<a class="docs-heading-icon" href="#pagination-container"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> pagination-container;</code></pre>
- </div>
-
- <p>Adds styles for a pagination container. Apply this to a <code><ul></code>.</p>
-
-
-
-
-
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="pagination-item-current" class="docs-heading">pagination-item-current<a class="docs-heading-icon" href="#pagination-item-current"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> pagination-item-current;</code></pre>
- </div>
-
- <p>Adds styles for the current pagination item. Apply this to an <code><a></code>.</p>
-
-
-
-
-
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="pagination-item-disabled" class="docs-heading">pagination-item-disabled<a class="docs-heading-icon" href="#pagination-item-disabled"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> pagination-item-disabled;</code></pre>
- </div>
-
- <p>Adds styles for a disabled pagination item. Apply this to an <code><a></code>.</p>
-
-
-
-
-
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="pagination-ellipsis" class="docs-heading">pagination-ellipsis<a class="docs-heading-icon" href="#pagination-ellipsis"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> pagination-ellipsis;</code></pre>
- </div>
-
- <p>Adds styles for an ellipsis for use in a pagination list.</p>
-
-
-
-
-
- </section>
-
-
-
-
-
- </section>
-
-
-</section>
-
-
-<!-- <hr> -->
-<!-- <section class="docs-building-blocks">
- <h2 id="building-blocks" class="docs-heading" data-magellan-target="building-blocks">Building Blocks<a class="docs-heading-icon" href="#building-blocks"></a></h2>
-
- <p><a href="http://zurb.com/building-blocks">Building Blocks</a> is a ZURB-curated resource with useful code snippets that use Foundation components. Here are a few for this component:</p>
-
- <div class="warning callout">
- <p>These are placeholder items. If you have ideas for building blocks for this component, <a href="https://github.com/zurb/foundation-sites-6/issues/118">we're taking ideas on GitHub</a>.</p>
- </div>
-
- <div data-building-blocks></div>
-</section> -->
-
-</div>
-
-<div class="large-3 columns" data-sticky-container>
- <nav class="columns docs-toc-wrap" data-sticky data-anchor="docs" data-sticky-on="large">
- <div class="docs-toc hide" id="docsTOC">
- <ul class="vertical menu" data-docs-toc>
- <li class="docs-nav-title">On this page:</li>
- </ul>
- </div>
- <div class="foundation-toc-ad-unit" id="TOCAdUnit">
- </div>
- </nav>
-</div>
-
-</div>
-
-</article>
-
- </div>
- <div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
- <ul class="vertical menu docs-nav" id="docs-menu">
- <p class="docs-nav-version">
- <span data-docs-version></span>
- <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">(Changelog)</a>
- </p>
-
- <li class="docs-nav-title">Getting Started</li>
- <li><a href="installation.html">Installation</a></li>
- <li><a href="starter-projects.html">Starter Projects</a></li>
- <li><a href="compatibility.html">Compatibility</a></li>
- <li><a href="accessibility.html">Accessibility</a></li>
- <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
-
- <li class="docs-nav-title">Setup</li>
- <li><a href="global.html">Global Styles</a></li>
- <li><a href="rtl.html">Right-to-Left Support</a></li>
- <li><a href="flexbox.html">Flexbox</a></li>
- <li><a href="sass.html">Sass</a></li>
- <li><a href="javascript.html">JavaScript</a></li>
- <li><a href="javascript-utilities.html">JavaScript Utilities</a></li>
- <li><a href="media-queries.html">Media Queries</a></li>
-
- <li class="docs-nav-title">General</li>
- <li><a href="grid.html">Grid</a></li>
- <li><a href="flex-grid.html">Flex Grid</a></li>
- <li><a href="forms.html">Forms</a></li>
- <li><a href="visibility.html">Visibility Classes</a></li>
- <li><a href="float-classes.html">Float Classes</a></li>
-
- <li class="docs-nav-title">Typography</li>
- <li><a href="typography-base.html">Base Styles</a></li>
- <li><a href="typography-helpers.html">Helper Classes</a></li>
-
- <li class="docs-nav-title">Controls</li>
- <li><a href="button.html">Button</a></li>
- <li><a href="button-group.html">Button Group</a></li>
- <li><a href="close-button.html">Close Button</a></li>
- <li><a href="slider.html">Slider <span class="label">JS</span></a></li>
- <li><a href="switch.html">Switch</a></li>
-
- <li class="docs-nav-title">Navigation</li>
- <li><a href="navigation.html">Overview</a></li>
- <li><a href="menu.html">Menu</a></li>
- <li><a href="dropdown-menu.html">Dropdown Menu <span class="label">JS</span></a></li>
- <li><a href="drilldown-menu.html">Drilldown Menu <span class="label">JS</span></a></li>
- <li><a href="accordion-menu.html">Accordion Menu <span class="label">JS</span></a></li>
- <li><a href="top-bar.html">Top Bar</a></li>
- <li><a href="responsive-navigation.html">Responsive Navigation</a></li>
- <li><a href="magellan.html">Magellan <span class="label">JS</span></a></li>
- <li class="current"><a href="pagination.html">Pagination</a></li>
- <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
-
- <li class="docs-nav-title">Containers</li>
- <li><a href="accordion.html">Accordion <span class="label">JS</span></a></li>
- <li><a href="callout.html">Callout</a></li>
- <li><a href="dropdown.html">Dropdown <span class="label">JS</span></a></li>
- <li><a href="media-object.html">Media Object</a></li>
- <li><a href="off-canvas.html">Off-canvas <span class="label">JS</span></a></li>
- <li><a href="reveal.html">Reveal <span class="label">JS</span> <small>Modal</small></a></li>
- <li><a href="table.html">Table</a></li>
- <li><a href="tabs.html">Tabs <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Media</li>
- <li><a href="badge.html">Badge</a></li>
- <li><a href="flex-video.html">Flex Video</a></li>
- <li><a href="label.html">Label</a></li>
- <li><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
- <li><a href="progress-bar.html">Progress Bar</a></li>
- <li><a href="thumbnail.html">Thumbnail</a></li>
- <li><a href="tooltip.html">Tooltip <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Plugins</li>
- <li><a href="abide.html">Abide <small>Form Validation</small></a></li>
- <li><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
- <li><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
- <li><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
- <li><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
-
- <li class="docs-nav-title">Sass</li>
- <li><a href="sass-functions.html">Functions</a></li>
- <li><a href="sass-mixins.html">Mixins</a></li>
-
- <li class="docs-nav-title">Libraries</li>
- <li><a href="motion-ui.html">Motion UI</a></li>
- <li><a href="panini.html">Panini</a></li>
- <li><a href="style-sherpa.html">Style Sherpa</a></li>
-
- <li class="docs-nav-title">Older Versions</li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
- <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
- <li><a href="https://get.foundation/sites/docs/v/3.2.5/">Foundation 3</a></li>
- <li><a href="https://get.foundation/sites/docs/v/2.2.1/">Foundation 2</a></li>
- </ul>
-
- </div>
- </div>
-
- <!-- Small Business(Docs) -->
- <section id="studiosCallout">
- <div class="row">
- <div class="medium-4 large-4 columns">
- <img src="https://get.foundation/assets/img/smallbiz-footer.svg" alt="">
- </div>
- <div class="medium-8 large-8 columns banner-info">
- <div class="row column property-label">ZURB Foundation</div>
- <h3 class="light">Yeah, we can help with that.</h3>
- <p class="lead"> We’ll collaborate with your team throughout the entire project life cycle. We’ll take your concept and move it through ideation, hi-fi wireframes, visual design and code, all while informing you on the whys and hows along the way.</p>
- <div class="course-buttons">
- <a href="https://get.foundation/get-involved/premium-support.html" class="studios button" data-zcom-event="studios_foundation_click" id="foundationSmallV1">Show Me How →</a>
- </div>
- </div>
- </div>
- </section>
-
- <div class="docs-newsletter">
- <div class="row">
- <div class="medium-7 large-8 columns">
- <a target="_blank" href="https://get.foundation/learn/responsive-reading.html">
- <h5 class="">Download ZURB’s 21 Responsive Trends That Will Shape 2017</h5>
- <p style="margin-bottom: 0;">Stay informed with amazing responsive trends each month from ZURB.</p>
- </a>
- </div>
- <div class="medium-5 large-4 footer-signup-form columns">
- <a style="margin-bottom: 0;" target="_blank" href="https://get.foundation/learn/responsive-reading.html" class="button expanded">Download the PDF</a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-top bg-fblue">
- <div class="row property">
- <div class="medium-4 columns">
- <div class="property-info">
- <h3>Foundation for Sites</h3>
- <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
- </p>
- </div>
- </div>
-
- <div class="medium-8 columns">
- <div class="row collapse">
- <div class="medium-4 columns">
- <div class="learn-links">
- <h4 class="hide-for-small">Want more?</h4>
- <ul>
- <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
- <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
- <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
- <li><a href="http://zurb.com/university/courses">Training</a></li>
- <li><a href="http://zurb.com/library">Design Resources</a></li>
- </ul>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="support-links">
- <h4 class="hide-for-small">Talk to us</h4>
- <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
- <p><a href="https://get.foundation/get-involved/contribute.html">Get involved in<br>our amazing community.</a></p>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="connect-links">
- <h4 class="hide-for-small">Stay Updated</h4>
- <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
- <a href="http://zurb.com/news" class="small button">Stay Connected</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="row global">
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/studios" class="footer-link-block services">
- <span class="title">Studios</span>
- <span>Helping more than 200 startups succeed since 1998.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="https://get.foundation/" class="footer-link-block foundation">
- <span class="title">Foundation</span>
- <span>The most advanced front-end framework in the world.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/notable" class="footer-link-block apps">
- <span class="title">Notable Design Apps</span>
- <span>Prototype, iterate and collect feedback on your products.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/university" class="footer-link-block expo">
- <span class="title">University</span>
- <span>Ideas, thoughts and design resources shared with you.</span>
- </a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-bottom">
- <div class="row">
- <div class="medium-4 medium-push-8 columns">
- <ul class="home-social">
- <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
- <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
- <li><a href="http://zurb.com/contact" class="mail"></a></li>
- </ul>
- </div>
- <div class="medium-8 medium-pull-4 columns">
- <a href="http://www.zurb.com" class="zurb-logo regular"></a>
- <ul class="zurb-links">
- <li><a href="http://zurb.com/about">About</a></li>
- <li><a href="http://zurb.com/blog">Blog</a></li>
- <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
- <li><a href="http://zurb.com/contact">Contact</a></li>
- <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
- </ul>
- <p class="copyright">© 1998‐2016 ZURB, Inc. All rights reserved.</p>
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- <script>
- var _gaq = _gaq || [];
- _gaq.push(
- ['_setAccount', 'UA-2195009-2'],
- ['_trackPageview'],
- ['b._setAccount', 'UA-2195009-27'],
- ['b._trackPageview']
- );
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
-
- <script src="assets/js/vendor.js?hash=20f5f07bc3c8a26744e7c6870d15d43b"></script>
- <script src="assets/js/foundation.js?hash=50272c2b74f9c43e27f7752e3b99c73e"></script>
- <script src="assets/js/docs.js?hash=493d58bd09fab8d99d4ad74311deba7e"></script>
- <script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
-</body>
-</html>
+++ /dev/null
-<!doctype html>
-<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
-<html class="no-js" lang="en" dir="ltr">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="A flat file compiler that powers our prototyping template. Create pages with consistent layouts and reusable partials with ease.">
- <link rel="icon" href="assets/img/icons/foundation-favicon.ico" type="image/x-icon">
- <title>Foundation for Sites 6 Docs | Panini</title>
- <link href="assets/css/docs.css?hash=85aaa48067f9cbff05acf70c4e33ae91" rel="stylesheet" />
- <link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=41ddf24a54d921fb06055f19204c683d" rel="stylesheet">
- <!-- <link rel="stylesheet" href="./node_modules/motion-ui/dist/motion-ui.css" /> -->
-</head>
-<body>
-
- <div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
-
- <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="mobile-ofc vertical menu">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
-
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/support.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/sort/unanswered">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
- </div>
-
- <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="vertical menu">
- <li><a href="#">Foundation</a></li>
- <li><a href="#">Dot</a></li>
- <li><a href="#">ZURB</a></li>
- <li><a href="#">Com</a></li>
- <li><a href="#">Slash</a></li>
- <li><a href="#">Sites</a></li>
- </ul>
- </div>
-
-
- <div class="off-canvas-content" data-off-canvas-content>
- <!-- Info Banner For Announcements or Links -->
- <!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
- <div class="info">
- <h5>Foundation 6 is here!</h5>
- </div>
- </a> -->
-
- <nav class="marketing-topbar show-for-medium">
-
- <ul class="menu">
- <li class="topbar-title"><a href="https://get.foundation/index.html"><img src="assets/img/logos/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
- </ul>
-
- <ul class="dropdown menu" data-dropdown-menu data-click-open="false">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/" target="_blank">F5 Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="https://get.foundation/emails/docs/" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
-
- </nav>
-
- <div class="title-bar hide-for-medium">
- <div class="title-bar-left">
- <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
- <span class="title-bar-title">Foundation</span>
- </div>
- </div>
-
-
- <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
-
- <div class="expanded row">
- <div class="medium-9 large-10 medium-push-3 large-push-2 columns">
-
-<article class="docs-component" id="docs-panini">
-
-<a href="#docs-menu" class="small secondary expanded button hide-for-medium">Jump to Nav</a>
-
-<header>
- <h1 class="docs-page-title">Panini</h1>
-
- <span data-tooltip title="This is an external library." class="docs-lib label"><a href="https://github.com/zurb/panini" target="_blank">Library</a></span>
-
- <p class="lead docs-page-lead">A flat file compiler that powers our prototyping template. Create pages with consistent layouts and reusable partials with ease.</p>
-
- <ul class="menu simple docs-contribute-menu">
- <li><a href="https://github.com/zurb/foundation-sites/edit/master/docs/pages/panini.md" target="_blank"><i class="fi-pencil"></i>Edit this Page</a></li>
- <li><a href="https://github.com/zurb/panini/issues" target="_blank"><i class="fi-social-github"></i>Report a Bug</a></li>
- <li><a href="https://get.foundation/forum" target="_blank"><i class="fi-comment"></i>Get Help</a></li>
- </ul>
-</header>
-
-<hr>
-
-<div class="row">
-
-<div class="large-9 columns" id="docs">
-
-<p></p>
-<p>If you've ever created a static site, maybe you had five pages that all shared the same header and footer. You create your first page, and then copy and paste the common elements to the next page. But now if you need to make a change to the header, the change has to be made across multiple files.</p>
-<p>Panini is a flat file compiler that uses the concepts of templates, pages, and partials—powered by the <a href="http://handlebarsjs.com/">Handlebars</a> templating language—to streamline the process of creating static prototypes.</p>
-<p>Our <a href="starter-projects.html">prototyping template</a> uses Panini, along with a host of other tools for processing Sass, JavaScript, and images, to make creating static prototypes easy. It's already been configured to utilize all of the features below, but if you want to learn the specifics of how to configure the library, head over to the <a href="https://github.com/zurb/panini">Panini GitHub page</a>.</p>
-<hr>
-<h2 id="basics-templates-pages" class="docs-heading" data-magellan-target="basics-templates-pages">Basics: Templates & Pages<a class="docs-heading-icon" href="#basics-templates-pages"></a></h2><p>A <strong>template</strong> is a common layout that every page in your design shares. It's possible to have multiple templates, but generally you'll only need one, and a page can only use one template. In the prototyping template, the default layout is found under <code>src/layouts/default.html</code>.</p>
-<p>Here's what a basic template might look like:</p>
-<div class="docs-code" data-docs-code><pre><code class="handlebars"><span class="xml"><span class="hljs-tag"><<span class="hljs-name">html</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">head</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">title</span>></span>Definitely a Website!<span class="hljs-tag"></<span class="hljs-name">title</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">head</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">body</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">header</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"header"</span>></span><span class="hljs-comment"><!-- ... --></span><span class="hljs-tag"></<span class="hljs-name">header</span>></span>
- </span><span class="hljs-template-variable">{{> body}}</span><span class="xml">
- <span class="hljs-tag"><<span class="hljs-name">footer</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"footer"</span>></span><span class="hljs-comment"><!-- ... --></span><span class="hljs-tag"></<span class="hljs-name">footer</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">body</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">html</span>></span></span></code></pre></div><p>In the middle of the HTML is a bit of Handlebars code: <code>{{> body}}</code>. This is where the pages you write are injected when Panini runs, giving you a series of complete HTML files at the end.</p>
-<p>The <strong>pages</strong> make up the guts of your layouts. These files will just have the middle section of the design, since the layout already covers the top and bottom. The prototyping template includes one blank page to get you started, under <code>src/pages/index.html</code>.</p>
-<p>A basic page might look like this:</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">h1</span>></span>Page Title<span class="hljs-tag"></<span class="hljs-name">h1</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">p</span>></span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium ducimus eligendi, reiciendis corporis quam facere quaerat qui, aspernatur molestiae velit, vero ea quisquam laborum corrupti repudiandae totam, at aliquam esse.<span class="hljs-tag"></<span class="hljs-name">p</span>></span></code></pre></div><p>Note that there's no <code><html></code> or <code><body></code> tags, and no header or footer. This code will be injected into the <code>{{> body}}</code> declaration when Panini assembles your pages.</p>
-<p>In the prototyping template, these finished files are compiled into a standalone folder called <code>dist</code> (short for "distribution"), which also includes your processed CSS, JavaScript, and images. This folder can easily be uploaded to any web server, or Notable's <a href="http://zurb.com/notable/features/hosted">Hosted Prototypes</a> service.</p>
-<hr>
-<h2 id="partials" class="docs-heading" data-magellan-target="partials">Partials<a class="docs-heading-icon" href="#partials"></a></h2><p>Partials are a feature of Handlebars which allow you to inject HTML anywhere in a page or layout. They're really useful when you need to repeat certain chunks of code throughout your pages, or to keep individual files from getting too cluttered with HTML.</p>
-<p>Here's an example of a layout file that divides its key sections into partials:</p>
-<div class="docs-code" data-docs-code><pre><code class="handlebars"><span class="xml"><span class="hljs-tag"><<span class="hljs-name">html</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">head</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">title</span>></span>Definitely STILL a Website!<span class="hljs-tag"></<span class="hljs-name">title</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">head</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">body</span>></span>
- </span><span class="hljs-template-variable">{{> header}}</span><span class="xml">
- </span><span class="hljs-template-variable">{{> navigation}}</span><span class="xml">
- </span><span class="hljs-template-variable">{{> body}}</span><span class="xml">
- </span><span class="hljs-template-variable">{{> footer}}</span><span class="xml">
- <span class="hljs-tag"></<span class="hljs-name">body</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">html</span>></span></span></code></pre></div><p>The <code>{{> }}</code> syntax tells Handlebars to look for an HTML file with that name, and inject it at that place. In this example, we have files called <code>header.html</code>, <code>navigation.html</code>, and <code>footer.html</code>. In the prototyping template, these files all exist within <code>src/partials</code>.</p>
-<hr>
-<h2 id="page-variables" class="docs-heading" data-magellan-target="page-variables">Page Variables<a class="docs-heading-icon" href="#page-variables"></a></h2><p>Pages have a few built-in variables, which can be used within the page template itself, or within a layout or partial being used in tandem with the page.</p>
-<h3 id="page" class="docs-heading">page<a class="docs-heading-icon" href="#page"></a></h3><p>Prints the name of the current page, without its original file extension. In the below example, if the page is <code>index.html</code>, <code>{{page}}</code> will become <code>index</code>.</p>
-<div class="docs-code" data-docs-code><pre><code class="handlebars"><span class="xml"><span class="hljs-tag"><<span class="hljs-name">p</span>></span>You are here: </span><span class="hljs-template-variable">{{page}}</span><span class="xml"><span class="hljs-tag"></<span class="hljs-name">p</span>></span></span></code></pre></div><h3 id="root" class="docs-heading">root<a class="docs-heading-icon" href="#root"></a></h3><p>Use <code>{{root}}</code> before a file path to make sure it works no matter what folder the current page is in.</p>
-<p>For example, a path to an external CSS file will need to be different if the current page is at the root level of your site, or in a sub-folder.</p>
-<p>Here's how you'd use it with a <code><link></code> tag:</p>
-<div class="docs-code" data-docs-code><pre><code class="handlebars"><span class="xml"><span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{root}}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">assets/css/app.css"</span>></span></span></code></pre></div><p>If the page is <code>index.html</code>, the path will look like this:</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"assets/css/app.css"</span>></span></code></pre></div><p>If the page is <code>folder/page.html</code>, the path will look like this:</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../assets/css/app.css"</span>></span></code></pre></div><p>The <code>../</code> is added only on pages in a sub-folder, so the CSS can still be properly loaded.</p>
-<hr>
-<h2 id="helpers" class="docs-heading" data-magellan-target="helpers">Helpers<a class="docs-heading-icon" href="#helpers"></a></h2><p>Helpers are special functions that manipulate content on the page. In addition to <a href="http://handlebarsjs.com/builtin_helpers.html">Handlebars's built-in helpers</a>, Panini includes a few custom helpers and you can add your own.</p>
-<h3 id="ifequal" class="docs-heading">ifequal<a class="docs-heading-icon" href="#ifequal"></a></h3><p>Displays the HTML inside the helper if the two values are equal. </p>
-<div class="docs-code" data-docs-code><pre><code class="handlebars"><span class="xml"></span><span class="hljs-template-tag">{{#<span class="hljs-name">ifequal</span> foo bar}}</span><span class="xml">
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span>foo and bar are equal<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
-</span><span class="hljs-template-tag">{{/<span class="hljs-name">ifequal</span>}}</span><span class="xml"></span></code></pre></div><h3 id="ifpage" class="docs-heading">ifpage<a class="docs-heading-icon" href="#ifpage"></a></h3><p>Displays the HTML inside the helper only on specific pages. In the below example, the HTML inside the helper will only show up on the <code>index.html</code> page.</p>
-<div class="docs-code" data-docs-code><pre><code class="handlebars"><span class="xml"></span><span class="hljs-template-tag">{{#<span class="hljs-name">ifpage</span> 'index'}}</span><span class="xml">
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span>This is definitely the Index page.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
-</span><span class="hljs-template-tag">{{/<span class="hljs-name">ifpage</span>}}</span><span class="xml"></span></code></pre></div><p>You can also check for multiple pages. If <em>any</em> name in the list matches the current page, the HTML will appear.</p>
-<div class="docs-code" data-docs-code><pre><code class="handlebars"><span class="xml"></span><span class="hljs-template-tag">{{#<span class="hljs-name">ifpage</span> 'index' 'about'}}</span><span class="xml">
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span>This is definitely either the Index or About page.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
-</span><span class="hljs-template-tag">{{/<span class="hljs-name">ifpage</span>}}</span><span class="xml"></span></code></pre></div><h3 id="unlesspage" class="docs-heading">unlesspage<a class="docs-heading-icon" href="#unlesspage"></a></h3><p>The opposite of <code>#ifpage</code>, <code>#unlesspage</code> will only display the HTML inside of it if the current page is <em>not</em> in the parameters.</p>
-<div class="docs-code" data-docs-code><pre><code class="handlebars"><span class="xml"></span><span class="hljs-template-tag">{{#<span class="hljs-name">unlesspage</span> 'index'}}</span><span class="xml">
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span>This is definitely <span class="hljs-tag"><<span class="hljs-name">em</span>></span>not<span class="hljs-tag"></<span class="hljs-name">em</span>></span> the Index page.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
-</span><span class="hljs-template-tag">{{/<span class="hljs-name">unlesspage</span>}}</span><span class="xml"></span></code></pre></div><h3 id="repeat" class="docs-heading">repeat<a class="docs-heading-icon" href="#repeat"></a></h3><p>Repeats the content inside of it <code>n</code> number of times. Use this to easily print lots of duplicate HTML in a prototype.</p>
-<div class="docs-code" data-docs-code><pre><code class="handlebars"><span class="xml"><span class="hljs-tag"><<span class="hljs-name">ul</span>></span>
- </span><span class="hljs-template-tag">{{#<span class="hljs-name">repeat</span> 5}}</span><span class="xml">
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Five hundred ninety-nine US dollars<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- </span><span class="hljs-template-tag">{{/<span class="hljs-name">repeat</span>}}</span><span class="xml">
-<span class="hljs-tag"></<span class="hljs-name">ul</span>></span></span></code></pre></div><h3 id="markdown" class="docs-heading">markdown<a class="docs-heading-icon" href="#markdown"></a></h3><p>Converts Markdown into HTML.</p>
-<div class="docs-code" data-docs-code><pre><code class="handlebars"><span class="xml"></span><span class="hljs-template-tag">{{#<span class="hljs-name">markdown</span>}}</span><span class="xml">
-# Heading 1
-Lorem ipsum [dolor sit amet](http://html5zombo.com), consectetur adipisicing elit. Nam dolor, perferendis. Mollitia aut dolorum, est amet libero eos ad facere pariatur, ullam dolorem similique fugit, debitis impedit, eligendi officiis dolores.
-</span><span class="hljs-template-tag">{{/<span class="hljs-name">markdown</span>}}</span><span class="xml"></span></code></pre></div><h3 id="custom-helpers" class="docs-heading">Custom Helpers<a class="docs-heading-icon" href="#custom-helpers"></a></h3><p>If you don't see the right helper, you can write your own. Add a javascript file to 'src/helpers', add <code>helpers: 'src/helpers'</code> to the Panini process in your gulpfile.babel.js, restart npm, then call it in your templates.</p>
-<div class="docs-code" data-docs-code><pre><code class="html">// Example file src/helpers/bold.js
-module.exports = function(options) {
- // options.fn(this) = Handelbars content between {{#bold}} HERE {{/bold}}
- var bolder = '<span class="hljs-tag"><<span class="hljs-name">strong</span>></span>' + options.fn(this) + '<span class="hljs-tag"></<span class="hljs-name">strong</span>></span>';
- return bolder;
-}</code></pre></div><div class="docs-code" data-docs-code><pre><code class="html">// Example gulpfile.babel.js
-function pages() {
- return gulp.src('src/pages/**/*.html')
- .pipe(panini({
- root: 'src/pages',
- layouts: 'src/layouts',
- partials: 'src/partials',
- helpers: 'src/helpers'
- }))
- .pipe(inky())
- .pipe(gulp.dest('dist'));
-}</code></pre></div><p>Then in your projects call your custom <code>{{#bold}}</code> helper</p>
-<div class="docs-code" data-docs-code><pre><code class="html">{{#bold}}ideas{{/bold}}</code></pre></div><hr>
-<h2 id="custom-data" class="docs-heading" data-magellan-target="custom-data">Custom Data<a class="docs-heading-icon" href="#custom-data"></a></h2><p>Custom data can be added to your pages. This data can then be inserted into your HTML through Handlebars. There are two ways to add data to a project.</p>
-<p>To add variables to a specific page only, add it at the top of the page's HTML as a <a href="http://jekyllrb.com/docs/frontmatter/">Front Matter</a> block. Let's say the below content is inside <code>src/pages/index.html</code>.</p>
-<div class="docs-code" data-docs-code><pre><code class="html">---
-title: Page Title
-description: Lorem ipsum.
----
-
-<span class="hljs-comment"><!-- The rest of your HTML is down here. --></span></code></pre></div><p>Now, you can insert the values of these variables into the <code>index.html</code> page, <em>or</em> the <code>default.html</code> layout. To insert a variable, wrap the name of the variable in double curly braces, like so:</p>
-<div class="docs-code" data-docs-code><pre><code class="handlebars"><span class="xml"><span class="hljs-tag"><<span class="hljs-name">h1</span>></span></span><span class="hljs-template-variable">{{ title }}</span><span class="xml"><span class="hljs-tag"></<span class="hljs-name">h1</span>></span></span></code></pre></div><p>Variables can also be added globally by creating an external JSON or YML file, and adding it to the <code>src/data</code> folder in your project. Let's create a file called <code>breakfast.yml</code>:</p>
-<div class="docs-code" data-docs-code><pre><code class="html">- eggs
-- bacon
-- toast</code></pre></div><p>Panini will load in the contents of this YML file as a variable called <code>{{ breakfast }}</code>. Because it's an array, we can loop through it using Handlebars's <code>{{#each}}</code> helper:</p>
-<div class="docs-code" data-docs-code><pre><code class="handlebars"><span class="xml"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"breakfast-items"</span>></span>
- </span><span class="hljs-template-tag">{{#<span class="hljs-name"><span class="hljs-builtin-name">each</span></span> breakfast}}</span><span class="xml">
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span></span><span class="hljs-template-variable">{{ this }}</span><span class="xml"><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- </span><span class="hljs-template-tag">{{/<span class="hljs-name"><span class="hljs-builtin-name">each</span></span>}}</span><span class="xml">
-<span class="hljs-tag"></<span class="hljs-name">ul</span>></span></span></code></pre></div><p>This code will print three <code><li></code>s, one for each item in the file.</p>
-<p></p>
-
-
-
-
-
-</div>
-
-<div class="large-3 columns" data-sticky-container>
- <nav class="columns docs-toc-wrap" data-sticky data-anchor="docs" data-sticky-on="large">
- <div class="docs-toc hide" id="docsTOC">
- <ul class="vertical menu" data-docs-toc>
- <li class="docs-nav-title">On this page:</li>
- </ul>
- </div>
- <div class="foundation-toc-ad-unit" id="TOCAdUnit">
- </div>
- </nav>
-</div>
-
-</div>
-
-</article>
-
- </div>
- <div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
- <ul class="vertical menu docs-nav" id="docs-menu">
- <p class="docs-nav-version">
- <span data-docs-version></span>
- <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">(Changelog)</a>
- </p>
-
- <li class="docs-nav-title">Getting Started</li>
- <li><a href="installation.html">Installation</a></li>
- <li><a href="starter-projects.html">Starter Projects</a></li>
- <li><a href="compatibility.html">Compatibility</a></li>
- <li><a href="accessibility.html">Accessibility</a></li>
- <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
-
- <li class="docs-nav-title">Setup</li>
- <li><a href="global.html">Global Styles</a></li>
- <li><a href="rtl.html">Right-to-Left Support</a></li>
- <li><a href="flexbox.html">Flexbox</a></li>
- <li><a href="sass.html">Sass</a></li>
- <li><a href="javascript.html">JavaScript</a></li>
- <li><a href="javascript-utilities.html">JavaScript Utilities</a></li>
- <li><a href="media-queries.html">Media Queries</a></li>
-
- <li class="docs-nav-title">General</li>
- <li><a href="grid.html">Grid</a></li>
- <li><a href="flex-grid.html">Flex Grid</a></li>
- <li><a href="forms.html">Forms</a></li>
- <li><a href="visibility.html">Visibility Classes</a></li>
- <li><a href="float-classes.html">Float Classes</a></li>
-
- <li class="docs-nav-title">Typography</li>
- <li><a href="typography-base.html">Base Styles</a></li>
- <li><a href="typography-helpers.html">Helper Classes</a></li>
-
- <li class="docs-nav-title">Controls</li>
- <li><a href="button.html">Button</a></li>
- <li><a href="button-group.html">Button Group</a></li>
- <li><a href="close-button.html">Close Button</a></li>
- <li><a href="slider.html">Slider <span class="label">JS</span></a></li>
- <li><a href="switch.html">Switch</a></li>
-
- <li class="docs-nav-title">Navigation</li>
- <li><a href="navigation.html">Overview</a></li>
- <li><a href="menu.html">Menu</a></li>
- <li><a href="dropdown-menu.html">Dropdown Menu <span class="label">JS</span></a></li>
- <li><a href="drilldown-menu.html">Drilldown Menu <span class="label">JS</span></a></li>
- <li><a href="accordion-menu.html">Accordion Menu <span class="label">JS</span></a></li>
- <li><a href="top-bar.html">Top Bar</a></li>
- <li><a href="responsive-navigation.html">Responsive Navigation</a></li>
- <li><a href="magellan.html">Magellan <span class="label">JS</span></a></li>
- <li><a href="pagination.html">Pagination</a></li>
- <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
-
- <li class="docs-nav-title">Containers</li>
- <li><a href="accordion.html">Accordion <span class="label">JS</span></a></li>
- <li><a href="callout.html">Callout</a></li>
- <li><a href="dropdown.html">Dropdown <span class="label">JS</span></a></li>
- <li><a href="media-object.html">Media Object</a></li>
- <li><a href="off-canvas.html">Off-canvas <span class="label">JS</span></a></li>
- <li><a href="reveal.html">Reveal <span class="label">JS</span> <small>Modal</small></a></li>
- <li><a href="table.html">Table</a></li>
- <li><a href="tabs.html">Tabs <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Media</li>
- <li><a href="badge.html">Badge</a></li>
- <li><a href="flex-video.html">Flex Video</a></li>
- <li><a href="label.html">Label</a></li>
- <li><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
- <li><a href="progress-bar.html">Progress Bar</a></li>
- <li><a href="thumbnail.html">Thumbnail</a></li>
- <li><a href="tooltip.html">Tooltip <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Plugins</li>
- <li><a href="abide.html">Abide <small>Form Validation</small></a></li>
- <li><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
- <li><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
- <li><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
- <li><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
-
- <li class="docs-nav-title">Sass</li>
- <li><a href="sass-functions.html">Functions</a></li>
- <li><a href="sass-mixins.html">Mixins</a></li>
-
- <li class="docs-nav-title">Libraries</li>
- <li><a href="motion-ui.html">Motion UI</a></li>
- <li class="current"><a href="panini.html">Panini</a></li>
- <li><a href="style-sherpa.html">Style Sherpa</a></li>
-
- <li class="docs-nav-title">Older Versions</li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
- <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
- <li><a href="https://get.foundation/sites/docs/v/3.2.5/">Foundation 3</a></li>
- <li><a href="https://get.foundation/sites/docs/v/2.2.1/">Foundation 2</a></li>
- </ul>
-
- </div>
- </div>
-
- <!-- Small Business(Docs) -->
- <section id="studiosCallout">
- <div class="row">
- <div class="medium-4 large-4 columns">
- <img src="https://get.foundation/assets/img/smallbiz-footer.svg" alt="">
- </div>
- <div class="medium-8 large-8 columns banner-info">
- <div class="row column property-label">ZURB Foundation</div>
- <h3 class="light">Yeah, we can help with that.</h3>
- <p class="lead"> We’ll collaborate with your team throughout the entire project life cycle. We’ll take your concept and move it through ideation, hi-fi wireframes, visual design and code, all while informing you on the whys and hows along the way.</p>
- <div class="course-buttons">
- <a href="https://get.foundation/get-involved/premium-support.html" class="studios button" data-zcom-event="studios_foundation_click" id="foundationSmallV1">Show Me How →</a>
- </div>
- </div>
- </div>
- </section>
-
- <div class="docs-newsletter">
- <div class="row">
- <div class="medium-7 large-8 columns">
- <a target="_blank" href="https://get.foundation/learn/responsive-reading.html">
- <h5 class="">Download ZURB’s 21 Responsive Trends That Will Shape 2017</h5>
- <p style="margin-bottom: 0;">Stay informed with amazing responsive trends each month from ZURB.</p>
- </a>
- </div>
- <div class="medium-5 large-4 footer-signup-form columns">
- <a style="margin-bottom: 0;" target="_blank" href="https://get.foundation/learn/responsive-reading.html" class="button expanded">Download the PDF</a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-top bg-fblue">
- <div class="row property">
- <div class="medium-4 columns">
- <div class="property-info">
- <h3>Foundation for Sites</h3>
- <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
- </p>
- </div>
- </div>
-
- <div class="medium-8 columns">
- <div class="row collapse">
- <div class="medium-4 columns">
- <div class="learn-links">
- <h4 class="hide-for-small">Want more?</h4>
- <ul>
- <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
- <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
- <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
- <li><a href="http://zurb.com/university/courses">Training</a></li>
- <li><a href="http://zurb.com/library">Design Resources</a></li>
- </ul>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="support-links">
- <h4 class="hide-for-small">Talk to us</h4>
- <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
- <p><a href="https://get.foundation/get-involved/contribute.html">Get involved in<br>our amazing community.</a></p>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="connect-links">
- <h4 class="hide-for-small">Stay Updated</h4>
- <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
- <a href="http://zurb.com/news" class="small button">Stay Connected</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="row global">
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/studios" class="footer-link-block services">
- <span class="title">Studios</span>
- <span>Helping more than 200 startups succeed since 1998.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="https://get.foundation/" class="footer-link-block foundation">
- <span class="title">Foundation</span>
- <span>The most advanced front-end framework in the world.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/notable" class="footer-link-block apps">
- <span class="title">Notable Design Apps</span>
- <span>Prototype, iterate and collect feedback on your products.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/university" class="footer-link-block expo">
- <span class="title">University</span>
- <span>Ideas, thoughts and design resources shared with you.</span>
- </a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-bottom">
- <div class="row">
- <div class="medium-4 medium-push-8 columns">
- <ul class="home-social">
- <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
- <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
- <li><a href="http://zurb.com/contact" class="mail"></a></li>
- </ul>
- </div>
- <div class="medium-8 medium-pull-4 columns">
- <a href="http://www.zurb.com" class="zurb-logo regular"></a>
- <ul class="zurb-links">
- <li><a href="http://zurb.com/about">About</a></li>
- <li><a href="http://zurb.com/blog">Blog</a></li>
- <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
- <li><a href="http://zurb.com/contact">Contact</a></li>
- <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
- </ul>
- <p class="copyright">© 1998‐2016 ZURB, Inc. All rights reserved.</p>
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- <script>
- var _gaq = _gaq || [];
- _gaq.push(
- ['_setAccount', 'UA-2195009-2'],
- ['_trackPageview'],
- ['b._setAccount', 'UA-2195009-27'],
- ['b._trackPageview']
- );
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
-
- <script src="assets/js/vendor.js?hash=46b19887dc1ad72b6f3b70f569d026d3"></script>
- <script src="assets/js/foundation.js?hash=cf625a2bf84ef1d2f56d1193fc7c0e59"></script>
- <script src="assets/js/docs.js?hash=50dfcd5cd1c55e0106a33099736c9123"></script>
- <script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
-</body>
-</html>
+++ /dev/null
-<!doctype html>
-<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
-<html class="no-js" lang="en" dir="ltr">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="Show your progress. A simple way to add progress bars to your layouts. You only need two HTML elements to make them and they're easy to customize.">
- <link rel="icon" href="assets/img/icons/foundation-favicon.ico" type="image/x-icon">
- <title>Foundation for Sites 6 Docs | Progress Bar</title>
- <link href="assets/css/docs.css?hash=4673e4feb9c1f13f72212decab6d1eed" rel="stylesheet" />
- <link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=6be531817c2b9f8fd62156d16dad8c48" rel="stylesheet">
- <!-- <link rel="stylesheet" href="./node_modules/motion-ui/dist/motion-ui.css" /> -->
-</head>
-<body>
-
- <div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
-
- <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="mobile-ofc vertical menu">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
-
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/support.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/sort/unanswered">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
- </div>
-
- <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="vertical menu">
- <li><a href="#">Foundation</a></li>
- <li><a href="#">Dot</a></li>
- <li><a href="#">ZURB</a></li>
- <li><a href="#">Com</a></li>
- <li><a href="#">Slash</a></li>
- <li><a href="#">Sites</a></li>
- </ul>
- </div>
-
-
- <div class="off-canvas-content" data-off-canvas-content>
- <!-- Info Banner For Announcements or Links -->
- <!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
- <div class="info">
- <h5>Foundation 6 is here!</h5>
- </div>
- </a> -->
-
- <nav class="marketing-topbar show-for-medium">
-
- <ul class="menu">
- <li class="topbar-title"><a href="https://get.foundation/index.html"><img src="assets/img/logos/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
- </ul>
-
- <ul class="dropdown menu" data-dropdown-menu data-click-open="false">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/" target="_blank">F5 Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="https://get.foundation/emails/docs/" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
-
- </nav>
-
- <div class="title-bar hide-for-medium">
- <div class="title-bar-left">
- <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
- <span class="title-bar-title">Foundation</span>
- </div>
- </div>
-
-
- <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
-
- <div class="expanded row">
- <div class="medium-9 large-10 medium-push-3 large-push-2 columns">
-
-<article class="docs-component" id="docs-progress-bar">
-
-<a href="#docs-menu" class="small secondary expanded button hide-for-medium">Jump to Nav</a>
-
-<header>
- <h1 class="docs-page-title">Progress Bar</h1>
-
-
- <p class="lead docs-page-lead">Show your progress. A simple way to add progress bars to your layouts. You only need two HTML elements to make them and they're easy to customize.</p>
-
- <ul class="menu simple docs-contribute-menu">
- <li><a href="https://github.com/zurb/foundation-sites/edit/master/docs/pages/progress-bar.md" target="_blank"><i class="fi-pencil"></i>Edit this Page</a></li>
- <li><a href="https://github.com/zurb/foundation-sites/issues/new?title=%5BProgress%20Bar%5D%20ISSUE%20NAME%20HERE" target="_blank"><i class="fi-social-github"></i>Report a Bug</a></li>
- <li><a href="https://get.foundation/forum" target="_blank"><i class="fi-comment"></i>Get Help</a></li>
- </ul>
-</header>
-
-<hr>
-
-<div class="row">
-
-<div class="large-9 columns" id="docs">
-
-<h2 id="basics" class="docs-heading" data-magellan-target="basics">Basics<a class="docs-heading-icon" href="#basics"></a></h2><p>A progress bar has two elements: the container <code>.progress</code>, and the meter <code>.progress-meter</code>. The <code>role</code> and <code>aria-</code> attributes in the code example clarify the status of the bar:</p>
-<ul>
-<li><code>aria-valuemin</code>: Minimum value.</li>
-<li><code>aria-valuemax</code>: Maximum value.</li>
-<li><code>aria-valuenow</code>: Current value.</li>
-</ul>
-<p>If the value of the progress bar is not numeric, also add the attribute <code>aria-valuetext</code>, which should include a human-readable version of the bar's value.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"progress"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"progressbar"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">aria-valuenow</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">aria-valuemin</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">aria-valuemax</span>=<span class="hljs-string">"100"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"progress-meter"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="progress" role="progressbar" tabindex="0" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
- <div class="progress-meter"></div>
-</div></div><p>Add a <code>width</code> CSS property to the inner meter to fill the progress bar.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"progress"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"progressbar"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">aria-valuenow</span>=<span class="hljs-string">"50"</span> <span class="hljs-attr">aria-valuemin</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">aria-valuetext</span>=<span class="hljs-string">"50 percent"</span> <span class="hljs-attr">aria-valuemax</span>=<span class="hljs-string">"100"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"progress-meter"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 50%"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="progress" role="progressbar" tabindex="0" aria-valuenow="50" aria-valuemin="0" aria-valuetext="50 percent" aria-valuemax="100">
- <div class="progress-meter" style="width: 50%"></div>
-</div></div><hr>
-<h2 id="colors" class="docs-heading" data-magellan-target="colors">Colors<a class="docs-heading-icon" href="#colors"></a></h2><p>A progress bar can be styled with the <code>.secondary</code>, <code>.success</code>, <code>.warning</code>, and <code>.alert</code> colors.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"secondary progress"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"progressbar"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">aria-valuenow</span>=<span class="hljs-string">"25"</span> <span class="hljs-attr">aria-valuemin</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">aria-valuetext</span>=<span class="hljs-string">"25 percent"</span> <span class="hljs-attr">aria-valuemax</span>=<span class="hljs-string">"100"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"progress-meter"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 25%"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"success progress"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"progress-meter"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 50%"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"warning progress"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"progress-meter"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 50%"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"alert progress"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"progress-meter"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 75%"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="secondary progress" role="progressbar" tabindex="0" aria-valuenow="25" aria-valuemin="0" aria-valuetext="25 percent" aria-valuemax="100">
- <div class="progress-meter" style="width: 25%"></div>
-</div>
-
-<div class="success progress">
- <div class="progress-meter" style="width: 50%"></div>
-</div>
-
-<div class="warning progress">
- <div class="progress-meter" style="width: 50%"></div>
-</div>
-
-<div class="alert progress">
- <div class="progress-meter" style="width: 75%"></div>
-</div></div><hr>
-<h2 id="with-text" class="docs-heading" data-magellan-target="with-text">With Text<a class="docs-heading-icon" href="#with-text"></a></h2><p>You can add text inside the meter of a progress bar. Make sure the text you use in the meter is also used in the <code>aria-valuetext</code> attribute.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"progress"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"progressbar"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">aria-valuenow</span>=<span class="hljs-string">"20"</span> <span class="hljs-attr">aria-valuemin</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">aria-valuetext</span>=<span class="hljs-string">"25 percent"</span> <span class="hljs-attr">aria-valuemax</span>=<span class="hljs-string">"100"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"progress-meter"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 25%"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"progress-meter-text"</span>></span>25%<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">span</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="progress" role="progressbar" tabindex="0" aria-valuenow="20" aria-valuemin="0" aria-valuetext="25 percent" aria-valuemax="100">
- <span class="progress-meter" style="width: 25%">
- <p class="progress-meter-text">25%</p>
- </span>
-</div></div><hr>
-<h2 id="native-progress" class="docs-heading" data-magellan-target="native-progress">Native Progress<a class="docs-heading-icon" href="#native-progress"></a></h2><p>As an alternative to our custom progress bar style, you can also opt to use the native <code><progress></code> element. It provides a more succinct way to create progress bars, but it's not supported in IE9, and some other older browsers. <a href="http://caniuse.com/#feat=progress">View <code><progress></code> element support.</a></p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">progress</span> <span class="hljs-attr">max</span>=<span class="hljs-string">"100"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"75"</span>></span><span class="hljs-tag"></<span class="hljs-name">progress</span>></span></code></pre></div>
-
-<div class="docs-code-live"><progress max="100" value="75"></progress></div><p>If you're using the Sass version of Foundation, add this line to your main Sass file to export the <code><progress></code> CSS:</p>
-<div class="docs-code" data-docs-code><pre><code class="scss">@<span class="hljs-keyword">import</span> foundation-progress-element;</code></pre></div><p>The <code><progress></code> element can be styled with the same coloring classes: <code>.secondary</code>, <code>.success</code>, <code>.warning</code>, and <code>.alert</code>.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">progress</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"secondary"</span> <span class="hljs-attr">max</span>=<span class="hljs-string">"100"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"75"</span>></span><span class="hljs-tag"></<span class="hljs-name">progress</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">progress</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"success"</span> <span class="hljs-attr">max</span>=<span class="hljs-string">"100"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"75"</span>></span><span class="hljs-tag"></<span class="hljs-name">progress</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">progress</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"warning"</span> <span class="hljs-attr">max</span>=<span class="hljs-string">"100"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"75"</span>></span><span class="hljs-tag"></<span class="hljs-name">progress</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">progress</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"alert"</span> <span class="hljs-attr">max</span>=<span class="hljs-string">"100"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"75"</span>></span><span class="hljs-tag"></<span class="hljs-name">progress</span>></span></code></pre></div>
-
-<div class="docs-code-live"><progress class="secondary" max="100" value="75"></progress>
-<progress class="success" max="100" value="75"></progress>
-<progress class="warning" max="100" value="75"></progress>
-<progress class="alert" max="100" value="75"></progress></div><hr>
-<h2 id="native-meter" class="docs-heading" data-magellan-target="native-meter">Native Meter<a class="docs-heading-icon" href="#native-meter"></a></h2><p>For the <em>extra</em> adventurous developers out there, we also provide styles for the <code><meter></code> element. What's the difference? <code><progress></code> represents a value that changes over time, like storage capacity. <code><meter></code> represents a value that fluctuates around some optimum value. It also has <em>no</em> support in Internet Explorer, Mobile Safari, or Android 2. <a href="http://caniuse.com/#search=meter">View <code><meter></code> element support.</a></p>
-<p>If you're using the Sass version of Foundation, add this line to your main Sass file to export the <code><meter></code> CSS:</p>
-<div class="docs-code" data-docs-code><pre><code class="scss">@<span class="hljs-keyword">import</span> foundation-meter-element;</code></pre></div><p>The meter automatically colors itself based on the current values, and the defined low, medium, and high ranges. <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/The_native_form_widgets#Meters_and_progress_bars">Learn more about the mechanics of <code><meter></code> values.</a></p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">meter</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"30"</span> <span class="hljs-attr">min</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">low</span>=<span class="hljs-string">"33"</span> <span class="hljs-attr">high</span>=<span class="hljs-string">"66"</span> <span class="hljs-attr">optimum</span>=<span class="hljs-string">"100"</span> <span class="hljs-attr">max</span>=<span class="hljs-string">"100"</span>></span><span class="hljs-tag"></<span class="hljs-name">meter</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">meter</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"50"</span> <span class="hljs-attr">min</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">low</span>=<span class="hljs-string">"33"</span> <span class="hljs-attr">high</span>=<span class="hljs-string">"66"</span> <span class="hljs-attr">optimum</span>=<span class="hljs-string">"100"</span> <span class="hljs-attr">max</span>=<span class="hljs-string">"100"</span>></span><span class="hljs-tag"></<span class="hljs-name">meter</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">meter</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"100"</span> <span class="hljs-attr">min</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">low</span>=<span class="hljs-string">"33"</span> <span class="hljs-attr">high</span>=<span class="hljs-string">"66"</span> <span class="hljs-attr">optimum</span>=<span class="hljs-string">"100"</span> <span class="hljs-attr">max</span>=<span class="hljs-string">"100"</span>></span><span class="hljs-tag"></<span class="hljs-name">meter</span>></span></code></pre></div>
-
-<div class="docs-code-live"><meter value="30" min="0" low="33" high="66" optimum="100" max="100"></meter>
-<meter value="50" min="0" low="33" high="66" optimum="100" max="100"></meter>
-<meter value="100" min="0" low="33" high="66" optimum="100" max="100"></meter></div>
-
-<hr>
-<section>
- <h2 id="sass-reference" class="docs-heading" data-magellan-target="sass-reference">Sass Reference<a class="docs-heading-icon" href="#sass-reference"></a></h2>
-
- <section>
- <h3 id="sass-variables" class="docs-heading">Variables<a class="docs-heading-icon" href="#sass-variables"></a></h3>
-
- <p>The default styles of this component can be customized using these Sass variables in your project's <a href="sass.html#the-settings-file">settings file</a>.</p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td class="name"><code>$meter-height</code></td>
- <td>Length</td>
- <td class="length"><code>1rem</code></td>
- <td><p>Height of a <code><meter></code> element.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$meter-radius</code></td>
- <td>Length</td>
- <td class="length"><code>$global-radius</code></td>
- <td><p>Border radius of a <code><meter></code> element.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$meter-background</code></td>
- <td>Color</td>
- <td class="color"><code>$medium-gray</code></td>
- <td><p>Background color of a <code><meter></code> element.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$meter-fill-good</code></td>
- <td>Color</td>
- <td class="color"><code>$success-color</code></td>
- <td><p>Meter fill for an optimal value in a <code><meter></code> element.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$meter-fill-medium</code></td>
- <td>Color</td>
- <td class="color"><code>$warning-color</code></td>
- <td><p>Meter fill for an average value in a <code><meter></code> element.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$meter-fill-bad</code></td>
- <td>Color</td>
- <td class="color"><code>$alert-color</code></td>
- <td><p>Meter fill for a suboptimal value in a <code><meter></code> element.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$progress-height</code></td>
- <td>Number</td>
- <td class="number"><code>1rem</code></td>
- <td><p>Height of a progress bar.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$progress-background</code></td>
- <td>Color</td>
- <td class="color"><code>$medium-gray</code></td>
- <td><p>Background color of a progress bar.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$progress-margin-bottom</code></td>
- <td>Number</td>
- <td class="number"><code>$global-margin</code></td>
- <td><p>Bottom margin of a progress bar.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$progress-meter-background</code></td>
- <td>Color</td>
- <td class="color"><code>$primary-color</code></td>
- <td><p>Default color of a progress bar's meter.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$progress-radius</code></td>
- <td>Number</td>
- <td class="number"><code>$global-radius</code></td>
- <td><p>Default radius of a progress bar.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="sass-mixins" class="docs-heading">Mixins<a class="docs-heading-icon" href="#sass-mixins"></a></h3>
-
- <p>We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.</p>
-
-
- <section >
- <h4 id="progress-container" class="docs-heading">progress-container<a class="docs-heading-icon" href="#progress-container"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> progress-container;</code></pre>
- </div>
-
- <p>Adds styles for a progress bar container.</p>
-
-
-
-
-
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="progress-meter" class="docs-heading">progress-meter<a class="docs-heading-icon" href="#progress-meter"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> progress-meter;</code></pre>
- </div>
-
- <p>Adds styles for the inner meter of a progress bar.</p>
-
-
-
-
-
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="progress-meter-text" class="docs-heading">progress-meter-text<a class="docs-heading-icon" href="#progress-meter-text"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> progress-meter-text;</code></pre>
- </div>
-
- <p>Adds styles for text in the progress meter.</p>
-
-
-
-
-
- </section>
-
-
-
-
-
- </section>
-
-
-</section>
-
-
-<!-- <hr> -->
-<!-- <section class="docs-building-blocks">
- <h2 id="building-blocks" class="docs-heading" data-magellan-target="building-blocks">Building Blocks<a class="docs-heading-icon" href="#building-blocks"></a></h2>
-
- <p><a href="http://zurb.com/building-blocks">Building Blocks</a> is a ZURB-curated resource with useful code snippets that use Foundation components. Here are a few for this component:</p>
-
- <div class="warning callout">
- <p>These are placeholder items. If you have ideas for building blocks for this component, <a href="https://github.com/zurb/foundation-sites-6/issues/118">we're taking ideas on GitHub</a>.</p>
- </div>
-
- <div data-building-blocks></div>
-</section> -->
-
-</div>
-
-<div class="large-3 columns" data-sticky-container>
- <nav class="columns docs-toc-wrap" data-sticky data-anchor="docs" data-sticky-on="large">
- <div class="docs-toc hide" id="docsTOC">
- <ul class="vertical menu" data-docs-toc>
- <li class="docs-nav-title">On this page:</li>
- </ul>
- </div>
- <div class="foundation-toc-ad-unit" id="TOCAdUnit">
- </div>
- </nav>
-</div>
-
-</div>
-
-</article>
-
- </div>
- <div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
- <ul class="vertical menu docs-nav" id="docs-menu">
- <p class="docs-nav-version">
- <span data-docs-version></span>
- <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">(Changelog)</a>
- </p>
-
- <li class="docs-nav-title">Getting Started</li>
- <li><a href="installation.html">Installation</a></li>
- <li><a href="starter-projects.html">Starter Projects</a></li>
- <li><a href="compatibility.html">Compatibility</a></li>
- <li><a href="accessibility.html">Accessibility</a></li>
- <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
-
- <li class="docs-nav-title">Setup</li>
- <li><a href="global.html">Global Styles</a></li>
- <li><a href="rtl.html">Right-to-Left Support</a></li>
- <li><a href="flexbox.html">Flexbox</a></li>
- <li><a href="sass.html">Sass</a></li>
- <li><a href="javascript.html">JavaScript</a></li>
- <li><a href="javascript-utilities.html">JavaScript Utilities</a></li>
- <li><a href="media-queries.html">Media Queries</a></li>
-
- <li class="docs-nav-title">General</li>
- <li><a href="grid.html">Grid</a></li>
- <li><a href="flex-grid.html">Flex Grid</a></li>
- <li><a href="forms.html">Forms</a></li>
- <li><a href="visibility.html">Visibility Classes</a></li>
- <li><a href="float-classes.html">Float Classes</a></li>
-
- <li class="docs-nav-title">Typography</li>
- <li><a href="typography-base.html">Base Styles</a></li>
- <li><a href="typography-helpers.html">Helper Classes</a></li>
-
- <li class="docs-nav-title">Controls</li>
- <li><a href="button.html">Button</a></li>
- <li><a href="button-group.html">Button Group</a></li>
- <li><a href="close-button.html">Close Button</a></li>
- <li><a href="slider.html">Slider <span class="label">JS</span></a></li>
- <li><a href="switch.html">Switch</a></li>
-
- <li class="docs-nav-title">Navigation</li>
- <li><a href="navigation.html">Overview</a></li>
- <li><a href="menu.html">Menu</a></li>
- <li><a href="dropdown-menu.html">Dropdown Menu <span class="label">JS</span></a></li>
- <li><a href="drilldown-menu.html">Drilldown Menu <span class="label">JS</span></a></li>
- <li><a href="accordion-menu.html">Accordion Menu <span class="label">JS</span></a></li>
- <li><a href="top-bar.html">Top Bar</a></li>
- <li><a href="responsive-navigation.html">Responsive Navigation</a></li>
- <li><a href="magellan.html">Magellan <span class="label">JS</span></a></li>
- <li><a href="pagination.html">Pagination</a></li>
- <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
-
- <li class="docs-nav-title">Containers</li>
- <li><a href="accordion.html">Accordion <span class="label">JS</span></a></li>
- <li><a href="callout.html">Callout</a></li>
- <li><a href="dropdown.html">Dropdown <span class="label">JS</span></a></li>
- <li><a href="media-object.html">Media Object</a></li>
- <li><a href="off-canvas.html">Off-canvas <span class="label">JS</span></a></li>
- <li><a href="reveal.html">Reveal <span class="label">JS</span> <small>Modal</small></a></li>
- <li><a href="table.html">Table</a></li>
- <li><a href="tabs.html">Tabs <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Media</li>
- <li><a href="badge.html">Badge</a></li>
- <li><a href="flex-video.html">Flex Video</a></li>
- <li><a href="label.html">Label</a></li>
- <li><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
- <li class="current"><a href="progress-bar.html">Progress Bar</a></li>
- <li><a href="thumbnail.html">Thumbnail</a></li>
- <li><a href="tooltip.html">Tooltip <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Plugins</li>
- <li><a href="abide.html">Abide <small>Form Validation</small></a></li>
- <li><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
- <li><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
- <li><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
- <li><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
-
- <li class="docs-nav-title">Sass</li>
- <li><a href="sass-functions.html">Functions</a></li>
- <li><a href="sass-mixins.html">Mixins</a></li>
-
- <li class="docs-nav-title">Libraries</li>
- <li><a href="motion-ui.html">Motion UI</a></li>
- <li><a href="panini.html">Panini</a></li>
- <li><a href="style-sherpa.html">Style Sherpa</a></li>
-
- <li class="docs-nav-title">Older Versions</li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
- <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
- <li><a href="https://get.foundation/sites/docs/v/3.2.5/">Foundation 3</a></li>
- <li><a href="https://get.foundation/sites/docs/v/2.2.1/">Foundation 2</a></li>
- </ul>
-
- </div>
- </div>
-
- <!-- Small Business(Docs) -->
- <section id="studiosCallout">
- <div class="row">
- <div class="medium-4 large-4 columns">
- <img src="https://get.foundation/assets/img/smallbiz-footer.svg" alt="">
- </div>
- <div class="medium-8 large-8 columns banner-info">
- <div class="row column property-label">ZURB Foundation</div>
- <h3 class="light">Yeah, we can help with that.</h3>
- <p class="lead"> We’ll collaborate with your team throughout the entire project life cycle. We’ll take your concept and move it through ideation, hi-fi wireframes, visual design and code, all while informing you on the whys and hows along the way.</p>
- <div class="course-buttons">
- <a href="https://get.foundation/get-involved/premium-support.html" class="studios button" data-zcom-event="studios_foundation_click" id="foundationSmallV1">Show Me How →</a>
- </div>
- </div>
- </div>
- </section>
-
- <div class="docs-newsletter">
- <div class="row">
- <div class="medium-7 large-8 columns">
- <a target="_blank" href="https://get.foundation/learn/responsive-reading.html">
- <h5 class="">Download ZURB’s 21 Responsive Trends That Will Shape 2017</h5>
- <p style="margin-bottom: 0;">Stay informed with amazing responsive trends each month from ZURB.</p>
- </a>
- </div>
- <div class="medium-5 large-4 footer-signup-form columns">
- <a style="margin-bottom: 0;" target="_blank" href="https://get.foundation/learn/responsive-reading.html" class="button expanded">Download the PDF</a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-top bg-fblue">
- <div class="row property">
- <div class="medium-4 columns">
- <div class="property-info">
- <h3>Foundation for Sites</h3>
- <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
- </p>
- </div>
- </div>
-
- <div class="medium-8 columns">
- <div class="row collapse">
- <div class="medium-4 columns">
- <div class="learn-links">
- <h4 class="hide-for-small">Want more?</h4>
- <ul>
- <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
- <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
- <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
- <li><a href="http://zurb.com/university/courses">Training</a></li>
- <li><a href="http://zurb.com/library">Design Resources</a></li>
- </ul>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="support-links">
- <h4 class="hide-for-small">Talk to us</h4>
- <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
- <p><a href="https://get.foundation/get-involved/contribute.html">Get involved in<br>our amazing community.</a></p>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="connect-links">
- <h4 class="hide-for-small">Stay Updated</h4>
- <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
- <a href="http://zurb.com/news" class="small button">Stay Connected</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="row global">
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/studios" class="footer-link-block services">
- <span class="title">Studios</span>
- <span>Helping more than 200 startups succeed since 1998.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="https://get.foundation/" class="footer-link-block foundation">
- <span class="title">Foundation</span>
- <span>The most advanced front-end framework in the world.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/notable" class="footer-link-block apps">
- <span class="title">Notable Design Apps</span>
- <span>Prototype, iterate and collect feedback on your products.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/university" class="footer-link-block expo">
- <span class="title">University</span>
- <span>Ideas, thoughts and design resources shared with you.</span>
- </a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-bottom">
- <div class="row">
- <div class="medium-4 medium-push-8 columns">
- <ul class="home-social">
- <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
- <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
- <li><a href="http://zurb.com/contact" class="mail"></a></li>
- </ul>
- </div>
- <div class="medium-8 medium-pull-4 columns">
- <a href="http://www.zurb.com" class="zurb-logo regular"></a>
- <ul class="zurb-links">
- <li><a href="http://zurb.com/about">About</a></li>
- <li><a href="http://zurb.com/blog">Blog</a></li>
- <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
- <li><a href="http://zurb.com/contact">Contact</a></li>
- <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
- </ul>
- <p class="copyright">© 1998‐2016 ZURB, Inc. All rights reserved.</p>
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- <script>
- var _gaq = _gaq || [];
- _gaq.push(
- ['_setAccount', 'UA-2195009-2'],
- ['_trackPageview'],
- ['b._setAccount', 'UA-2195009-27'],
- ['b._trackPageview']
- );
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
-
- <script src="assets/js/vendor.js?hash=bc5d8d50f4bba345aafa9aed4fcde94f"></script>
- <script src="assets/js/foundation.js?hash=ba22ae4d6147066964a7d7d69f261071"></script>
- <script src="assets/js/docs.js?hash=a94df15a555243e4bf47824040d72e9c"></script>
- <script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
-</body>
-</html>
+++ /dev/null
-<!doctype html>
-<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
-<html class="no-js" lang="en" dir="ltr">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="Our three Menu patterns form like Voltron into one responsive Menu plugin, which allows you to switch between patterns at different screen sizes.">
- <link rel="icon" href="assets/img/icons/foundation-favicon.ico" type="image/x-icon">
- <title>Foundation for Sites 6 Docs | Responsive Navigation</title>
- <link href="assets/css/docs.css?hash=e4d9c3e0e20fd19538d5eb3b7e327c98" rel="stylesheet" />
- <link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=b6713672a45bdaa4812525805bb5212c" rel="stylesheet">
- <!-- <link rel="stylesheet" href="./node_modules/motion-ui/dist/motion-ui.css" /> -->
-</head>
-<body>
-
- <div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
-
- <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="mobile-ofc vertical menu">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
-
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/support.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/sort/unanswered">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
- </div>
-
- <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="vertical menu">
- <li><a href="#">Foundation</a></li>
- <li><a href="#">Dot</a></li>
- <li><a href="#">ZURB</a></li>
- <li><a href="#">Com</a></li>
- <li><a href="#">Slash</a></li>
- <li><a href="#">Sites</a></li>
- </ul>
- </div>
-
-
- <div class="off-canvas-content" data-off-canvas-content>
- <!-- Info Banner For Announcements or Links -->
- <!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
- <div class="info">
- <h5>Foundation 6 is here!</h5>
- </div>
- </a> -->
-
- <nav class="marketing-topbar show-for-medium">
-
- <ul class="menu">
- <li class="topbar-title"><a href="https://get.foundation/index.html"><img src="assets/img/logos/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
- </ul>
-
- <ul class="dropdown menu" data-dropdown-menu data-click-open="false">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/" target="_blank">F5 Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="https://get.foundation/emails/docs/" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
-
- </nav>
-
- <div class="title-bar hide-for-medium">
- <div class="title-bar-left">
- <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
- <span class="title-bar-title">Foundation</span>
- </div>
- </div>
-
-
- <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
-
- <div class="expanded row">
- <div class="medium-9 large-10 medium-push-3 large-push-2 columns">
-
-<article class="docs-component" id="docs-responsive-navigation">
-
-<a href="#docs-menu" class="small secondary expanded button hide-for-medium">Jump to Nav</a>
-
-<header>
- <h1 class="docs-page-title">Responsive Navigation</h1>
-
- <span data-tooltip title="Requires a JavaScript library." class="docs-js label">JavaScript</span>
-
- <p class="lead docs-page-lead">Our three Menu patterns form like Voltron into one responsive Menu plugin, which allows you to switch between patterns at different screen sizes.</p>
-
- <ul class="menu simple docs-contribute-menu">
- <li><a href="https://github.com/zurb/foundation-sites/edit/master/docs/pages/responsive-navigation.md" target="_blank"><i class="fi-pencil"></i>Edit this Page</a></li>
- <li><a href="https://github.com/zurb/foundation-sites/issues/new?title=%5BResponsive%20Navigation%5D%20ISSUE%20NAME%20HERE" target="_blank"><i class="fi-social-github"></i>Report a Bug</a></li>
- <li><a href="https://get.foundation/forum" target="_blank"><i class="fi-comment"></i>Get Help</a></li>
- </ul>
-</header>
-
-<hr>
-
-<div class="row">
-
-<div class="large-9 columns" id="docs">
-
-<h2 id="responsive-menu" class="docs-heading" data-magellan-target="responsive-menu">Responsive Menu<a class="docs-heading-icon" href="#responsive-menu"></a></h2><p>The Menu has some responsive CSS classes built in, which allow you to re-orient a menu on different screen sizes.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"vertical medium-horizontal menu"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 1<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 2<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 3<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">ul</span>></span></code></pre></div>
-
-<div class="docs-code-live"><ul class="vertical medium-horizontal menu">
- <li><a href="#">Item 1</a></li>
- <li><a href="#">Item 2</a></li>
- <li><a href="#">Item 3</a></li>
-</ul></div><hr>
-<p>The Menu can be augmented with one of three different plugins—dropdown menu, drilldown menu, or accordion menu. However, these patterns tend to work best on specific screen sizes.</p>
-<p>With our responsive Menu plugin, you can apply a default pattern to a Menu, and then change that pattern on other screen sizes.</p>
-<p>For example, a drilldown menu works well on mobile, but on larger screens, you may want to convert that same menu into a dropdown. Here's an example that does just that:</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"vertical menu"</span> <span class="hljs-attr">data-responsive-menu</span>=<span class="hljs-string">"drilldown medium-dropdown"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 300px;"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 1<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"vertical menu"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 1A<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"vertical menu"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 1A<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 1B<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 1C<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 1D<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 1E<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 1B<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 2<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"vertical menu"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 2A<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 2B<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 3<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"vertical menu"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 3A<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Item 3B<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">li</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">ul</span>></span></code></pre></div>
-
-<div class="docs-code-live"><ul class="vertical menu" data-responsive-menu="drilldown medium-dropdown" style="width: 300px;">
- <li>
- <a href="#">Item 1</a>
- <ul class="vertical menu">
- <li>
- <a href="#">Item 1A</a>
- <ul class="vertical menu">
- <li><a href="#">Item 1A</a></li>
- <li><a href="#">Item 1B</a></li>
- <li><a href="#">Item 1C</a></li>
- <li><a href="#">Item 1D</a></li>
- <li><a href="#">Item 1E</a></li>
- </ul>
- </li>
- <li><a href="#">Item 1B</a></li>
- </ul>
- </li>
- <li>
- <a href="#">Item 2</a>
- <ul class="vertical menu">
- <li><a href="#">Item 2A</a></li>
- <li><a href="#">Item 2B</a></li>
- </ul>
- </li>
- <li>
- <a href="#">Item 3</a>
- <ul class="vertical menu">
- <li><a href="#">Item 3A</a></li>
- <li><a href="#">Item 3B</a></li>
- </ul>
- </li>
-</ul></div><hr>
-<h2 id="responsive-toggle" class="docs-heading" data-magellan-target="responsive-toggle">Responsive Toggle<a class="docs-heading-icon" href="#responsive-toggle"></a></h2><p>In Foundation 5, the top bar combined this menu toggling concept into one plugin. We now have a separate, optional component you can use in tandem with the responsive plugin. It's called the title bar, and it allows you to quickly setup a menu toggle on mobile. The title bar hides itself on larger screens.</p>
-<p>To set it up, first give your menu a unique ID. (You don't even need to use Menu! Any element will work.) Next, add a title bar with the class <code>.title-bar</code> and the attribute <code>data-responsive-toggle</code>. The value of <code>data-responsive-toggle</code> should be the ID of the menu you're toggling.</p>
-<p>By default, the title bar will be visible on small screens, and the Menu hides. At the medium breakpoint, the title bar disappears, and the menu is always visible. This breakpoint can be changed with the <code>data-hide-for</code> attribute in HTML, or the <code>hideFor</code> setting in JavaScript.</p>
-<div class="primary callout show-for-medium">
- <p>Scale your browser down to see the toggle happen.</p>
-</div>
-
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar"</span> <span class="hljs-attr">data-responsive-toggle</span>=<span class="hljs-string">"example-menu"</span> <span class="hljs-attr">data-hide-for</span>=<span class="hljs-string">"medium"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu-icon"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">data-toggle</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar-title"</span>></span>Menu<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"top-bar"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example-menu"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"top-bar-left"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"dropdown menu"</span> <span class="hljs-attr">data-dropdown-menu</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu-text"</span>></span>Site Title<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>One<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu vertical"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>One<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Two<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Three<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Two<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Three<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"top-bar-right"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"search"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Search"</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button"</span>></span>Search<span class="hljs-tag"></<span class="hljs-name">button</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
- <button class="menu-icon" type="button" data-toggle></button>
- <div class="title-bar-title">Menu</div>
-</div>
-
-<div class="top-bar" id="example-menu">
- <div class="top-bar-left">
- <ul class="dropdown menu" data-dropdown-menu>
- <li class="menu-text">Site Title</li>
- <li>
- <a href="#">One</a>
- <ul class="menu vertical">
- <li><a href="#">One</a></li>
- <li><a href="#">Two</a></li>
- <li><a href="#">Three</a></li>
- </ul>
- </li>
- <li><a href="#">Two</a></li>
- <li><a href="#">Three</a></li>
- </ul>
- </div>
- <div class="top-bar-right">
- <ul class="menu">
- <li><input type="search" placeholder="Search"></li>
- <li><button type="button" class="button">Search</button></li>
- </ul>
- </div>
-</div></div><hr>
-<h3 id="preventing-fouc" class="docs-heading">Preventing FOUC<a class="docs-heading-icon" href="#preventing-fouc"></a></h3><p>Before the JavaScript on your page loads, you'll be able to see both the mobile and desktop element at once for a brief second. This is known as a <a href="https://en.wikipedia.org/wiki/Flash_of_unstyled_content">flash of unstyled content</a>. There's not an easy way for the framework to handle this for you, but you can add some extra CSS to account for it.</p>
-<p>If we reference the above example, <code>.title-bar</code> is our mobile element and <code>.top-bar</code> is our desktop element. So before the JavaScript loads, we want only the right element for that screen size to be visible.</p>
-<div class="docs-code" data-docs-code><pre><code class="css"><span class="hljs-selector-class">.no-js</span> <span class="hljs-selector-class">.top-bar</span> {
- <span class="hljs-attribute">display</span>: none;
-}
-
-@<span class="hljs-keyword">media</span> screen and (min-width: <span class="hljs-number">40em</span>) {
- <span class="hljs-selector-class">.no-js</span> <span class="hljs-selector-class">.top-bar</span> {
- <span class="hljs-attribute">display</span>: block;
- }
-
- <span class="hljs-selector-class">.no-js</span> <span class="hljs-selector-class">.title-bar</span> {
- <span class="hljs-attribute">display</span>: none;
- }
-}</code></pre></div><p>If you're using Sass, you can write it like this:</p>
-<div class="docs-code" data-docs-code><pre><code class="scss"><span class="hljs-selector-class">.no-js</span> {
- @<span class="hljs-keyword">include</span> breakpoint(small only) {
- <span class="hljs-selector-class">.top-bar</span> {
- <span class="hljs-attribute">display</span>: none;
- }
- }
-
- @<span class="hljs-keyword">include</span> breakpoint(medium) {
- <span class="hljs-selector-class">.title-bar</span> {
- <span class="hljs-attribute">display</span>: none;
- }
- }
-}</code></pre></div>
-
-
-<hr>
-<section>
- <h2 id="javascript-reference" class="docs-heading" data-magellan-target="javascript-reference">JavaScript Reference<a class="docs-heading-icon" href="#javascript-reference"></a></h2>
-
-
- <section>
- <h3 id="js-module" class="docs-heading">Initializing<a class="docs-heading-icon" href="#js-module"></a></h3>
-
- <p>The file <code>foundation.responsiveToggle.js</code> must be included in your JavaScript to use this plugin, along with <code>foundation.core.js</code>. <strong>This plugin also requires these utility libraries:</strong></p>
-
-
- <ul>
- <li><code>foundation.util.mediaQuery.js</code></li>
- </ul>
-
-
- </section>
-
-
- <section>
- <h3 id="js-class" class="docs-heading">Foundation.ResponsiveToggle<a class="docs-heading-icon" href="#js-class"></a></h3>
-
- <p>Creates a new instance of Tab Bar.</p>
-
-
- <div class="docs-code"><pre><code><span class="hljs-keyword">var</span> elem = <span class="hljs-keyword">new</span> Foundation.ResponsiveToggle(element, options);</code></pre></div>
-
- <p><strong>Fires these events:</strong>
- ResponsiveToggle#event:init
- </p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>element</code></td>
- <td>jQuery</td>
- <td>jQuery object to attach tab bar functionality to.</td>
- </tr>
- <tr>
- <td><code>options</code></td>
- <td>Object</td>
- <td>Overrides to the default plugin settings.</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="js-options" class="docs-heading">Plugin Options<a class="docs-heading-icon" href="#js-options"></a></h3>
-
- <p>Use these options to customize an instance of Responsive Navigation. Plugin options can be set as individual data attributes, one combined <code>data-options</code> attribute, or as an object passed to the plugin's constructor. <a href="javascript.html#initializing">Learn more about how JavaScript plugins are initialized.</a></p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Default</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>data-hide-for</code></td>
- <td><code>medium</code></td>
- <td>The breakpoint after which the menu is always shown, and the tab bar is hidden.</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="js-events" class="docs-heading">Events<a class="docs-heading-icon" href="#js-events"></a></h3>
-
- <p>These events will fire from any element with a Responsive Navigation plugin attached.</p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>toggled.zf.responsiveNavigation</code></td>
- <td>Fires when the element attached to the tab bar toggles.</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="js-functions" class="docs-heading">Methods<a class="docs-heading-icon" href="#js-functions"></a></h3>
-
- <section>
- <h4 id="togglemenu" class="docs-heading">toggleMenu<a class="docs-heading-icon" href="#togglemenu"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'toggleMenu'</span>);</code></pre>
- </div>
-
- <p>Toggles the element attached to the tab bar. The toggle only happens if the screen is small enough to allow it.</p>
-
-
- <p><strong>Fires these events:</strong>
- ResponsiveToggle#event:toggled
- </p>
-
-
-
- </section>
- </section>
-</section>
-
-
-</div>
-
-<div class="large-3 columns" data-sticky-container>
- <nav class="columns docs-toc-wrap" data-sticky data-anchor="docs" data-sticky-on="large">
- <div class="docs-toc hide" id="docsTOC">
- <ul class="vertical menu" data-docs-toc>
- <li class="docs-nav-title">On this page:</li>
- </ul>
- </div>
- <div class="foundation-toc-ad-unit" id="TOCAdUnit">
- </div>
- </nav>
-</div>
-
-</div>
-
-</article>
-
- </div>
- <div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
- <ul class="vertical menu docs-nav" id="docs-menu">
- <p class="docs-nav-version">
- <span data-docs-version></span>
- <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">(Changelog)</a>
- </p>
-
- <li class="docs-nav-title">Getting Started</li>
- <li><a href="installation.html">Installation</a></li>
- <li><a href="starter-projects.html">Starter Projects</a></li>
- <li><a href="compatibility.html">Compatibility</a></li>
- <li><a href="accessibility.html">Accessibility</a></li>
- <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
-
- <li class="docs-nav-title">Setup</li>
- <li><a href="global.html">Global Styles</a></li>
- <li><a href="rtl.html">Right-to-Left Support</a></li>
- <li><a href="flexbox.html">Flexbox</a></li>
- <li><a href="sass.html">Sass</a></li>
- <li><a href="javascript.html">JavaScript</a></li>
- <li><a href="javascript-utilities.html">JavaScript Utilities</a></li>
- <li><a href="media-queries.html">Media Queries</a></li>
-
- <li class="docs-nav-title">General</li>
- <li><a href="grid.html">Grid</a></li>
- <li><a href="flex-grid.html">Flex Grid</a></li>
- <li><a href="forms.html">Forms</a></li>
- <li><a href="visibility.html">Visibility Classes</a></li>
- <li><a href="float-classes.html">Float Classes</a></li>
-
- <li class="docs-nav-title">Typography</li>
- <li><a href="typography-base.html">Base Styles</a></li>
- <li><a href="typography-helpers.html">Helper Classes</a></li>
-
- <li class="docs-nav-title">Controls</li>
- <li><a href="button.html">Button</a></li>
- <li><a href="button-group.html">Button Group</a></li>
- <li><a href="close-button.html">Close Button</a></li>
- <li><a href="slider.html">Slider <span class="label">JS</span></a></li>
- <li><a href="switch.html">Switch</a></li>
-
- <li class="docs-nav-title">Navigation</li>
- <li><a href="navigation.html">Overview</a></li>
- <li><a href="menu.html">Menu</a></li>
- <li><a href="dropdown-menu.html">Dropdown Menu <span class="label">JS</span></a></li>
- <li><a href="drilldown-menu.html">Drilldown Menu <span class="label">JS</span></a></li>
- <li><a href="accordion-menu.html">Accordion Menu <span class="label">JS</span></a></li>
- <li><a href="top-bar.html">Top Bar</a></li>
- <li class="current"><a href="responsive-navigation.html">Responsive Navigation</a></li>
- <li><a href="magellan.html">Magellan <span class="label">JS</span></a></li>
- <li><a href="pagination.html">Pagination</a></li>
- <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
-
- <li class="docs-nav-title">Containers</li>
- <li><a href="accordion.html">Accordion <span class="label">JS</span></a></li>
- <li><a href="callout.html">Callout</a></li>
- <li><a href="dropdown.html">Dropdown <span class="label">JS</span></a></li>
- <li><a href="media-object.html">Media Object</a></li>
- <li><a href="off-canvas.html">Off-canvas <span class="label">JS</span></a></li>
- <li><a href="reveal.html">Reveal <span class="label">JS</span> <small>Modal</small></a></li>
- <li><a href="table.html">Table</a></li>
- <li><a href="tabs.html">Tabs <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Media</li>
- <li><a href="badge.html">Badge</a></li>
- <li><a href="flex-video.html">Flex Video</a></li>
- <li><a href="label.html">Label</a></li>
- <li><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
- <li><a href="progress-bar.html">Progress Bar</a></li>
- <li><a href="thumbnail.html">Thumbnail</a></li>
- <li><a href="tooltip.html">Tooltip <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Plugins</li>
- <li><a href="abide.html">Abide <small>Form Validation</small></a></li>
- <li><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
- <li><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
- <li><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
- <li><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
-
- <li class="docs-nav-title">Sass</li>
- <li><a href="sass-functions.html">Functions</a></li>
- <li><a href="sass-mixins.html">Mixins</a></li>
-
- <li class="docs-nav-title">Libraries</li>
- <li><a href="motion-ui.html">Motion UI</a></li>
- <li><a href="panini.html">Panini</a></li>
- <li><a href="style-sherpa.html">Style Sherpa</a></li>
-
- <li class="docs-nav-title">Older Versions</li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
- <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
- <li><a href="https://get.foundation/sites/docs/v/3.2.5/">Foundation 3</a></li>
- <li><a href="https://get.foundation/sites/docs/v/2.2.1/">Foundation 2</a></li>
- </ul>
-
- </div>
- </div>
-
- <!-- Small Business(Docs) -->
- <section id="studiosCallout">
- <div class="row">
- <div class="medium-4 large-4 columns">
- <img src="https://get.foundation/assets/img/smallbiz-footer.svg" alt="">
- </div>
- <div class="medium-8 large-8 columns banner-info">
- <div class="row column property-label">ZURB Foundation</div>
- <h3 class="light">Yeah, we can help with that.</h3>
- <p class="lead"> We’ll collaborate with your team throughout the entire project life cycle. We’ll take your concept and move it through ideation, hi-fi wireframes, visual design and code, all while informing you on the whys and hows along the way.</p>
- <div class="course-buttons">
- <a href="https://get.foundation/get-involved/premium-support.html" class="studios button" data-zcom-event="studios_foundation_click" id="foundationSmallV1">Show Me How →</a>
- </div>
- </div>
- </div>
- </section>
-
- <div class="docs-newsletter">
- <div class="row">
- <div class="medium-7 large-8 columns">
- <a target="_blank" href="https://get.foundation/learn/responsive-reading.html">
- <h5 class="">Download ZURB’s 21 Responsive Trends That Will Shape 2017</h5>
- <p style="margin-bottom: 0;">Stay informed with amazing responsive trends each month from ZURB.</p>
- </a>
- </div>
- <div class="medium-5 large-4 footer-signup-form columns">
- <a style="margin-bottom: 0;" target="_blank" href="https://get.foundation/learn/responsive-reading.html" class="button expanded">Download the PDF</a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-top bg-fblue">
- <div class="row property">
- <div class="medium-4 columns">
- <div class="property-info">
- <h3>Foundation for Sites</h3>
- <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
- </p>
- </div>
- </div>
-
- <div class="medium-8 columns">
- <div class="row collapse">
- <div class="medium-4 columns">
- <div class="learn-links">
- <h4 class="hide-for-small">Want more?</h4>
- <ul>
- <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
- <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
- <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
- <li><a href="http://zurb.com/university/courses">Training</a></li>
- <li><a href="http://zurb.com/library">Design Resources</a></li>
- </ul>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="support-links">
- <h4 class="hide-for-small">Talk to us</h4>
- <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
- <p><a href="https://get.foundation/get-involved/contribute.html">Get involved in<br>our amazing community.</a></p>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="connect-links">
- <h4 class="hide-for-small">Stay Updated</h4>
- <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
- <a href="http://zurb.com/news" class="small button">Stay Connected</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="row global">
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/studios" class="footer-link-block services">
- <span class="title">Studios</span>
- <span>Helping more than 200 startups succeed since 1998.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="https://get.foundation/" class="footer-link-block foundation">
- <span class="title">Foundation</span>
- <span>The most advanced front-end framework in the world.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/notable" class="footer-link-block apps">
- <span class="title">Notable Design Apps</span>
- <span>Prototype, iterate and collect feedback on your products.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/university" class="footer-link-block expo">
- <span class="title">University</span>
- <span>Ideas, thoughts and design resources shared with you.</span>
- </a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-bottom">
- <div class="row">
- <div class="medium-4 medium-push-8 columns">
- <ul class="home-social">
- <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
- <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
- <li><a href="http://zurb.com/contact" class="mail"></a></li>
- </ul>
- </div>
- <div class="medium-8 medium-pull-4 columns">
- <a href="http://www.zurb.com" class="zurb-logo regular"></a>
- <ul class="zurb-links">
- <li><a href="http://zurb.com/about">About</a></li>
- <li><a href="http://zurb.com/blog">Blog</a></li>
- <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
- <li><a href="http://zurb.com/contact">Contact</a></li>
- <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
- </ul>
- <p class="copyright">© 1998‐2016 ZURB, Inc. All rights reserved.</p>
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- <script>
- var _gaq = _gaq || [];
- _gaq.push(
- ['_setAccount', 'UA-2195009-2'],
- ['_trackPageview'],
- ['b._setAccount', 'UA-2195009-27'],
- ['b._trackPageview']
- );
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
-
- <script src="assets/js/vendor.js?hash=34e00ebde33b9ab99326887532788bf5"></script>
- <script src="assets/js/foundation.js?hash=c542c25e8f7c526c7aad1397c6937110"></script>
- <script src="assets/js/docs.js?hash=0df9954faff86ef7c6e87dcf70a2fbcd"></script>
- <script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
-</body>
-</html>
+++ /dev/null
-<!doctype html>
-<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
-<html class="no-js" lang="en" dir="ltr">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="Modal dialogs, or pop-up windows, are handy for prototyping and production. Foundation includes Reveal, our jQuery modal plugin, to make this easy for you.">
- <link rel="icon" href="assets/img/icons/foundation-favicon.ico" type="image/x-icon">
- <title>Foundation for Sites 6 Docs | Reveal</title>
- <link href="assets/css/docs.css?hash=c343002bb7a7aed0ac5cce353b4c7c76" rel="stylesheet" />
- <link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=5cd5e0f6fc13b7f6708c59a2462be711" rel="stylesheet">
- <!-- <link rel="stylesheet" href="./node_modules/motion-ui/dist/motion-ui.css" /> -->
-</head>
-<body>
-
- <div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
-
- <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="mobile-ofc vertical menu">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
-
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/support.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/sort/unanswered">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
- </div>
-
- <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="vertical menu">
- <li><a href="#">Foundation</a></li>
- <li><a href="#">Dot</a></li>
- <li><a href="#">ZURB</a></li>
- <li><a href="#">Com</a></li>
- <li><a href="#">Slash</a></li>
- <li><a href="#">Sites</a></li>
- </ul>
- </div>
-
-
- <div class="off-canvas-content" data-off-canvas-content>
- <!-- Info Banner For Announcements or Links -->
- <!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
- <div class="info">
- <h5>Foundation 6 is here!</h5>
- </div>
- </a> -->
-
- <nav class="marketing-topbar show-for-medium">
-
- <ul class="menu">
- <li class="topbar-title"><a href="https://get.foundation/index.html"><img src="assets/img/logos/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
- </ul>
-
- <ul class="dropdown menu" data-dropdown-menu data-click-open="false">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/" target="_blank">F5 Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="https://get.foundation/emails/docs/" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
-
- </nav>
-
- <div class="title-bar hide-for-medium">
- <div class="title-bar-left">
- <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
- <span class="title-bar-title">Foundation</span>
- </div>
- </div>
-
-
- <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
-
- <div class="expanded row">
- <div class="medium-9 large-10 medium-push-3 large-push-2 columns">
-
-<article class="docs-component" id="docs-reveal">
-
-<a href="#docs-menu" class="small secondary expanded button hide-for-medium">Jump to Nav</a>
-
-<header>
- <h1 class="docs-page-title">Reveal</h1>
-
- <span data-tooltip title="Requires a JavaScript library." class="docs-js label">JavaScript</span>
- <span data-tooltip title="Supports Motion UI transitions." class="docs-mui label">Motion UI</span>
-
- <p class="lead docs-page-lead">Modal dialogs, or pop-up windows, are handy for prototyping and production. Foundation includes Reveal, our jQuery modal plugin, to make this easy for you.</p>
-
- <ul class="menu simple docs-contribute-menu">
- <li><a href="https://github.com/zurb/foundation-sites/edit/master/docs/pages/reveal.md" target="_blank"><i class="fi-pencil"></i>Edit this Page</a></li>
- <li><a href="https://github.com/zurb/foundation-sites/issues/new?title=%5BReveal%5D%20ISSUE%20NAME%20HERE" target="_blank"><i class="fi-social-github"></i>Report a Bug</a></li>
- <li><a href="https://get.foundation/forum" target="_blank"><i class="fi-comment"></i>Get Help</a></li>
- </ul>
-</header>
-
-<hr>
-
-<div class="row">
-
-<div class="large-9 columns" id="docs">
-
-<h2 id="basics" class="docs-heading" data-magellan-target="basics">Basics<a class="docs-heading-icon" href="#basics"></a></h2><p>A modal is just an empty container, so you can put any kind of content inside it, from text to forms to video to an entire grid.</p>
-<div class="callout primary">
- <p>Please note that we removed the option for AJAX loaded modals in Foundation 6. We did make it very easy to implement on your own though, check out a sample in the <span><a href="#advanced-options">Advanced</a></span> section.</p>
-</div>
-
-<p>To create a modal, add the class <code>.reveal</code>, the attribute <code>data-reveal</code>, and a unique ID to a container.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"reveal"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"exampleModal1"</span> <span class="hljs-attr">data-reveal</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">h1</span>></span>Awesome. I Have It.<span class="hljs-tag"></<span class="hljs-name">h1</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"lead"</span>></span>Your couch. It is mine.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span>I'm a cool paragraph that lives inside of an even cooler modal. Wins!<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"close-button"</span> <span class="hljs-attr">data-close</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close modal"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">aria-hidden</span>=<span class="hljs-string">"true"</span>></span>&times;<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">button</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="reveal" id="exampleModal1" data-reveal>
- <h1>Awesome. I Have It.</h1>
- <p class="lead">Your couch. It is mine.</p>
- <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
- <button class="close-button" data-close aria-label="Close modal" type="button">
- <span aria-hidden="true">×</span>
- </button>
-</div></div><p>You'll also need a way to open the modal. Add the attribute <code>data-open</code> to any element. The value of <code>data-open</code> should be the ID of the modal.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">p</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">data-open</span>=<span class="hljs-string">"exampleModal1"</span>></span>Click me for a modal<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">p</span>></span></code></pre></div>
-
-<div class="docs-code-live"><p><a data-open="exampleModal1">Click me for a modal</a></p></div><p>You'll also need a way to <em>close</em> the modal from inside. By default, modals will close if clicked outside of, or if the <kbd>esc</kbd> key is pressed. However, you'll generally also want to add your own click trigger. Add the attribute <code>data-close</code> to any element within the modal to add one.</p>
-<p>You can use our handy <a href="close-button.html">close button</a> styles to do this:</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"close-button"</span> <span class="hljs-attr">data-close</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close modal"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">aria-hidden</span>=<span class="hljs-string">"true"</span>></span>&times;<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></pre></div><hr>
-<h2 id="sizing" class="docs-heading" data-magellan-target="sizing">Sizing<a class="docs-heading-icon" href="#sizing"></a></h2><p>On small screens, a modal is always 100% of the width of the screen. On medium-sized screens and larger, the width changes to 80%.</p>
-<p>The size of a modal can be changed with these sizing classes, which are added to the modal container:</p>
-<ul>
-<li><code>.tiny</code>: 30% wide</li>
-<li><code>.small</code>: 50% wide</li>
-<li><code>.large</code>: 90% wide</li>
-<li><code>.full</code>: 100% width <em>and</em> height, defaults the <code>escClose</code> option to true, as well as creates a close button.</li>
-</ul>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tiny reveal"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"exampleModal"</span> <span class="hljs-attr">data-reveal</span>></span>
- <span class="hljs-comment"><!-- ... --></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div><p><a data-toggle="exampleModal5" aria-controls="exampleModal5">Click me for a tiny modal</a></p>
-
-<div class="tiny reveal" id="exampleModal5" data-reveal>
- <p>OH I'M SO TIIINY</p>
- <button class="close-button" data-close aria-label="Close reveal" type="button">
- <span aria-hidden="true">×</span>
- </button>
-</div>
-
-<p><a data-toggle="exampleModal6">Click me for a small modal</a></p>
-
-<div class="small reveal" id="exampleModal6" data-reveal>
- <p>I may be small, but I've got a big heart!</p>
- <button class="close-button" data-close aria-label="Close reveal" type="button">
- <span aria-hidden="true">×</span>
- </button>
-</div>
-
-<p><a data-toggle="exampleModal7">Click me for a large modal</a></p>
-
-<div class="large reveal" id="exampleModal7" data-reveal>
- <p>I'm big, like bear!</p>
- <button class="close-button" data-close aria-label="Close reveal" type="button">
- <span aria-hidden="true">×</span>
- </button>
-</div>
-
-<hr>
-<h2 id="nested-modal" class="docs-heading" data-magellan-target="nested-modal">Nested Modal<a class="docs-heading-icon" href="#nested-modal"></a></h2><p>It's possible for modals to open other modals. Create a second modal with a unique ID, and then add a click trigger with <code>data-open</code> inside the first modal.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">p</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">data-open</span>=<span class="hljs-string">"exampleModal2"</span>></span>Click me for a modal<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">p</span>></span>
-
-<span class="hljs-comment"><!-- This is the first modal --></span>
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"reveal"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"exampleModal2"</span> <span class="hljs-attr">data-reveal</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">h1</span>></span>Awesome!<span class="hljs-tag"></<span class="hljs-name">h1</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"lead"</span>></span>I have another modal inside of me!<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">data-open</span>=<span class="hljs-string">"exampleModal3"</span>></span>Click me for another modal!<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"close-button"</span> <span class="hljs-attr">data-close</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close reveal"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">aria-hidden</span>=<span class="hljs-string">"true"</span>></span>&times;<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">button</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
-<span class="hljs-comment"><!-- This is the nested modal --></span>
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"reveal"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"exampleModal3"</span> <span class="hljs-attr">data-reveal</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">h2</span>></span>ANOTHER MODAL!!!<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"close-button"</span> <span class="hljs-attr">data-close</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close reveal"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">aria-hidden</span>=<span class="hljs-string">"true"</span>></span>&times;<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">button</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><p><a data-open="exampleModal2">Click me for a modal</a></p>
-
-<!-- This is the first modal -->
-<div class="reveal" id="exampleModal2" data-reveal>
- <h1>Awesome!</h1>
- <p class="lead">I have another modal inside of me!</p>
- <a class="button" data-open="exampleModal3">Click me for another modal!</a>
- <button class="close-button" data-close aria-label="Close reveal" type="button">
- <span aria-hidden="true">×</span>
- </button>
-</div>
-
-<!-- This is the nested modal -->
-<div class="reveal" id="exampleModal3" data-reveal>
- <h2>ANOTHER MODAL!!!</h2>
- <button class="close-button" data-close aria-label="Close reveal" type="button">
- <span aria-hidden="true">×</span>
- </button>
-</div></div><hr>
-<h2 id="full-screen" class="docs-heading" data-magellan-target="full-screen">Full-screen<a class="docs-heading-icon" href="#full-screen"></a></h2><p>A full-screen modal is 100% of the width <em>and</em> height of the window. Add the <code>.full</code> class to make it go.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">p</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">data-toggle</span>=<span class="hljs-string">"exampleModal8"</span>></span>Click me for a full-screen modal<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">p</span>></span>
-
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"full reveal"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"exampleModal8"</span> <span class="hljs-attr">data-reveal</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span>OH I'M SO FUUUUL<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"http://placekitten.com/1920/1280"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Intropsective Cage"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"close-button"</span> <span class="hljs-attr">data-close</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close reveal"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">aria-hidden</span>=<span class="hljs-string">"true"</span>></span>&times;<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">button</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><p><a data-toggle="exampleModal8">Click me for a full-screen modal</a></p>
-
-<div class="full reveal" id="exampleModal8" data-reveal>
- <p>OH I'M SO FUUUUL</p>
- <img src="http://placekitten.com/1920/1280" alt="Intropsective Cage">
- <button class="close-button" data-close aria-label="Close reveal" type="button">
- <span aria-hidden="true">×</span>
- </button>
-</div></div><h2 id="advanced-options" class="docs-heading" data-magellan-target="advanced-options">Advanced Options<a class="docs-heading-icon" href="#advanced-options"></a></h2><h3 id="no-overlay" class="docs-heading">No Overlay<a class="docs-heading-icon" href="#no-overlay"></a></h3><p>To remove the overlay, add the attribute <code>data-overlay="false"</code> to the modal.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">p</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">data-toggle</span>=<span class="hljs-string">"exampleModal9"</span>></span>Click me for an overlay-lacking modal<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">p</span>></span>
-
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"reveal"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"exampleModal9"</span> <span class="hljs-attr">data-reveal</span> <span class="hljs-attr">data-overlay</span>=<span class="hljs-string">"false"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span>I feel so free!<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"close-button"</span> <span class="hljs-attr">data-close</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close reveal"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">aria-hidden</span>=<span class="hljs-string">"true"</span>></span>&times;<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">button</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><p><a data-toggle="exampleModal9">Click me for an overlay-lacking modal</a></p>
-
-<div class="reveal" id="exampleModal9" data-reveal data-overlay="false">
- <p>I feel so free!</p>
- <button class="close-button" data-close aria-label="Close reveal" type="button">
- <span aria-hidden="true">×</span>
- </button>
-</div></div><hr>
-<h3 id="animations" class="docs-heading">Animations<a class="docs-heading-icon" href="#animations"></a></h3><p>To use animations from the Motion UI library, include the <code>data-animation-in="someAnimationIn"</code> and <code>data-animation-out="someAnimationOut"</code> attributes.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">p</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">data-toggle</span>=<span class="hljs-string">"animatedModal10"</span>></span>Click me for a modal<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">p</span>></span>
-
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"reveal"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"animatedModal10"</span> <span class="hljs-attr">data-reveal</span> <span class="hljs-attr">data-close-on-click</span>=<span class="hljs-string">"true"</span> <span class="hljs-attr">data-animation-in</span>=<span class="hljs-string">"spin-in"</span> <span class="hljs-attr">data-animation-out</span>=<span class="hljs-string">"spin-out"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">h1</span>></span>Whoa, I'm dizzy!<span class="hljs-tag"></<span class="hljs-name">h1</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">'lead'</span>></span>There are many options for animating modals, check out the Motion UI library to see them all<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"close-button"</span> <span class="hljs-attr">data-close</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close reveal"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">aria-hidden</span>=<span class="hljs-string">"true"</span>></span>&times;<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">button</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><p><a data-toggle="animatedModal10">Click me for a modal</a></p>
-
-<div class="reveal" id="animatedModal10" data-reveal data-close-on-click="true" data-animation-in="spin-in" data-animation-out="spin-out">
- <h1>Whoa, I'm dizzy!</h1>
- <p class='lead'>There are many options for animating modals, check out the Motion UI library to see them all</p>
- <button class="close-button" data-close aria-label="Close reveal" type="button">
- <span aria-hidden="true">×</span>
- </button>
-</div></div><hr>
-<h3 id="ajax" class="docs-heading">AJAX<a class="docs-heading-icon" href="#ajax"></a></h3><p>To use AJAX to load your modal content, use the code snippet below.</p>
-<div class="docs-code" data-docs-code><pre><code class="js"><span class="hljs-keyword">var</span> $modal = $(<span class="hljs-string">'#modal'</span>);
-
-$.ajax(<span class="hljs-string">'/url'</span>)
- .done(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">resp</span>)</span>{
- $modal.html(resp.html).foundation(<span class="hljs-string">'open'</span>);
-});</code></pre></div><hr>
-<h2 id="accessibility" class="docs-heading" data-magellan-target="accessibility">Accessibility<a class="docs-heading-icon" href="#accessibility"></a></h2><p>Modals by default are accessible through the use of various ARIA attributes. To make a modal even more accessible, designate a label to the modal by adding <code>aria-labelledby="exampleModalHeader11"</code> to the container and <code>id="exampleModalHeader11"</code> to the elment you want to designate as the label.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">p</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">data-open</span>=<span class="hljs-string">"exampleModal11"</span>></span>Click me for a modal<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">p</span>></span>
-
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"reveal"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"exampleModal11"</span> <span class="hljs-attr">aria-labelledby</span>=<span class="hljs-string">"exampleModalHeader11"</span> <span class="hljs-attr">data-reveal</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"exampleModalHeader11"</span>></span>Label for the Modal!<span class="hljs-tag"></<span class="hljs-name">h1</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"lead"</span>></span>I am even more accessible than the other modals.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"close-button"</span> <span class="hljs-attr">data-close</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close Accessible Modal"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">aria-hidden</span>=<span class="hljs-string">"true"</span>></span>&times;<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">button</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><p><a data-open="exampleModal11">Click me for a modal</a></p>
-
-<div class="reveal" id="exampleModal11" aria-labelledby="exampleModalHeader11" data-reveal>
- <h1 id="exampleModalHeader11">Label for the Modal!</h1>
- <p class="lead">I am even more accessible than the other modals.</p>
- <button class="close-button" data-close aria-label="Close Accessible Modal" type="button">
- <span aria-hidden="true">×</span>
- </button>
-</div></div>
-
-<hr>
-<section>
- <h2 id="sass-reference" class="docs-heading" data-magellan-target="sass-reference">Sass Reference<a class="docs-heading-icon" href="#sass-reference"></a></h2>
-
- <section>
- <h3 id="sass-variables" class="docs-heading">Variables<a class="docs-heading-icon" href="#sass-variables"></a></h3>
-
- <p>The default styles of this component can be customized using these Sass variables in your project's <a href="sass.html#the-settings-file">settings file</a>.</p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td class="name"><code>$reveal-background</code></td>
- <td>Color</td>
- <td class="color"><code>$white</code></td>
- <td><p>Default background color of a modal.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$reveal-width</code></td>
- <td>Number</td>
- <td class="number"><code>600px</code></td>
- <td><p>Default width of a modal, with no class applied.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$reveal-max-width</code></td>
- <td>Number</td>
- <td class="number"><code>$global-width</code></td>
- <td><p>Default maximum width of a modal.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$reveal-padding</code></td>
- <td>Number</td>
- <td class="number"><code>$global-padding</code></td>
- <td><p>Default padding inside a modal.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$reveal-border</code></td>
- <td>Number</td>
- <td class="number"><code>1px solid $medium-gray</code></td>
- <td><p>Default border around a modal.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$reveal-radius</code></td>
- <td>Number</td>
- <td class="number"><code>$global-radius</code></td>
- <td><p>Default radius for modal.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$reveal-zindex</code></td>
- <td>Number</td>
- <td class="number"><code>1005</code></td>
- <td><p>z-index for modals. The overlay uses this value, while the modal itself uses this value plus one.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$reveal-overlay-background</code></td>
- <td>Color</td>
- <td class="color"><code>rgba($black, 0.45)</code></td>
- <td><p>Background color of modal overlays.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="sass-mixins" class="docs-heading">Mixins<a class="docs-heading-icon" href="#sass-mixins"></a></h3>
-
- <p>We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.</p>
-
-
- <section >
- <h4 id="reveal-overlay" class="docs-heading">reveal-overlay<a class="docs-heading-icon" href="#reveal-overlay"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> reveal-overlay(<span class="hljs-variable">$background</span>);</code></pre>
- </div>
-
- <p>Adds styles for a modal overlay.</p>
-
-
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$background</code></td>
- <td>Color</td>
- <td><code>$reveal-overlay-background</code></td>
- <td><p>Background color of the overlay.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="reveal-modal-base" class="docs-heading">reveal-modal-base<a class="docs-heading-icon" href="#reveal-modal-base"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> reveal-modal-base;</code></pre>
- </div>
-
- <p>Adds base styles for a modal.</p>
-
-
-
-
-
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="reveal-modal-width" class="docs-heading">reveal-modal-width<a class="docs-heading-icon" href="#reveal-modal-width"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> reveal-modal-width(<span class="hljs-variable">$width</span>, <span class="hljs-variable">$max-width</span>);</code></pre>
- </div>
-
- <p>Adjusts the width of a modal.</p>
-
-
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$width</code></td>
- <td>Number</td>
- <td><code><span style="color: #999;">None</span></code></td>
- <td><p>Width of the modal. Generally a percentage.</p>
-</td>
- </tr>
- <tr>
- <td><code>$max-width</code></td>
- <td>Number</td>
- <td><code>$reveal-max-width</code></td>
- <td><p>Maximum width of the modal.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="reveal-modal-fullscreen" class="docs-heading">reveal-modal-fullscreen<a class="docs-heading-icon" href="#reveal-modal-fullscreen"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> reveal-modal-fullscreen;</code></pre>
- </div>
-
- <p>Creates a full-screen modal, which stretches the full width and height of the window.</p>
-
-
-
-
-
- </section>
-
-
-
-
-
- </section>
-
-
-</section>
-
-<hr>
-<section>
- <h2 id="javascript-reference" class="docs-heading" data-magellan-target="javascript-reference">JavaScript Reference<a class="docs-heading-icon" href="#javascript-reference"></a></h2>
-
-
- <section>
- <h3 id="js-module" class="docs-heading">Initializing<a class="docs-heading-icon" href="#js-module"></a></h3>
-
- <p>The file <code>foundation.reveal.js</code> must be included in your JavaScript to use this plugin, along with <code>foundation.core.js</code>. <strong>This plugin also requires these utility libraries:</strong></p>
-
-
- <ul>
- <li><code>foundation.util.keyboard.js</code></li>
- </ul>
-
- <ul>
- <li><code>foundation.util.box.js</code></li>
- </ul>
-
- <ul>
- <li><code>foundation.util.triggers.js</code></li>
- </ul>
-
- <ul>
- <li><code>foundation.util.mediaQuery.js</code></li>
- </ul>
-
- <ul>
- <li><code>foundation.util.motion.js</code></li>
- </ul>
-
-
- </section>
-
-
- <section>
- <h3 id="js-class" class="docs-heading">Foundation.Reveal<a class="docs-heading-icon" href="#js-class"></a></h3>
-
- <p>Creates a new instance of Reveal.</p>
-
-
- <div class="docs-code"><pre><code><span class="hljs-keyword">var</span> elem = <span class="hljs-keyword">new</span> Foundation.Reveal(element, options);</code></pre></div>
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>element</code></td>
- <td>jQuery</td>
- <td>jQuery object to use for the modal.</td>
- </tr>
- <tr>
- <td><code>options</code></td>
- <td>Object</td>
- <td>optional parameters.</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="js-options" class="docs-heading">Plugin Options<a class="docs-heading-icon" href="#js-options"></a></h3>
-
- <p>Use these options to customize an instance of Reveal. Plugin options can be set as individual data attributes, one combined <code>data-options</code> attribute, or as an object passed to the plugin's constructor. <a href="javascript.html#initializing">Learn more about how JavaScript plugins are initialized.</a></p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Default</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>data-animation-in</code></td>
- <td><code>slide-in-left</code></td>
- <td>Motion-UI class to use for animated elements. If none used, defaults to simple show/hide.</td>
- </tr>
- <tr>
- <td><code>data-animation-out</code></td>
- <td><code>slide-out-right</code></td>
- <td>Motion-UI class to use for animated elements. If none used, defaults to simple show/hide.</td>
- </tr>
- <tr>
- <td><code>data-show-delay</code></td>
- <td><code>10</code></td>
- <td>Time, in ms, to delay the opening of a modal after a click if no animation used.</td>
- </tr>
- <tr>
- <td><code>data-hide-delay</code></td>
- <td><code>10</code></td>
- <td>Time, in ms, to delay the closing of a modal after a click if no animation used.</td>
- </tr>
- <tr>
- <td><code>data-close-on-click</code></td>
- <td><code>true</code></td>
- <td>Allows a click on the body/overlay to close the modal.</td>
- </tr>
- <tr>
- <td><code>data-close-on-esc</code></td>
- <td><code>true</code></td>
- <td>Allows the modal to close if the user presses the `ESCAPE` key.</td>
- </tr>
- <tr>
- <td><code>data-multiple-opened</code></td>
- <td><code>false</code></td>
- <td>If true, allows multiple modals to be displayed at once.</td>
- </tr>
- <tr>
- <td><code>data-v-offset</code></td>
- <td><code>auto</code></td>
- <td>Distance, in pixels, the modal should push down from the top of the screen.</td>
- </tr>
- <tr>
- <td><code>data-h-offset</code></td>
- <td><code>auto</code></td>
- <td>Distance, in pixels, the modal should push in from the side of the screen.</td>
- </tr>
- <tr>
- <td><code>data-full-screen</code></td>
- <td><code>false</code></td>
- <td>Allows the modal to be fullscreen, completely blocking out the rest of the view. JS checks for this as well.</td>
- </tr>
- <tr>
- <td><code>data-btm-offset-pct</code></td>
- <td><code>10</code></td>
- <td>Percentage of screen height the modal should push up from the bottom of the view.</td>
- </tr>
- <tr>
- <td><code>data-overlay</code></td>
- <td><code>true</code></td>
- <td>Allows the modal to generate an overlay div, which will cover the view when modal opens.</td>
- </tr>
- <tr>
- <td><code>data-reset-on-close</code></td>
- <td><code>false</code></td>
- <td>Allows the modal to remove and reinject markup on close. Should be true if using video elements w/o using provider's api, otherwise, videos will continue to play in the background.</td>
- </tr>
- <tr>
- <td><code>data-deep-link</code></td>
- <td><code>false</code></td>
- <td>Allows the modal to alter the url on open/close, and allows the use of the `back` button to close modals. ALSO, allows a modal to auto-maniacally open on page load IF the hash === the modal's user-set id.</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="js-events" class="docs-heading">Events<a class="docs-heading-icon" href="#js-events"></a></h3>
-
- <p>These events will fire from any element with a Reveal plugin attached.</p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>closeme.zf.reveal</code></td>
- <td>Fires immediately before the modal opens.
-Closes any other modals that are currently open</td>
- </tr>
- <tr>
- <td><code>open.zf.reveal</code></td>
- <td>Fires when the modal has successfully opened.</td>
- </tr>
- <tr>
- <td><code>closed.zf.reveal</code></td>
- <td>Fires when the modal is done closing.</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="js-functions" class="docs-heading">Methods<a class="docs-heading-icon" href="#js-functions"></a></h3>
-
- <section>
- <h4 id="open" class="docs-heading">open<a class="docs-heading-icon" href="#open"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'open'</span>);</code></pre>
- </div>
-
- <p>Opens the modal controlled by <code>this.$anchor</code>, and closes all others by default.</p>
-
-
- <p><strong>Fires these events:</strong>
- Reveal#event:closeme
- Reveal#event:open
- </p>
-
-
- <hr>
- </section>
- <section>
- <h4 id="close" class="docs-heading">close<a class="docs-heading-icon" href="#close"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'close'</span>);</code></pre>
- </div>
-
- <p>Closes the modal.</p>
-
-
- <p><strong>Fires these events:</strong>
- Reveal#event:closed
- </p>
-
-
- <hr>
- </section>
- <section>
- <h4 id="toggle" class="docs-heading">toggle<a class="docs-heading-icon" href="#toggle"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'toggle'</span>);</code></pre>
- </div>
-
- <p>Toggles the open/closed state of a modal.</p>
-
-
-
-
- <hr>
- </section>
- <section>
- <h4 id="destroy" class="docs-heading">destroy<a class="docs-heading-icon" href="#destroy"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'destroy'</span>);</code></pre>
- </div>
-
- <p>Destroys an instance of a modal.</p>
-
-
-
-
-
- </section>
- </section>
-</section>
-
-<!-- <hr> -->
-<!-- <section class="docs-building-blocks">
- <h2 id="building-blocks" class="docs-heading" data-magellan-target="building-blocks">Building Blocks<a class="docs-heading-icon" href="#building-blocks"></a></h2>
-
- <p><a href="http://zurb.com/building-blocks">Building Blocks</a> is a ZURB-curated resource with useful code snippets that use Foundation components. Here are a few for this component:</p>
-
- <div class="warning callout">
- <p>These are placeholder items. If you have ideas for building blocks for this component, <a href="https://github.com/zurb/foundation-sites-6/issues/118">we're taking ideas on GitHub</a>.</p>
- </div>
-
- <div data-building-blocks></div>
-</section> -->
-
-</div>
-
-<div class="large-3 columns" data-sticky-container>
- <nav class="columns docs-toc-wrap" data-sticky data-anchor="docs" data-sticky-on="large">
- <div class="docs-toc hide" id="docsTOC">
- <ul class="vertical menu" data-docs-toc>
- <li class="docs-nav-title">On this page:</li>
- </ul>
- </div>
- <div class="foundation-toc-ad-unit" id="TOCAdUnit">
- </div>
- </nav>
-</div>
-
-</div>
-
-</article>
-
- </div>
- <div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
- <ul class="vertical menu docs-nav" id="docs-menu">
- <p class="docs-nav-version">
- <span data-docs-version></span>
- <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">(Changelog)</a>
- </p>
-
- <li class="docs-nav-title">Getting Started</li>
- <li><a href="installation.html">Installation</a></li>
- <li><a href="starter-projects.html">Starter Projects</a></li>
- <li><a href="compatibility.html">Compatibility</a></li>
- <li><a href="accessibility.html">Accessibility</a></li>
- <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
-
- <li class="docs-nav-title">Setup</li>
- <li><a href="global.html">Global Styles</a></li>
- <li><a href="rtl.html">Right-to-Left Support</a></li>
- <li><a href="flexbox.html">Flexbox</a></li>
- <li><a href="sass.html">Sass</a></li>
- <li><a href="javascript.html">JavaScript</a></li>
- <li><a href="javascript-utilities.html">JavaScript Utilities</a></li>
- <li><a href="media-queries.html">Media Queries</a></li>
-
- <li class="docs-nav-title">General</li>
- <li><a href="grid.html">Grid</a></li>
- <li><a href="flex-grid.html">Flex Grid</a></li>
- <li><a href="forms.html">Forms</a></li>
- <li><a href="visibility.html">Visibility Classes</a></li>
- <li><a href="float-classes.html">Float Classes</a></li>
-
- <li class="docs-nav-title">Typography</li>
- <li><a href="typography-base.html">Base Styles</a></li>
- <li><a href="typography-helpers.html">Helper Classes</a></li>
-
- <li class="docs-nav-title">Controls</li>
- <li><a href="button.html">Button</a></li>
- <li><a href="button-group.html">Button Group</a></li>
- <li><a href="close-button.html">Close Button</a></li>
- <li><a href="slider.html">Slider <span class="label">JS</span></a></li>
- <li><a href="switch.html">Switch</a></li>
-
- <li class="docs-nav-title">Navigation</li>
- <li><a href="navigation.html">Overview</a></li>
- <li><a href="menu.html">Menu</a></li>
- <li><a href="dropdown-menu.html">Dropdown Menu <span class="label">JS</span></a></li>
- <li><a href="drilldown-menu.html">Drilldown Menu <span class="label">JS</span></a></li>
- <li><a href="accordion-menu.html">Accordion Menu <span class="label">JS</span></a></li>
- <li><a href="top-bar.html">Top Bar</a></li>
- <li><a href="responsive-navigation.html">Responsive Navigation</a></li>
- <li><a href="magellan.html">Magellan <span class="label">JS</span></a></li>
- <li><a href="pagination.html">Pagination</a></li>
- <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
-
- <li class="docs-nav-title">Containers</li>
- <li><a href="accordion.html">Accordion <span class="label">JS</span></a></li>
- <li><a href="callout.html">Callout</a></li>
- <li><a href="dropdown.html">Dropdown <span class="label">JS</span></a></li>
- <li><a href="media-object.html">Media Object</a></li>
- <li><a href="off-canvas.html">Off-canvas <span class="label">JS</span></a></li>
- <li class="current"><a href="reveal.html">Reveal <span class="label">JS</span> <small>Modal</small></a></li>
- <li><a href="table.html">Table</a></li>
- <li><a href="tabs.html">Tabs <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Media</li>
- <li><a href="badge.html">Badge</a></li>
- <li><a href="flex-video.html">Flex Video</a></li>
- <li><a href="label.html">Label</a></li>
- <li><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
- <li><a href="progress-bar.html">Progress Bar</a></li>
- <li><a href="thumbnail.html">Thumbnail</a></li>
- <li><a href="tooltip.html">Tooltip <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Plugins</li>
- <li><a href="abide.html">Abide <small>Form Validation</small></a></li>
- <li><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
- <li><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
- <li><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
- <li><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
-
- <li class="docs-nav-title">Sass</li>
- <li><a href="sass-functions.html">Functions</a></li>
- <li><a href="sass-mixins.html">Mixins</a></li>
-
- <li class="docs-nav-title">Libraries</li>
- <li><a href="motion-ui.html">Motion UI</a></li>
- <li><a href="panini.html">Panini</a></li>
- <li><a href="style-sherpa.html">Style Sherpa</a></li>
-
- <li class="docs-nav-title">Older Versions</li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
- <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
- <li><a href="https://get.foundation/sites/docs/v/3.2.5/">Foundation 3</a></li>
- <li><a href="https://get.foundation/sites/docs/v/2.2.1/">Foundation 2</a></li>
- </ul>
-
- </div>
- </div>
-
- <!-- Small Business(Docs) -->
- <section id="studiosCallout">
- <div class="row">
- <div class="medium-4 large-4 columns">
- <img src="https://get.foundation/assets/img/smallbiz-footer.svg" alt="">
- </div>
- <div class="medium-8 large-8 columns banner-info">
- <div class="row column property-label">ZURB Foundation</div>
- <h3 class="light">Yeah, we can help with that.</h3>
- <p class="lead"> We’ll collaborate with your team throughout the entire project life cycle. We’ll take your concept and move it through ideation, hi-fi wireframes, visual design and code, all while informing you on the whys and hows along the way.</p>
- <div class="course-buttons">
- <a href="https://get.foundation/get-involved/premium-support.html" class="studios button" data-zcom-event="studios_foundation_click" id="foundationSmallV1">Show Me How →</a>
- </div>
- </div>
- </div>
- </section>
-
- <div class="docs-newsletter">
- <div class="row">
- <div class="medium-7 large-8 columns">
- <a target="_blank" href="https://get.foundation/learn/responsive-reading.html">
- <h5 class="">Download ZURB’s 21 Responsive Trends That Will Shape 2017</h5>
- <p style="margin-bottom: 0;">Stay informed with amazing responsive trends each month from ZURB.</p>
- </a>
- </div>
- <div class="medium-5 large-4 footer-signup-form columns">
- <a style="margin-bottom: 0;" target="_blank" href="https://get.foundation/learn/responsive-reading.html" class="button expanded">Download the PDF</a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-top bg-fblue">
- <div class="row property">
- <div class="medium-4 columns">
- <div class="property-info">
- <h3>Foundation for Sites</h3>
- <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
- </p>
- </div>
- </div>
-
- <div class="medium-8 columns">
- <div class="row collapse">
- <div class="medium-4 columns">
- <div class="learn-links">
- <h4 class="hide-for-small">Want more?</h4>
- <ul>
- <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
- <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
- <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
- <li><a href="http://zurb.com/university/courses">Training</a></li>
- <li><a href="http://zurb.com/library">Design Resources</a></li>
- </ul>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="support-links">
- <h4 class="hide-for-small">Talk to us</h4>
- <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
- <p><a href="https://get.foundation/get-involved/contribute.html">Get involved in<br>our amazing community.</a></p>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="connect-links">
- <h4 class="hide-for-small">Stay Updated</h4>
- <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
- <a href="http://zurb.com/news" class="small button">Stay Connected</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="row global">
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/studios" class="footer-link-block services">
- <span class="title">Studios</span>
- <span>Helping more than 200 startups succeed since 1998.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="https://get.foundation/" class="footer-link-block foundation">
- <span class="title">Foundation</span>
- <span>The most advanced front-end framework in the world.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/notable" class="footer-link-block apps">
- <span class="title">Notable Design Apps</span>
- <span>Prototype, iterate and collect feedback on your products.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/university" class="footer-link-block expo">
- <span class="title">University</span>
- <span>Ideas, thoughts and design resources shared with you.</span>
- </a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-bottom">
- <div class="row">
- <div class="medium-4 medium-push-8 columns">
- <ul class="home-social">
- <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
- <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
- <li><a href="http://zurb.com/contact" class="mail"></a></li>
- </ul>
- </div>
- <div class="medium-8 medium-pull-4 columns">
- <a href="http://www.zurb.com" class="zurb-logo regular"></a>
- <ul class="zurb-links">
- <li><a href="http://zurb.com/about">About</a></li>
- <li><a href="http://zurb.com/blog">Blog</a></li>
- <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
- <li><a href="http://zurb.com/contact">Contact</a></li>
- <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
- </ul>
- <p class="copyright">© 1998‐2016 ZURB, Inc. All rights reserved.</p>
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- <script>
- var _gaq = _gaq || [];
- _gaq.push(
- ['_setAccount', 'UA-2195009-2'],
- ['_trackPageview'],
- ['b._setAccount', 'UA-2195009-27'],
- ['b._trackPageview']
- );
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
-
- <script src="assets/js/vendor.js?hash=4cb4703b0a6de7a05bebb083d3616f10"></script>
- <script src="assets/js/foundation.js?hash=bd072782e6c76f3d67cfbdecd98445a3"></script>
- <script src="assets/js/docs.js?hash=776dc7da944d676c0ee6fab37e8d1e9f"></script>
- <script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
-</body>
-</html>
+++ /dev/null
-<!doctype html>
-<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
-<html class="no-js" lang="en" dir="ltr">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="Foundation can easily adapt its components to work with languages that read from right to left.">
- <link rel="icon" href="assets/img/icons/foundation-favicon.ico" type="image/x-icon">
- <title>Foundation for Sites 6 Docs | Right-to-Left Support</title>
- <link href="assets/css/docs.css?hash=8b4276061b8948fc3bd8f771ede3d5b0" rel="stylesheet" />
- <link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=b0ff230082fd0c7d80f7f8d0586e9e2f" rel="stylesheet">
- <!-- <link rel="stylesheet" href="./node_modules/motion-ui/dist/motion-ui.css" /> -->
-</head>
-<body>
-
- <div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
-
- <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="mobile-ofc vertical menu">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
-
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/support.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/sort/unanswered">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
- </div>
-
- <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="vertical menu">
- <li><a href="#">Foundation</a></li>
- <li><a href="#">Dot</a></li>
- <li><a href="#">ZURB</a></li>
- <li><a href="#">Com</a></li>
- <li><a href="#">Slash</a></li>
- <li><a href="#">Sites</a></li>
- </ul>
- </div>
-
-
- <div class="off-canvas-content" data-off-canvas-content>
- <!-- Info Banner For Announcements or Links -->
- <!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
- <div class="info">
- <h5>Foundation 6 is here!</h5>
- </div>
- </a> -->
-
- <nav class="marketing-topbar show-for-medium">
-
- <ul class="menu">
- <li class="topbar-title"><a href="https://get.foundation/index.html"><img src="assets/img/logos/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
- </ul>
-
- <ul class="dropdown menu" data-dropdown-menu data-click-open="false">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/" target="_blank">F5 Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="https://get.foundation/emails/docs/" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
-
- </nav>
-
- <div class="title-bar hide-for-medium">
- <div class="title-bar-left">
- <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
- <span class="title-bar-title">Foundation</span>
- </div>
- </div>
-
-
- <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
-
- <div class="expanded row">
- <div class="medium-9 large-10 medium-push-3 large-push-2 columns">
-
-<article class="docs-component" id="docs-right-to-left-support">
-
-<a href="#docs-menu" class="small secondary expanded button hide-for-medium">Jump to Nav</a>
-
-<header>
- <h1 class="docs-page-title">Right-to-Left Support</h1>
-
-
- <p class="lead docs-page-lead">Foundation can easily adapt its components to work with languages that read from right to left.</p>
-
- <ul class="menu simple docs-contribute-menu">
- <li><a href="https://github.com/zurb/foundation-sites/edit/master/docs/pages/rtl.md" target="_blank"><i class="fi-pencil"></i>Edit this Page</a></li>
- <li><a href="https://github.com/zurb/foundation-sites/issues/new?title=%5BRight-to-Left%20Support%5D%20ISSUE%20NAME%20HERE" target="_blank"><i class="fi-social-github"></i>Report a Bug</a></li>
- <li><a href="https://get.foundation/forum" target="_blank"><i class="fi-comment"></i>Get Help</a></li>
- </ul>
-</header>
-
-<hr>
-
-<div class="row">
-
-<div class="large-9 columns" id="docs">
-
-<h2 id="html" class="docs-heading" data-magellan-target="html">HTML<a class="docs-heading-icon" href="#html"></a></h2><p>You'll need to make a few changes to your markup to get the Javascript components working nice and smooth. In the <code><html></code> tag, you'll need to add a <code>dir</code> attribute with a value of <code>rtl</code>. Here's what your <code><html></code> tag should look like:</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-comment"><!-- This example is for a right-to-left Arabic layout --></span>
-<span class="hljs-tag"><<span class="hljs-name">html</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"no-js"</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"ar"</span> <span class="hljs-attr">dir</span>=<span class="hljs-string">"rtl"</span>></span></code></pre></div><h3 id="language-code" class="docs-heading">Language Code<a class="docs-heading-icon" href="#language-code"></a></h3><p>You'll need to change your lang attribute value to match your language. Here's a handy list of common right-to-left languages and their html codes.</p>
-<ul>
-<li><strong>Arabic:</strong> <code>ar</code></li>
-<li><strong>Chinese:</strong> <code>zh</code></li>
-<li><strong>Farsi:</strong> <code>fa</code></li>
-<li><strong>Hebrew:</strong> <code>he</code>, <code>iw</code></li>
-<li><strong>Japanese:</strong> <code>ja</code></li>
-<li><strong>Urdu:</strong> <code>ur</code></li>
-<li><strong>Yiddish:</strong> <code>yi</code>, <code>ji</code></li>
-</ul>
-<p>View of a <a href="http://www.loc.gov/standards/iso639-2/php/code_list.php">full list of language codes</a> on the website of the Library of Congress.</p>
-<hr>
-<h2 id="css-download" class="docs-heading" data-magellan-target="css-download">CSS Download<a class="docs-heading-icon" href="#css-download"></a></h2><p>If you use a CSS version of Foundation (the ones you can find on the <a href="https://get.foundation/sites/download">download page</a>), you'll need to create a custom download that includes RTL CSS instead of LTR. Just select "Right-to-left" under the Text Direction section of the customizer.</p>
-<hr>
-<h2 id="sass-configuration" class="docs-heading" data-magellan-target="sass-configuration">Sass Configuration<a class="docs-heading-icon" href="#sass-configuration"></a></h2><p>If you're using the Sass version of Foundation, open your project's <a href="sass.html#the-settings-file">settings file</a> (<code>settings.scss</code>) and change this variable in the Global section:</p>
-<div class="docs-code" data-docs-code><pre><code class="scss"><span class="hljs-variable">$global-text-direction</span>: rtl;</code></pre></div><p>This will convert the framework's components to RTL format.</p>
-
-
-
-
-
-</div>
-
-<div class="large-3 columns" data-sticky-container>
- <nav class="columns docs-toc-wrap" data-sticky data-anchor="docs" data-sticky-on="large">
- <div class="docs-toc hide" id="docsTOC">
- <ul class="vertical menu" data-docs-toc>
- <li class="docs-nav-title">On this page:</li>
- </ul>
- </div>
- <div class="foundation-toc-ad-unit" id="TOCAdUnit">
- </div>
- </nav>
-</div>
-
-</div>
-
-</article>
-
- </div>
- <div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
- <ul class="vertical menu docs-nav" id="docs-menu">
- <p class="docs-nav-version">
- <span data-docs-version></span>
- <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">(Changelog)</a>
- </p>
-
- <li class="docs-nav-title">Getting Started</li>
- <li><a href="installation.html">Installation</a></li>
- <li><a href="starter-projects.html">Starter Projects</a></li>
- <li><a href="compatibility.html">Compatibility</a></li>
- <li><a href="accessibility.html">Accessibility</a></li>
- <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
-
- <li class="docs-nav-title">Setup</li>
- <li><a href="global.html">Global Styles</a></li>
- <li class="current"><a href="rtl.html">Right-to-Left Support</a></li>
- <li><a href="flexbox.html">Flexbox</a></li>
- <li><a href="sass.html">Sass</a></li>
- <li><a href="javascript.html">JavaScript</a></li>
- <li><a href="javascript-utilities.html">JavaScript Utilities</a></li>
- <li><a href="media-queries.html">Media Queries</a></li>
-
- <li class="docs-nav-title">General</li>
- <li><a href="grid.html">Grid</a></li>
- <li><a href="flex-grid.html">Flex Grid</a></li>
- <li><a href="forms.html">Forms</a></li>
- <li><a href="visibility.html">Visibility Classes</a></li>
- <li><a href="float-classes.html">Float Classes</a></li>
-
- <li class="docs-nav-title">Typography</li>
- <li><a href="typography-base.html">Base Styles</a></li>
- <li><a href="typography-helpers.html">Helper Classes</a></li>
-
- <li class="docs-nav-title">Controls</li>
- <li><a href="button.html">Button</a></li>
- <li><a href="button-group.html">Button Group</a></li>
- <li><a href="close-button.html">Close Button</a></li>
- <li><a href="slider.html">Slider <span class="label">JS</span></a></li>
- <li><a href="switch.html">Switch</a></li>
-
- <li class="docs-nav-title">Navigation</li>
- <li><a href="navigation.html">Overview</a></li>
- <li><a href="menu.html">Menu</a></li>
- <li><a href="dropdown-menu.html">Dropdown Menu <span class="label">JS</span></a></li>
- <li><a href="drilldown-menu.html">Drilldown Menu <span class="label">JS</span></a></li>
- <li><a href="accordion-menu.html">Accordion Menu <span class="label">JS</span></a></li>
- <li><a href="top-bar.html">Top Bar</a></li>
- <li><a href="responsive-navigation.html">Responsive Navigation</a></li>
- <li><a href="magellan.html">Magellan <span class="label">JS</span></a></li>
- <li><a href="pagination.html">Pagination</a></li>
- <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
-
- <li class="docs-nav-title">Containers</li>
- <li><a href="accordion.html">Accordion <span class="label">JS</span></a></li>
- <li><a href="callout.html">Callout</a></li>
- <li><a href="dropdown.html">Dropdown <span class="label">JS</span></a></li>
- <li><a href="media-object.html">Media Object</a></li>
- <li><a href="off-canvas.html">Off-canvas <span class="label">JS</span></a></li>
- <li><a href="reveal.html">Reveal <span class="label">JS</span> <small>Modal</small></a></li>
- <li><a href="table.html">Table</a></li>
- <li><a href="tabs.html">Tabs <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Media</li>
- <li><a href="badge.html">Badge</a></li>
- <li><a href="flex-video.html">Flex Video</a></li>
- <li><a href="label.html">Label</a></li>
- <li><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
- <li><a href="progress-bar.html">Progress Bar</a></li>
- <li><a href="thumbnail.html">Thumbnail</a></li>
- <li><a href="tooltip.html">Tooltip <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Plugins</li>
- <li><a href="abide.html">Abide <small>Form Validation</small></a></li>
- <li><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
- <li><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
- <li><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
- <li><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
-
- <li class="docs-nav-title">Sass</li>
- <li><a href="sass-functions.html">Functions</a></li>
- <li><a href="sass-mixins.html">Mixins</a></li>
-
- <li class="docs-nav-title">Libraries</li>
- <li><a href="motion-ui.html">Motion UI</a></li>
- <li><a href="panini.html">Panini</a></li>
- <li><a href="style-sherpa.html">Style Sherpa</a></li>
-
- <li class="docs-nav-title">Older Versions</li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
- <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
- <li><a href="https://get.foundation/sites/docs/v/3.2.5/">Foundation 3</a></li>
- <li><a href="https://get.foundation/sites/docs/v/2.2.1/">Foundation 2</a></li>
- </ul>
-
- </div>
- </div>
-
- <!-- Small Business(Docs) -->
- <section id="studiosCallout">
- <div class="row">
- <div class="medium-4 large-4 columns">
- <img src="https://get.foundation/assets/img/smallbiz-footer.svg" alt="">
- </div>
- <div class="medium-8 large-8 columns banner-info">
- <div class="row column property-label">ZURB Foundation</div>
- <h3 class="light">Yeah, we can help with that.</h3>
- <p class="lead"> We’ll collaborate with your team throughout the entire project life cycle. We’ll take your concept and move it through ideation, hi-fi wireframes, visual design and code, all while informing you on the whys and hows along the way.</p>
- <div class="course-buttons">
- <a href="https://get.foundation/get-involved/premium-support.html" class="studios button" data-zcom-event="studios_foundation_click" id="foundationSmallV1">Show Me How →</a>
- </div>
- </div>
- </div>
- </section>
-
- <div class="docs-newsletter">
- <div class="row">
- <div class="medium-7 large-8 columns">
- <a target="_blank" href="https://get.foundation/learn/responsive-reading.html">
- <h5 class="">Download ZURB’s 21 Responsive Trends That Will Shape 2017</h5>
- <p style="margin-bottom: 0;">Stay informed with amazing responsive trends each month from ZURB.</p>
- </a>
- </div>
- <div class="medium-5 large-4 footer-signup-form columns">
- <a style="margin-bottom: 0;" target="_blank" href="https://get.foundation/learn/responsive-reading.html" class="button expanded">Download the PDF</a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-top bg-fblue">
- <div class="row property">
- <div class="medium-4 columns">
- <div class="property-info">
- <h3>Foundation for Sites</h3>
- <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
- </p>
- </div>
- </div>
-
- <div class="medium-8 columns">
- <div class="row collapse">
- <div class="medium-4 columns">
- <div class="learn-links">
- <h4 class="hide-for-small">Want more?</h4>
- <ul>
- <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
- <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
- <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
- <li><a href="http://zurb.com/university/courses">Training</a></li>
- <li><a href="http://zurb.com/library">Design Resources</a></li>
- </ul>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="support-links">
- <h4 class="hide-for-small">Talk to us</h4>
- <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
- <p><a href="https://get.foundation/get-involved/contribute.html">Get involved in<br>our amazing community.</a></p>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="connect-links">
- <h4 class="hide-for-small">Stay Updated</h4>
- <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
- <a href="http://zurb.com/news" class="small button">Stay Connected</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="row global">
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/studios" class="footer-link-block services">
- <span class="title">Studios</span>
- <span>Helping more than 200 startups succeed since 1998.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="https://get.foundation/" class="footer-link-block foundation">
- <span class="title">Foundation</span>
- <span>The most advanced front-end framework in the world.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/notable" class="footer-link-block apps">
- <span class="title">Notable Design Apps</span>
- <span>Prototype, iterate and collect feedback on your products.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/university" class="footer-link-block expo">
- <span class="title">University</span>
- <span>Ideas, thoughts and design resources shared with you.</span>
- </a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-bottom">
- <div class="row">
- <div class="medium-4 medium-push-8 columns">
- <ul class="home-social">
- <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
- <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
- <li><a href="http://zurb.com/contact" class="mail"></a></li>
- </ul>
- </div>
- <div class="medium-8 medium-pull-4 columns">
- <a href="http://www.zurb.com" class="zurb-logo regular"></a>
- <ul class="zurb-links">
- <li><a href="http://zurb.com/about">About</a></li>
- <li><a href="http://zurb.com/blog">Blog</a></li>
- <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
- <li><a href="http://zurb.com/contact">Contact</a></li>
- <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
- </ul>
- <p class="copyright">© 1998‐2016 ZURB, Inc. All rights reserved.</p>
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- <script>
- var _gaq = _gaq || [];
- _gaq.push(
- ['_setAccount', 'UA-2195009-2'],
- ['_trackPageview'],
- ['b._setAccount', 'UA-2195009-27'],
- ['b._trackPageview']
- );
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
-
- <script src="assets/js/vendor.js?hash=50a71be8c726d6fe0e5cdccc91427c2e"></script>
- <script src="assets/js/foundation.js?hash=688cbf5e4b347b2cf2953b8c6db397d0"></script>
- <script src="assets/js/docs.js?hash=d51e2e118369a82131cf05a045fae882"></script>
- <script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
-</body>
-</html>
+++ /dev/null
-<!doctype html>
-<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
-<html class="no-js" lang="en" dir="ltr">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="Behind the scenes, Foundation is powered by a set of utility Sass functions that help us work with colors, units, selectors, and more.">
- <link rel="icon" href="assets/img/icons/foundation-favicon.ico" type="image/x-icon">
- <title>Foundation for Sites 6 Docs | Sass Functions</title>
- <link href="assets/css/docs.css?hash=22a74e9f6e972530746afd6e3c93e5c6" rel="stylesheet" />
- <link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=d6cff3980a05d33c269e4ffcacdc2005" rel="stylesheet">
- <!-- <link rel="stylesheet" href="./node_modules/motion-ui/dist/motion-ui.css" /> -->
-</head>
-<body>
-
- <div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
-
- <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="mobile-ofc vertical menu">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
-
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/support.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/sort/unanswered">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
- </div>
-
- <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="vertical menu">
- <li><a href="#">Foundation</a></li>
- <li><a href="#">Dot</a></li>
- <li><a href="#">ZURB</a></li>
- <li><a href="#">Com</a></li>
- <li><a href="#">Slash</a></li>
- <li><a href="#">Sites</a></li>
- </ul>
- </div>
-
-
- <div class="off-canvas-content" data-off-canvas-content>
- <!-- Info Banner For Announcements or Links -->
- <!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
- <div class="info">
- <h5>Foundation 6 is here!</h5>
- </div>
- </a> -->
-
- <nav class="marketing-topbar show-for-medium">
-
- <ul class="menu">
- <li class="topbar-title"><a href="https://get.foundation/index.html"><img src="assets/img/logos/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
- </ul>
-
- <ul class="dropdown menu" data-dropdown-menu data-click-open="false">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/" target="_blank">F5 Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="https://get.foundation/emails/docs/" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
-
- </nav>
-
- <div class="title-bar hide-for-medium">
- <div class="title-bar-left">
- <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
- <span class="title-bar-title">Foundation</span>
- </div>
- </div>
-
-
- <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
-
- <div class="expanded row">
- <div class="medium-9 large-10 medium-push-3 large-push-2 columns">
-
-<article class="docs-component" id="docs-sass-functions">
-
-<a href="#docs-menu" class="small secondary expanded button hide-for-medium">Jump to Nav</a>
-
-<header>
- <h1 class="docs-page-title">Sass Functions</h1>
-
-
- <p class="lead docs-page-lead">Behind the scenes, Foundation is powered by a set of utility Sass functions that help us work with colors, units, selectors, and more.</p>
-
- <ul class="menu simple docs-contribute-menu">
- <li><a href="https://github.com/zurb/foundation-sites/edit/master/docs/pages/sass-functions.md" target="_blank"><i class="fi-pencil"></i>Edit this Page</a></li>
- <li><a href="https://github.com/zurb/foundation-sites/issues/new?title=%5BSass%20Functions%5D%20ISSUE%20NAME%20HERE" target="_blank"><i class="fi-social-github"></i>Report a Bug</a></li>
- <li><a href="https://get.foundation/forum" target="_blank"><i class="fi-comment"></i>Get Help</a></li>
- </ul>
-</header>
-
-<hr>
-
-<div class="row">
-
-<div class="large-9 columns" id="docs">
-
-<h2 id="importing" class="docs-heading" data-magellan-target="importing">Importing<a class="docs-heading-icon" href="#importing"></a></h2><p>All of Foundation's Sass utilities are in the folder <code>scss/util</code>, and broken up into multiple files by category. You can import every utility file at once using this line of code:</p>
-<div class="docs-code" data-docs-code><pre><code class="scss">@<span class="hljs-keyword">import</span> <span class="hljs-string">'util/util'</span>;</code></pre></div><p>Or, utilities can be imported individually.</p>
-<div class="docs-code" data-docs-code><pre><code class="scss"><span class="hljs-comment">// Color manipulation</span>
-@<span class="hljs-keyword">import</span> <span class="hljs-string">'util/color'</span>;
-
-<span class="hljs-comment">// Selector generation</span>
-@<span class="hljs-keyword">import</span> <span class="hljs-string">'util/selector'</span>;
-
-<span class="hljs-comment">// Unit manipulation and conversion</span>
-@<span class="hljs-keyword">import</span> <span class="hljs-string">'util/unit'</span>;
-
-<span class="hljs-comment">// Value checking and extraction</span>
-@<span class="hljs-keyword">import</span> <span class="hljs-string">'util/value'</span>;</code></pre></div><div class="callout warning">
- <p>Variables, functions, or mixins prefixed with <code>-zf-</code> are considered part of the internal API, which means they could change, break, or disappear without warning. We recommend sticking to only the public API, which is documented below.</p>
-</div>
-
-
-<hr>
-<section>
- <h2 id="sass-reference" class="docs-heading" data-magellan-target="sass-reference">Sass Reference<a class="docs-heading-icon" href="#sass-reference"></a></h2>
-
-
-
-
- <section>
- <h3 id="sass-mixins" class="docs-heading">Mixins<a class="docs-heading-icon" href="#sass-mixins"></a></h3>
-
- <p>We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.</p>
-
-
- <section >
- <h4 id="add-foundation-colors" class="docs-heading">add-foundation-colors<a class="docs-heading-icon" href="#add-foundation-colors"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> add-foundation-colors;</code></pre>
- </div>
-
- <p>Transfers the colors in the <code>$foundation-palette</code> variable into the legacy color variables, such as <code>$primary-color</code> and <code>$secondary-color</code>. Call this mixin below the Global section of your settings file to properly migrate your codebase.</p>
-
-
-
-
-
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="flex" class="docs-heading">flex<a class="docs-heading-icon" href="#flex"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> flex;</code></pre>
- </div>
-
- <p>Enables flexbox by adding <code>display: flex</code> to the element.</p>
-
-
-
-
-
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="flex-align" class="docs-heading">flex-align<a class="docs-heading-icon" href="#flex-align"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> flex-align(<span class="hljs-variable">$x</span>, <span class="hljs-variable">$y</span>);</code></pre>
- </div>
-
- <p>Horizontally or vertically aligns the items within a flex container.</p>
-
-
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$x</code></td>
- <td>Keyword</td>
- <td><code>null</code></td>
- <td><p>Horizontal alignment to use. Can be <code>left</code>, <code>right</code>, <code>center</code>, <code>justify</code>, or <code>spaced</code>. Or, set it to <code>null</code> (the default) to not set horizontal alignment.</p>
-</td>
- </tr>
- <tr>
- <td><code>$y</code></td>
- <td>Keyword</td>
- <td><code>null</code></td>
- <td><p>Vertical alignment to use. Can be <code>top</code>, <code>bottom</code>, <code>middle</code>, or <code>stretch</code>. Or, set it to <code>null</code> (the default) to not set vertical alignment.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="flex-align-self" class="docs-heading">flex-align-self<a class="docs-heading-icon" href="#flex-align-self"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> flex-align-self(<span class="hljs-variable">$y</span>);</code></pre>
- </div>
-
- <p>Vertically align a single column within a flex row. Apply this mixin to a flex column.</p>
-
-
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$y</code></td>
- <td>Keyword</td>
- <td><code>null</code></td>
- <td><p>Vertical alignment to use. Can be <code>top</code>, <code>bottom</code>, <code>middle</code>, or <code>stretch</code>. Or, set it to <code>null</code> (the default) to not set vertical alignment.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="flex-order" class="docs-heading">flex-order<a class="docs-heading-icon" href="#flex-order"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> flex-order(<span class="hljs-variable">$order</span>);</code></pre>
- </div>
-
- <p>Changes the source order of a flex child. Children with lower numbers appear first in the layout.</p>
-
-
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$order</code></td>
- <td>Number</td>
- <td><code>0</code></td>
- <td><p>Order number to apply.</p>
-</td>
- </tr>
- </table>
- </section>
-
-
-
-
-
- </section>
-
- <hr>
-
- <section>
- <h3 id="sass-functions" class="docs-heading">Functions<a class="docs-heading-icon" href="#sass-functions"></a></h3>
-
-
- <section >
- <h4 id="foreground" class="docs-heading">foreground<a class="docs-heading-icon" href="#foreground"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>foreground(<span class="hljs-variable">$color</span>, <span class="hljs-variable">$yes</span>, <span class="hljs-variable">$no</span>, <span class="hljs-variable">$threshold</span>)</code></pre>
- </div>
-
- <p>Checks the lightness of <code>$color</code>, and if it passes the <code>$threshold</code> of lightness, it returns the <code>$yes</code> color. Otherwise, it returns the <code>$no</code> color. Use this function to dynamically output a foreground color based on a given background color.</p>
-
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$color</code></td>
- <td>Color</td>
- <td><code><span style="color: #999;">None</span></code></td>
- <td><p>Color to check the lightness of.</p>
-</td>
- </tr>
- <tr>
- <td><code>$yes</code></td>
- <td>Color</td>
- <td><code>$black</code></td>
- <td><p>Color to return if <code>$color</code> is light.</p>
-</td>
- </tr>
- <tr>
- <td><code>$no</code></td>
- <td>Color</td>
- <td><code>$white</code></td>
- <td><p>Color to return if <code>$color</code> is dark.</p>
-</td>
- </tr>
- <tr>
- <td><code>$threshold</code></td>
- <td>Percentage</td>
- <td><code>60%</code></td>
- <td><p>Threshold of lightness to check against.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section >
- <h4 id="smart-scale" class="docs-heading">smart-scale<a class="docs-heading-icon" href="#smart-scale"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>smart-scale(<span class="hljs-variable">$color</span>, <span class="hljs-variable">$scale</span>, <span class="hljs-variable">$threshold</span>)</code></pre>
- </div>
-
- <p>Scales a color to be lighter if it's light, or darker if it's dark. Use this function to tint a color appropriate to its lightness.</p>
-
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$color</code></td>
- <td>Color</td>
- <td><code><span style="color: #999;">None</span></code></td>
- <td><p>Color to scale.</p>
-</td>
- </tr>
- <tr>
- <td><code>$scale</code></td>
- <td>Percentage</td>
- <td><code>5%</code></td>
- <td><p>Amount to scale up or down.</p>
-</td>
- </tr>
- <tr>
- <td><code>$threshold</code></td>
- <td>Percentage</td>
- <td><code>40%</code></td>
- <td><p>Threshold of lightness to check against.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section >
- <h4 id="text-inputs" class="docs-heading">text-inputs<a class="docs-heading-icon" href="#text-inputs"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>text-inputs(<span class="hljs-variable">$types</span>)</code></pre>
- </div>
-
- <p>Generates a selector with every text input type. You can also filter the list to only output a subset of those selectors.</p>
-
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$types</code></td>
- <td>List or Keyword</td>
- <td><code></code></td>
- <td><p>A list of text input types to use. Leave blank to use all of them.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section >
- <h4 id="strip-unit" class="docs-heading">strip-unit<a class="docs-heading-icon" href="#strip-unit"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>strip-unit(<span class="hljs-variable">$num</span>)</code></pre>
- </div>
-
- <p>Removes the unit (e.g. px, em, rem) from a value, returning the number only.</p>
-
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$num</code></td>
- <td>Number</td>
- <td><code><span style="color: #999;">None</span></code></td>
- <td><p>Number to strip unit from.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section >
- <h4 id="rem-calc" class="docs-heading">rem-calc<a class="docs-heading-icon" href="#rem-calc"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>rem-calc(<span class="hljs-variable">$values</span>, <span class="hljs-variable">$base</span>)</code></pre>
- </div>
-
- <p>Converts one or more pixel values into matching rem values.</p>
-
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$values</code></td>
- <td>Number or List</td>
- <td><code><span style="color: #999;">None</span></code></td>
- <td><p>One or more values to convert. Be sure to separate them with spaces and not commas. If you need to convert a comma-separated list, wrap the list in parentheses.</p>
-</td>
- </tr>
- <tr>
- <td><code>$base</code></td>
- <td>Number</td>
- <td><code>null</code></td>
- <td><p>The base value to use when calculating the <code>rem</code>. If you're using Foundation out of the box, this is 16px. If this parameter is <code>null</code>, the function will reference the <code>$base-font-size</code> variable as the base.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section >
- <h4 id="has-value" class="docs-heading">has-value<a class="docs-heading-icon" href="#has-value"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>has-value(<span class="hljs-variable">$val</span>)</code></pre>
- </div>
-
- <p>Determine if a value is not falsey, in CSS terms. Falsey values are <code>null</code>, <code>none</code>, <code>0</code> with any unit, or an empty list.</p>
-
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$val</code></td>
- <td>Mixed</td>
- <td><code><span style="color: #999;">None</span></code></td>
- <td><p>Value to check.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section >
- <h4 id="get-side" class="docs-heading">get-side<a class="docs-heading-icon" href="#get-side"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>get-side(<span class="hljs-variable">$val</span>, <span class="hljs-variable">$side</span>)</code></pre>
- </div>
-
- <p>Determine a top/right/bottom/right value on a padding, margin, etc. property, no matter how many values were passed in. Use this function if you need to know the specific side of a value, but don't know if the value is using a shorthand format.</p>
-
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$val</code></td>
- <td>List or Number</td>
- <td><code><span style="color: #999;">None</span></code></td>
- <td><p>Value to analyze. Should be a shorthand sizing property, e.g. "1em 2em 1em"</p>
-</td>
- </tr>
- <tr>
- <td><code>$side</code></td>
- <td>Keyword</td>
- <td><code><span style="color: #999;">None</span></code></td>
- <td><p>Side to return. Should be <code>top</code>, <code>right</code>, <code>bottom</code>, or <code>left</code>.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section >
- <h4 id="get-border-value" class="docs-heading">get-border-value<a class="docs-heading-icon" href="#get-border-value"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>get-<span class="hljs-attribute">border</span>-value(<span class="hljs-variable">$val</span>, <span class="hljs-variable">$elem</span>)</code></pre>
- </div>
-
- <p>Given border $val, find a specific element of the border, which is $elem. The possible values for $elem are width, style, and color.</p>
-
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$val</code></td>
- <td>List</td>
- <td><code><span style="color: #999;">None</span></code></td>
- <td><p>Border value to find a value in.</p>
-</td>
- </tr>
- <tr>
- <td><code>$elem</code></td>
- <td>Keyword</td>
- <td><code><span style="color: #999;">None</span></code></td>
- <td><p>Border component to extract.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section >
- <h4 id="map-deep-get" class="docs-heading">map-deep-get<a class="docs-heading-icon" href="#map-deep-get"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code><span class="hljs-selector-tag">map</span>-deep-get(<span class="hljs-variable">$map</span>, <span class="hljs-variable">$keys</span>...)</code></pre>
- </div>
-
- <p>Finds a value in a nested map.</p>
-
-
- <p><strong>Learn more:</strong> <a href="https://css-tricks.com/snippets/sass/deep-getset-maps/">Deep Get/Set in Maps</a></p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$map</code></td>
- <td>Map</td>
- <td><code><span style="color: #999;">None</span></code></td>
- <td><p>Map to pull a value from.</p>
-</td>
- </tr>
- <tr>
- <td><code>$keys...</code></td>
- <td>String</td>
- <td><code><span style="color: #999;">None</span></code></td>
- <td><p>Keys to use when looking for a value.</p>
-</td>
- </tr>
- </table>
- </section>
-
-
-
- </section>
-
-</section>
-
-
-<!-- <hr> -->
-<!-- <section class="docs-building-blocks">
- <h2 id="building-blocks" class="docs-heading" data-magellan-target="building-blocks">Building Blocks<a class="docs-heading-icon" href="#building-blocks"></a></h2>
-
- <p><a href="http://zurb.com/building-blocks">Building Blocks</a> is a ZURB-curated resource with useful code snippets that use Foundation components. Here are a few for this component:</p>
-
- <div class="warning callout">
- <p>These are placeholder items. If you have ideas for building blocks for this component, <a href="https://github.com/zurb/foundation-sites-6/issues/118">we're taking ideas on GitHub</a>.</p>
- </div>
-
- <div data-building-blocks></div>
-</section> -->
-
-</div>
-
-<div class="large-3 columns" data-sticky-container>
- <nav class="columns docs-toc-wrap" data-sticky data-anchor="docs" data-sticky-on="large">
- <div class="docs-toc hide" id="docsTOC">
- <ul class="vertical menu" data-docs-toc>
- <li class="docs-nav-title">On this page:</li>
- </ul>
- </div>
- <div class="foundation-toc-ad-unit" id="TOCAdUnit">
- </div>
- </nav>
-</div>
-
-</div>
-
-</article>
-
- </div>
- <div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
- <ul class="vertical menu docs-nav" id="docs-menu">
- <p class="docs-nav-version">
- <span data-docs-version></span>
- <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">(Changelog)</a>
- </p>
-
- <li class="docs-nav-title">Getting Started</li>
- <li><a href="installation.html">Installation</a></li>
- <li><a href="starter-projects.html">Starter Projects</a></li>
- <li><a href="compatibility.html">Compatibility</a></li>
- <li><a href="accessibility.html">Accessibility</a></li>
- <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
-
- <li class="docs-nav-title">Setup</li>
- <li><a href="global.html">Global Styles</a></li>
- <li><a href="rtl.html">Right-to-Left Support</a></li>
- <li><a href="flexbox.html">Flexbox</a></li>
- <li><a href="sass.html">Sass</a></li>
- <li><a href="javascript.html">JavaScript</a></li>
- <li><a href="javascript-utilities.html">JavaScript Utilities</a></li>
- <li><a href="media-queries.html">Media Queries</a></li>
-
- <li class="docs-nav-title">General</li>
- <li><a href="grid.html">Grid</a></li>
- <li><a href="flex-grid.html">Flex Grid</a></li>
- <li><a href="forms.html">Forms</a></li>
- <li><a href="visibility.html">Visibility Classes</a></li>
- <li><a href="float-classes.html">Float Classes</a></li>
-
- <li class="docs-nav-title">Typography</li>
- <li><a href="typography-base.html">Base Styles</a></li>
- <li><a href="typography-helpers.html">Helper Classes</a></li>
-
- <li class="docs-nav-title">Controls</li>
- <li><a href="button.html">Button</a></li>
- <li><a href="button-group.html">Button Group</a></li>
- <li><a href="close-button.html">Close Button</a></li>
- <li><a href="slider.html">Slider <span class="label">JS</span></a></li>
- <li><a href="switch.html">Switch</a></li>
-
- <li class="docs-nav-title">Navigation</li>
- <li><a href="navigation.html">Overview</a></li>
- <li><a href="menu.html">Menu</a></li>
- <li><a href="dropdown-menu.html">Dropdown Menu <span class="label">JS</span></a></li>
- <li><a href="drilldown-menu.html">Drilldown Menu <span class="label">JS</span></a></li>
- <li><a href="accordion-menu.html">Accordion Menu <span class="label">JS</span></a></li>
- <li><a href="top-bar.html">Top Bar</a></li>
- <li><a href="responsive-navigation.html">Responsive Navigation</a></li>
- <li><a href="magellan.html">Magellan <span class="label">JS</span></a></li>
- <li><a href="pagination.html">Pagination</a></li>
- <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
-
- <li class="docs-nav-title">Containers</li>
- <li><a href="accordion.html">Accordion <span class="label">JS</span></a></li>
- <li><a href="callout.html">Callout</a></li>
- <li><a href="dropdown.html">Dropdown <span class="label">JS</span></a></li>
- <li><a href="media-object.html">Media Object</a></li>
- <li><a href="off-canvas.html">Off-canvas <span class="label">JS</span></a></li>
- <li><a href="reveal.html">Reveal <span class="label">JS</span> <small>Modal</small></a></li>
- <li><a href="table.html">Table</a></li>
- <li><a href="tabs.html">Tabs <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Media</li>
- <li><a href="badge.html">Badge</a></li>
- <li><a href="flex-video.html">Flex Video</a></li>
- <li><a href="label.html">Label</a></li>
- <li><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
- <li><a href="progress-bar.html">Progress Bar</a></li>
- <li><a href="thumbnail.html">Thumbnail</a></li>
- <li><a href="tooltip.html">Tooltip <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Plugins</li>
- <li><a href="abide.html">Abide <small>Form Validation</small></a></li>
- <li><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
- <li><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
- <li><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
- <li><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
-
- <li class="docs-nav-title">Sass</li>
- <li class="current"><a href="sass-functions.html">Functions</a></li>
- <li><a href="sass-mixins.html">Mixins</a></li>
-
- <li class="docs-nav-title">Libraries</li>
- <li><a href="motion-ui.html">Motion UI</a></li>
- <li><a href="panini.html">Panini</a></li>
- <li><a href="style-sherpa.html">Style Sherpa</a></li>
-
- <li class="docs-nav-title">Older Versions</li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
- <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
- <li><a href="https://get.foundation/sites/docs/v/3.2.5/">Foundation 3</a></li>
- <li><a href="https://get.foundation/sites/docs/v/2.2.1/">Foundation 2</a></li>
- </ul>
-
- </div>
- </div>
-
- <!-- Small Business(Docs) -->
- <section id="studiosCallout">
- <div class="row">
- <div class="medium-4 large-4 columns">
- <img src="https://get.foundation/assets/img/smallbiz-footer.svg" alt="">
- </div>
- <div class="medium-8 large-8 columns banner-info">
- <div class="row column property-label">ZURB Foundation</div>
- <h3 class="light">Yeah, we can help with that.</h3>
- <p class="lead"> We’ll collaborate with your team throughout the entire project life cycle. We’ll take your concept and move it through ideation, hi-fi wireframes, visual design and code, all while informing you on the whys and hows along the way.</p>
- <div class="course-buttons">
- <a href="https://get.foundation/get-involved/premium-support.html" class="studios button" data-zcom-event="studios_foundation_click" id="foundationSmallV1">Show Me How →</a>
- </div>
- </div>
- </div>
- </section>
-
- <div class="docs-newsletter">
- <div class="row">
- <div class="medium-7 large-8 columns">
- <a target="_blank" href="https://get.foundation/learn/responsive-reading.html">
- <h5 class="">Download ZURB’s 21 Responsive Trends That Will Shape 2017</h5>
- <p style="margin-bottom: 0;">Stay informed with amazing responsive trends each month from ZURB.</p>
- </a>
- </div>
- <div class="medium-5 large-4 footer-signup-form columns">
- <a style="margin-bottom: 0;" target="_blank" href="https://get.foundation/learn/responsive-reading.html" class="button expanded">Download the PDF</a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-top bg-fblue">
- <div class="row property">
- <div class="medium-4 columns">
- <div class="property-info">
- <h3>Foundation for Sites</h3>
- <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
- </p>
- </div>
- </div>
-
- <div class="medium-8 columns">
- <div class="row collapse">
- <div class="medium-4 columns">
- <div class="learn-links">
- <h4 class="hide-for-small">Want more?</h4>
- <ul>
- <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
- <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
- <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
- <li><a href="http://zurb.com/university/courses">Training</a></li>
- <li><a href="http://zurb.com/library">Design Resources</a></li>
- </ul>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="support-links">
- <h4 class="hide-for-small">Talk to us</h4>
- <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
- <p><a href="https://get.foundation/get-involved/contribute.html">Get involved in<br>our amazing community.</a></p>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="connect-links">
- <h4 class="hide-for-small">Stay Updated</h4>
- <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
- <a href="http://zurb.com/news" class="small button">Stay Connected</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="row global">
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/studios" class="footer-link-block services">
- <span class="title">Studios</span>
- <span>Helping more than 200 startups succeed since 1998.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="https://get.foundation/" class="footer-link-block foundation">
- <span class="title">Foundation</span>
- <span>The most advanced front-end framework in the world.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/notable" class="footer-link-block apps">
- <span class="title">Notable Design Apps</span>
- <span>Prototype, iterate and collect feedback on your products.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/university" class="footer-link-block expo">
- <span class="title">University</span>
- <span>Ideas, thoughts and design resources shared with you.</span>
- </a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-bottom">
- <div class="row">
- <div class="medium-4 medium-push-8 columns">
- <ul class="home-social">
- <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
- <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
- <li><a href="http://zurb.com/contact" class="mail"></a></li>
- </ul>
- </div>
- <div class="medium-8 medium-pull-4 columns">
- <a href="http://www.zurb.com" class="zurb-logo regular"></a>
- <ul class="zurb-links">
- <li><a href="http://zurb.com/about">About</a></li>
- <li><a href="http://zurb.com/blog">Blog</a></li>
- <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
- <li><a href="http://zurb.com/contact">Contact</a></li>
- <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
- </ul>
- <p class="copyright">© 1998‐2016 ZURB, Inc. All rights reserved.</p>
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- <script>
- var _gaq = _gaq || [];
- _gaq.push(
- ['_setAccount', 'UA-2195009-2'],
- ['_trackPageview'],
- ['b._setAccount', 'UA-2195009-27'],
- ['b._trackPageview']
- );
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
-
- <script src="assets/js/vendor.js?hash=ecfdf0ca27db89590d9f7cee1014e397"></script>
- <script src="assets/js/foundation.js?hash=5084fe0e09dbfade153731454415bd86"></script>
- <script src="assets/js/docs.js?hash=d3662e0fb2dac7fb0bcff9b8f230eec4"></script>
- <script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
-</body>
-</html>
+++ /dev/null
-<!doctype html>
-<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
-<html class="no-js" lang="en" dir="ltr">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="">
- <link rel="icon" href="assets/img/icons/foundation-favicon.ico" type="image/x-icon">
- <title>Foundation for Sites 6 Docs | Sass Mixins</title>
- <link href="assets/css/docs.css?hash=a59482b002deac3a794bf169fec58923" rel="stylesheet" />
- <link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=1fed39e34039bc55b4b2cf2d8f413056" rel="stylesheet">
- <!-- <link rel="stylesheet" href="./node_modules/motion-ui/dist/motion-ui.css" /> -->
-</head>
-<body>
-
- <div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
-
- <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="mobile-ofc vertical menu">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
-
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/support.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/sort/unanswered">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
- </div>
-
- <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="vertical menu">
- <li><a href="#">Foundation</a></li>
- <li><a href="#">Dot</a></li>
- <li><a href="#">ZURB</a></li>
- <li><a href="#">Com</a></li>
- <li><a href="#">Slash</a></li>
- <li><a href="#">Sites</a></li>
- </ul>
- </div>
-
-
- <div class="off-canvas-content" data-off-canvas-content>
- <!-- Info Banner For Announcements or Links -->
- <!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
- <div class="info">
- <h5>Foundation 6 is here!</h5>
- </div>
- </a> -->
-
- <nav class="marketing-topbar show-for-medium">
-
- <ul class="menu">
- <li class="topbar-title"><a href="https://get.foundation/index.html"><img src="assets/img/logos/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
- </ul>
-
- <ul class="dropdown menu" data-dropdown-menu data-click-open="false">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/" target="_blank">F5 Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="https://get.foundation/emails/docs/" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
-
- </nav>
-
- <div class="title-bar hide-for-medium">
- <div class="title-bar-left">
- <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
- <span class="title-bar-title">Foundation</span>
- </div>
- </div>
-
-
- <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
-
- <div class="expanded row">
- <div class="medium-9 large-10 medium-push-3 large-push-2 columns">
-
-<article class="docs-component" id="docs-sass-mixins">
-
-<a href="#docs-menu" class="small secondary expanded button hide-for-medium">Jump to Nav</a>
-
-<header>
- <h1 class="docs-page-title">Sass Mixins</h1>
-
-
- <p class="lead docs-page-lead"></p>
-
- <ul class="menu simple docs-contribute-menu">
- <li><a href="https://github.com/zurb/foundation-sites/edit/master/docs/pages/sass-mixins.md" target="_blank"><i class="fi-pencil"></i>Edit this Page</a></li>
- <li><a href="https://github.com/zurb/foundation-sites/issues/new?title=%5BSass%20Mixins%5D%20ISSUE%20NAME%20HERE" target="_blank"><i class="fi-social-github"></i>Report a Bug</a></li>
- <li><a href="https://get.foundation/forum" target="_blank"><i class="fi-comment"></i>Get Help</a></li>
- </ul>
-</header>
-
-<hr>
-
-<div class="row">
-
-<div class="large-9 columns" id="docs">
-
-<h2 id="importing" class="docs-heading" data-magellan-target="importing">Importing<a class="docs-heading-icon" href="#importing"></a></h2><p>Foundation's Sass mixins are all kept in one file: <code>scss/util/_mixins.scss</code>. To import it in Sass, use this line of code:</p>
-<div class="docs-code" data-docs-code><pre><code class="scss">@<span class="hljs-keyword">import</span> <span class="hljs-string">'util/mixins'</span>;</code></pre></div>
-
-<hr>
-<section>
- <h2 id="sass-reference" class="docs-heading" data-magellan-target="sass-reference">Sass Reference<a class="docs-heading-icon" href="#sass-reference"></a></h2>
-
-
-
-
- <section>
- <h3 id="sass-mixins" class="docs-heading">Mixins<a class="docs-heading-icon" href="#sass-mixins"></a></h3>
-
- <p>We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.</p>
-
-
- <section >
- <h4 id="css-triangle" class="docs-heading">css-triangle<a class="docs-heading-icon" href="#css-triangle"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> css-triangle(<span class="hljs-variable">$triangle-size</span>, <span class="hljs-variable">$triangle-color</span>, <span class="hljs-variable">$triangle-direction</span>);</code></pre>
- </div>
-
- <p>Creates a CSS triangle, which can be used for dropdown arrows, dropdown pips, and more. Use this mixin inside a <code>&::before</code> or <code>&::after</code> selector, to attach the triangle to an existing element.</p>
-
-
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$triangle-size</code></td>
- <td>Number</td>
- <td><code><span style="color: #999;">None</span></code></td>
- <td><p>Width of the triangle.</p>
-</td>
- </tr>
- <tr>
- <td><code>$triangle-color</code></td>
- <td>Color</td>
- <td><code><span style="color: #999;">None</span></code></td>
- <td><p>Color of the triangle.</p>
-</td>
- </tr>
- <tr>
- <td><code>$triangle-direction</code></td>
- <td>Keyword</td>
- <td><code><span style="color: #999;">None</span></code></td>
- <td><p>Direction the triangle points. Can be <code>up</code>, <code>right</code>, <code>down</code>, or <code>left</code>.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="hamburger" class="docs-heading">hamburger<a class="docs-heading-icon" href="#hamburger"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> hamburger(<span class="hljs-variable">$color</span>, <span class="hljs-variable">$color-hover</span>, <span class="hljs-variable">$width</span>, <span class="hljs-variable">$height</span>, <span class="hljs-variable">$weight</span>, <span class="hljs-variable">$bars</span>);</code></pre>
- </div>
-
- <p>Creates a menu icon with a set width, height, number of bars, and colors. The mixin uses the height of the icon and the weight of the bars to determine spacing. <div class="docs-example-burger"></div></p>
-
-
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$color</code></td>
- <td>Color</td>
- <td><code>$black</code></td>
- <td><p>Color to use for the icon.</p>
-</td>
- </tr>
- <tr>
- <td><code>$color-hover</code></td>
- <td>Color</td>
- <td><code>$dark-gray</code></td>
- <td><p>Color to use when the icon is hovered over.</p>
-</td>
- </tr>
- <tr>
- <td><code>$width</code></td>
- <td>Number</td>
- <td><code>20px</code></td>
- <td><p>Width of the icon.</p>
-</td>
- </tr>
- <tr>
- <td><code>$height</code></td>
- <td>Number</td>
- <td><code>16px</code></td>
- <td><p>Height of the icon.</p>
-</td>
- </tr>
- <tr>
- <td><code>$weight</code></td>
- <td>Number</td>
- <td><code>2px</code></td>
- <td><p>Height of individual bars in the icon.</p>
-</td>
- </tr>
- <tr>
- <td><code>$bars</code></td>
- <td>Number</td>
- <td><code>3</code></td>
- <td><p>Number of bars in the icon.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="background-triangle" class="docs-heading">background-triangle<a class="docs-heading-icon" href="#background-triangle"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> background-triangle(<span class="hljs-variable">$color</span>);</code></pre>
- </div>
-
- <p>Adds a downward-facing triangle as a background image to an element. The image is formatted as an SVG, making it easy to change the color. Because Internet Explorer doesn't support encoded SVGs as background images, a PNG fallback is also included.
-There are two PNG fallbacks: a black triangle and a white triangle. The one used depends on the lightness of the input color.</p>
-
-
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$color</code></td>
- <td>Color</td>
- <td><code>$black</code></td>
- <td><p>Color to use for the triangle.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="clearfix" class="docs-heading">clearfix<a class="docs-heading-icon" href="#clearfix"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> clearfix;</code></pre>
- </div>
-
- <p>Applies the micro clearfix hack popularized by Nicolas Gallagher. Include this mixin on a container if its children are all floated, to give the container a proper height.
-The clearfix is augmented with specific styles to prevent borders in flexbox environments</p>
-
-
-
- <p><strong>Learn more:</strong> <a href="http://nicolasgallagher.com/micro-clearfix-hack/">Micro Clearfix Hack</a></p>
-
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="auto-width" class="docs-heading">auto-width<a class="docs-heading-icon" href="#auto-width"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> auto-width(<span class="hljs-variable">$max</span>, <span class="hljs-variable">$elem</span>);</code></pre>
- </div>
-
- <p>Adds CSS for a "quantity query" selector that automatically sizes elements based on how many there are inside a container.</p>
-
-
-
- <p><strong>Learn more:</strong> <a href="http://alistapart.com/article/quantity-queries-for-css">Quantity Queries for CSS</a></p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$max</code></td>
- <td>Number</td>
- <td><code><span style="color: #999;">None</span></code></td>
- <td><p>Maximum number of items to detect. The higher this number is, the more CSS that's required to cover each number of items.</p>
-</td>
- </tr>
- <tr>
- <td><code>$elem</code></td>
- <td>Keyword</td>
- <td><code>li</code></td>
- <td><p>Tag to use for sibling selectors.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="disable-mouse-outline" class="docs-heading">disable-mouse-outline<a class="docs-heading-icon" href="#disable-mouse-outline"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> disable-mouse-outline;</code></pre>
- </div>
-
- <p>Removes the focus ring around an element when a mouse input is detected.</p>
-
-
-
-
-
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="element-invisible" class="docs-heading">element-invisible<a class="docs-heading-icon" href="#element-invisible"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> element-invisible;</code></pre>
- </div>
-
- <p>Makes an element visually hidden, but still accessible to keyboards and assistive devices.</p>
-
-
-
- <p><strong>Learn more:</strong> <a href="http://snook.ca/archives/html_and_css/hiding-content-for-accessibility">Hiding Content for Accessibility</a></p>
-
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="element-invisible-off" class="docs-heading">element-invisible-off<a class="docs-heading-icon" href="#element-invisible-off"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> element-invisible-off;</code></pre>
- </div>
-
- <p>Reverses the CSS output created by the <code>element-invisible()</code> mixin.</p>
-
-
-
-
-
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="vertical-center" class="docs-heading">vertical-center<a class="docs-heading-icon" href="#vertical-center"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> vertical-center;</code></pre>
- </div>
-
- <p>Vertically centers the element inside of its first non-static parent,</p>
-
-
-
- <p><strong>Learn more:</strong> <a href="http://www.sitepoint.com/centering-with-sass/">Centering With Sass</a></p>
-
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="horizontal-center" class="docs-heading">horizontal-center<a class="docs-heading-icon" href="#horizontal-center"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> horizontal-center;</code></pre>
- </div>
-
- <p>Horizontally centers the element inside of its first non-static parent,</p>
-
-
-
- <p><strong>Learn more:</strong> <a href="http://www.sitepoint.com/centering-with-sass/">Centering With Sass</a></p>
-
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="absolute-center" class="docs-heading">absolute-center<a class="docs-heading-icon" href="#absolute-center"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> absolute-center;</code></pre>
- </div>
-
- <p>Absolutely centers the element inside of its first non-static parent,</p>
-
-
-
- <p><strong>Learn more:</strong> <a href="http://www.sitepoint.com/centering-with-sass/">Centering With Sass</a></p>
-
- </section>
-
- <hr>
-
-
-
- </section>
-
-
-</section>
-
-
-<!-- <hr> -->
-<!-- <section class="docs-building-blocks">
- <h2 id="building-blocks" class="docs-heading" data-magellan-target="building-blocks">Building Blocks<a class="docs-heading-icon" href="#building-blocks"></a></h2>
-
- <p><a href="http://zurb.com/building-blocks">Building Blocks</a> is a ZURB-curated resource with useful code snippets that use Foundation components. Here are a few for this component:</p>
-
- <div class="warning callout">
- <p>These are placeholder items. If you have ideas for building blocks for this component, <a href="https://github.com/zurb/foundation-sites-6/issues/118">we're taking ideas on GitHub</a>.</p>
- </div>
-
- <div data-building-blocks></div>
-</section> -->
-
-</div>
-
-<div class="large-3 columns" data-sticky-container>
- <nav class="columns docs-toc-wrap" data-sticky data-anchor="docs" data-sticky-on="large">
- <div class="docs-toc hide" id="docsTOC">
- <ul class="vertical menu" data-docs-toc>
- <li class="docs-nav-title">On this page:</li>
- </ul>
- </div>
- <div class="foundation-toc-ad-unit" id="TOCAdUnit">
- </div>
- </nav>
-</div>
-
-</div>
-
-</article>
-
- </div>
- <div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
- <ul class="vertical menu docs-nav" id="docs-menu">
- <p class="docs-nav-version">
- <span data-docs-version></span>
- <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">(Changelog)</a>
- </p>
-
- <li class="docs-nav-title">Getting Started</li>
- <li><a href="installation.html">Installation</a></li>
- <li><a href="starter-projects.html">Starter Projects</a></li>
- <li><a href="compatibility.html">Compatibility</a></li>
- <li><a href="accessibility.html">Accessibility</a></li>
- <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
-
- <li class="docs-nav-title">Setup</li>
- <li><a href="global.html">Global Styles</a></li>
- <li><a href="rtl.html">Right-to-Left Support</a></li>
- <li><a href="flexbox.html">Flexbox</a></li>
- <li><a href="sass.html">Sass</a></li>
- <li><a href="javascript.html">JavaScript</a></li>
- <li><a href="javascript-utilities.html">JavaScript Utilities</a></li>
- <li><a href="media-queries.html">Media Queries</a></li>
-
- <li class="docs-nav-title">General</li>
- <li><a href="grid.html">Grid</a></li>
- <li><a href="flex-grid.html">Flex Grid</a></li>
- <li><a href="forms.html">Forms</a></li>
- <li><a href="visibility.html">Visibility Classes</a></li>
- <li><a href="float-classes.html">Float Classes</a></li>
-
- <li class="docs-nav-title">Typography</li>
- <li><a href="typography-base.html">Base Styles</a></li>
- <li><a href="typography-helpers.html">Helper Classes</a></li>
-
- <li class="docs-nav-title">Controls</li>
- <li><a href="button.html">Button</a></li>
- <li><a href="button-group.html">Button Group</a></li>
- <li><a href="close-button.html">Close Button</a></li>
- <li><a href="slider.html">Slider <span class="label">JS</span></a></li>
- <li><a href="switch.html">Switch</a></li>
-
- <li class="docs-nav-title">Navigation</li>
- <li><a href="navigation.html">Overview</a></li>
- <li><a href="menu.html">Menu</a></li>
- <li><a href="dropdown-menu.html">Dropdown Menu <span class="label">JS</span></a></li>
- <li><a href="drilldown-menu.html">Drilldown Menu <span class="label">JS</span></a></li>
- <li><a href="accordion-menu.html">Accordion Menu <span class="label">JS</span></a></li>
- <li><a href="top-bar.html">Top Bar</a></li>
- <li><a href="responsive-navigation.html">Responsive Navigation</a></li>
- <li><a href="magellan.html">Magellan <span class="label">JS</span></a></li>
- <li><a href="pagination.html">Pagination</a></li>
- <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
-
- <li class="docs-nav-title">Containers</li>
- <li><a href="accordion.html">Accordion <span class="label">JS</span></a></li>
- <li><a href="callout.html">Callout</a></li>
- <li><a href="dropdown.html">Dropdown <span class="label">JS</span></a></li>
- <li><a href="media-object.html">Media Object</a></li>
- <li><a href="off-canvas.html">Off-canvas <span class="label">JS</span></a></li>
- <li><a href="reveal.html">Reveal <span class="label">JS</span> <small>Modal</small></a></li>
- <li><a href="table.html">Table</a></li>
- <li><a href="tabs.html">Tabs <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Media</li>
- <li><a href="badge.html">Badge</a></li>
- <li><a href="flex-video.html">Flex Video</a></li>
- <li><a href="label.html">Label</a></li>
- <li><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
- <li><a href="progress-bar.html">Progress Bar</a></li>
- <li><a href="thumbnail.html">Thumbnail</a></li>
- <li><a href="tooltip.html">Tooltip <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Plugins</li>
- <li><a href="abide.html">Abide <small>Form Validation</small></a></li>
- <li><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
- <li><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
- <li><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
- <li><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
-
- <li class="docs-nav-title">Sass</li>
- <li><a href="sass-functions.html">Functions</a></li>
- <li class="current"><a href="sass-mixins.html">Mixins</a></li>
-
- <li class="docs-nav-title">Libraries</li>
- <li><a href="motion-ui.html">Motion UI</a></li>
- <li><a href="panini.html">Panini</a></li>
- <li><a href="style-sherpa.html">Style Sherpa</a></li>
-
- <li class="docs-nav-title">Older Versions</li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
- <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
- <li><a href="https://get.foundation/sites/docs/v/3.2.5/">Foundation 3</a></li>
- <li><a href="https://get.foundation/sites/docs/v/2.2.1/">Foundation 2</a></li>
- </ul>
-
- </div>
- </div>
-
- <!-- Small Business(Docs) -->
- <section id="studiosCallout">
- <div class="row">
- <div class="medium-4 large-4 columns">
- <img src="https://get.foundation/assets/img/smallbiz-footer.svg" alt="">
- </div>
- <div class="medium-8 large-8 columns banner-info">
- <div class="row column property-label">ZURB Foundation</div>
- <h3 class="light">Yeah, we can help with that.</h3>
- <p class="lead"> We’ll collaborate with your team throughout the entire project life cycle. We’ll take your concept and move it through ideation, hi-fi wireframes, visual design and code, all while informing you on the whys and hows along the way.</p>
- <div class="course-buttons">
- <a href="https://get.foundation/get-involved/premium-support.html" class="studios button" data-zcom-event="studios_foundation_click" id="foundationSmallV1">Show Me How →</a>
- </div>
- </div>
- </div>
- </section>
-
- <div class="docs-newsletter">
- <div class="row">
- <div class="medium-7 large-8 columns">
- <a target="_blank" href="https://get.foundation/learn/responsive-reading.html">
- <h5 class="">Download ZURB’s 21 Responsive Trends That Will Shape 2017</h5>
- <p style="margin-bottom: 0;">Stay informed with amazing responsive trends each month from ZURB.</p>
- </a>
- </div>
- <div class="medium-5 large-4 footer-signup-form columns">
- <a style="margin-bottom: 0;" target="_blank" href="https://get.foundation/learn/responsive-reading.html" class="button expanded">Download the PDF</a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-top bg-fblue">
- <div class="row property">
- <div class="medium-4 columns">
- <div class="property-info">
- <h3>Foundation for Sites</h3>
- <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
- </p>
- </div>
- </div>
-
- <div class="medium-8 columns">
- <div class="row collapse">
- <div class="medium-4 columns">
- <div class="learn-links">
- <h4 class="hide-for-small">Want more?</h4>
- <ul>
- <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
- <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
- <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
- <li><a href="http://zurb.com/university/courses">Training</a></li>
- <li><a href="http://zurb.com/library">Design Resources</a></li>
- </ul>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="support-links">
- <h4 class="hide-for-small">Talk to us</h4>
- <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
- <p><a href="https://get.foundation/get-involved/contribute.html">Get involved in<br>our amazing community.</a></p>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="connect-links">
- <h4 class="hide-for-small">Stay Updated</h4>
- <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
- <a href="http://zurb.com/news" class="small button">Stay Connected</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="row global">
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/studios" class="footer-link-block services">
- <span class="title">Studios</span>
- <span>Helping more than 200 startups succeed since 1998.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="https://get.foundation/" class="footer-link-block foundation">
- <span class="title">Foundation</span>
- <span>The most advanced front-end framework in the world.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/notable" class="footer-link-block apps">
- <span class="title">Notable Design Apps</span>
- <span>Prototype, iterate and collect feedback on your products.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/university" class="footer-link-block expo">
- <span class="title">University</span>
- <span>Ideas, thoughts and design resources shared with you.</span>
- </a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-bottom">
- <div class="row">
- <div class="medium-4 medium-push-8 columns">
- <ul class="home-social">
- <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
- <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
- <li><a href="http://zurb.com/contact" class="mail"></a></li>
- </ul>
- </div>
- <div class="medium-8 medium-pull-4 columns">
- <a href="http://www.zurb.com" class="zurb-logo regular"></a>
- <ul class="zurb-links">
- <li><a href="http://zurb.com/about">About</a></li>
- <li><a href="http://zurb.com/blog">Blog</a></li>
- <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
- <li><a href="http://zurb.com/contact">Contact</a></li>
- <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
- </ul>
- <p class="copyright">© 1998‐2016 ZURB, Inc. All rights reserved.</p>
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- <script>
- var _gaq = _gaq || [];
- _gaq.push(
- ['_setAccount', 'UA-2195009-2'],
- ['_trackPageview'],
- ['b._setAccount', 'UA-2195009-27'],
- ['b._trackPageview']
- );
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
-
- <script src="assets/js/vendor.js?hash=70b308b919bab7de8fd7a0e7d99cc6c0"></script>
- <script src="assets/js/foundation.js?hash=5ba43f331cb7148e55cf2b0c22a6f2bf"></script>
- <script src="assets/js/docs.js?hash=e8a00b74235be6b651c35a293aa7233d"></script>
- <script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
-</body>
-</html>
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="Foundation is written in Sass, which allows us to make the codebase customizable and flexible.">
- <link rel="icon" href="assets/img/icons/foundation-favicon.ico" type="image/x-icon">
- <title>Foundation for Sites 6 Docs | Sass</title>
- <link href="assets/css/docs.css?hash=9fbe86717f52776c200b71df797c7c91" rel="stylesheet" />
- <link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=394baee4a707e20b8b122cd4d918c585" rel="stylesheet">
- <!-- <link rel="stylesheet" href="./node_modules/motion-ui/dist/motion-ui.css" /> -->
-</head>
-<body>
-
- <div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
-
- <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="mobile-ofc vertical menu">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
-
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/support.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/sort/unanswered">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
- </ul>
- </li>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <title>Getting Started With Sass | Foundation Docs</title>
+ <link rel="icon" href="assets/img/icons/oundation-favicon.ico" type="image/x-icon">
+ <!-- For third-generation iPad with high-resolution Retina display: -->
+ <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/img/icons/apple-touch-icon-144x144-precomposed.png">
+ <!-- For iPhone with high-resolution Retina display: -->
+ <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/img/icons/apple-touch-icon-114x114-precomposed.png">
+ <!-- For first- and second-generation iPad: -->
+ <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/img/icons/apple-touch-icon-72x72-precomposed.png">
+ <!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
+ <link rel="apple-touch-icon-precomposed" href="assets/img/icons/apple-touch-icon-precomposed.png">
+
+ <meta name="description" content="Documentation and reference library for ZURB Foundation. JavaScript, CSS, components, grid and more.">
+ <meta name="author" content="ZURB, inc. ZURB network also includes zurb.com">
+ <meta name="copyright" content="ZURB, inc. Copyright (c) 2014">
+
+ <link href="assets/css/docs.css" rel="stylesheet" />
+ <link href="http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" rel="stylesheet" />
+ <script src="assets/js/modernizr.js"></script>
+ </head>
+ <body class="antialiased hide-extras">
+
+ <!-- Info Banner For Announcements or Links -->
+ <!-- <a href="https://get.foundation" id="notice">
+ <div class="info">
+ <h5>Foundation 6 is here!</h5>
+ </div>
+ </a> -->
+
+
+ <div class="marketing off-canvas-wrap" data-offcanvas>
+ <div class="inner-wrap">
+
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
- </div>
-
- <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="vertical menu">
- <li><a href="#">Foundation</a></li>
- <li><a href="#">Dot</a></li>
- <li><a href="#">ZURB</a></li>
- <li><a href="#">Com</a></li>
- <li><a href="#">Slash</a></li>
- <li><a href="#">Sites</a></li>
- </ul>
- </div>
-
- <div class="off-canvas-content" data-off-canvas-content>
- <!-- Info Banner For Announcements or Links -->
- <!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
- <div class="info">
- <h5>Foundation 6 is here!</h5>
- </div>
- </a> -->
- <nav class="marketing-topbar show-for-medium">
-
- <ul class="menu">
- <li class="topbar-title"><a href="https://get.foundation/index.html"><img src="assets/img/logos/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
+<!-- <nav class="tab-bar show-for-small">
+ <a class="off-canvas-left-toggle menu-icon ">
+ <span></span>
+ </a>
+</nav> -->
+
+
+<nav class="top-bar docs-bar hide-for-small" data-topbar>
+ <ul class="title-area">
+ <li class="name">
+ <h1>
+ <a href="https://get.foundation/">
+ <span>Foundation</span>
+ </a>
+ </h1>
+ </li>
+ </ul>
+
+ <section class="top-bar-section">
+ <ul class="right">
+ <li class="divider"></li>
+ <li class="has-dropdown">
+ <a target="_blank" href="https://zurb.com/responsive">Showcase <i class="fa fa-external-link"></i></a>
+ <ul class="dropdown">
+ <li><a target="_blank" href="https://zurb.com/responsive">Showcase <i class="fa fa-external-link"></i></a></li>
+ <li><a href="https://get.foundation/showcase/brands.html">Brands</a></li>
+ <li><a href="https://get.foundation/showcase/case-studies.html">Case Studies</a></li>
+ <li><a href="https://get.foundation/showcase/blog.html">Blog</a></li>
+ <li><a href="https://get.foundation/showcase/buzz.html">Buzz</a></li>
+ <li><a href="https://get.foundation/showcase/about.html">About Foundation</a></li>
</ul>
-
- <ul class="dropdown menu" data-dropdown-menu data-click-open="false">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/" target="_blank">F5 Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="https://get.foundation/emails/docs/" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
+ </li>
+ <li class="divider"></li>
+ <li class="has-dropdown">
+ <a href="https://get.foundation/develop/getting-started.html" class="">Develop</a>
+ <ul class="dropdown">
+ <li class="title">Frameworks</li>
+ <li><a class="" href="https://get.foundation/sites.html">Foundation for Sites</a></li>
+ <li><a class="" href="https://get.foundation/apps.html">Foundation for Apps</a></li>
+ <li><a class="spaced-list-item" href="https://get.foundation/emails.html">Foundation for Emails</a></li>
+ <li class="spaced-divider"><hr></li>
+ <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
+ <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
+ <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
+ <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
</ul>
-
- </nav>
-
- <div class="title-bar hide-for-medium">
- <div class="title-bar-left">
- <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
- <span class="title-bar-title">Foundation</span>
- </div>
- </div>
-
+ </li>
+ <li class="divider"></li>
+ <li class="has-dropdown">
+ <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
+ <ul class="dropdown">
+ <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
+ <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
+ <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
+ <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
+ <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
+ </ul>
+ </li>
+ <li class="divider"></li>
+ <li class="has-dropdown">
+ <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
+ <ul class="dropdown">
+ <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
+ <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
+ <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
+ <li><a href="https://get.foundation/learn/events.html">Events</a></li>
+ <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
+ <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
+ <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
+ </ul>
+ </li>
+ <li class="divider"></li>
+ <li class="has-dropdown">
+ <a href="https://get.foundation/sites/docs/v/5.5.3/">Docs</a>
+ <ul class="dropdown">
+ <li><a href="https://get.foundation/sites/docs/v/5.5.3/">F5 Sites Docs</a></li>
+ <li><a href="https://get.foundation/sites/docs">F6 Sites Docs</a></li>
+ <li><a href="https://get.foundation/emails/docs">Emails Docs</a></li>
+ <li><a href="https://get.foundation/apps/docs">Apps Docs</a></li>
+ </ul>
+ </li>
+ <li class="divider"></li>
+ <li class="has-form">
+ <a href="https://get.foundation/sites/getting-started.html">Getting Started</a>
+ </ul>
+ </section>
+</nav>
+ <nav class="tab-bar show-for-small">
+ <a class="left-off-canvas-toggle menu-icon">
+ <span>Foundation</span>
+ </a>
+</nav>
+
+<aside class="marketing-left-off-canvas-menu">
+
+ <ul class="off-canvas-list">
+ <li><label class="first">Foundation</label></li>
+ <li><a href="https://get.foundation">Home</a></li>
+ </ul>
+
+ <hr>
+
+ <ul class="off-canvas-list">
+ <li><label>Setup</label></li>
+
+ <li><a href="index.html" data-search="">Getting Started</a></li>
+ <li><a href="css.html" data-search="Styles">CSS</a></li>
+ <li><a href="sass.html" data-search="Sass">Sass</a></li>
+ <li><a href="sass-files.html" data-search="Sass,Sass - What You Get, How to Use Sass">Sass Files</a></li>
+ <li><a href="using-sass.html" data-search="Sass,Sass - What You Get, How to Use Sass">Using Sass</a></li>
+ <li><a href="applications.html" data-search="Rails,Gem">Applications</a></li>
+ <li><a href="javascript.html" data-search="">Javascript</a></li>
+ <li><a href="components/global.html" data-search="Global Styles,Global Mixins,Global Variables,Useful HTML Classes">Global Styles</a></li>
+ <li><a href="components/kitchen_sink.html" data-search="">Kitchen Sink</a></li>
+ <li><a href="upgrading.html" data-search="Migration">Upgrading</a></li>
+
+ <li class="divider"></li>
+ <li><label>Structure</label></li>
+ <li><a href="media-queries.html" data-search="Breakpoints">Media Queries</a></li>
+ <li><a href="components/visibility.html" data-search="">Visibility</a></li>
+ <li><a href="components/grid.html" data-search="">Grid</a></li>
+ <li><a href="components/block_grid.html" data-search="">Block Grid</a></li>
+ <li><a href="components/interchange.html" data-search="Responsive Images">Interchange Responsive Content <span class="label">JS</span></a></li>
+ <li><a href="utility-classes.html" data-search="">Utility Classes</a></li>
+ <li><a href="javascript-utilities.html" data-search="">Javascript Utilities</a></li>
+ <li><a href="components/rtl.html" data-search="RTL">Right-to-Left Support</a></li>
+
+ <li class="divider"></li>
+ <li><label>Navigation</label></li>
+ <li><a href="components/offcanvas.html" data-search="Off Canvas">Off-canvas <span class="label">JS</span></a></li>
+ <li><a href="components/topbar.html" data-search="Nav Bar,Navigation,Sticky">Top Bar <span class="label">JS</span></a></li>
+ <li><a href="components/icon-bar.html" data-search="">Icon Bar</a></li>
+ <li><a href="components/sidenav.html" data-search="">Side Nav</a></li>
+ <li><a href="components/magellan.html" data-search="Scrollspy">Magellan Sticky Nav <span class="label">JS</span></a></li>
+ <li><a href="components/subnav.html" data-search="">Sub Nav</a></li>
+ <li><a href="components/breadcrumbs.html" data-search="Navigation Path,Cookie Crumb">Breadcrumbs</a></li>
+ <li><a href="components/pagination.html" data-search="">Pagination</a></li>
+
+ <li class="divider"></li>
+ <li><label>Media</label></li>
+ <li><a href="components/orbit.html" data-search="Carousel,Slider,Slideshow">Orbit Slider <span class="label">JS</span></a></li>
+ <li><a href="components/thumbnails.html" data-search="Images">Thumbnails</a></li>
+ <li><a href="components/clearing.html" data-search="Responsive Lightbox,Lightbox">Clearing Lightbox <span class="label">JS</span></a></li>
+ <li><a href="components/flex_video.html" data-search="Responsive Video">Flex Video</a></li>
+
+ <li class="divider"></li>
+ <li><label>Forms</label></li>
+ <li><a href="components/forms.html" data-search="">Forms</a></li>
+ <li><a href="components/switch.html" data-search="">Switches</a></li>
+ <li><a href="components/range_slider.html" data-search="Range Slider">Sliders <span class="label">JS</span></a></li>
+ <li><a href="components/abide.html" data-search="Form Validation,Field Validation">Abide Validation <span class="label">JS</span></a></li>
+
+ <li class="divider"></li>
+ <li><label>Buttons</label></li>
+ <li><a href="components/buttons.html" data-search="">Buttons</a></li>
+ <li><a href="components/button_groups.html" data-search="Button Bar">Button Groups</a></li>
+ <li><a href="components/split_buttons.html" data-search="">Split Buttons <span class="label">JS</span></a></li>
+ <li><a href="components/dropdown_buttons.html" data-search="">Dropdown Buttons <span class="label">JS</span></a></li>
+
+ <li class="divider"></li>
+ <li><label>Typography</label></li>
+ <li><a href="components/typography.html" data-search="Typography,Type-setting,Composition">Type</a></li>
+ <li><a href="components/inline_lists.html" data-search="Lists">Inline Lists</a></li>
+ <li><a href="components/labels.html" data-search="Tags">Labels</a></li>
+ <li><a href="components/keystrokes.html" data-search="">Keystrokes</a></li>
+
+ <li class="divider"></li>
+ <li class="heading"><label>Callouts & Prompts</label></li>
+ <li><a href="components/reveal.html" data-search="Modal">Reveal Modal <span class="label">JS</span></a></li>
+ <li><a href="components/alert_boxes.html" data-search="Error,Success,Warning">Alerts <span class="label">JS</span></a></li>
+ <li><a href="components/panels.html" data-search="Wells">Panels</a></li>
+ <li><a href="components/tooltips.html" data-search="Popover">Tooltips <span class="label">JS</span></a></li>
+ <li><a href="components/joyride.html" data-search="Tooltip Tour,Guider,Tooltip Walk-through">Joyride <span class="label">JS</span></a></li>
+
+ <li class="divider"></li>
+ <li><label>Content</label></li>
+ <li><a href="components/dropdown.html" data-search="">Dropdowns <span class="label">JS</span></a></li>
+ <li><a href="components/pricing_tables.html" data-search="">Pricing Tables</a></li>
+ <li><a href="components/progress_bars.html" data-search="">Progress Bars</a></li>
+ <li><a href="components/tables.html" data-search="">Tables</a></li>
+ <li><a href="components/accordion.html" data-search="">Accordion <span class="label">JS</span></a></li>
+ <li><a href="components/tabs.html" data-search="">Tabs <span class="label">JS</span></a></li>
+ <li><a href="components/equalizer.html" data-search="">Equalizer <span class="label">JS</span></a></li>
+
+ <li class="divider"></li>
+ <li><label>Support</label></li>
+
+ <li><a href="changelog.html" data-search="">Changelog</a></li>
+ <li><a href="compatibility.html" data-search="">Compatibility</a></li>
+
+ <li class="divider"></li>
+ <li class="heading"><label>Older Docs</label></li>
+ <li><a href="/docs/v/4.3.2/" data-search="">Foundation 4</a></li>
+ <li><a href="/docs/v/3.2.5/" data-search="">Foundation 3</a></li>
+ <li><a href="/docs/v/2.2.1/" data-search="">Foundation 2</a></li>
+ </ul>
+
+ <hr>
+
+ <div class="zurb-links">
+ <ul class="top">
+ <li class="logo"><a href="http://zurb.com"></a></li>
+ <li><a href="http://zurb.com/about">About</a></li>
+ <li><a href="http://zurb.com/blog">Blog</a></li>
+ <li><a href="http://zurb.com/contact">Contact</a></li>
+ </ul>
+ <ul class="pillars">
+ <li>
+ <a href="http://www.zurb.com/studios" class="footer-link-block services">
+ <span class="title">Studios</span>
+ <span>Helping startups win since '98.</span>
+ </a>
+ </li>
+ <li>
+ <a href="https://get.foundation/" class="footer-link-block foundation">
+ <span class="title">Foundation</span>
+ <span>World's most advanced responsive framework.</span>
+ </a>
+ </li>
+ <li>
+ <a href="http://zurb.com/notable" class="footer-link-block apps">
+ <span class="title">Notable</span>
+ <span>Tools to rapidly prototype and iterate.</span>
+ </a>
+ </li>
+ <li>
+ <a href="http://zurb.com/university" class="footer-link-block expo">
+ <span class="title">University</span>
+ <span>Online training for smarter product design.</span>
+ </a>
+ </li>
+ </ul>
+</div>
- <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
+</aside>
+
+<a class="exit-off-canvas" href="#"></a>
+
+
+ <section role="main" class="scroll-container">
+
+ <div class="row">
+ <div class="large-3 medium-4 columns">
+ <div class="hide-for-small">
+ <div class="sidebar">
+ <h5>Foundation Documentation</h5>
+ <!-- <form>
+ <label>Search Documentation</label>
+ <input tabindex="1" id="autocomplete" type="search" placeholder="Search Docs: e.g. forms">
+ </form>
+
+ <a href="https://get.foundation/sites/download.html" class="download button expand">Download Foundation</a> -->
+
+ <nav>
+ <ul class="side-nav">
+ <li class="heading">Setup</li>
+
+ <li><a href="index.html" data-search="">Getting Started</a></li>
+ <li><a href="css.html" data-search="Styles">CSS</a></li>
+ <li><a href="sass.html" data-search="Sass">Sass</a></li>
+ <li><a href="sass-files.html" data-search="Sass,Sass - What You Get, How to Use Sass">Sass Files</a></li>
+ <li><a href="using-sass.html" data-search="Sass,Sass - What You Get, How to Use Sass">Using Sass</a></li>
+ <li><a href="applications.html" data-search="Rails,Gem">Applications</a></li>
+ <li><a href="javascript.html" data-search="">JavaScript</a></li>
+ <li><a href="components/global.html" data-search="Global Styles,Global Mixins,Global Variables,Useful HTML Classes">Global Styles</a></li>
+ <li><a href="components/kitchen_sink.html" data-search="">Kitchen Sink</a></li>
+ <li><a href="accessibility.html" data-search="accessibility">Accessibility</a></li>
+ <li><a href="upgrading.html" data-search="Migration">Upgrading</a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Structure</li>
+ <li><a href="media-queries.html" data-search="Breakpoints">Media Queries</a></li>
+ <li><a href="components/visibility.html" data-search="">Visibility</a></li>
+ <li><a href="components/grid.html" data-search="">Grid</a></li>
+ <li><a href="components/block_grid.html" data-search="">Block Grid</a></li>
+ <li><a href="components/interchange.html" data-search="Responsive Images">Interchange Responsive Content <span class="label">JS</span></a></li>
+ <li><a href="utility-classes.html" data-search="">Utility Classes</a></li>
+ <li><a href="javascript-utilities.html" data-search="">Javascript Utilities</a></li>
+ <li><a href="components/rtl.html" data-search="RTL">Right-to-Left Support</a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Navigation</li>
+ <li><a href="components/offcanvas.html" data-search="Off Canvas">Off-canvas <span class="label">JS</span></a></li>
+ <li><a href="components/topbar.html" data-search="Nav Bar,Navigation,Sticky">Top Bar <span class="label">JS</span></a></li>
+ <li><a href="components/icon-bar.html" data-search="">Icon Bar</a></li>
+ <li><a href="components/sidenav.html" data-search="">Side Nav</a></li>
+ <li><a href="components/magellan.html" data-search="Scrollspy">Magellan Sticky Nav <span class="label">JS</span></a></li>
+ <li><a href="components/subnav.html" data-search="">Sub Nav</a></li>
+ <li><a href="components/breadcrumbs.html" data-search="Navigation Path,Cookie Crumb">Breadcrumbs</a></li>
+ <li><a href="components/pagination.html" data-search="">Pagination</a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Media</li>
+ <li><a href="components/orbit.html" data-search="Carousel,Slider,Slideshow">Orbit Slider <span class="label">JS</span></a></li>
+ <li><a href="components/thumbnails.html" data-search="Images">Thumbnails</a></li>
+ <li><a href="components/clearing.html" data-search="Responsive Lightbox,Lightbox">Clearing Lightbox <span class="label">JS</span></a></li>
+ <li><a href="components/flex_video.html" data-search="Responsive Video">Flex Video</a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Forms</li>
+ <li><a href="components/forms.html" data-search="">Forms</a></li>
+ <li><a href="components/switch.html" data-search="">Switches</a></li>
+ <li><a href="components/range_slider.html" data-search="Range Slider">Range Sliders <span class="label">JS</span></a></li>
+ <li><a href="components/abide.html" data-search="Form Validation,Field Validation">Abide Validation <span class="label">JS</span></a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Buttons</li>
+ <li><a href="components/buttons.html" data-search="">Buttons</a></li>
+ <li><a href="components/button_groups.html" data-search="Button Bar">Button Groups</a></li>
+ <li><a href="components/split_buttons.html" data-search="">Split Buttons <span class="label">JS</span></a></li>
+ <li><a href="components/dropdown_buttons.html" data-search="">Dropdown Buttons <span class="label">JS</span></a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Typography</li>
+ <li><a href="components/typography.html" data-search="Typography,Type-setting,Composition">Type</a></li>
+ <li><a href="components/inline_lists.html" data-search="Lists">Inline Lists</a></li>
+ <li><a href="components/labels.html" data-search="Tags">Labels</a></li>
+ <li><a href="components/keystrokes.html" data-search="">Keystrokes</a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Callouts & Prompts</li>
+ <li><a href="components/reveal.html" data-search="Modal">Reveal Modal <span class="label">JS</span></a></li>
+ <li><a href="components/alert_boxes.html" data-search="Error,Success,Warning">Alerts <span class="label">JS</span></a></li>
+ <li><a href="components/panels.html" data-search="Wells">Panels</a></li>
+ <li><a href="components/tooltips.html" data-search="Popover">Tooltips <span class="label">JS</span></a></li>
+ <li><a href="components/joyride.html" data-search="Tooltip Tour,Guider,Tooltip Walk-through">Joyride <span class="label">JS</span></a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Content</li>
+ <li><a href="components/dropdown.html" data-search="">Dropdowns <span class="label">JS</span></a></li>
+ <li><a href="components/pricing_tables.html" data-search="">Pricing Tables</a></li>
+ <li><a href="components/progress_bars.html" data-search="">Progress Bars</a></li>
+ <li><a href="components/tables.html" data-search="">Tables</a></li>
+ <li><a href="components/accordion.html" data-search="">Accordion <span class="label">JS</span></a></li>
+ <li><a href="components/tabs.html" data-search="">Tabs <span class="label">JS</span></a></li>
+ <li><a href="components/equalizer.html" data-search="">Equalizer <span class="label">JS</span></a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Support</li>
+
+ <li><a href="changelog.html" data-search="">Changelog</a></li>
+ <li><a href="compatibility.html" data-search="">Compatibility</a></li>
+
+ <li class="divider"></li>
+ <li class="heading">Older Docs</li>
+ <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html" data-search="">Foundation 4</a></li>
+ <li><a href="https://get.foundation/sites/docs/v/3.2.5/" data-search="">Foundation 3</a></li>
+ <li><a href="https://get.foundation/sites/docs/v/2.2.1/" data-search="">Foundation 2</a></li>
+
+ </ul>
+ </nav>
- <div class="expanded row">
- <div class="medium-9 large-10 medium-push-3 large-push-2 columns">
+</div>
+ </div>
+ </div>
+ <div class="large-9 medium-8 columns">
+ <h1 id="getting-started-with-sass">Getting Started With Sass</h1>
+ <h3 class="subheader">Sass is the easiest way to customize Foundation! </h3>
-<article class="docs-component" id="docs-sass">
+<hr>
-<a href="#docs-menu" class="small secondary expanded button hide-for-medium">Jump to Nav</a>
+<!--
+Magellan
+-->
+<div class="row">
+ <div class="small-12 columns">
+ <h2>Three Easy Ways to Get Started</h2>
+ <h2 class="subheader">Setting up Foundation 5 Sass is quick and easy!</h2>
+ <p class="above-magellan">We recommend using the Command Line Interface. We've perfected the command line for quick and easy power, but you can use Foundation with just the files or other applications, like Mixture or CodeKit.</p>
+ <div class="magellan-container" data-magellan-expedition="fixed" data-options="sticky_on:large">
+ <dl class="sub-nav">
+ <dd data-magellan-arrival="cli"><a href="#cli">Recommend Install</a></dd>
+ <dd data-magellan-arrival="nocli"><a href="#nocli">Manual Download</a></dd>
+ <dd data-magellan-arrival="other"><a href="#other">Third Party Application</a></dd>
+ </dl>
+ </div>
+ </div>
+</div>
-<header>
- <h1 class="docs-page-title">Sass</h1>
+<br>
+<div class="row">
+ <div class="small-12 columns recommended">
+ <h2 data-magellan-destination="cli"><a name="cli"></a>Recommended Install for Foundation</h2>
+ </div>
+</div>
- <p class="lead docs-page-lead">Foundation is written in Sass, which allows us to make the codebase customizable and flexible.</p>
+<div class="row recommended">
+ <div class="medium-12 large-6 large-push-6 columns">
+ <img class="command-line" data-interchange="[assets/img/images/faster-to-code-medium.svg, (medium)], [assets/img/images/faster-to-code.svg, (large)]"><br> </div>
+ <div class="medium-12 large-6 large-pull-6 columns">
+ <p>Using this Command Line Interface will make updating a Foundation project super easy and help speed up your workflow. The CLI updates your project while leaving your customized styles in tact. We recommend this method since the CLI does many tasks for you.</p>
+ </div>
+</div>
- <ul class="menu simple docs-contribute-menu">
- <li><a href="https://github.com/zurb/foundation-sites/edit/master/docs/pages/sass.md" target="_blank"><i class="fi-pencil"></i>Edit this Page</a></li>
- <li><a href="https://github.com/zurb/foundation-sites/issues/new?title=%5BSass%5D%20ISSUE%20NAME%20HERE" target="_blank"><i class="fi-social-github"></i>Report a Bug</a></li>
- <li><a href="https://get.foundation/forum" target="_blank"><i class="fi-comment"></i>Get Help</a></li>
- </ul>
-</header>
+<hr class="dashed">
-<hr>
+<!--
+Ruby/Git/Node
+-->
<div class="row">
+ <div class="small-12 columns">
+ <h3>What You'll Need</h3>
+ <h3 class="subheader">You'll want to install the following on your system before proceeding:</h3>
+ </div>
+</div>
+
+<div class="row circle-list">
+ <div class="medium-4 columns">
+ <img src="assets/img/images/git.svg" >
+ <h4>Git</h4>
+ <p>Git is GitHub's version control system, this install basically commands the tools you'll use in the command line to work within GitHub.</p>
+ <p><a href="http://git-scm.com/">Download Git →</a></p>
+ </div>
+
+ <hr class="dashed hide-for-medium-up">
-<div class="large-9 columns" id="docs">
-<div class="primary callout">
- <p>Not familiar with Sass? The <a href="http://sass-lang.com/guide">official tutorial</a> on sass-lang.com is a great place to start.</p>
+ <div class="medium-4 columns">
+ <img src="assets/img/images/node.svg">
+ <h4>NodeJS</h4>
+ <p>Node allows JavaScript to run outside of the browser, and is necessary for Bower to package all the files into the project and link them together.</p>
+ <p><a href="http://nodejs.org/">Download NodeJS →</a></p>
+ </div>
+
+ <hr class="dashed hide-for-medium-up">
+
+ <div class="medium-4 columns">
+ <img src="assets/img/images/ruby.svg">
+ <h4>Ruby 1.9+</h4>
+ <p>We wrote a Ruby script that downloads the Sass files and scaffolds the project. If you have a Mac, you probably already have Ruby installed.</p>
+ <p><a href="https://www.ruby-lang.org/en/">Download Ruby →</a></p>
+ </div>
</div>
-<h2 id="compatibility" class="docs-heading" data-magellan-target="compatibility">Compatibility<a class="docs-heading-icon" href="#compatibility"></a></h2><p><img src="assets/img/logos/sass-logo.svg" alt="Sass logo" class="float-right" style="width: 150px; height: 150px; margin-left: 1rem;"></p>
-<p><strong>Foundation for Sites can be compiled with Ruby Sass and libsass.</strong> We tend to stick to the latest versions of both compilers when possible. Our documentation and starter project are compiled with <a href="https://github.com/sass/node-sass">node-sass</a>, a Node port of libsass. We recommend these versions of either compiler:</p>
-<ul>
-<li>Ruby Sass <strong>3.4+</strong></li>
-<li>node-sass <strong>3.4.2+</strong> (libsass <strong>3.3.2</strong>)</li>
-</ul>
-<h3 id="autoprefixer-required" class="docs-heading">Autoprefixer Required<a class="docs-heading-icon" href="#autoprefixer-required"></a></h3><p>We don't include vendor prefixes in our Sass files—instead, we let <a href="https://github.com/postcss/autoprefixer">Autoprefixer</a> handle it for us. Our build process uses <a href="https://github.com/sindresorhus/gulp-autoprefixer">gulp-autoprefixer</a>, but there are <a href="https://github.com/postcss/autoprefixer#usage">other versions</a> that work with Grunt, Rails, Brunch, and more.</p>
-<p>To get the proper browser support, use these Autoprefixer settings:</p>
-<div class="docs-code" data-docs-code><pre><code class="js">autoprefixer({
- browsers: [<span class="hljs-string">'last 2 versions'</span>, <span class="hljs-string">'ie >= 9'</span>, <span class="hljs-string">'and_chr >= 2.3'</span>]
-});</code></pre></div><hr>
-<h2 id="loading-the-framework" class="docs-heading" data-magellan-target="loading-the-framework">Loading the Framework<a class="docs-heading-icon" href="#loading-the-framework"></a></h2><p>If you're using Yeti Launch or the CLI to create a project, the Sass compilation process is already set up for you. If not, you can compile our Sass files yourself, or drop in a pre-built CSS file.</p>
-<p>To get started, first install the framework files using Bower or npm.</p>
-<div class="docs-code" data-docs-code><pre><code class="bash">npm install foundation-sites --save
-bower install foundation-sites --save</code></pre></div><h3 id="compiling-manually" class="docs-heading">Compiling Manually<a class="docs-heading-icon" href="#compiling-manually"></a></h3><p>Next, add the framework files as an import path. How you do this depends on your build process, but the path is the same regardless: <code>packages_folder/foundation-sites/scss</code></p>
-<p>Here's an example using grunt-contrib-sass:</p>
-<div class="docs-code" data-docs-code><pre><code class="js">grunt.initConfig({
- sass: {
- dist: {
- options: {
- loadPath: [<span class="hljs-string">'node_modules/foundation-sites/scss'</span>]
- }
- }
- }
-});</code></pre></div><p>If you're using Compass, open your project's <code>config.rb</code> and add the import path there:</p>
-<div class="docs-code" data-docs-code><pre><code class="ruby">add_import_path <span class="hljs-string">"node_modules/foundation-sites/scss"</span></code></pre></div><p>Finally, add an <code>@import</code> statement to the top of your primary Sass file. Refer to <a href="#adjusting-css-output">Adjusting CSS Output</a> below to learn how to control the CSS output of the framework.</p>
-<div class="docs-code" data-docs-code><pre><code class="scss">@<span class="hljs-keyword">import</span> <span class="hljs-string">'foundation'</span>;</code></pre></div><p>You're also going to want a settings file for your project, which will allow you to modify the default styles of Foundation. <strong><a href="https://raw.githubusercontent.com/zurb/foundation-sites/master/scss/settings/_settings.scss">Download the latest settings file here</a></strong>, add it to your project as <code>_settings.scss</code>, then import it <em>before</em> Foundation itself.</p>
-<div class="docs-code" data-docs-code><pre><code class="scss">@<span class="hljs-keyword">import</span> <span class="hljs-string">'settings'</span>;
-@<span class="hljs-keyword">import</span> <span class="hljs-string">'foundation'</span>;</code></pre></div><h3 id="using-compiled-css" class="docs-heading">Using Compiled CSS<a class="docs-heading-icon" href="#using-compiled-css"></a></h3><p>The Foundation for Sites npm and Bower packages include pre-compiled CSS files, in minified (compressed) and unminified flavors. If you're interested in editing the framework CSS directly, use the unminified file. For production, use the minified version.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"node_modules/foundation-sites/dist/css/foundation-sites.css"</span>></span>
-
-<span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"node_modules/foundation-sites/dist/css/foundation-sites.min.css"</span>></span></code></pre></div><hr>
-<h2 id="adjusting-css-output" class="docs-heading" data-magellan-target="adjusting-css-output">Adjusting CSS Output<a class="docs-heading-icon" href="#adjusting-css-output"></a></h2><p>Foundation outputs many classes for its various components. These help developers get up and running quickly. However, when you move to production, you may wish to build your grid semantically, replace our pre-built classes with your own, or remove components entirely.</p>
-<p>Each component has an <strong>export mixin</strong> which prints out the CSS for that component. If you're cool with having everything, you just need one line of code:</p>
-<div class="docs-code" data-docs-code><pre><code class="scss">@<span class="hljs-keyword">include</span> foundation-everything;</code></pre></div><p>Our <a href="starter-projects.html">starter projects</a> include the full list of imports, making it easy to comment out the components you don't need.</p>
-<div class="docs-code" data-docs-code><pre><code class="scss">@<span class="hljs-keyword">import</span> <span class="hljs-string">'foundation'</span>;
-
-@<span class="hljs-keyword">include</span> foundation-global-styles;
-@<span class="hljs-keyword">include</span> foundation-grid;
-@<span class="hljs-keyword">include</span> foundation-typography;
-@<span class="hljs-keyword">include</span> foundation-button;
-@<span class="hljs-keyword">include</span> foundation-forms;
-<span class="hljs-comment">// And so on...</span></code></pre></div><hr>
-<h2 id="the-settings-file" class="docs-heading" data-magellan-target="the-settings-file">The Settings File<a class="docs-heading-icon" href="#the-settings-file"></a></h2><p>All Foundation projects include a settings file, named <code>_settings.scss</code>. If you're using Yeti Launch or the CLI to create a Foundation for Sites project, you can find the settings file under scss/ (basic template) or src/assets/scss/ (ZURB template). If you're installing the framework standalone using Bower or npm, there's a settings file included in those packages, which you can move into your own Sass files to work with.</p>
-<p>Every component includes a set of variables that modify core structural or visual styles. If there's something you can't customize with a variable, you can just write your own CSS to add it.</p>
-<div class="callout warning">
- <p>Once you've set up a new project, your settings file can't be automatically updated when new versions change, add, or remove variables. Keep tabs on new <a href="https://github.com/zurb/foundation/releases">Foundation releases</a> so you know when things change.</p>
+<hr class="dashed">
+
+<!--
+How to Install
+-->
+
+<div class="row">
+ <div class="small-12 path-container columns">
+ <h3>How to Install the CLI</h3>
+ <h3 class="subheader">Using the CLI to install Foundation 5 only takes two easy commands. You only have to install the CLI once. Don't want to read? <a href="https://get.foundation/learn/video-started-with-foundation.html">Check out this video we made to help you out.</a></h3>
+ <div class="callout panel" style="font-family: Helvetica">
+ <p>With the release of Foundation 6, we created a new CLI that supports all three Foundation frameworks. However, it does not create new Foundation 5 projects.</p>
+ <p>If you still need to create new Foundation 5 projects, stick with the old CLI, the install instructions for which are below. If you're ready to move to Foundation 6, head over to the <a href="https://get.foundation/sites/docs/installation.html">installation docs</a> for Foundation 6 and the new CLI.</p>
+ </div>
+ <div class="path-item">
+ <div class="circlenumber">
+ <h3>1</h3>
+ </div>
+ <p>We use Bower to manage updates to Foundation and the third-party libraries that Foundation is built on.</p>
+ <p class="panel">npm install -g bower grunt-cli</p>
+ </div>
+ <div class="path-item">
+ <div class="circlenumber">
+ <h3>2</h3>
+ </div>
+ <p>Installing the Foundation CLI on your computer only takes one command function.</p>
+ <p class="panel">gem install foundation</p><br> <p class="subheader note"><strong>Note:</strong> If you run into permission errors running these commands in the CLI, you can add the word 'sudo' before the line inside the interface:</p>
+ <p class="panel">sudo npm install -g bower grunt-cli <br> sudo gem install foundation</p><br> <p class="subheader note">If you use <a href="https://github.com/sstephenson/rbenv">rbenv</a>, rehash your shims after installing:</p>
+ <p class="panel">rbenv rehash</p>
+ </div>
+ </div>
</div>
-<p>Here's an example set of settings variables. These change the default styling of <a href="button.html">buttons</a>:</p>
-<div class="docs-code" data-docs-code><pre><code class="scss"><span class="hljs-comment">// Default padding for button.</span>
-<span class="hljs-variable">$button-padding</span>: <span class="hljs-number">0.85em</span> <span class="hljs-number">1em</span> !default;
+<hr class="dashed">
-<span class="hljs-comment">// Default margin for button.</span>
-<span class="hljs-variable">$button-margin</span>: <span class="hljs-number">0</span> <span class="hljs-variable">$global-padding</span> <span class="hljs-variable">$global-padding</span> <span class="hljs-number">0</span> !default;
+<!--
+Compass/Libsass
+-->
-<span class="hljs-comment">// Default fill for button. Is either solid or hollow.</span>
-<span class="hljs-variable">$button-fill</span>: solid !default;
+<div class="row">
+ <div class="small-12 columns">
+ <h3>Compiling Sass into CSS & Creating a Project</h3>
+ <h3 class="subheader">Sass is a great way to speed up front-end development. </h3>
+ <p>SCSS (Sassy CSS) syntax was introduced as "the new main syntax" for Sass and builds on the existing syntax of CSS. We created a SCSS version to allow more friendly and dynamic styling. This version also allows for greater customization than the HTML/CSS version. There are two easy ways our CLI helps you compile SCSS: Compass or Libsass with Grunt.</p>
+ <img class="flow-chart" data-interchange="[assets/img/images/scssflow-small.svg, (small)], [assets/img/images/scssflow-med.svg, (medium)], [assets/img/images/scssflow.svg, (large)]"><br> </div>
+</div>
-<span class="hljs-comment">// Default background color for button.</span>
-<span class="hljs-variable">$button-background</span>: <span class="hljs-variable">$primary-color</span> !default;
+<div class="row">
+ <div class="large-5 columns path-container two-paths">
+ <h4>Creating a Compass Project</h4>
+ <div class="path-item">
+ <div class="circlenumber">
+ <h3>1</h3>
+ </div><p>If it's not installed already, you can install Compass using the following command:</p>
+ <p class="panel">gem install compass</p>
+ </div>
+ <div class="path-item">
+ <div class="circlenumber">
+ <h3>2</h3>
+ </div>
+ <p>Next we'll use the Foundation CLI to create a new project:</p>
+ <p class="panel">foundation new MY_PROJECT</p>
+ </div>
+ <div class="path-item">
+ <div class="circlenumber">
+ <h3>3</h3>
+ </div>
+ <p>Boom, your project is created! Now Foundation will be easy.</p>
+ <p class="panel">cd MY_PROJECT</p>
+ </div>
+ <div class="path-item">
+ <div class="circlenumber">
+ <h3>4</h3>
+ </div>
+ <p>Bundler is used to ensure all the correct libraries are used. If you don't have it, run <code>gem install bundler</code></p>
+ <p>Then run <span class="panel">bundle</span> (only once per project)</p>
+ <p>Be sure to run compass watch in order to make changes.</p>
+ <p class="panel">bundle exec compass watch</p>
+ </div>
+ </div>
-<span class="hljs-comment">// Default hover background color for button.</span>
-<span class="hljs-variable">$button-background-hover</span>: scale-color(<span class="hljs-variable">$button-background</span>, <span class="hljs-variable">$lightness</span>: -<span class="hljs-number">15%</span>) !default;
+ <div class="large-5 large-pull-1 columns path-container two-paths">
+ <hr class="dashed hide-for-large-up">
+ <h4>Creating a Libsass Project</h4>
+ <div class="path-item">
+ <div class="circlenumber">
+ <h3>1</h3>
+ </div>
+ <p>First, navigate into the directory where you want to create your project:</p>
+ <p class="panel">cd path/to/sites</p>
+ </div>
+ <div class="path-item">
+ <div class="circlenumber">
+ <h3>2</h3>
+ </div>
+ <p>Next we'll use the Foundation CLI to create a new project:</p>
+ <p class="panel">foundation new project_name --libsass</p>
+ </div>
+ <div class="path-item">
+ <div class="circlenumber">
+ <h3>3</h3>
+ </div>
+ <p>Boom, your project is created! Now you need to use Grunt to compile everything before you start working:</p>
+ <p class="panel"> cd project_name<br>grunt build</p>
+ </div>
+ <div class="path-item">
+ <div class="circlenumber">
+ <h3>4</h3>
+ </div>
+ <p>Be sure to run grunt in order to make changes.</p>
+ <p class="panel">grunt</p>
+ </div>
+ </div>
+</div>
-<span class="hljs-comment">// Default font color for button.</span>
-<span class="hljs-variable">$button-font-color</span>: <span class="hljs-number">#fff</span> !default;
+<div class="row">
+ <div class="small-12 columns two-column">
+ <p class="subheader"><a href="sass-files.html">Check out what you get with the Sass download package. →</a></p>
+ </div>
+</div>
-<span class="hljs-comment">// Default alternative font color for button.</span>
-<span class="hljs-variable">$button-font-color-alt</span>: <span class="hljs-number">#000</span> !default;
-<span class="hljs-comment">// Default radius for button.</span>
-<span class="hljs-variable">$button-radius</span>: <span class="hljs-number">0</span> !default;
+<hr class="dashed">
-<span class="hljs-comment">// Default sizes for button.</span>
-<span class="hljs-variable">$button-sizes</span>: (
- tiny: <span class="hljs-number">0.7</span>,
- small: <span class="hljs-number">0.8</span>,
- medium: <span class="hljs-number">1</span>,
- large: <span class="hljs-number">1.3</span>,
-) !default;
-<span class="hljs-comment">// Default font size for button.</span>
-<span class="hljs-variable">$button-font-size</span>: <span class="hljs-number">0.9rem</span> !default;
+<!---=================================
+How to Update
+=================================-->
-<span class="hljs-comment">// Default opacity for a disabled button.</span>
-<span class="hljs-variable">$button-opacity-disabled</span>: <span class="hljs-number">0.25</span> !default;</code></pre></div>
+<div class="row">
+ <div class="small-12 columns path-container">
+ <h3>How to Update</h3>
+ <h3 class="subheader">Once you have Foundation installed updating your file is easy.</h3>
+ <div class="path-item">
+ <div class="circlenumber">
+ <h3>1</h3>
+ </div>
+ <p>Specify the version you want to update to in your bower.json file.</p>
+ <p><a href="http://zurb.us/1kl96mM ">See an example →</a></p> </p>
+ </div>
+ <div class="path-item">
+ <div class="circlenumber">
+ <h3>2</h3>
+ </div>
+ <p>To update, 'cd' into the project folder in the CLI and the run 'bower update.'</p>
+ <p class="panel">bower update</p>
+ <p class="subheader note"><strong>Note:</strong> To verify the update has been made, you can see the version number in the bower.json file located in the bower-components folder under foundation.</p>
+ <p><a href="http://zurb.us/1klal5c">See an example →</a></p>
+ </div>
+ </div>
+</div>
+<hr>
+<!--=================================
+Manually
+=================================-->
+
+<div class="row">
+ <div class="small-12 columns nocli">
+ <h2 data-magellan-destination="nocli"><a name="nocli"></a>Install Foundation Manually</h2>
+ <h2 class="subheader">You can download our SCSS files and get set up to harness the power of Foundation without the CLI if you want. Here's how:</h2>
+ <ul>
+ <li>First you will need to clone or download the <a href="https://github.com/zurb/foundation-compass-template">master zip of the Foundation Compass Template</a> from Github. This will be the root of your project.</li>
+ <li>Then you will create a directory called bower_components.</li>
+ <li>The next step is to clone or download the master zip of the <a href="https://github.com/zurb/bower-foundation">bower-foundation</a> repo in that directory.</li>
+ <li>Then rename this directory to "foundation"</li>
+ </ul>
+ <p class="subheader note"><strong>Note:</strong> Alternatively you can place this somewhere else or move the files around.</p>
+ <ul>
+ <li>Just update your config.rb so that the add_import_path reflects the change i.e. add_import_path "bower_components/foundation/scss"</li>
+ <li>Then add jQuery and update the link in index.html to a local copy that you can download from the jQuery site.</li>
+ </ul>
+ </div>
</div>
-<div class="large-3 columns" data-sticky-container>
- <nav class="columns docs-toc-wrap" data-sticky data-anchor="docs" data-sticky-on="large">
- <div class="docs-toc hide" id="docsTOC">
- <ul class="vertical menu" data-docs-toc>
- <li class="docs-nav-title">On this page:</li>
- </ul>
+<hr class="dashed">
+
+<!--=================================
+Upgrade Manually
+ =================================-->
+
+<div class="row">
+ <div class="small-12 path-container columns">
+ <h3>Upgrade Manually With Compass</h3>
+ <p>You'll need to install <a href="http://nodejs.org/">NodeJS</a> and <a href="http://bower.io/">Bower</a> before updating with Compass.</p>
+ <p class="subheader note">Note: You can install bower by running the following command:</p>
+ <p class="panel">npm install -g bower</p>
+ <p>We use bower to keep Foundation assets up to date within your project. Here's how you can update your project:</p>
+ <br>
+ <div class="row path-item">
+ <div class="circlenumber">
+ <h3>1</h3>
+ </div>
+ <p>First, you need create a file named bower.json in the root of your Compass project. This should contain the following:</p>
+ <p class="panel">{<br> "name": "PROJECT_NAME",<br> "dependencies": {<br> "foundation": "~5.4.7"<br> }<br>}
</div>
- <div class="foundation-toc-ad-unit" id="TOCAdUnit">
+ <div class="row path-item">
+ <div class="circlenumber">
+ <h3>2</h3>
+ </div>
+ <p>Next you will run bower update.</p>
+ <p class="panel">bower update</p>
+ <p>This will create a directory called bower_components/ in your project. Foundation's Sass and JavaScript files will be placed in the bower_components/foundation folder.</p>
</div>
- </nav>
+ <p><a href="sass-files.html">Check out what you get with the Sass download package. →</a></p>
+ </div>
</div>
+<hr class="dashed">
+
+<div class="row">
+ <div class="small-12 path-container columns">
+ <h3>Build Using a Task Runner</h3>
+ <p>Using Bower and a task runner like Grunt or Gulp, you can add our Sass files to your build process.</p>
+ <div class="row path-item">
+ <div class="circlenumber">
+ <h3>1</h3>
+ </div>
+ <p>In a project with an existing <code>bower.json</code>, add Foundation to your bower components:</p>
+ <p class="panel">bower install foundation --save</p>
+ </div>
+ <div class="row path-item">
+ <div class="circlenumber">
+ <h3>2</h3>
+ </div>
+ <p>Next, add <code>bower_components/foundation/scss</code> to your Sass compiler's import paths. The exact setting you need to change will depend on the plugin you're using. For example, this is how to add Foundation to a Grunt task using <code>grunt-contrib-sass</code>:</p>
+ <p class="panel">
+ sass: {<br>
+ dist: {<br>
+ options: {<br>
+ style: 'expanded'<br>
+ <strong>loadPath: ['bower_components/foundation/scss']</strong><br>
+ },<br>
+ files: {<br>
+ 'main.css': 'main.scss',<br>
+ 'widgets.css': 'widgets.scss'<br>
+ }<br>
+ }<br>
+ }
+ </p>
+ <p>This configuration will work for <code>gulp-sass</code>:</p>
+ <p class="panel">
+ gulp.src('./scss/*.scss')<br>
+ .pipe(sass({<br>
+ <strong>includePaths: ['bower_components/foundation/scss']</strong><br>
+ }))<br>
+ .pipe(gulp.dest('./css'));
+ </p>
+ </div>
+ </div>
</div>
-</article>
+<hr>
+
+<!--==================================================================
+Other Applications
+-->
+
+<div class="row otherapps">
+ <div class="small-12 columns">
+ <h2 data-magellan-destination="other"><a name="other"></a>Third Party Applications</h2>
+ <h2 class="subheader">If you want a more hands-off and simple build of Foundation you can use these platforms to code with Foundation.</h2>
+ </div>
+</div>
+<br>
+<div class="row other-uses">
+ <div class="medium-4 columns">
+ <img src="assets/img/images/mixture_yeti.svg" />
+ </div>
+ <div class="medium-8 column">
+ <h3>Mixture</h3>
+ <h3 class="subheader">Get started quickly and build faster with Foundation using Mixture.io.</h3>
+ <p>Publish your project online. It’s as easy as one click. Share your published URL, password protect, get feedback, client sign-off or even add your own domain and host your site.</p>
+ <a href="http://mixture.io/" class="button" target="blank">Learn More</a>
+ </div>
+</div>
+
+<hr class="dashed">
+
+<div class="row other-uses">
+ <div class="medium-4 columns">
+ <img src="assets/img/images/codekit.png" class="others"/>
+ </div>
+ <div class="medium-8 columns">
+ <h3>CodeKit</h3>
+ <h3 class="subheader">A Mac app that allows you to build websites faster with Foundation.</h3>
+ <p>With zero setup and Bower built right into the system, CodeKit can compile any language with one click updates. From auto-refresh browsers to built-in minifiers, CodeKit has everything inside to help you get started.</p>
+ <a href="https://incident57.com/codekit/index.html" class="button" target="blank">Learn More</a>
+ </div>
+</div>
+
+<hr class="dashed">
+
+<div class="row other-uses">
+ <div class="medium-4 columns small-only-text-center">
+ <img src="assets/img/images/cactus.jpg" class="others"/>
+ </div>
+ <div class="medium-8 columns">
+ <h3>Cactus</h3>
+ <h3 class="subheader">Build your websites locally with the ease and flexibility of Foundation.</h3>
+ <p>Using Cactus allows you to put the components of your website together with your local server without having to set up a server environment like Ruby. You can use it on your Mac to compile your SASS, start building templates, or for directing visual feedback.</p>
+ <a href="http://cactusformac.com/" class="button " target="blank">Learn More</a>
+ </div>
+</div>
+
+<hr>
+
+<div class="row">
+ <div class="small-12 columns">
+ <h2>What's Next?</h2>
+ <h2 class="subheader">Now that you have Foundation Sass installed, check out the awesome stuff you get and how to use it.</h2>
+ </div>
+</div>
+<div class="row circle-list">
+ <div class="medium-4 columns">
+ <img src="assets/img/images/whatyouget.svg">
+ <h4>What You Get</h4>
+ <p>The complete package! We'll cover the important files that are included when you download Sass and where to make customizations.</p>
+ <p><a href="sass-files.html">See What's Inside →</a></p>
+ </div>
+
+ <hr class="dashed hide-for-medium-up">
+
+ <div class="medium-4 columns">
+ <img src="assets/img/images/howtouse.svg">
+ <h4>How to Use</h4>
+ <p>Harness SCSS's variable features easily through the included _settings.scss file. We cover important tips on the settings file, writing sass, and using mixins.</p>
+ <p><a href="using-sass.html">Find Out How →</a></p>
+ </div>
+
+ <hr class="dashed hide-for-medium-up">
+
+ <div class="medium-4 columns">
+ <img src="assets/img/images/globalstyles.svg">
+ <h4>Global Styles</h4>
+ <p>Every Foundation project needs to include these styles in order to work properly. These include things like basic formatting and global utility classes.</p>
+ <p><a href="components/global.html">Take a Look →</a></p>
+ </div>
+</div>
- </div>
- <div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
- <ul class="vertical menu docs-nav" id="docs-menu">
- <p class="docs-nav-version">
- <span data-docs-version></span>
- <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">(Changelog)</a>
- </p>
-
- <li class="docs-nav-title">Getting Started</li>
- <li><a href="installation.html">Installation</a></li>
- <li><a href="starter-projects.html">Starter Projects</a></li>
- <li><a href="compatibility.html">Compatibility</a></li>
- <li><a href="accessibility.html">Accessibility</a></li>
- <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
-
- <li class="docs-nav-title">Setup</li>
- <li><a href="global.html">Global Styles</a></li>
- <li><a href="rtl.html">Right-to-Left Support</a></li>
- <li><a href="flexbox.html">Flexbox</a></li>
- <li class="current"><a href="sass.html">Sass</a></li>
- <li><a href="javascript.html">JavaScript</a></li>
- <li><a href="javascript-utilities.html">JavaScript Utilities</a></li>
- <li><a href="media-queries.html">Media Queries</a></li>
-
- <li class="docs-nav-title">General</li>
- <li><a href="grid.html">Grid</a></li>
- <li><a href="flex-grid.html">Flex Grid</a></li>
- <li><a href="forms.html">Forms</a></li>
- <li><a href="visibility.html">Visibility Classes</a></li>
- <li><a href="float-classes.html">Float Classes</a></li>
-
- <li class="docs-nav-title">Typography</li>
- <li><a href="typography-base.html">Base Styles</a></li>
- <li><a href="typography-helpers.html">Helper Classes</a></li>
-
- <li class="docs-nav-title">Controls</li>
- <li><a href="button.html">Button</a></li>
- <li><a href="button-group.html">Button Group</a></li>
- <li><a href="close-button.html">Close Button</a></li>
- <li><a href="slider.html">Slider <span class="label">JS</span></a></li>
- <li><a href="switch.html">Switch</a></li>
-
- <li class="docs-nav-title">Navigation</li>
- <li><a href="navigation.html">Overview</a></li>
- <li><a href="menu.html">Menu</a></li>
- <li><a href="dropdown-menu.html">Dropdown Menu <span class="label">JS</span></a></li>
- <li><a href="drilldown-menu.html">Drilldown Menu <span class="label">JS</span></a></li>
- <li><a href="accordion-menu.html">Accordion Menu <span class="label">JS</span></a></li>
- <li><a href="top-bar.html">Top Bar</a></li>
- <li><a href="responsive-navigation.html">Responsive Navigation</a></li>
- <li><a href="magellan.html">Magellan <span class="label">JS</span></a></li>
- <li><a href="pagination.html">Pagination</a></li>
- <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
-
- <li class="docs-nav-title">Containers</li>
- <li><a href="accordion.html">Accordion <span class="label">JS</span></a></li>
- <li><a href="callout.html">Callout</a></li>
- <li><a href="dropdown.html">Dropdown <span class="label">JS</span></a></li>
- <li><a href="media-object.html">Media Object</a></li>
- <li><a href="off-canvas.html">Off-canvas <span class="label">JS</span></a></li>
- <li><a href="reveal.html">Reveal <span class="label">JS</span> <small>Modal</small></a></li>
- <li><a href="table.html">Table</a></li>
- <li><a href="tabs.html">Tabs <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Media</li>
- <li><a href="badge.html">Badge</a></li>
- <li><a href="flex-video.html">Flex Video</a></li>
- <li><a href="label.html">Label</a></li>
- <li><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
- <li><a href="progress-bar.html">Progress Bar</a></li>
- <li><a href="thumbnail.html">Thumbnail</a></li>
- <li><a href="tooltip.html">Tooltip <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Plugins</li>
- <li><a href="abide.html">Abide <small>Form Validation</small></a></li>
- <li><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
- <li><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
- <li><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
- <li><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
-
- <li class="docs-nav-title">Sass</li>
- <li><a href="sass-functions.html">Functions</a></li>
- <li><a href="sass-mixins.html">Mixins</a></li>
-
- <li class="docs-nav-title">Libraries</li>
- <li><a href="motion-ui.html">Motion UI</a></li>
- <li><a href="panini.html">Panini</a></li>
- <li><a href="style-sherpa.html">Style Sherpa</a></li>
-
- <li class="docs-nav-title">Older Versions</li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
- <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
- <li><a href="https://get.foundation/sites/docs/v/3.2.5/">Foundation 3</a></li>
- <li><a href="https://get.foundation/sites/docs/v/2.2.1/">Foundation 2</a></li>
- </ul>
-
- </div>
- </div>
- <!-- Small Business(Docs) -->
- <section id="studiosCallout">
- <div class="row">
- <div class="medium-4 large-4 columns">
- <img src="https://get.foundation/assets/img/smallbiz-footer.svg" alt="">
- </div>
- <div class="medium-8 large-8 columns banner-info">
- <div class="row column property-label">ZURB Foundation</div>
- <h3 class="light">Yeah, we can help with that.</h3>
- <p class="lead"> We’ll collaborate with your team throughout the entire project life cycle. We’ll take your concept and move it through ideation, hi-fi wireframes, visual design and code, all while informing you on the whys and hows along the way.</p>
- <div class="course-buttons">
- <a href="https://get.foundation/get-involved/premium-support.html" class="studios button" data-zcom-event="studios_foundation_click" id="foundationSmallV1">Show Me How →</a>
</div>
</div>
- </div>
- </section>
-
- <div class="docs-newsletter">
- <div class="row">
- <div class="medium-7 large-8 columns">
- <a target="_blank" href="https://get.foundation/learn/responsive-reading.html">
- <h5 class="">Download ZURB’s 21 Responsive Trends That Will Shape 2017</h5>
- <p style="margin-bottom: 0;">Stay informed with amazing responsive trends each month from ZURB.</p>
- </a>
+ <!-- <section id="courses-banner-large">
+ <div class="row">
+ <div class="large-5 medium-5 columns banner-image">
+ <img src="https://get.foundation/assets/img/responsive-banner-main.svg" alt="responsive design">
+ </div>
+ <div class="large-7 medium-7 columns banner-info">
+ <h3>Get a running start with Foundation</h3>
+ <p>Learn the fundamentals of the world's most advanced responsive framework in our <strong>Intro to Foundation class.</strong> You'll learn from the creators themselves on how to use Foundation and jumpstart your next project. <a href="http://zurb.com/university/courses" class="inline-hide">Learn more about classes »</a></p>
+ <a href="http://zurb.com/university/foundation-intro?utm_source=Foundation%20Docs&utm_medium=Large%20Banner&utm_campaign=Intro%20to%20Foundation" class="button">Learn More</a>
+ <a href="http://zurb.com/university/courses" class="learn-more hide-for-medium-up">Learn more about classes »</a>
+ </div>
+ </div>
+</section> -->
+ <div id="newsletter">
+ <div class="row">
+ <div class="medium-8 columns">
+ <h5>Stay on top of what’s happening in <a href="http://zurb.com/responsive">responsive design</a>.</h5>
+ <p>Sign up to receive monthly Responsive Reading highlights. <a href="http://zurb.com/responsive/reading">Read Last Month's Edition »</a></p>
+ </div>
+ <div class="medium-4 columns">
+ <form action="http://zurb.createsend.com/t/y/s/xlitlu/" method="post" id="subForm">
+ <div class="row collapse margintop-20px">
+ <div class="small-8 medium-8 columns">
+ <input id="fieldEmail" name="cm-xlitlu-xlitlu" type="email" placeholder="signup@example.com">
</div>
- <div class="medium-5 large-4 footer-signup-form columns">
- <a style="margin-bottom: 0;" target="_blank" href="https://get.foundation/learn/responsive-reading.html" class="button expanded">Download the PDF</a>
+ <div class="small-4 medium-4 columns">
+ <input type="submit" href="#" class="postfix button" value="Sign Up">
</div>
</div>
+ </form>
+ </div>
+ </div>
+</div>
+
+
+<div class="zurb-footer-top bg-fblue">
+ <div class="row property">
+ <div class="medium-4 columns">
+ <div class="property-info">
+ <h3>Foundation for Sites</h3>
+ <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
+ </p>
</div>
-
- <div class="zurb-footer-top bg-fblue">
- <div class="row property">
- <div class="medium-4 columns">
- <div class="property-info">
- <h3>Foundation for Sites</h3>
- <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
- </p>
- </div>
- </div>
-
- <div class="medium-8 columns">
- <div class="row collapse">
- <div class="medium-4 columns">
- <div class="learn-links">
- <h4 class="hide-for-small">Want more?</h4>
- <ul>
- <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
- <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
- <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
- <li><a href="http://zurb.com/university/courses">Training</a></li>
- <li><a href="http://zurb.com/library">Design Resources</a></li>
- </ul>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="support-links">
- <h4 class="hide-for-small">Talk to us</h4>
- <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
- <p><a href="https://get.foundation/get-involved/contribute.html">Get involved in<br>our amazing community.</a></p>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="connect-links">
- <h4 class="hide-for-small">Stay Updated</h4>
- <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
- <a href="http://zurb.com/news" class="small button">Stay Connected</a>
- </div>
- </div>
- </div>
+ </div>
+
+ <div class="medium-8 columns">
+ <div class="row collapse">
+ <div class="medium-4 columns">
+ <div class="learn-links">
+ <h4 class="hide-for-small">Want more?</h4>
+ <ul>
+ <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
+ <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
+ <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
+ <li><a href="http://zurb.com/university/courses">Training</a></li>
+ <li><a href="http://zurb.com/library">Design Resources</a></li>
+ </ul>
</div>
</div>
- <div class="row global">
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/studios" class="footer-link-block services">
- <span class="title">Studios</span>
- <span>Helping more than 200 startups succeed since 1998.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="https://get.foundation/" class="footer-link-block foundation">
- <span class="title">Foundation</span>
- <span>The most advanced front-end framework in the world.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/notable" class="footer-link-block apps">
- <span class="title">Notable Design Apps</span>
- <span>Prototype, iterate and collect feedback on your products.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/university" class="footer-link-block expo">
- <span class="title">University</span>
- <span>Ideas, thoughts and design resources shared with you.</span>
- </a>
+ <div class="medium-4 columns">
+ <div class="support-links">
+ <h4 class="hide-for-small">Talk to us</h4>
+ <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
+ <p><a href="https://get.foundation/business/business-support.html">Business Support</a></p>
+ <p>Or check our <a href="https://get.foundation/support/support.html">support page</a></p>
+ </div>
</div>
- </div>
- </div>
-
- <div class="zurb-footer-bottom">
- <div class="row">
- <div class="medium-4 medium-push-8 columns">
- <ul class="home-social">
- <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
- <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
- <li><a href="http://zurb.com/contact" class="mail"></a></li>
- </ul>
- </div>
- <div class="medium-8 medium-pull-4 columns">
- <a href="http://www.zurb.com" class="zurb-logo regular"></a>
- <ul class="zurb-links">
- <li><a href="http://zurb.com/about">About</a></li>
- <li><a href="http://zurb.com/blog">Blog</a></li>
- <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
- <li><a href="http://zurb.com/contact">Contact</a></li>
- <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
- </ul>
- <p class="copyright">© 1998‐2016 ZURB, Inc. All rights reserved.</p>
+ <div class="medium-4 columns">
+ <div class="connect-links">
+ <h4 class="hide-for-small">Stay Updated</h4>
+ <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
+ <a href="http://zurb.com/news" class="small button">Stay Connected</a>
</div>
</div>
</div>
-
</div>
</div>
+ <div class="row global">
+ <div class="medium-3 small-6 columns">
+ <a href="http://zurb.com/studios" class="footer-link-block services">
+ <span class="title">Studios</span>
+ <span>Helping more than 200 startups succeed since 1998.</span>
+ </a>
+ </div>
+ <div class="medium-3 small-6 columns">
+ <a href="https://get.foundation/" class="footer-link-block foundation">
+ <span class="title">Foundation</span>
+ <span>The most advanced front-end framework in the world.</span>
+ </a>
+ </div>
+ <div class="medium-3 small-6 columns">
+ <a href="http://zurb.com/notable" class="footer-link-block apps">
+ <span class="title">Notable Design Apps</span>
+ <span>Prototype, iterate and collect feedback on your products.</span>
+ </a>
+ </div>
+ <div class="medium-3 small-6 columns">
+ <a href="http://zurb.com/university" class="footer-link-block expo">
+ <span class="title">University</span>
+ <span>Ideas, thoughts and design resources shared with you.</span>
+ </a>
+ </div>
+ </div>
+</div>
+
+<div class="zurb-footer-bottom">
+ <div class="row">
+ <div class="medium-4 medium-4 push-8 columns">
+ <ul class="home-social">
+ <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
+ <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
+ <li><a href="http://zurb.com/contact" class="mail"></a></li>
+ </ul>
+ </div>
+ <div class="medium-8 medium-8 pull-4 columns">
+ <a href="http://www.zurb.com" class="zurb-logo regular"></a>
+ <ul class="zurb-links">
+ <li><a href="http://zurb.com/about">About</a></li>
+ <li><a href="http://zurb.com/blog">Blog</a></li>
+ <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
+ <li><a href="http://zurb.com/contact">Contact</a></li>
+ <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
+ </ul>
+ <p class="copyright">© 1998‐2015 ZURB, Inc. All rights reserved.</p>
+ </div>
+ </div>
+</div>
+
+ </section>
+
+ </div>
+ </div>
+
+ <script src="assets/js/templates.js"></script>
+ <script src="assets/js/all.js"></script>
+ <script>
+ var _gaq = _gaq || [];
+ _gaq.push(
+ ['_setAccount', 'UA-2195009-2'],
+ ['_trackPageview'],
+ ['b._setAccount', 'UA-2195009-27'],
+ ['b._trackPageview']
+ );
+
+ (function() {
+ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+ })();
+ </script>
+ <script>
+ $(document).foundation().foundation('joyride', 'start');
+ </script>
+ </body>
+
- <script>
- var _gaq = _gaq || [];
- _gaq.push(
- ['_setAccount', 'UA-2195009-2'],
- ['_trackPageview'],
- ['b._setAccount', 'UA-2195009-27'],
- ['b._trackPageview']
- );
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
-
- <script src="assets/js/vendor.js?hash=b108ea91f40cfbf8536cd8d455dfe7bb"></script>
- <script src="assets/js/foundation.js?hash=2c583a2d485dd41c4e02826e58675f40"></script>
- <script src="assets/js/docs.js?hash=55d3b9046657f195cf57474109ffa4c0"></script>
- <script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
-</body>
</html>
+++ /dev/null
-<!doctype html>
-<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
-<html class="no-js" lang="en" dir="ltr">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="This handy lil slider is perfect for setting specific values within a range.">
- <link rel="icon" href="assets/img/icons/foundation-favicon.ico" type="image/x-icon">
- <title>Foundation for Sites 6 Docs | Slider</title>
- <link href="assets/css/docs.css?hash=99496be22bf125a00aa123c9e5ad7559" rel="stylesheet" />
- <link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=5d627c6333ec6d0d101a06351f0f22d6" rel="stylesheet">
- <!-- <link rel="stylesheet" href="./node_modules/motion-ui/dist/motion-ui.css" /> -->
-</head>
-<body>
-
- <div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
-
- <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="mobile-ofc vertical menu">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
-
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/support.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/sort/unanswered">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
- </div>
-
- <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="vertical menu">
- <li><a href="#">Foundation</a></li>
- <li><a href="#">Dot</a></li>
- <li><a href="#">ZURB</a></li>
- <li><a href="#">Com</a></li>
- <li><a href="#">Slash</a></li>
- <li><a href="#">Sites</a></li>
- </ul>
- </div>
-
-
- <div class="off-canvas-content" data-off-canvas-content>
- <!-- Info Banner For Announcements or Links -->
- <!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
- <div class="info">
- <h5>Foundation 6 is here!</h5>
- </div>
- </a> -->
-
- <nav class="marketing-topbar show-for-medium">
-
- <ul class="menu">
- <li class="topbar-title"><a href="https://get.foundation/index.html"><img src="assets/img/logos/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
- </ul>
-
- <ul class="dropdown menu" data-dropdown-menu data-click-open="false">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/" target="_blank">F5 Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="https://get.foundation/emails/docs/" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
-
- </nav>
-
- <div class="title-bar hide-for-medium">
- <div class="title-bar-left">
- <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
- <span class="title-bar-title">Foundation</span>
- </div>
- </div>
-
-
- <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
-
- <div class="expanded row">
- <div class="medium-9 large-10 medium-push-3 large-push-2 columns">
-
-<article class="docs-component" id="docs-slider">
-
-<a href="#docs-menu" class="small secondary expanded button hide-for-medium">Jump to Nav</a>
-
-<header>
- <h1 class="docs-page-title">Slider</h1>
-
- <span data-tooltip title="Requires a JavaScript library." class="docs-js label">JavaScript</span>
-
- <p class="lead docs-page-lead">This handy lil slider is perfect for setting specific values within a range.</p>
-
- <ul class="menu simple docs-contribute-menu">
- <li><a href="https://github.com/zurb/foundation-sites/edit/master/docs/pages/slider.md" target="_blank"><i class="fi-pencil"></i>Edit this Page</a></li>
- <li><a href="https://github.com/zurb/foundation-sites/issues/new?title=%5BSlider%5D%20ISSUE%20NAME%20HERE" target="_blank"><i class="fi-social-github"></i>Report a Bug</a></li>
- <li><a href="https://get.foundation/forum" target="_blank"><i class="fi-comment"></i>Get Help</a></li>
- </ul>
-</header>
-
-<hr>
-
-<div class="row">
-
-<div class="large-9 columns" id="docs">
-
-<h2 id="basics" class="docs-heading" data-magellan-target="basics">Basics<a class="docs-heading-icon" href="#basics"></a></h2><p>Create a slider by adding the class <code>.slider</code> and the attribute <code>data-slider</code> to a container element. You should also define both a starting and maximum value for the slider.</p>
-<p>Inside the container are three elements:</p>
-<ul>
-<li>The handle (<code>.slider-handle</code>), which the user drags.</li>
-<li>The fill (<code>.slider-fill</code>), which resizes dynamically based on where the handle is.</li>
-<li>A hidden <code><input></code>, which is where the value of the slider is stored.</li>
-</ul>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"slider"</span> <span class="hljs-attr">data-slider</span> <span class="hljs-attr">data-initial-start</span>=<span class="hljs-string">"50"</span> <span class="hljs-attr">data-end</span>=<span class="hljs-string">"200"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"slider-handle"</span> <span class="hljs-attr">data-slider-handle</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"slider"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"1"</span>></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"slider-fill"</span> <span class="hljs-attr">data-slider-fill</span>></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"hidden"</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="slider" data-slider data-initial-start="50" data-end="200">
- <span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
- <span class="slider-fill" data-slider-fill></span>
- <input type="hidden">
-</div></div><hr>
-<h2 id="vertical" class="docs-heading" data-magellan-target="vertical">Vertical<a class="docs-heading-icon" href="#vertical"></a></h2><p>To get <em>vertical</em>, just add a <code>.vertical</code> class and <code>data-vertical="true"</code> the slider.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"slider vertical"</span> <span class="hljs-attr">data-slider</span> <span class="hljs-attr">data-initial-start</span>=<span class="hljs-string">"25"</span> <span class="hljs-attr">data-end</span>=<span class="hljs-string">"200"</span> <span class="hljs-attr">data-vertical</span>=<span class="hljs-string">"true"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"slider-handle"</span> <span class="hljs-attr">data-slider-handle</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"slider"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"1"</span>></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"slider-fill"</span> <span class="hljs-attr">data-slider-fill</span>></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"hidden"</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="slider vertical" data-slider data-initial-start="25" data-end="200" data-vertical="true">
- <span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
- <span class="slider-fill" data-slider-fill></span>
- <input type="hidden">
-</div></div><hr>
-<h2 id="disabled" class="docs-heading" data-magellan-target="disabled">Disabled<a class="docs-heading-icon" href="#disabled"></a></h2><p>Add the class <code>.disabled</code> to disable interaction with the slider.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"slider disabled"</span> <span class="hljs-attr">data-slider</span> <span class="hljs-attr">data-initial-start</span>=<span class="hljs-string">"78"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"slider-handle"</span> <span class="hljs-attr">data-slider-handle</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"slider"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"1"</span>></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"slider-fill"</span> <span class="hljs-attr">data-slider-fill</span>></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"hidden"</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="slider disabled" data-slider data-initial-start="78">
- <span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
- <span class="slider-fill" data-slider-fill></span>
- <input type="hidden">
-</div></div><hr>
-<h2 id="two-handles" class="docs-heading" data-magellan-target="two-handles">Two Handles<a class="docs-heading-icon" href="#two-handles"></a></h2><p>Two-handle sliders can be used to define a range of values, versus a single value. To make a two-handle slider, add a second handle, and a second <code><input></code>. This works with horizontal and vertical sliders.</p>
-<p>You can add IDs to the <code><input></code>s inside the sliders to make it easier to access the values. If you don't, the plugin will add an ID to each for you.</p>
-<p>Note that the first handle manipulates the first <code><input></code>, while the second handle manipulates the second <code><input></code>.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"slider"</span> <span class="hljs-attr">data-slider</span> <span class="hljs-attr">data-initial-start</span>=<span class="hljs-string">"25"</span> <span class="hljs-attr">data-initial-end</span>=<span class="hljs-string">"75"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"slider-handle"</span> <span class="hljs-attr">data-slider-handle</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"slider"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"1"</span>></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"slider-fill"</span> <span class="hljs-attr">data-slider-fill</span>></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"slider-handle"</span> <span class="hljs-attr">data-slider-handle</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"slider"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"1"</span>></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"hidden"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"hidden"</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="slider" data-slider data-initial-start="25" data-initial-end="75">
- <span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
- <span class="slider-fill" data-slider-fill></span>
- <span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
- <input type="hidden">
- <input type="hidden">
-</div></div><hr>
-<h2 id="data-binding" class="docs-heading" data-magellan-target="data-binding">Data Binding<a class="docs-heading-icon" href="#data-binding"></a></h2><p>Data binding allows you to connect the slider to an external <code><input></code> field. With data binding set up, dragging the handle will change the value inside the text field, and editing the number in the text field will move the slider in real-time.</p>
-<p>To set it all up, create an <code><input></code> with an ID and add <code>aria-controls="id"</code> to the slider handle, where <code>id</code> is the ID of the <code><input></code>.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-10 columns"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"slider"</span> <span class="hljs-attr">data-slider</span> <span class="hljs-attr">data-initial-start</span>=<span class="hljs-string">"50"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"slider-handle"</span> <span class="hljs-attr">data-slider-handle</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"slider"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"1"</span> <span class="hljs-attr">aria-controls</span>=<span class="hljs-string">"sliderOutput1"</span>></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"slider-fill"</span> <span class="hljs-attr">data-slider-fill</span>></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-2 columns"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"number"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"sliderOutput1"</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="small-10 columns">
- <div class="slider" data-slider data-initial-start="50">
- <span class="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="sliderOutput1"></span>
- <span class="slider-fill" data-slider-fill></span>
- </div>
-</div>
-<div class="small-2 columns">
- <input type="number" id="sliderOutput1">
-</div></div><hr>
-<p>Or with a step size:</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-10 columns"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"slider"</span> <span class="hljs-attr">data-slider</span> <span class="hljs-attr">data-initial-start</span>=<span class="hljs-string">"50"</span> <span class="hljs-attr">data-step</span>=<span class="hljs-string">"5"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"slider-handle"</span> <span class="hljs-attr">data-slider-handle</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"slider"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"1"</span> <span class="hljs-attr">aria-controls</span>=<span class="hljs-string">"sliderOutput2"</span>></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"slider-fill"</span> <span class="hljs-attr">data-slider-fill</span>></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-2 columns"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"number"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"sliderOutput2"</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="small-10 columns">
- <div class="slider" data-slider data-initial-start="50" data-step="5">
- <span class="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="sliderOutput2"></span>
- <span class="slider-fill" data-slider-fill></span>
- </div>
-</div>
-<div class="small-2 columns">
- <input type="number" id="sliderOutput2">
-</div></div><hr>
-<h2 id="native-range-slider" class="docs-heading" data-magellan-target="native-range-slider">Native Range Slider<a class="docs-heading-icon" href="#native-range-slider"></a></h2><p>In Foundation 6.2, we introduced styles for <code><input type="range"></code>, the native HTML element for range sliders. It's not supported in every browser, namely IE9 and some older mobile browsers. <a href="http://caniuse.com/#feat=input-range">View browser support for the range input type.</a></p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"range"</span> <span class="hljs-attr">min</span>=<span class="hljs-string">"1"</span> <span class="hljs-attr">max</span>=<span class="hljs-string">"100"</span> <span class="hljs-attr">step</span>=<span class="hljs-string">"1"</span>></span></code></pre></div>
-
-<div class="docs-code-live"><input type="range" min="1" max="100" step="1"></div><p>If you're using the Sass version of Foundation, add this line to your main Sass file:</p>
-<div class="docs-code" data-docs-code><pre><code class="scss">@<span class="hljs-keyword">include</span> foundation-range-input;</code></pre></div><p>It's possible to use both the JavaScript slider and the native slider in the same codebase, as the CSS selectors used don't overlap. Here's what's different about the native slider:</p>
-<ul>
-<li>Less markup: just write <code><input type="range"></code> and you're good.</li>
-<li>No JavaScript is needed, which guarantees it runs faster in most browsers.</li>
-<li>To disable the slider, add <code>disabled</code> as an attribute, instead of a class.</li>
-<li>No support for vertical orientation.</li>
-<li>No support for two handles.</li>
-</ul>
-
-
-<hr>
-<section>
- <h2 id="sass-reference" class="docs-heading" data-magellan-target="sass-reference">Sass Reference<a class="docs-heading-icon" href="#sass-reference"></a></h2>
-
- <section>
- <h3 id="sass-variables" class="docs-heading">Variables<a class="docs-heading-icon" href="#sass-variables"></a></h3>
-
- <p>The default styles of this component can be customized using these Sass variables in your project's <a href="sass.html#the-settings-file">settings file</a>.</p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td class="name"><code>$slider-width-vertical</code></td>
- <td>Number</td>
- <td class="number"><code>0.5rem</code></td>
- <td><p>Default slider width of a vertical slider. (Doesn't apply to the native slider.)</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$slider-transition</code></td>
- <td>Transition</td>
- <td class="transition"><code>all 0.2s ease-in-out</code></td>
- <td><p>Transition properties to apply to the slider handle and fill. (Doesn't apply to the native slider.)</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="sass-mixins" class="docs-heading">Mixins<a class="docs-heading-icon" href="#sass-mixins"></a></h3>
-
- <p>We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.</p>
-
-
- <section >
- <h4 id="slider-container" class="docs-heading">slider-container<a class="docs-heading-icon" href="#slider-container"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> slider-container;</code></pre>
- </div>
-
- <p>Adds the general styles for sliders.</p>
-
-
-
-
-
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="slider-fill" class="docs-heading">slider-fill<a class="docs-heading-icon" href="#slider-fill"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> slider-fill;</code></pre>
- </div>
-
- <p>Adds the general styles for active fill for sliders.</p>
-
-
-
-
-
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="slider-handle" class="docs-heading">slider-handle<a class="docs-heading-icon" href="#slider-handle"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> slider-handle;</code></pre>
- </div>
-
- <p>Adds the general styles for the slider handles.</p>
-
-
-
-
-
- </section>
-
-
-
-
-
- </section>
-
-
-</section>
-
-<hr>
-<section>
- <h2 id="javascript-reference" class="docs-heading" data-magellan-target="javascript-reference">JavaScript Reference<a class="docs-heading-icon" href="#javascript-reference"></a></h2>
-
-
- <section>
- <h3 id="js-module" class="docs-heading">Initializing<a class="docs-heading-icon" href="#js-module"></a></h3>
-
- <p>The file <code>foundation.slider.js</code> must be included in your JavaScript to use this plugin, along with <code>foundation.core.js</code>. <strong>This plugin also requires these utility libraries:</strong></p>
-
-
- <ul>
- <li><code>foundation.util.motion.js</code></li>
- </ul>
-
- <ul>
- <li><code>foundation.util.triggers.js</code></li>
- </ul>
-
- <ul>
- <li><code>foundation.util.keyboard.js</code></li>
- </ul>
-
- <ul>
- <li><code>foundation.util.touch.js</code></li>
- </ul>
-
-
- </section>
-
-
- <section>
- <h3 id="js-class" class="docs-heading">Foundation.Slider<a class="docs-heading-icon" href="#js-class"></a></h3>
-
- <p>Creates a new instance of a drilldown menu.</p>
-
-
- <div class="docs-code"><pre><code><span class="hljs-keyword">var</span> elem = <span class="hljs-keyword">new</span> Foundation.Slider(element, options);</code></pre></div>
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>element</code></td>
- <td>jQuery</td>
- <td>jQuery object to make into an accordion menu.</td>
- </tr>
- <tr>
- <td><code>options</code></td>
- <td>Object</td>
- <td>Overrides to the default plugin settings.</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="js-options" class="docs-heading">Plugin Options<a class="docs-heading-icon" href="#js-options"></a></h3>
-
- <p>Use these options to customize an instance of Slider. Plugin options can be set as individual data attributes, one combined <code>data-options</code> attribute, or as an object passed to the plugin's constructor. <a href="javascript.html#initializing">Learn more about how JavaScript plugins are initialized.</a></p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Default</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>data-start</code></td>
- <td><code>0</code></td>
- <td>Minimum value for the slider scale.</td>
- </tr>
- <tr>
- <td><code>data-end</code></td>
- <td><code>100</code></td>
- <td>Maximum value for the slider scale.</td>
- </tr>
- <tr>
- <td><code>data-step</code></td>
- <td><code>1</code></td>
- <td>Minimum value change per change event.</td>
- </tr>
- <tr>
- <td><code>data-initial-start</code></td>
- <td><code>0</code></td>
- <td>Value at which the handle/input *(left handle/first input)* should be set to on initialization.</td>
- </tr>
- <tr>
- <td><code>data-initial-end</code></td>
- <td><code>100</code></td>
- <td>Value at which the right handle/second input should be set to on initialization.</td>
- </tr>
- <tr>
- <td><code>data-binding</code></td>
- <td><code>false</code></td>
- <td>Allows the input to be located outside the container and visible. Set to by the JS</td>
- </tr>
- <tr>
- <td><code>data-click-select</code></td>
- <td><code>true</code></td>
- <td>Allows the user to click/tap on the slider bar to select a value.</td>
- </tr>
- <tr>
- <td><code>data-vertical</code></td>
- <td><code>false</code></td>
- <td>Set to true and use the `vertical` class to change alignment to vertical.</td>
- </tr>
- <tr>
- <td><code>data-draggable</code></td>
- <td><code>true</code></td>
- <td>Allows the user to drag the slider handle(s) to select a value.</td>
- </tr>
- <tr>
- <td><code>data-disabled</code></td>
- <td><code>false</code></td>
- <td>Disables the slider and prevents event listeners from being applied. Double checked by JS with `disabledClass`.</td>
- </tr>
- <tr>
- <td><code>data-double-sided</code></td>
- <td><code>false</code></td>
- <td>Allows the use of two handles. Double checked by the JS. Changes some logic handling.</td>
- </tr>
- <tr>
- <td><code>data-decimal</code></td>
- <td><code>2</code></td>
- <td>Number of decimal places the plugin should go to for floating point precision.</td>
- </tr>
- <tr>
- <td><code>data-move-time</code></td>
- <td><code>200</code></td>
- <td>Time, in ms, to animate the movement of a slider handle if user clicks/taps on the bar. Needs to be manually set if updating the transition time in the Sass settings.</td>
- </tr>
- <tr>
- <td><code>data-disabled-class</code></td>
- <td><code>disabled</code></td>
- <td>Class applied to disabled sliders.</td>
- </tr>
- <tr>
- <td><code>data-invert-vertical</code></td>
- <td><code>false</code></td>
- <td>Will invert the default layout for a vertical<span data-tooltip title="who would do this???"> </span>slider.</td>
- </tr>
- <tr>
- <td><code>data-changed-delay</code></td>
- <td><code>500</code></td>
- <td>Milliseconds before the `changed.zf-slider` event is triggered after value change.</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="js-events" class="docs-heading">Events<a class="docs-heading-icon" href="#js-events"></a></h3>
-
- <p>These events will fire from any element with a Slider plugin attached.</p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>moved.zf.slider</code></td>
- <td>Fires when the handle is done moving.</td>
- </tr>
- <tr>
- <td><code>changed.zf.slider</code></td>
- <td>Fires when the value has not been change for a given time.</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="js-functions" class="docs-heading">Methods<a class="docs-heading-icon" href="#js-functions"></a></h3>
-
- <section>
- <h4 id="destroy" class="docs-heading">destroy<a class="docs-heading-icon" href="#destroy"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'destroy'</span>);</code></pre>
- </div>
-
- <p>Destroys the slider plugin.</p>
-
-
-
-
-
- </section>
- </section>
-</section>
-
-<!-- <hr> -->
-<!-- <section class="docs-building-blocks">
- <h2 id="building-blocks" class="docs-heading" data-magellan-target="building-blocks">Building Blocks<a class="docs-heading-icon" href="#building-blocks"></a></h2>
-
- <p><a href="http://zurb.com/building-blocks">Building Blocks</a> is a ZURB-curated resource with useful code snippets that use Foundation components. Here are a few for this component:</p>
-
- <div class="warning callout">
- <p>These are placeholder items. If you have ideas for building blocks for this component, <a href="https://github.com/zurb/foundation-sites-6/issues/118">we're taking ideas on GitHub</a>.</p>
- </div>
-
- <div data-building-blocks></div>
-</section> -->
-
-</div>
-
-<div class="large-3 columns" data-sticky-container>
- <nav class="columns docs-toc-wrap" data-sticky data-anchor="docs" data-sticky-on="large">
- <div class="docs-toc hide" id="docsTOC">
- <ul class="vertical menu" data-docs-toc>
- <li class="docs-nav-title">On this page:</li>
- </ul>
- </div>
- <div class="foundation-toc-ad-unit" id="TOCAdUnit">
- </div>
- </nav>
-</div>
-
-</div>
-
-</article>
-
- </div>
- <div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
- <ul class="vertical menu docs-nav" id="docs-menu">
- <p class="docs-nav-version">
- <span data-docs-version></span>
- <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">(Changelog)</a>
- </p>
-
- <li class="docs-nav-title">Getting Started</li>
- <li><a href="installation.html">Installation</a></li>
- <li><a href="starter-projects.html">Starter Projects</a></li>
- <li><a href="compatibility.html">Compatibility</a></li>
- <li><a href="accessibility.html">Accessibility</a></li>
- <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
-
- <li class="docs-nav-title">Setup</li>
- <li><a href="global.html">Global Styles</a></li>
- <li><a href="rtl.html">Right-to-Left Support</a></li>
- <li><a href="flexbox.html">Flexbox</a></li>
- <li><a href="sass.html">Sass</a></li>
- <li><a href="javascript.html">JavaScript</a></li>
- <li><a href="javascript-utilities.html">JavaScript Utilities</a></li>
- <li><a href="media-queries.html">Media Queries</a></li>
-
- <li class="docs-nav-title">General</li>
- <li><a href="grid.html">Grid</a></li>
- <li><a href="flex-grid.html">Flex Grid</a></li>
- <li><a href="forms.html">Forms</a></li>
- <li><a href="visibility.html">Visibility Classes</a></li>
- <li><a href="float-classes.html">Float Classes</a></li>
-
- <li class="docs-nav-title">Typography</li>
- <li><a href="typography-base.html">Base Styles</a></li>
- <li><a href="typography-helpers.html">Helper Classes</a></li>
-
- <li class="docs-nav-title">Controls</li>
- <li><a href="button.html">Button</a></li>
- <li><a href="button-group.html">Button Group</a></li>
- <li><a href="close-button.html">Close Button</a></li>
- <li class="current"><a href="slider.html">Slider <span class="label">JS</span></a></li>
- <li><a href="switch.html">Switch</a></li>
-
- <li class="docs-nav-title">Navigation</li>
- <li><a href="navigation.html">Overview</a></li>
- <li><a href="menu.html">Menu</a></li>
- <li><a href="dropdown-menu.html">Dropdown Menu <span class="label">JS</span></a></li>
- <li><a href="drilldown-menu.html">Drilldown Menu <span class="label">JS</span></a></li>
- <li><a href="accordion-menu.html">Accordion Menu <span class="label">JS</span></a></li>
- <li><a href="top-bar.html">Top Bar</a></li>
- <li><a href="responsive-navigation.html">Responsive Navigation</a></li>
- <li><a href="magellan.html">Magellan <span class="label">JS</span></a></li>
- <li><a href="pagination.html">Pagination</a></li>
- <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
-
- <li class="docs-nav-title">Containers</li>
- <li><a href="accordion.html">Accordion <span class="label">JS</span></a></li>
- <li><a href="callout.html">Callout</a></li>
- <li><a href="dropdown.html">Dropdown <span class="label">JS</span></a></li>
- <li><a href="media-object.html">Media Object</a></li>
- <li><a href="off-canvas.html">Off-canvas <span class="label">JS</span></a></li>
- <li><a href="reveal.html">Reveal <span class="label">JS</span> <small>Modal</small></a></li>
- <li><a href="table.html">Table</a></li>
- <li><a href="tabs.html">Tabs <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Media</li>
- <li><a href="badge.html">Badge</a></li>
- <li><a href="flex-video.html">Flex Video</a></li>
- <li><a href="label.html">Label</a></li>
- <li><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
- <li><a href="progress-bar.html">Progress Bar</a></li>
- <li><a href="thumbnail.html">Thumbnail</a></li>
- <li><a href="tooltip.html">Tooltip <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Plugins</li>
- <li><a href="abide.html">Abide <small>Form Validation</small></a></li>
- <li><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
- <li><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
- <li><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
- <li><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
-
- <li class="docs-nav-title">Sass</li>
- <li><a href="sass-functions.html">Functions</a></li>
- <li><a href="sass-mixins.html">Mixins</a></li>
-
- <li class="docs-nav-title">Libraries</li>
- <li><a href="motion-ui.html">Motion UI</a></li>
- <li><a href="panini.html">Panini</a></li>
- <li><a href="style-sherpa.html">Style Sherpa</a></li>
-
- <li class="docs-nav-title">Older Versions</li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
- <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
- <li><a href="https://get.foundation/sites/docs/v/3.2.5/">Foundation 3</a></li>
- <li><a href="https://get.foundation/sites/docs/v/2.2.1/">Foundation 2</a></li>
- </ul>
-
- </div>
- </div>
-
- <!-- Small Business(Docs) -->
- <section id="studiosCallout">
- <div class="row">
- <div class="medium-4 large-4 columns">
- <img src="https://get.foundation/assets/img/smallbiz-footer.svg" alt="">
- </div>
- <div class="medium-8 large-8 columns banner-info">
- <div class="row column property-label">ZURB Foundation</div>
- <h3 class="light">Yeah, we can help with that.</h3>
- <p class="lead"> We’ll collaborate with your team throughout the entire project life cycle. We’ll take your concept and move it through ideation, hi-fi wireframes, visual design and code, all while informing you on the whys and hows along the way.</p>
- <div class="course-buttons">
- <a href="https://get.foundation/get-involved/premium-support.html" class="studios button" data-zcom-event="studios_foundation_click" id="foundationSmallV1">Show Me How →</a>
- </div>
- </div>
- </div>
- </section>
-
- <div class="docs-newsletter">
- <div class="row">
- <div class="medium-7 large-8 columns">
- <a target="_blank" href="https://get.foundation/learn/responsive-reading.html">
- <h5 class="">Download ZURB’s 21 Responsive Trends That Will Shape 2017</h5>
- <p style="margin-bottom: 0;">Stay informed with amazing responsive trends each month from ZURB.</p>
- </a>
- </div>
- <div class="medium-5 large-4 footer-signup-form columns">
- <a style="margin-bottom: 0;" target="_blank" href="https://get.foundation/learn/responsive-reading.html" class="button expanded">Download the PDF</a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-top bg-fblue">
- <div class="row property">
- <div class="medium-4 columns">
- <div class="property-info">
- <h3>Foundation for Sites</h3>
- <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
- </p>
- </div>
- </div>
-
- <div class="medium-8 columns">
- <div class="row collapse">
- <div class="medium-4 columns">
- <div class="learn-links">
- <h4 class="hide-for-small">Want more?</h4>
- <ul>
- <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
- <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
- <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
- <li><a href="http://zurb.com/university/courses">Training</a></li>
- <li><a href="http://zurb.com/library">Design Resources</a></li>
- </ul>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="support-links">
- <h4 class="hide-for-small">Talk to us</h4>
- <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
- <p><a href="https://get.foundation/get-involved/contribute.html">Get involved in<br>our amazing community.</a></p>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="connect-links">
- <h4 class="hide-for-small">Stay Updated</h4>
- <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
- <a href="http://zurb.com/news" class="small button">Stay Connected</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="row global">
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/studios" class="footer-link-block services">
- <span class="title">Studios</span>
- <span>Helping more than 200 startups succeed since 1998.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="https://get.foundation/" class="footer-link-block foundation">
- <span class="title">Foundation</span>
- <span>The most advanced front-end framework in the world.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/notable" class="footer-link-block apps">
- <span class="title">Notable Design Apps</span>
- <span>Prototype, iterate and collect feedback on your products.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/university" class="footer-link-block expo">
- <span class="title">University</span>
- <span>Ideas, thoughts and design resources shared with you.</span>
- </a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-bottom">
- <div class="row">
- <div class="medium-4 medium-push-8 columns">
- <ul class="home-social">
- <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
- <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
- <li><a href="http://zurb.com/contact" class="mail"></a></li>
- </ul>
- </div>
- <div class="medium-8 medium-pull-4 columns">
- <a href="http://www.zurb.com" class="zurb-logo regular"></a>
- <ul class="zurb-links">
- <li><a href="http://zurb.com/about">About</a></li>
- <li><a href="http://zurb.com/blog">Blog</a></li>
- <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
- <li><a href="http://zurb.com/contact">Contact</a></li>
- <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
- </ul>
- <p class="copyright">© 1998‐2016 ZURB, Inc. All rights reserved.</p>
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- <script>
- var _gaq = _gaq || [];
- _gaq.push(
- ['_setAccount', 'UA-2195009-2'],
- ['_trackPageview'],
- ['b._setAccount', 'UA-2195009-27'],
- ['b._trackPageview']
- );
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
-
- <script src="assets/js/vendor.js?hash=a8ba7567bda4087e8cd2fe7d39e2cbfd"></script>
- <script src="assets/js/foundation.js?hash=d8c73db497e5a411fd67053949e0e648"></script>
- <script src="assets/js/docs.js?hash=5c85a9eb074863715b13e4685d52c079"></script>
- <script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
-</body>
-</html>
+++ /dev/null
-<!doctype html>
-<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
-<html class="no-js" lang="en" dir="ltr">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="We have a few starter project templates that can be installed with the Foundation CLI. You can also download them manually!">
- <link rel="icon" href="assets/img/icons/foundation-favicon.ico" type="image/x-icon">
- <title>Foundation for Sites 6 Docs | Starter Projects</title>
- <link href="assets/css/docs.css?hash=b9d1743131caf7eafd34174edbc7e2fd" rel="stylesheet" />
- <link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=cf08be41831b8e07fe1cae5cdbd729d6" rel="stylesheet">
- <!-- <link rel="stylesheet" href="./node_modules/motion-ui/dist/motion-ui.css" /> -->
-</head>
-<body>
-
- <div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
-
- <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="mobile-ofc vertical menu">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
-
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/support.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/sort/unanswered">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
- </div>
-
- <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="vertical menu">
- <li><a href="#">Foundation</a></li>
- <li><a href="#">Dot</a></li>
- <li><a href="#">ZURB</a></li>
- <li><a href="#">Com</a></li>
- <li><a href="#">Slash</a></li>
- <li><a href="#">Sites</a></li>
- </ul>
- </div>
-
-
- <div class="off-canvas-content" data-off-canvas-content>
- <!-- Info Banner For Announcements or Links -->
- <!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
- <div class="info">
- <h5>Foundation 6 is here!</h5>
- </div>
- </a> -->
-
- <nav class="marketing-topbar show-for-medium">
-
- <ul class="menu">
- <li class="topbar-title"><a href="https://get.foundation/index.html"><img src="assets/img/logos/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
- </ul>
-
- <ul class="dropdown menu" data-dropdown-menu data-click-open="false">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/" target="_blank">F5 Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="https://get.foundation/emails/docs/" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
-
- </nav>
-
- <div class="title-bar hide-for-medium">
- <div class="title-bar-left">
- <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
- <span class="title-bar-title">Foundation</span>
- </div>
- </div>
-
-
- <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
-
- <div class="expanded row">
- <div class="medium-9 large-10 medium-push-3 large-push-2 columns">
-
-<article class="docs-component" id="docs-starter-projects">
-
-<a href="#docs-menu" class="small secondary expanded button hide-for-medium">Jump to Nav</a>
-
-<header>
- <h1 class="docs-page-title">Starter Projects</h1>
-
-
- <p class="lead docs-page-lead">We have a few starter project templates that can be installed with the Foundation CLI. You can also download them manually!</p>
-
- <ul class="menu simple docs-contribute-menu">
- <li><a href="https://github.com/zurb/foundation-sites/edit/master/docs/pages/starter-projects.md" target="_blank"><i class="fi-pencil"></i>Edit this Page</a></li>
- <li><a href="https://github.com/zurb/foundation-sites/issues/new?title=%5BStarter%20Projects%5D%20ISSUE%20NAME%20HERE" target="_blank"><i class="fi-social-github"></i>Report a Bug</a></li>
- <li><a href="https://get.foundation/forum" target="_blank"><i class="fi-comment"></i>Get Help</a></li>
- </ul>
-</header>
-
-<hr>
-
-<div class="row">
-
-<div class="large-9 columns" id="docs">
-
-<p>Our project templates give you a solid... <em>Foundation</em> on which to start a new project. Both templates use the <a href="http://gulpjs.com">Gulp</a> build system to automate the process of compiling Sass, processing JavaScript, copying files, and more.</p>
-<h2 id="basic-template" class="docs-heading" data-magellan-target="basic-template">Basic Template<a class="docs-heading-icon" href="#basic-template"></a></h2><p>Our basic project template is a lot like the Sass template from Foundation 5. The project has a flat directory structure and only compiles Sass. It's great if you want to quickly put together a simple project and only need to use Sass.</p>
-<p>You can set up a basic project through the Foundation CLI with this command:</p>
-<div class="docs-code" data-docs-code><pre><code class="bash">foundation new --framework sites --template basic</code></pre></div><p>It's also possible to download the template files directly from GitHub. Run <code>npm install</code> and <code>bower install</code> first to set it up, then <code>npm start</code> to run it. <a href="https://github.com/zurb/foundation-sites-template/archive/master.zip">Download basic template</a>.</p>
-<hr>
-<h2 id="zurb-template" class="docs-heading" data-magellan-target="zurb-template">ZURB Template<a class="docs-heading-icon" href="#zurb-template"></a></h2><p>The official ZURB Template includes not only Sass processing, but also JavaScript processing, Handlebars templating, and image compression. We use this exact template at ZURB for our client work!</p>
-<p>You can set up an advanced project through the Foundation CLI with this command:</p>
-<div class="docs-code" data-docs-code><pre><code class="bash">foundation new --framework sites --template zurb</code></pre></div><p>It's also possible to download the template files directly from GitHub. Run <code>npm install</code> and <code>bower install</code> first to set it up, then <code>npm start</code> to run it. <a href="https://github.com/zurb/foundation-zurb-template/archive/master.zip">Download advanced template</a>.</p>
-<p>The biggest difference between this and the basic template is the folder structure. In the ZURB Template, your project has a <code>src/</code> folder which contains your source files, and a separate <code>dist/</code> folder with your finished website. As you work on your project, Gulp continuously updates your <code>dist/</code> folder with new versions of files. To compile a production build, run <code>npm run build</code>.</p>
-<p>To override or add to the default styles of the ZURB Template, in your project's <code>src/assets/scss/</code> folder</p>
-<ul>
-<li>Change Sass variables in <code>_settings.scss</code></li>
-<li>Add custom SCSS and css to new files in the <code>components</code> folder then import those files at the bottom of <code>app.scss</code></li>
-</ul>
-<p>The <code>_settings.scss</code> and <code>app.scss</code> files are not changed when upgrading an existing project. As a result, you must manually edit your <code>_settings.scss</code> file to incorporate any Sass changes found <a href="https://github.com/zurb/foundation-sites/releases">in the release notes</a>.</p>
-<p>Here's an overview of what the ZURB Template can do:</p>
-<h3 id="asset-copying" class="docs-heading">Asset Copying<a class="docs-heading-icon" href="#asset-copying"></a></h3><p>Gulp will copy anything out of the <code>src/assets</code> folder as-is to the <code>assets</code> folder of your final project. Note that Sass files, JavaScript files, and images are <em>not</em> part of this copying process, as they have their own steps.</p>
-<h3 id="page-compilation" class="docs-heading">Page Compilation<a class="docs-heading-icon" href="#page-compilation"></a></h3><p>The <code>src/</code> directory includes three folders used to create HTML pages: <code>pages/</code>, <code>layouts/</code>, and <code>partials/</code>. A flat file compiler called <a href="panini.html">Panini</a> is used to process your project's various pages, inserting them into a common template, and injecting any HTML partials. This is done with a templating language called <a href="http://handlebarsjs.com/">Handlebars</a>.</p>
-<p>Panini has a dedicated page here in the docs that explains its various features. <strong><a href="panini.html">Learn more about Panini.</a></strong></p>
-<h3 id="sass-compilation" class="docs-heading">Sass Compilation<a class="docs-heading-icon" href="#sass-compilation"></a></h3><p>Sass is compiled to CSS using <a href="http://sass-lang.com/libsass">Libsass</a> (via <a href="https://github.com/sass/node-sass">node-sass</a>). The main Sass file is under <code>src/assets/scss/app.scss</code>, and imports Foundation and Motion UI. Any new Sass partials you create should be in this folder as well.</p>
-<p>The CSS is output in the <code>nested</code> style, which is readable like normal CSS. A source map is also created, which can be read by developer tools such as the Chrome Web Inspector. When building for production, the CSS is also compressed with <a href="https://github.com/jakubpawlowicz/clean-css/issues">clean-css</a>, and pruned with <a href="https://github.com/giakki/uncss">UnCSS</a>. UnCSS scans the HTML of your pages and removes any CSS classes you didn't use.</p>
-<h3 id="javascript-compilation" class="docs-heading">JavaScript Compilation<a class="docs-heading-icon" href="#javascript-compilation"></a></h3><p>All JavaScript files in the <code>src/assets/js</code> folder, along with Foundation and its dependencies, are bundled into one file called <code>app.js</code>. The files are bundled in this order:</p>
-<ul>
-<li>Foundation's dependencies (including jQuery)</li>
-<li>All files in <code>src/assets/js</code></li>
-<li><code>app.js</code></li>
-</ul>
-<p>A source map is created that maps back to the original files. By default, the bundled <code>app.js</code> is uncompressed. When building for production, the file is run through <a href="https://github.com/mishoo/UglifyJS">UglifyJS</a> for compression.</p>
-<h3 id="image-compression" class="docs-heading">Image Compression<a class="docs-heading-icon" href="#image-compression"></a></h3><p>By default, all images are copied as-is from <code>assets/img</code> to your <code>dist</code> folder. When building for production, images are run through <a href="https://github.com/sindresorhus/gulp-imagemin">gulp-imagemin</a> for compression. The plugin supports JPEG, PNG, SVG, and GIF files.</p>
-<h3 id="browsersync" class="docs-heading">BrowserSync<a class="docs-heading-icon" href="#browsersync"></a></h3><p>The template creates a <a href="http://www.browsersync.io/">BrowserSync</a> server, which is at <code>http://localhost:8000</code>. Load this URL to see your compiled templates. While the server is running, any time you save a file, any pages you have open will automatically refresh, allowing you to see changes in real-time as you work.</p>
-<h3 id="style-guide-creation" class="docs-heading">Style Guide Creation<a class="docs-heading-icon" href="#style-guide-creation"></a></h3><p>Under <code>src/styleguide</code> are two files to create a style guide for your project. The style guide is generated using Style Sherpa, a small plugin created by ZURB.</p>
-<p>Style Sherpa has a dedicated page here in the docs that explains its various features. <strong><a href="style-sherpa.html">Learn more about Style Sherpa.</a></strong></p>
-
-
-
-
-
-</div>
-
-<div class="large-3 columns" data-sticky-container>
- <nav class="columns docs-toc-wrap" data-sticky data-anchor="docs" data-sticky-on="large">
- <div class="docs-toc hide" id="docsTOC">
- <ul class="vertical menu" data-docs-toc>
- <li class="docs-nav-title">On this page:</li>
- </ul>
- </div>
- <div class="foundation-toc-ad-unit" id="TOCAdUnit">
- </div>
- </nav>
-</div>
-
-</div>
-
-</article>
-
- </div>
- <div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
- <ul class="vertical menu docs-nav" id="docs-menu">
- <p class="docs-nav-version">
- <span data-docs-version></span>
- <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">(Changelog)</a>
- </p>
-
- <li class="docs-nav-title">Getting Started</li>
- <li><a href="installation.html">Installation</a></li>
- <li class="current"><a href="starter-projects.html">Starter Projects</a></li>
- <li><a href="compatibility.html">Compatibility</a></li>
- <li><a href="accessibility.html">Accessibility</a></li>
- <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
-
- <li class="docs-nav-title">Setup</li>
- <li><a href="global.html">Global Styles</a></li>
- <li><a href="rtl.html">Right-to-Left Support</a></li>
- <li><a href="flexbox.html">Flexbox</a></li>
- <li><a href="sass.html">Sass</a></li>
- <li><a href="javascript.html">JavaScript</a></li>
- <li><a href="javascript-utilities.html">JavaScript Utilities</a></li>
- <li><a href="media-queries.html">Media Queries</a></li>
-
- <li class="docs-nav-title">General</li>
- <li><a href="grid.html">Grid</a></li>
- <li><a href="flex-grid.html">Flex Grid</a></li>
- <li><a href="forms.html">Forms</a></li>
- <li><a href="visibility.html">Visibility Classes</a></li>
- <li><a href="float-classes.html">Float Classes</a></li>
-
- <li class="docs-nav-title">Typography</li>
- <li><a href="typography-base.html">Base Styles</a></li>
- <li><a href="typography-helpers.html">Helper Classes</a></li>
-
- <li class="docs-nav-title">Controls</li>
- <li><a href="button.html">Button</a></li>
- <li><a href="button-group.html">Button Group</a></li>
- <li><a href="close-button.html">Close Button</a></li>
- <li><a href="slider.html">Slider <span class="label">JS</span></a></li>
- <li><a href="switch.html">Switch</a></li>
-
- <li class="docs-nav-title">Navigation</li>
- <li><a href="navigation.html">Overview</a></li>
- <li><a href="menu.html">Menu</a></li>
- <li><a href="dropdown-menu.html">Dropdown Menu <span class="label">JS</span></a></li>
- <li><a href="drilldown-menu.html">Drilldown Menu <span class="label">JS</span></a></li>
- <li><a href="accordion-menu.html">Accordion Menu <span class="label">JS</span></a></li>
- <li><a href="top-bar.html">Top Bar</a></li>
- <li><a href="responsive-navigation.html">Responsive Navigation</a></li>
- <li><a href="magellan.html">Magellan <span class="label">JS</span></a></li>
- <li><a href="pagination.html">Pagination</a></li>
- <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
-
- <li class="docs-nav-title">Containers</li>
- <li><a href="accordion.html">Accordion <span class="label">JS</span></a></li>
- <li><a href="callout.html">Callout</a></li>
- <li><a href="dropdown.html">Dropdown <span class="label">JS</span></a></li>
- <li><a href="media-object.html">Media Object</a></li>
- <li><a href="off-canvas.html">Off-canvas <span class="label">JS</span></a></li>
- <li><a href="reveal.html">Reveal <span class="label">JS</span> <small>Modal</small></a></li>
- <li><a href="table.html">Table</a></li>
- <li><a href="tabs.html">Tabs <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Media</li>
- <li><a href="badge.html">Badge</a></li>
- <li><a href="flex-video.html">Flex Video</a></li>
- <li><a href="label.html">Label</a></li>
- <li><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
- <li><a href="progress-bar.html">Progress Bar</a></li>
- <li><a href="thumbnail.html">Thumbnail</a></li>
- <li><a href="tooltip.html">Tooltip <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Plugins</li>
- <li><a href="abide.html">Abide <small>Form Validation</small></a></li>
- <li><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
- <li><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
- <li><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
- <li><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
-
- <li class="docs-nav-title">Sass</li>
- <li><a href="sass-functions.html">Functions</a></li>
- <li><a href="sass-mixins.html">Mixins</a></li>
-
- <li class="docs-nav-title">Libraries</li>
- <li><a href="motion-ui.html">Motion UI</a></li>
- <li><a href="panini.html">Panini</a></li>
- <li><a href="style-sherpa.html">Style Sherpa</a></li>
-
- <li class="docs-nav-title">Older Versions</li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
- <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
- <li><a href="https://get.foundation/sites/docs/v/3.2.5/">Foundation 3</a></li>
- <li><a href="https://get.foundation/sites/docs/v/2.2.1/">Foundation 2</a></li>
- </ul>
-
- </div>
- </div>
-
- <!-- Small Business(Docs) -->
- <section id="studiosCallout">
- <div class="row">
- <div class="medium-4 large-4 columns">
- <img src="https://get.foundation/assets/img/smallbiz-footer.svg" alt="">
- </div>
- <div class="medium-8 large-8 columns banner-info">
- <div class="row column property-label">ZURB Foundation</div>
- <h3 class="light">Yeah, we can help with that.</h3>
- <p class="lead"> We’ll collaborate with your team throughout the entire project life cycle. We’ll take your concept and move it through ideation, hi-fi wireframes, visual design and code, all while informing you on the whys and hows along the way.</p>
- <div class="course-buttons">
- <a href="https://get.foundation/get-involved/premium-support.html" class="studios button" data-zcom-event="studios_foundation_click" id="foundationSmallV1">Show Me How →</a>
- </div>
- </div>
- </div>
- </section>
-
- <div class="docs-newsletter">
- <div class="row">
- <div class="medium-7 large-8 columns">
- <a target="_blank" href="https://get.foundation/learn/responsive-reading.html">
- <h5 class="">Download ZURB’s 21 Responsive Trends That Will Shape 2017</h5>
- <p style="margin-bottom: 0;">Stay informed with amazing responsive trends each month from ZURB.</p>
- </a>
- </div>
- <div class="medium-5 large-4 footer-signup-form columns">
- <a style="margin-bottom: 0;" target="_blank" href="https://get.foundation/learn/responsive-reading.html" class="button expanded">Download the PDF</a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-top bg-fblue">
- <div class="row property">
- <div class="medium-4 columns">
- <div class="property-info">
- <h3>Foundation for Sites</h3>
- <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
- </p>
- </div>
- </div>
-
- <div class="medium-8 columns">
- <div class="row collapse">
- <div class="medium-4 columns">
- <div class="learn-links">
- <h4 class="hide-for-small">Want more?</h4>
- <ul>
- <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
- <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
- <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
- <li><a href="http://zurb.com/university/courses">Training</a></li>
- <li><a href="http://zurb.com/library">Design Resources</a></li>
- </ul>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="support-links">
- <h4 class="hide-for-small">Talk to us</h4>
- <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
- <p><a href="https://get.foundation/get-involved/contribute.html">Get involved in<br>our amazing community.</a></p>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="connect-links">
- <h4 class="hide-for-small">Stay Updated</h4>
- <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
- <a href="http://zurb.com/news" class="small button">Stay Connected</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="row global">
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/studios" class="footer-link-block services">
- <span class="title">Studios</span>
- <span>Helping more than 200 startups succeed since 1998.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="https://get.foundation/" class="footer-link-block foundation">
- <span class="title">Foundation</span>
- <span>The most advanced front-end framework in the world.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/notable" class="footer-link-block apps">
- <span class="title">Notable Design Apps</span>
- <span>Prototype, iterate and collect feedback on your products.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/university" class="footer-link-block expo">
- <span class="title">University</span>
- <span>Ideas, thoughts and design resources shared with you.</span>
- </a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-bottom">
- <div class="row">
- <div class="medium-4 medium-push-8 columns">
- <ul class="home-social">
- <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
- <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
- <li><a href="http://zurb.com/contact" class="mail"></a></li>
- </ul>
- </div>
- <div class="medium-8 medium-pull-4 columns">
- <a href="http://www.zurb.com" class="zurb-logo regular"></a>
- <ul class="zurb-links">
- <li><a href="http://zurb.com/about">About</a></li>
- <li><a href="http://zurb.com/blog">Blog</a></li>
- <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
- <li><a href="http://zurb.com/contact">Contact</a></li>
- <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
- </ul>
- <p class="copyright">© 1998‐2016 ZURB, Inc. All rights reserved.</p>
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- <script>
- var _gaq = _gaq || [];
- _gaq.push(
- ['_setAccount', 'UA-2195009-2'],
- ['_trackPageview'],
- ['b._setAccount', 'UA-2195009-27'],
- ['b._trackPageview']
- );
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
-
- <script src="assets/js/vendor.js?hash=9c983aad52fd33547a5b61b99555d6e8"></script>
- <script src="assets/js/foundation.js?hash=63669cc18c1d31785d10c5181d659325"></script>
- <script src="assets/js/docs.js?hash=31f7c6f7ef1cf4d86cde4299df393c88"></script>
- <script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
-</body>
-</html>
+++ /dev/null
-<!doctype html>
-<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
-<html class="no-js" lang="en" dir="ltr">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="Stick nearly anything, anywhere you like!">
- <link rel="icon" href="assets/img/icons/foundation-favicon.ico" type="image/x-icon">
- <title>Foundation for Sites 6 Docs | Sticky</title>
- <link href="assets/css/docs.css?hash=9263e0fa4412c93cc6adf79c1b7a1a8b" rel="stylesheet" />
- <link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=8dc957b2949c892503f71775228373bb" rel="stylesheet">
- <!-- <link rel="stylesheet" href="./node_modules/motion-ui/dist/motion-ui.css" /> -->
-</head>
-<body>
-
- <div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
-
- <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="mobile-ofc vertical menu">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
-
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/support.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/sort/unanswered">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
- </div>
-
- <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="vertical menu">
- <li><a href="#">Foundation</a></li>
- <li><a href="#">Dot</a></li>
- <li><a href="#">ZURB</a></li>
- <li><a href="#">Com</a></li>
- <li><a href="#">Slash</a></li>
- <li><a href="#">Sites</a></li>
- </ul>
- </div>
-
-
- <div class="off-canvas-content" data-off-canvas-content>
- <!-- Info Banner For Announcements or Links -->
- <!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
- <div class="info">
- <h5>Foundation 6 is here!</h5>
- </div>
- </a> -->
-
- <nav class="marketing-topbar show-for-medium">
-
- <ul class="menu">
- <li class="topbar-title"><a href="https://get.foundation/index.html"><img src="assets/img/logos/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
- </ul>
-
- <ul class="dropdown menu" data-dropdown-menu data-click-open="false">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/" target="_blank">F5 Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="https://get.foundation/emails/docs/" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
-
- </nav>
-
- <div class="title-bar hide-for-medium">
- <div class="title-bar-left">
- <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
- <span class="title-bar-title">Foundation</span>
- </div>
- </div>
-
-
- <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
-
- <div class="expanded row">
- <div class="medium-9 large-10 medium-push-3 large-push-2 columns">
-
-<article class="docs-component" id="docs-sticky">
-
-<a href="#docs-menu" class="small secondary expanded button hide-for-medium">Jump to Nav</a>
-
-<header>
- <h1 class="docs-page-title">Sticky</h1>
-
- <span data-tooltip title="Requires a JavaScript library." class="docs-js label">JavaScript</span>
-
- <p class="lead docs-page-lead">Stick nearly anything, anywhere you like!</p>
-
- <ul class="menu simple docs-contribute-menu">
- <li><a href="https://github.com/zurb/foundation-sites/edit/master/docs/pages/sticky.md" target="_blank"><i class="fi-pencil"></i>Edit this Page</a></li>
- <li><a href="https://github.com/zurb/foundation-sites/issues/new?title=%5BSticky%5D%20ISSUE%20NAME%20HERE" target="_blank"><i class="fi-social-github"></i>Report a Bug</a></li>
- <li><a href="https://get.foundation/forum" target="_blank"><i class="fi-comment"></i>Get Help</a></li>
- </ul>
-</header>
-
-<hr>
-
-<div class="row">
-
-<div class="large-9 columns" id="docs">
-
-<h2 id="basics" class="docs-heading" data-magellan-target="basics">Basics<a class="docs-heading-icon" href="#basics"></a></h2><p>Add the <code>.sticky</code> class and <code>[data-sticky]</code> to an element to create something that sticks. Sticky elements must be wrapped in a container, which will determine your sizing and grid layout, with <code>[data-sticky-container]</code>.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns small-6 right"</span> <span class="hljs-attr">data-sticky-container</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"sticky"</span> <span class="hljs-attr">data-sticky</span> <span class="hljs-attr">data-margin-top</span>=<span class="hljs-string">"0"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"thumbnail"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"assets/img/generic/rectangle-3.jpg"</span>></span>
- <span class="hljs-comment"><!-- This sticky element would stick to the window, with a marginTop of 0 --></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
-
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns small-6 right"</span> <span class="hljs-attr">data-sticky-container</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"sticky"</span> <span class="hljs-attr">data-sticky</span> <span class="hljs-attr">data-anchor</span>=<span class="hljs-string">"foo"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"thumbnail"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"assets/img/generic/rectangle-3.jpg"</span>></span>
- <span class="hljs-comment"><!-- This sticky element would stick to the window for the height of the element #foo, with a 1em marginTop --></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div><!-- ```html_example -->
-<div class="row">
- <div class="columns small-12">
- <div class="columns small-6" id="example1" data-something>
- <p id="doodle">
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- </p>
- <p>
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- </p>
- <p>
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- </p>
- <p>
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- </p>
- </div>
- <div class="columns small-6 right" data-sticky-container>
- <div class="sticky" data-sticky data-anchor="example1">
- <img class="thumbnail" src="assets/img/generic/rectangle-3.jpg">
- </div>
- </div>
- </div>
-</div>
-
-<h2 id="advanced" class="docs-heading" data-magellan-target="advanced">Advanced<a class="docs-heading-icon" href="#advanced"></a></h2><p>You can also use two anchors, if you please. Using <code>data-top-anchor="idOfSomething"</code>, <code>data-btm-anchor="idOfSomething:[top/bottom]"</code>, or a set pixel number <code>data-top-anchor="150"</code>. If you use an element id with no top/bottom specified, it defaults to the top.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns small-6 right"</span> <span class="hljs-attr">data-sticky-container</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"sticky"</span> <span class="hljs-attr">data-sticky</span> <span class="hljs-attr">data-top-anchor</span>=<span class="hljs-string">"example2:top"</span> <span class="hljs-attr">data-btm-anchor</span>=<span class="hljs-string">"foo:bottom"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"thumbnail"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"assets/img/generic/rectangle-5.jpg"</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div><div class="row">
- <div class="columns small-12">
- <div class="columns small-6"><br> <p>
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- </p>
- <p id="example2">
- <strong>The image to the right will be sticky when it hits the top of this paragraph element.</strong>
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- </p>
- <p>
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- </p>
- <p id="foo">
- <strong>The image to the right will lose stickiness when it hits the bottom of this paragraph element.</strong>
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- </p>
- <p>
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- </p>
- </div>
- <div class="columns small-6 right" data-sticky-container>
- <div class="sticky" data-sticky data-top-anchor="example2:top" data-btm-anchor="foo:bottom">
- <img class="thumbnail" src="assets/img/generic/rectangle-5.jpg">
- </div>
- </div>
- </div>
-</div>
-
-<h2 id="stick-to-bottom" class="docs-heading" data-magellan-target="stick-to-bottom">Stick to bottom<a class="docs-heading-icon" href="#stick-to-bottom"></a></h2><p>You can also stick to bottom.
-Using <code>data-stick-to="bottom"</code>.
-Here is an example using two anchors (like above) with a stick to bottom.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns small-6 right"</span> <span class="hljs-attr">data-sticky-container</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"sticky"</span> <span class="hljs-attr">data-sticky</span> <span class="hljs-attr">data-stick-to</span>=<span class="hljs-string">"bottom"</span> <span class="hljs-attr">data-top-anchor</span>=<span class="hljs-string">"example3"</span> <span class="hljs-attr">data-btm-anchor</span>=<span class="hljs-string">"foo2:top"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"thumbnail"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"assets/img/generic/rectangle-5.jpg"</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div><div class="row">
- <div class="columns small-12">
- <div class="columns small-6">
-
- <p>
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- </p>
- <p id="example3"><strong>The image to the right will be sticky when it hits the top of this paragraph element.</strong>
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- </p>
- <p>
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- </p>
- <p id="foo2">
- <strong>The image to the right will lose stickiness when it hits the top of this paragraph element.</strong>
- <strongr />
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- </p>
-
- </div>
- <div class="columns small-6 right" data-sticky-container>
- <div class="sticky" data-sticky data-top-anchor="example3:top" data-btm-anchor="foo2:top" data-stick-to="bottom">
- <img class="thumbnail" src="assets/img/generic/rectangle-5.jpg">
- </div>
- </div>
- </div>
-</div>
-
-<h2 id="sticky-navigation" class="docs-heading" data-magellan-target="sticky-navigation">Sticky Navigation<a class="docs-heading-icon" href="#sticky-navigation"></a></h2><p>Sometimes you want a sticky nav bar or side nav, this is pretty simple, but does involve an extra step from Foundation 5's <code>sticky</code> class addition to Top Bar. The minimum to make a stick nav bar is below, and you can swap out <code>.title-bar</code> for another menu component. Please note the style <code>width:100%</code>, you can do it inline, or in your style sheets.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">data-sticky-container</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar"</span> <span class="hljs-attr">data-sticky</span> <span class="hljs-attr">data-options</span>=<span class="hljs-string">"marginTop:0;"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width:100%"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar-left"</span>></span><span class="hljs-comment"><!-- Content --></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar-right"</span>></span><span class="hljs-comment"><!-- Content --></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div><p>With the minimum markup above, your nav bar will be sticky for the entire page. You could change this up by using anchor points, so it sticks and breaks at important markers on the page. A top anchor point of '1' will make it stick at the top of the page, a bottom anchor of <code>content:bottom</code> will make it break at the bottom of your <code>#content</code> element. This is useful if you want a sticky nav element, but not for the full length of the page.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">data-sticky-container</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar"</span> <span class="hljs-attr">data-sticky</span> <span class="hljs-attr">data-options</span>=<span class="hljs-string">"marginTop:0;"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width:100%"</span> <span class="hljs-attr">data-top-anchor</span>=<span class="hljs-string">"1"</span> <span class="hljs-attr">data-btm-anchor</span>=<span class="hljs-string">"content:bottom"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar-left"</span>></span><span class="hljs-comment"><!-- Content --></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar-right"</span>></span><span class="hljs-comment"><!-- Content --></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div><p><iframe src="./assets/partials/sticky-nav.html" width="100%" height="300px" frameborder="0"></iframe>
-<!-- ``` --></p>
-
-
-
-<hr>
-<section>
- <h2 id="javascript-reference" class="docs-heading" data-magellan-target="javascript-reference">JavaScript Reference<a class="docs-heading-icon" href="#javascript-reference"></a></h2>
-
-
- <section>
- <h3 id="js-module" class="docs-heading">Initializing<a class="docs-heading-icon" href="#js-module"></a></h3>
-
- <p>The file <code>foundation.sticky.js</code> must be included in your JavaScript to use this plugin, along with <code>foundation.core.js</code>. <strong>This plugin also requires these utility libraries:</strong></p>
-
-
- <ul>
- <li><code>foundation.util.triggers.js</code></li>
- </ul>
-
- <ul>
- <li><code>foundation.util.mediaQuery.js</code></li>
- </ul>
-
-
- </section>
-
-
- <section>
- <h3 id="js-class" class="docs-heading">Foundation.Sticky<a class="docs-heading-icon" href="#js-class"></a></h3>
-
- <p>Creates a new instance of a sticky thing.</p>
-
-
- <div class="docs-code"><pre><code><span class="hljs-keyword">var</span> elem = <span class="hljs-keyword">new</span> Foundation.Sticky(element, options);</code></pre></div>
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>element</code></td>
- <td>jQuery</td>
- <td>jQuery object to make sticky.</td>
- </tr>
- <tr>
- <td><code>options</code></td>
- <td>Object</td>
- <td>options object passed when creating the element programmatically.</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="js-options" class="docs-heading">Plugin Options<a class="docs-heading-icon" href="#js-options"></a></h3>
-
- <p>Use these options to customize an instance of Sticky. Plugin options can be set as individual data attributes, one combined <code>data-options</code> attribute, or as an object passed to the plugin's constructor. <a href="javascript.html#initializing">Learn more about how JavaScript plugins are initialized.</a></p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Default</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>data-container</code></td>
- <td><code><div data-sticky-container class="small-6 columns"></div></code></td>
- <td>Customizable container template. Add your own classes for styling and sizing.</td>
- </tr>
- <tr>
- <td><code>data-stick-to</code></td>
- <td><code>top</code></td>
- <td>Location in the view the element sticks to.</td>
- </tr>
- <tr>
- <td><code>data-anchor</code></td>
- <td><code>exampleId</code></td>
- <td>If anchored to a single element, the id of that element.</td>
- </tr>
- <tr>
- <td><code>data-top-anchor</code></td>
- <td><code>exampleId:top</code></td>
- <td>If using more than one element as anchor points, the id of the top anchor.</td>
- </tr>
- <tr>
- <td><code>data-btm-anchor</code></td>
- <td><code>exampleId:bottom</code></td>
- <td>If using more than one element as anchor points, the id of the bottom anchor.</td>
- </tr>
- <tr>
- <td><code>data-margin-top</code></td>
- <td><code>1</code></td>
- <td>Margin, in `em`'s to apply to the top of the element when it becomes sticky.</td>
- </tr>
- <tr>
- <td><code>data-margin-bottom</code></td>
- <td><code>1</code></td>
- <td>Margin, in `em`'s to apply to the bottom of the element when it becomes sticky.</td>
- </tr>
- <tr>
- <td><code>data-sticky-on</code></td>
- <td><code>medium</code></td>
- <td>Breakpoint string that is the minimum screen size an element should become sticky.</td>
- </tr>
- <tr>
- <td><code>data-sticky-class</code></td>
- <td><code>sticky</code></td>
- <td>Class applied to sticky element, and removed on destruction. Foundation defaults to `sticky`.</td>
- </tr>
- <tr>
- <td><code>data-container-class</code></td>
- <td><code>sticky-container</code></td>
- <td>Class applied to sticky container. Foundation defaults to `sticky-container`.</td>
- </tr>
- <tr>
- <td><code>data-check-every</code></td>
- <td><code>50</code></td>
- <td>Number of scroll events between the plugin's recalculating sticky points. Setting it to `0` will cause it to recalc every scroll event, setting it to `-1` will prevent recalc on scroll.</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="js-events" class="docs-heading">Events<a class="docs-heading-icon" href="#js-events"></a></h3>
-
- <p>These events will fire from any element with a Sticky plugin attached.</p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>stuckto.zf.sticky</code></td>
- <td>Fires when the $element has become `position: fixed;`
-Namespaced to `top` or `bottom`, e.g. `sticky.zf.stuckto:top`</td>
- </tr>
- <tr>
- <td><code>unstuckfrom.zf.sticky</code></td>
- <td>Fires when the $element has become anchored.
-Namespaced to `top` or `bottom`, e.g. `sticky.zf.unstuckfrom:bottom`</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="js-functions" class="docs-heading">Methods<a class="docs-heading-icon" href="#js-functions"></a></h3>
-
- <section>
- <h4 id="_pauselisteners" class="docs-heading">_pauseListeners<a class="docs-heading-icon" href="#_pauselisteners"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'_pauseListeners'</span>, scrollListener);</code></pre>
- </div>
-
- <p>Removes event handlers for scroll and change events on anchor.</p>
-
-
- <p><strong>Fires these events:</strong>
- Sticky#event:pause
- </p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>scrollListener</code></td>
- <td>String</td>
- <td>unique, namespaced scroll listener attached to `window`</td>
- </tr>
- </table>
-
- <hr>
- </section>
- <section>
- <h4 id="_calc" class="docs-heading">_calc<a class="docs-heading-icon" href="#_calc"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'_calc'</span>, checkSizes, scroll);</code></pre>
- </div>
-
- <p>Called on every <code>scroll</code> event and on <code>_init</code>
-fires functions based on booleans and cached values</p>
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>checkSizes</code></td>
- <td>Boolean</td>
- <td>true if plugin should recalculate sizes and breakpoints.</td>
- </tr>
- <tr>
- <td><code>scroll</code></td>
- <td>Number</td>
- <td>current scroll position passed from scroll event cb function. If not passed, defaults to `window.pageYOffset`.</td>
- </tr>
- </table>
-
- <hr>
- </section>
- <section>
- <h4 id="destroy" class="docs-heading">destroy<a class="docs-heading-icon" href="#destroy"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'destroy'</span>);</code></pre>
- </div>
-
- <p>Destroys the current sticky element.
-Resets the element to the top position first.
-Removes event listeners, JS-added css properties and classes, and unwraps the $element if the JS added the $container.</p>
-
-
-
-
- <hr>
- </section>
- <section>
- <h4 id="emcalc" class="docs-heading">emCalc<a class="docs-heading-icon" href="#emcalc"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'emCalc'</span>, <span class="hljs-built_in">Number</span>);</code></pre>
- </div>
-
- <p>Helper function to calculate em values</p>
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>Number</code></td>
- <td>em</td>
- <td>number of em's to calculate into pixels</td>
- </tr>
- </table>
-
-
- </section>
- </section>
-</section>
-
-
-</div>
-
-<div class="large-3 columns" data-sticky-container>
- <nav class="columns docs-toc-wrap" data-sticky data-anchor="docs" data-sticky-on="large">
- <div class="docs-toc hide" id="docsTOC">
- <ul class="vertical menu" data-docs-toc>
- <li class="docs-nav-title">On this page:</li>
- </ul>
- </div>
- <div class="foundation-toc-ad-unit" id="TOCAdUnit">
- </div>
- </nav>
-</div>
-
-</div>
-
-</article>
-
- </div>
- <div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
- <ul class="vertical menu docs-nav" id="docs-menu">
- <p class="docs-nav-version">
- <span data-docs-version></span>
- <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">(Changelog)</a>
- </p>
-
- <li class="docs-nav-title">Getting Started</li>
- <li><a href="installation.html">Installation</a></li>
- <li><a href="starter-projects.html">Starter Projects</a></li>
- <li><a href="compatibility.html">Compatibility</a></li>
- <li><a href="accessibility.html">Accessibility</a></li>
- <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
-
- <li class="docs-nav-title">Setup</li>
- <li><a href="global.html">Global Styles</a></li>
- <li><a href="rtl.html">Right-to-Left Support</a></li>
- <li><a href="flexbox.html">Flexbox</a></li>
- <li><a href="sass.html">Sass</a></li>
- <li><a href="javascript.html">JavaScript</a></li>
- <li><a href="javascript-utilities.html">JavaScript Utilities</a></li>
- <li><a href="media-queries.html">Media Queries</a></li>
-
- <li class="docs-nav-title">General</li>
- <li><a href="grid.html">Grid</a></li>
- <li><a href="flex-grid.html">Flex Grid</a></li>
- <li><a href="forms.html">Forms</a></li>
- <li><a href="visibility.html">Visibility Classes</a></li>
- <li><a href="float-classes.html">Float Classes</a></li>
-
- <li class="docs-nav-title">Typography</li>
- <li><a href="typography-base.html">Base Styles</a></li>
- <li><a href="typography-helpers.html">Helper Classes</a></li>
-
- <li class="docs-nav-title">Controls</li>
- <li><a href="button.html">Button</a></li>
- <li><a href="button-group.html">Button Group</a></li>
- <li><a href="close-button.html">Close Button</a></li>
- <li><a href="slider.html">Slider <span class="label">JS</span></a></li>
- <li><a href="switch.html">Switch</a></li>
-
- <li class="docs-nav-title">Navigation</li>
- <li><a href="navigation.html">Overview</a></li>
- <li><a href="menu.html">Menu</a></li>
- <li><a href="dropdown-menu.html">Dropdown Menu <span class="label">JS</span></a></li>
- <li><a href="drilldown-menu.html">Drilldown Menu <span class="label">JS</span></a></li>
- <li><a href="accordion-menu.html">Accordion Menu <span class="label">JS</span></a></li>
- <li><a href="top-bar.html">Top Bar</a></li>
- <li><a href="responsive-navigation.html">Responsive Navigation</a></li>
- <li><a href="magellan.html">Magellan <span class="label">JS</span></a></li>
- <li><a href="pagination.html">Pagination</a></li>
- <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
-
- <li class="docs-nav-title">Containers</li>
- <li><a href="accordion.html">Accordion <span class="label">JS</span></a></li>
- <li><a href="callout.html">Callout</a></li>
- <li><a href="dropdown.html">Dropdown <span class="label">JS</span></a></li>
- <li><a href="media-object.html">Media Object</a></li>
- <li><a href="off-canvas.html">Off-canvas <span class="label">JS</span></a></li>
- <li><a href="reveal.html">Reveal <span class="label">JS</span> <small>Modal</small></a></li>
- <li><a href="table.html">Table</a></li>
- <li><a href="tabs.html">Tabs <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Media</li>
- <li><a href="badge.html">Badge</a></li>
- <li><a href="flex-video.html">Flex Video</a></li>
- <li><a href="label.html">Label</a></li>
- <li><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
- <li><a href="progress-bar.html">Progress Bar</a></li>
- <li><a href="thumbnail.html">Thumbnail</a></li>
- <li><a href="tooltip.html">Tooltip <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Plugins</li>
- <li><a href="abide.html">Abide <small>Form Validation</small></a></li>
- <li><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
- <li><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
- <li><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
- <li class="current"><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
-
- <li class="docs-nav-title">Sass</li>
- <li><a href="sass-functions.html">Functions</a></li>
- <li><a href="sass-mixins.html">Mixins</a></li>
-
- <li class="docs-nav-title">Libraries</li>
- <li><a href="motion-ui.html">Motion UI</a></li>
- <li><a href="panini.html">Panini</a></li>
- <li><a href="style-sherpa.html">Style Sherpa</a></li>
-
- <li class="docs-nav-title">Older Versions</li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
- <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
- <li><a href="https://get.foundation/sites/docs/v/3.2.5/">Foundation 3</a></li>
- <li><a href="https://get.foundation/sites/docs/v/2.2.1/">Foundation 2</a></li>
- </ul>
-
- </div>
- </div>
-
- <!-- Small Business(Docs) -->
- <section id="studiosCallout">
- <div class="row">
- <div class="medium-4 large-4 columns">
- <img src="https://get.foundation/assets/img/smallbiz-footer.svg" alt="">
- </div>
- <div class="medium-8 large-8 columns banner-info">
- <div class="row column property-label">ZURB Foundation</div>
- <h3 class="light">Yeah, we can help with that.</h3>
- <p class="lead"> We’ll collaborate with your team throughout the entire project life cycle. We’ll take your concept and move it through ideation, hi-fi wireframes, visual design and code, all while informing you on the whys and hows along the way.</p>
- <div class="course-buttons">
- <a href="https://get.foundation/get-involved/premium-support.html" class="studios button" data-zcom-event="studios_foundation_click" id="foundationSmallV1">Show Me How →</a>
- </div>
- </div>
- </div>
- </section>
-
- <div class="docs-newsletter">
- <div class="row">
- <div class="medium-7 large-8 columns">
- <a target="_blank" href="https://get.foundation/learn/responsive-reading.html">
- <h5 class="">Download ZURB’s 21 Responsive Trends That Will Shape 2017</h5>
- <p style="margin-bottom: 0;">Stay informed with amazing responsive trends each month from ZURB.</p>
- </a>
- </div>
- <div class="medium-5 large-4 footer-signup-form columns">
- <a style="margin-bottom: 0;" target="_blank" href="https://get.foundation/learn/responsive-reading.html" class="button expanded">Download the PDF</a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-top bg-fblue">
- <div class="row property">
- <div class="medium-4 columns">
- <div class="property-info">
- <h3>Foundation for Sites</h3>
- <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
- </p>
- </div>
- </div>
-
- <div class="medium-8 columns">
- <div class="row collapse">
- <div class="medium-4 columns">
- <div class="learn-links">
- <h4 class="hide-for-small">Want more?</h4>
- <ul>
- <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
- <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
- <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
- <li><a href="http://zurb.com/university/courses">Training</a></li>
- <li><a href="http://zurb.com/library">Design Resources</a></li>
- </ul>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="support-links">
- <h4 class="hide-for-small">Talk to us</h4>
- <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
- <p><a href="https://get.foundation/get-involved/contribute.html">Get involved in<br>our amazing community.</a></p>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="connect-links">
- <h4 class="hide-for-small">Stay Updated</h4>
- <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
- <a href="http://zurb.com/news" class="small button">Stay Connected</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="row global">
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/studios" class="footer-link-block services">
- <span class="title">Studios</span>
- <span>Helping more than 200 startups succeed since 1998.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="https://get.foundation/" class="footer-link-block foundation">
- <span class="title">Foundation</span>
- <span>The most advanced front-end framework in the world.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/notable" class="footer-link-block apps">
- <span class="title">Notable Design Apps</span>
- <span>Prototype, iterate and collect feedback on your products.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/university" class="footer-link-block expo">
- <span class="title">University</span>
- <span>Ideas, thoughts and design resources shared with you.</span>
- </a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-bottom">
- <div class="row">
- <div class="medium-4 medium-push-8 columns">
- <ul class="home-social">
- <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
- <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
- <li><a href="http://zurb.com/contact" class="mail"></a></li>
- </ul>
- </div>
- <div class="medium-8 medium-pull-4 columns">
- <a href="http://www.zurb.com" class="zurb-logo regular"></a>
- <ul class="zurb-links">
- <li><a href="http://zurb.com/about">About</a></li>
- <li><a href="http://zurb.com/blog">Blog</a></li>
- <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
- <li><a href="http://zurb.com/contact">Contact</a></li>
- <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
- </ul>
- <p class="copyright">© 1998‐2016 ZURB, Inc. All rights reserved.</p>
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- <script>
- var _gaq = _gaq || [];
- _gaq.push(
- ['_setAccount', 'UA-2195009-2'],
- ['_trackPageview'],
- ['b._setAccount', 'UA-2195009-27'],
- ['b._trackPageview']
- );
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
-
- <script src="assets/js/vendor.js?hash=790598076e958733cd14708d55d66d83"></script>
- <script src="assets/js/foundation.js?hash=f4acc28e7d43d995ff48602e61eb278a"></script>
- <script src="assets/js/docs.js?hash=763ff497005a7bd3b01b10aeac6d2b51"></script>
- <script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
-</body>
-</html>
+++ /dev/null
-<!doctype html>
-<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
-<html class="no-js" lang="en" dir="ltr">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="Bundled with the ZURB Template, Style Sherpa makes it easy to create a style guide for your codebase, with just two files.">
- <link rel="icon" href="assets/img/icons/foundation-favicon.ico" type="image/x-icon">
- <title>Foundation for Sites 6 Docs | Style Sherpa</title>
- <link href="assets/css/docs.css?hash=b38914d00bb1a99f96a7f77cd3906cfb" rel="stylesheet" />
- <link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=44ad39ac3a36447fdbb7568ba288e6ac" rel="stylesheet">
- <!-- <link rel="stylesheet" href="./node_modules/motion-ui/dist/motion-ui.css" /> -->
-</head>
-<body>
-
- <div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
-
- <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="mobile-ofc vertical menu">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
-
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/support.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/sort/unanswered">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
- </div>
-
- <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="vertical menu">
- <li><a href="#">Foundation</a></li>
- <li><a href="#">Dot</a></li>
- <li><a href="#">ZURB</a></li>
- <li><a href="#">Com</a></li>
- <li><a href="#">Slash</a></li>
- <li><a href="#">Sites</a></li>
- </ul>
- </div>
-
-
- <div class="off-canvas-content" data-off-canvas-content>
- <!-- Info Banner For Announcements or Links -->
- <!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
- <div class="info">
- <h5>Foundation 6 is here!</h5>
- </div>
- </a> -->
-
- <nav class="marketing-topbar show-for-medium">
-
- <ul class="menu">
- <li class="topbar-title"><a href="https://get.foundation/index.html"><img src="assets/img/logos/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
- </ul>
-
- <ul class="dropdown menu" data-dropdown-menu data-click-open="false">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/" target="_blank">F5 Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="https://get.foundation/emails/docs/" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
-
- </nav>
-
- <div class="title-bar hide-for-medium">
- <div class="title-bar-left">
- <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
- <span class="title-bar-title">Foundation</span>
- </div>
- </div>
-
-
- <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
-
- <div class="expanded row">
- <div class="medium-9 large-10 medium-push-3 large-push-2 columns">
-
-<article class="docs-component" id="docs-style-sherpa">
-
-<a href="#docs-menu" class="small secondary expanded button hide-for-medium">Jump to Nav</a>
-
-<header>
- <h1 class="docs-page-title">Style Sherpa</h1>
-
- <span data-tooltip title="This is an external library." class="docs-lib label"><a href="https://github.com/zurb/style-sherpa" target="_blank">Library</a></span>
-
- <p class="lead docs-page-lead">Bundled with the ZURB Template, Style Sherpa makes it easy to create a style guide for your codebase, with just two files.</p>
-
- <ul class="menu simple docs-contribute-menu">
- <li><a href="https://github.com/zurb/foundation-sites/edit/master/docs/pages/style-sherpa.md" target="_blank"><i class="fi-pencil"></i>Edit this Page</a></li>
- <li><a href="https://github.com/zurb/style-sherpa/issues" target="_blank"><i class="fi-social-github"></i>Report a Bug</a></li>
- <li><a href="https://get.foundation/forum" target="_blank"><i class="fi-comment"></i>Get Help</a></li>
- </ul>
-</header>
-
-<hr>
-
-<div class="row">
-
-<div class="large-9 columns" id="docs">
-
-<p>Style guides are a critical component of a CSS codebase, especially one used by many people. It's important that everyone on a team knows how to build a component. Style guides are that documentation. The docs you're reading right now are a style guide of sorts, for the core Foundation styles.</p>
-<p><a href="https://github.com/zurb/style-sherpa">Style Sherpa</a> is a small tool bundled with the <a href="starter-projects.html#zurb-template">ZURB Template</a> that can generate a basic style guide for you quickly. The style guide is created from a single Markdown file, which contains all of the page content, and an HTML template, which defines the structure around the content.</p>
-<hr>
-<h2 id="usage" class="docs-heading" data-magellan-target="usage">Usage<a class="docs-heading-icon" href="#usage"></a></h2><p>The ZURB Template includes the folder <code>src/styleguide/</code>, which contains both of the files you need to build your style guide. Like everything else in the ZURB Template, just edit the files and your changes will instantly be compiled</p>
-<p>One is a Markdown file, <code>index.md</code>. This file contains the contents of your style guide.</p>
-<p>The other is a Handlebars template, <code>template.html</code>. The contents of your style guide are inserted into this template as HTML. The final file is included in the <code>dist/</code> folder of your project as <code>styleguide.html</code>.</p>
-<hr>
-<h2 id="writing-content" class="docs-heading" data-magellan-target="writing-content">Writing Content<a class="docs-heading-icon" href="#writing-content"></a></h2><p>The style guide is divided into sections. Generally, each component in your codebase—think buttons, panels, modals, form controls, and so on—will have its own section.</p>
-<p>Sections are titled with a Markdown heading, which is a single hash mark:</p>
-<div class="docs-code" data-docs-code><pre><code class="markdown"><span class="hljs-section"># Buttons</span>
-
-Lorem ipsum dolor sit amet, <span class="hljs-strong">**consectetur adipisicing**</span> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</code></pre></div><p>To create a new section, add four line breaks and a new heading:</p>
-<div class="docs-code" data-docs-code><pre><code class="markdown"><span class="hljs-section"># Buttons</span>
-
-Lorem ipsum dolor sit amet, <span class="hljs-strong">**consectetur adipisicing**</span> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
-
-
-<span class="hljs-section"># Forms</span>
-
-Lorem ipsum dolor sit amet, <span class="hljs-code">`<form>`</span> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</code></pre></div><h3 id="code-samples" class="docs-heading">Code Samples<a class="docs-heading-icon" href="#code-samples"></a></h3><p>A style guide should always have HTML examples, which explain how to build something. To create a code block in Markdown, surround the code with three backticks. You can also set the language of the code block after the first set of backticks. Style Sherpa will color the syntax for you in the final output.</p>
-<div class="docs-code" data-docs-code><pre><code class="html">```html
-<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span>></span>This is a button.<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
-```</code></pre></div><p>You'll also want to show a live demo of the component below the code sample, so developers can see both the HTML for an element, and what the HTML looks live rendered in one place. Style Sherpa has a shortcut for this: instead of setting <code>html</code> as the language in Markdown, set it to <code>html_example</code>. This will print a code sample and a live demo with the same code all in one go.</p>
-<div class="docs-code" data-docs-code><pre><code class="html">```html_example
-<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span>></span>This is a button.<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
-```</code></pre></div><p>The output looks something like this:</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span>></span>This is a button.<span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></pre></div>
-
-<div class="docs-code-live"><button class="button" type="button">This is a button.</button></div><hr>
-<h2 id="changing-the-template" class="docs-heading" data-magellan-target="changing-the-template">Changing the Template<a class="docs-heading-icon" href="#changing-the-template"></a></h2><p>The ZURB Template includes a minimal boilerplate for your style guide, but you're free to customize it however you want.</p>
-<p>The boilerplate uses Foundation's Vertical Menu—one item is made for each section. Here's what the Handlebars code looks like:</p>
-<p></p>
-<div class="docs-code" data-docs-code><pre><code class="handlebars"><span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column row"</span>></span><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row collapse"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"large-3 medium-4 columns"</span> <span class="hljs-attr">data-sticky-container</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"vertical menu"</span>></span>
- </span><span class="hljs-template-tag">{{#<span class="hljs-name"><span class="hljs-builtin-name">each</span></span> pages}}</span><span class="xml">
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#</span></span></span><span class="hljs-template-variable">{{ anchor }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span>></span></span><span class="hljs-template-variable">{{ title }}</span><span class="xml"><span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- </span><span class="hljs-template-tag">{{/<span class="hljs-name"><span class="hljs-builtin-name">each</span></span>}}</span><span class="xml">
- <span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"large-9 medium-8 columns"</span>></span>
- </span><span class="hljs-template-tag">{{#<span class="hljs-name"><span class="hljs-builtin-name">each</span></span> pages}}</span><span class="xml">
- <span class="hljs-tag"><<span class="hljs-name">section</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ss-section"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ anchor }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span>></span>
- </span><span class="hljs-template-variable">{{ body }}</span><span class="xml">
- <span class="hljs-tag"></<span class="hljs-name">section</span>></span>
- </span><span class="hljs-template-tag">{{/<span class="hljs-name"><span class="hljs-builtin-name">each</span></span>}}</span><span class="xml">
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span></span></code></pre></div><p>The template has access to a <code>pages</code> variable, which is an array with the data for each page. When looping through <code>pages</code> using <code>{{#each}}</code>, you have access to these variables:</p>
-<ul>
-<li><code>title</code>: The name of the section.</li>
-<li><code>anchor</code>: The name of the section, formatted as a URL anchor.</li>
-<li><code>body</code>: The content of the section.</li>
-</ul>
-<p></p>
-
-
-
-
-
-</div>
-
-<div class="large-3 columns" data-sticky-container>
- <nav class="columns docs-toc-wrap" data-sticky data-anchor="docs" data-sticky-on="large">
- <div class="docs-toc hide" id="docsTOC">
- <ul class="vertical menu" data-docs-toc>
- <li class="docs-nav-title">On this page:</li>
- </ul>
- </div>
- <div class="foundation-toc-ad-unit" id="TOCAdUnit">
- </div>
- </nav>
-</div>
-
-</div>
-
-</article>
-
- </div>
- <div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
- <ul class="vertical menu docs-nav" id="docs-menu">
- <p class="docs-nav-version">
- <span data-docs-version></span>
- <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">(Changelog)</a>
- </p>
-
- <li class="docs-nav-title">Getting Started</li>
- <li><a href="installation.html">Installation</a></li>
- <li><a href="starter-projects.html">Starter Projects</a></li>
- <li><a href="compatibility.html">Compatibility</a></li>
- <li><a href="accessibility.html">Accessibility</a></li>
- <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
-
- <li class="docs-nav-title">Setup</li>
- <li><a href="global.html">Global Styles</a></li>
- <li><a href="rtl.html">Right-to-Left Support</a></li>
- <li><a href="flexbox.html">Flexbox</a></li>
- <li><a href="sass.html">Sass</a></li>
- <li><a href="javascript.html">JavaScript</a></li>
- <li><a href="javascript-utilities.html">JavaScript Utilities</a></li>
- <li><a href="media-queries.html">Media Queries</a></li>
-
- <li class="docs-nav-title">General</li>
- <li><a href="grid.html">Grid</a></li>
- <li><a href="flex-grid.html">Flex Grid</a></li>
- <li><a href="forms.html">Forms</a></li>
- <li><a href="visibility.html">Visibility Classes</a></li>
- <li><a href="float-classes.html">Float Classes</a></li>
-
- <li class="docs-nav-title">Typography</li>
- <li><a href="typography-base.html">Base Styles</a></li>
- <li><a href="typography-helpers.html">Helper Classes</a></li>
-
- <li class="docs-nav-title">Controls</li>
- <li><a href="button.html">Button</a></li>
- <li><a href="button-group.html">Button Group</a></li>
- <li><a href="close-button.html">Close Button</a></li>
- <li><a href="slider.html">Slider <span class="label">JS</span></a></li>
- <li><a href="switch.html">Switch</a></li>
-
- <li class="docs-nav-title">Navigation</li>
- <li><a href="navigation.html">Overview</a></li>
- <li><a href="menu.html">Menu</a></li>
- <li><a href="dropdown-menu.html">Dropdown Menu <span class="label">JS</span></a></li>
- <li><a href="drilldown-menu.html">Drilldown Menu <span class="label">JS</span></a></li>
- <li><a href="accordion-menu.html">Accordion Menu <span class="label">JS</span></a></li>
- <li><a href="top-bar.html">Top Bar</a></li>
- <li><a href="responsive-navigation.html">Responsive Navigation</a></li>
- <li><a href="magellan.html">Magellan <span class="label">JS</span></a></li>
- <li><a href="pagination.html">Pagination</a></li>
- <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
-
- <li class="docs-nav-title">Containers</li>
- <li><a href="accordion.html">Accordion <span class="label">JS</span></a></li>
- <li><a href="callout.html">Callout</a></li>
- <li><a href="dropdown.html">Dropdown <span class="label">JS</span></a></li>
- <li><a href="media-object.html">Media Object</a></li>
- <li><a href="off-canvas.html">Off-canvas <span class="label">JS</span></a></li>
- <li><a href="reveal.html">Reveal <span class="label">JS</span> <small>Modal</small></a></li>
- <li><a href="table.html">Table</a></li>
- <li><a href="tabs.html">Tabs <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Media</li>
- <li><a href="badge.html">Badge</a></li>
- <li><a href="flex-video.html">Flex Video</a></li>
- <li><a href="label.html">Label</a></li>
- <li><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
- <li><a href="progress-bar.html">Progress Bar</a></li>
- <li><a href="thumbnail.html">Thumbnail</a></li>
- <li><a href="tooltip.html">Tooltip <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Plugins</li>
- <li><a href="abide.html">Abide <small>Form Validation</small></a></li>
- <li><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
- <li><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
- <li><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
- <li><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
-
- <li class="docs-nav-title">Sass</li>
- <li><a href="sass-functions.html">Functions</a></li>
- <li><a href="sass-mixins.html">Mixins</a></li>
-
- <li class="docs-nav-title">Libraries</li>
- <li><a href="motion-ui.html">Motion UI</a></li>
- <li><a href="panini.html">Panini</a></li>
- <li class="current"><a href="style-sherpa.html">Style Sherpa</a></li>
-
- <li class="docs-nav-title">Older Versions</li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
- <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
- <li><a href="https://get.foundation/sites/docs/v/3.2.5/">Foundation 3</a></li>
- <li><a href="https://get.foundation/sites/docs/v/2.2.1/">Foundation 2</a></li>
- </ul>
-
- </div>
- </div>
-
- <!-- Small Business(Docs) -->
- <section id="studiosCallout">
- <div class="row">
- <div class="medium-4 large-4 columns">
- <img src="https://get.foundation/assets/img/smallbiz-footer.svg" alt="">
- </div>
- <div class="medium-8 large-8 columns banner-info">
- <div class="row column property-label">ZURB Foundation</div>
- <h3 class="light">Yeah, we can help with that.</h3>
- <p class="lead"> We’ll collaborate with your team throughout the entire project life cycle. We’ll take your concept and move it through ideation, hi-fi wireframes, visual design and code, all while informing you on the whys and hows along the way.</p>
- <div class="course-buttons">
- <a href="https://get.foundation/get-involved/premium-support.html" class="studios button" data-zcom-event="studios_foundation_click" id="foundationSmallV1">Show Me How →</a>
- </div>
- </div>
- </div>
- </section>
-
- <div class="docs-newsletter">
- <div class="row">
- <div class="medium-7 large-8 columns">
- <a target="_blank" href="https://get.foundation/learn/responsive-reading.html">
- <h5 class="">Download ZURB’s 21 Responsive Trends That Will Shape 2017</h5>
- <p style="margin-bottom: 0;">Stay informed with amazing responsive trends each month from ZURB.</p>
- </a>
- </div>
- <div class="medium-5 large-4 footer-signup-form columns">
- <a style="margin-bottom: 0;" target="_blank" href="https://get.foundation/learn/responsive-reading.html" class="button expanded">Download the PDF</a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-top bg-fblue">
- <div class="row property">
- <div class="medium-4 columns">
- <div class="property-info">
- <h3>Foundation for Sites</h3>
- <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
- </p>
- </div>
- </div>
-
- <div class="medium-8 columns">
- <div class="row collapse">
- <div class="medium-4 columns">
- <div class="learn-links">
- <h4 class="hide-for-small">Want more?</h4>
- <ul>
- <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
- <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
- <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
- <li><a href="http://zurb.com/university/courses">Training</a></li>
- <li><a href="http://zurb.com/library">Design Resources</a></li>
- </ul>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="support-links">
- <h4 class="hide-for-small">Talk to us</h4>
- <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
- <p><a href="https://get.foundation/get-involved/contribute.html">Get involved in<br>our amazing community.</a></p>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="connect-links">
- <h4 class="hide-for-small">Stay Updated</h4>
- <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
- <a href="http://zurb.com/news" class="small button">Stay Connected</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="row global">
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/studios" class="footer-link-block services">
- <span class="title">Studios</span>
- <span>Helping more than 200 startups succeed since 1998.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="https://get.foundation/" class="footer-link-block foundation">
- <span class="title">Foundation</span>
- <span>The most advanced front-end framework in the world.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/notable" class="footer-link-block apps">
- <span class="title">Notable Design Apps</span>
- <span>Prototype, iterate and collect feedback on your products.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/university" class="footer-link-block expo">
- <span class="title">University</span>
- <span>Ideas, thoughts and design resources shared with you.</span>
- </a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-bottom">
- <div class="row">
- <div class="medium-4 medium-push-8 columns">
- <ul class="home-social">
- <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
- <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
- <li><a href="http://zurb.com/contact" class="mail"></a></li>
- </ul>
- </div>
- <div class="medium-8 medium-pull-4 columns">
- <a href="http://www.zurb.com" class="zurb-logo regular"></a>
- <ul class="zurb-links">
- <li><a href="http://zurb.com/about">About</a></li>
- <li><a href="http://zurb.com/blog">Blog</a></li>
- <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
- <li><a href="http://zurb.com/contact">Contact</a></li>
- <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
- </ul>
- <p class="copyright">© 1998‐2016 ZURB, Inc. All rights reserved.</p>
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- <script>
- var _gaq = _gaq || [];
- _gaq.push(
- ['_setAccount', 'UA-2195009-2'],
- ['_trackPageview'],
- ['b._setAccount', 'UA-2195009-27'],
- ['b._trackPageview']
- );
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
-
- <script src="assets/js/vendor.js?hash=db04597e6b4395354a821745a6c1f613"></script>
- <script src="assets/js/foundation.js?hash=70a49f4c45596a2f2ece55950dd2fbdb"></script>
- <script src="assets/js/docs.js?hash=89ffb7b3c44274d2f25c1caf7f4f15fc"></script>
- <script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
-</body>
-</html>
+++ /dev/null
-<!doctype html>
-<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
-<html class="no-js" lang="en" dir="ltr">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="Now you can tell your users to flip the switch or switch off.">
- <link rel="icon" href="assets/img/icons/foundation-favicon.ico" type="image/x-icon">
- <title>Foundation for Sites 6 Docs | Switch</title>
- <link href="assets/css/docs.css?hash=2037389630187e3d9a7859902bf226bb" rel="stylesheet" />
- <link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=6fcaf0a3c61a2fdf307f1e50c00da2b6" rel="stylesheet">
- <!-- <link rel="stylesheet" href="./node_modules/motion-ui/dist/motion-ui.css" /> -->
-</head>
-<body>
-
- <div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
-
- <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="mobile-ofc vertical menu">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
-
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/support.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/sort/unanswered">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
- </div>
-
- <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="vertical menu">
- <li><a href="#">Foundation</a></li>
- <li><a href="#">Dot</a></li>
- <li><a href="#">ZURB</a></li>
- <li><a href="#">Com</a></li>
- <li><a href="#">Slash</a></li>
- <li><a href="#">Sites</a></li>
- </ul>
- </div>
-
-
- <div class="off-canvas-content" data-off-canvas-content>
- <!-- Info Banner For Announcements or Links -->
- <!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
- <div class="info">
- <h5>Foundation 6 is here!</h5>
- </div>
- </a> -->
-
- <nav class="marketing-topbar show-for-medium">
-
- <ul class="menu">
- <li class="topbar-title"><a href="https://get.foundation/index.html"><img src="assets/img/logos/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
- </ul>
-
- <ul class="dropdown menu" data-dropdown-menu data-click-open="false">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/" target="_blank">F5 Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="https://get.foundation/emails/docs/" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
-
- </nav>
-
- <div class="title-bar hide-for-medium">
- <div class="title-bar-left">
- <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
- <span class="title-bar-title">Foundation</span>
- </div>
- </div>
-
-
- <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
-
- <div class="expanded row">
- <div class="medium-9 large-10 medium-push-3 large-push-2 columns">
-
-<article class="docs-component" id="docs-switch">
-
-<a href="#docs-menu" class="small secondary expanded button hide-for-medium">Jump to Nav</a>
-
-<header>
- <h1 class="docs-page-title">Switch</h1>
-
-
- <p class="lead docs-page-lead">Now you can tell your users to flip the switch or switch off.</p>
-
- <ul class="menu simple docs-contribute-menu">
- <li><a href="https://github.com/zurb/foundation-sites/edit/master/docs/pages/switch.md" target="_blank"><i class="fi-pencil"></i>Edit this Page</a></li>
- <li><a href="https://github.com/zurb/foundation-sites/issues/new?title=%5BSwitch%5D%20ISSUE%20NAME%20HERE" target="_blank"><i class="fi-social-github"></i>Report a Bug</a></li>
- <li><a href="https://get.foundation/forum" target="_blank"><i class="fi-comment"></i>Get Help</a></li>
- </ul>
-</header>
-
-<hr>
-
-<div class="row">
-
-<div class="large-9 columns" id="docs">
-
-<h2 id="basics" class="docs-heading" data-magellan-target="basics">Basics<a class="docs-heading-icon" href="#basics"></a></h2><p>Add the <code>.switch</code> class to an element to create a switch. Inside the switch, add an <code><input type="checkbox"></code> with the class <code>.switch-input</code>. Next to that, create a <code><label></code> with the class <code>.switch-paddle</code>.</p>
-<p>Give the <code><input></code> a unique ID and point the <code><label></code> to it with the <code>for</code> attribute. This makes the switch clickable.</p>
-<div class="primary callout">
- <p>Inside the switch label is screen reader-only text, which uses the <code>.show-for-sr</code> class to visually mask the text.</p>
-</div>
-
-<div class="callout warning">
- <p>Make sure the HTML of the switch goes in the order you see above—<code><input></code>, then <code><label></code></p>
-</div>
-
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"switch"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"switch-input"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"exampleSwitch"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"exampleSwitch"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"switch-paddle"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"exampleSwitch"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"show-for-sr"</span>></span>Download Kittens<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">label</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="switch">
- <input class="switch-input" id="exampleSwitch" type="checkbox" name="exampleSwitch">
- <label class="switch-paddle" for="exampleSwitch">
- <span class="show-for-sr">Download Kittens</span>
- </label>
-</div></div><hr>
-<h2 id="radio-switch" class="docs-heading" data-magellan-target="radio-switch">Radio Switch<a class="docs-heading-icon" href="#radio-switch"></a></h2><p>You can also use <code><input type="radio"></code> instead of <code>checkbox</code> to create a series of options.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"switch"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"switch-input"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"exampleRadioSwitch1"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">checked</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"testGroup"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"switch-paddle"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"exampleRadioSwitch1"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"show-for-sr"</span>></span>Bulbasaur<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">label</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="switch">
- <input class="switch-input" id="exampleRadioSwitch1" type="radio" checked name="testGroup">
- <label class="switch-paddle" for="exampleRadioSwitch1">
- <span class="show-for-sr">Bulbasaur</span>
- </label>
-</div></div><div class="switch">
- <input class="switch-input" id="exampleRadioSwitch2" type="radio" name="testGroup">
- <label class="switch-paddle" for="exampleRadioSwitch2">
- <span class="show-for-sr">Charmander</span>
- </label>
-</div>
-
-<div class="switch">
- <input class="switch-input" id="exampleRadioSwitch3" type="radio" name="testGroup">
- <label class="switch-paddle" for="exampleRadioSwitch3">
- <span class="show-for-sr">Squirtle</span>
- </label>
-</div>
-
-<hr>
-<h2 id="sizing-classes" class="docs-heading" data-magellan-target="sizing-classes">Sizing Classes<a class="docs-heading-icon" href="#sizing-classes"></a></h2><p>Use the classes <code>.tiny</code>, <code>.small</code>, or <code>.large</code> to change the switch size.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"switch tiny"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"switch-input"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"tinySwitch"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"exampleSwitch"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"switch-paddle"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tinySwitch"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"show-for-sr"</span>></span>Tiny Sandwiches Enabled<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">label</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"switch small"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"switch-input"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"smallSwitch"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"exampleSwitch"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"switch-paddle"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"smallSwitch"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"show-for-sr"</span>></span>Small Portions Only<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">label</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"switch large"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"switch-input"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"largeSwitch"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"exampleSwitch"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"switch-paddle"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"largeSwitch"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"show-for-sr"</span>></span>Show Large Elephants<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">label</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="switch tiny">
- <input class="switch-input" id="tinySwitch" type="checkbox" name="exampleSwitch">
- <label class="switch-paddle" for="tinySwitch">
- <span class="show-for-sr">Tiny Sandwiches Enabled</span>
- </label>
-</div>
-
-<div class="switch small">
- <input class="switch-input" id="smallSwitch" type="checkbox" name="exampleSwitch">
- <label class="switch-paddle" for="smallSwitch">
- <span class="show-for-sr">Small Portions Only</span>
- </label>
-</div>
-
-<div class="switch large">
- <input class="switch-input" id="largeSwitch" type="checkbox" name="exampleSwitch">
- <label class="switch-paddle" for="largeSwitch">
- <span class="show-for-sr">Show Large Elephants</span>
- </label>
-</div></div><hr>
-<h2 id="inner-labels" class="docs-heading" data-magellan-target="inner-labels">Inner Labels<a class="docs-heading-icon" href="#inner-labels"></a></h2><p>You can place active and inactive text inside of a switch. The active text (<code>.switch-active</code>) only displays when the switch is on, and the inactive text (<code>.switch-inactive</code>) only displays when the switch is off.</p>
-<p>Active/inactive text goes inside of the switch's <code><label></code>.</p>
-<div class="primary callout">
- <p>Depending on the length of the words you place inside the switch, you may need to fine-tune the <code>left</code> or <code>right</code> CSS properties of the text to get it positioned right.</p>
-</div>
-
-<div class="primary callout">
- <p>Add <code>aria-hidden="true"</code> to these labels to prevent AT from reading them.</p>
-</div>
-
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">p</span>></span>Do you like me?<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"switch large"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"switch-input"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"yes-no"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"exampleSwitch"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"switch-paddle"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"yes-no"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"show-for-sr"</span>></span>Do you like me?<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"switch-active"</span> <span class="hljs-attr">aria-hidden</span>=<span class="hljs-string">"true"</span>></span>Yes<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"switch-inactive"</span> <span class="hljs-attr">aria-hidden</span>=<span class="hljs-string">"true"</span>></span>No<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">label</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><p>Do you like me?</p>
-<div class="switch large">
- <input class="switch-input" id="yes-no" type="checkbox" name="exampleSwitch">
- <label class="switch-paddle" for="yes-no">
- <span class="show-for-sr">Do you like me?</span>
- <span class="switch-active" aria-hidden="true">Yes</span>
- <span class="switch-inactive" aria-hidden="true">No</span>
- </label>
-</div></div>
-
-<hr>
-<section>
- <h2 id="sass-reference" class="docs-heading" data-magellan-target="sass-reference">Sass Reference<a class="docs-heading-icon" href="#sass-reference"></a></h2>
-
- <section>
- <h3 id="sass-variables" class="docs-heading">Variables<a class="docs-heading-icon" href="#sass-variables"></a></h3>
-
- <p>The default styles of this component can be customized using these Sass variables in your project's <a href="sass.html#the-settings-file">settings file</a>.</p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td class="name"><code>$switch-background</code></td>
- <td>Color</td>
- <td class="color"><code>$medium-gray</code></td>
- <td><p>Background color of a switch.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$switch-background-active</code></td>
- <td>Color</td>
- <td class="color"><code>$primary-color</code></td>
- <td><p>Background active color of a switch.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$switch-height</code></td>
- <td>Number</td>
- <td class="number"><code>2rem</code></td>
- <td><p>Height of a switch, with no class applied.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$switch-height-tiny</code></td>
- <td>Number</td>
- <td class="number"><code>1.5rem</code></td>
- <td><p>Height of a switch with .tiny class.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$switch-height-small</code></td>
- <td>Number</td>
- <td class="number"><code>1.75rem</code></td>
- <td><p>Height of a switch with .small class.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$switch-height-large</code></td>
- <td>Number</td>
- <td class="number"><code>2.5rem</code></td>
- <td><p>Height of a switch with .large class.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$switch-radius</code></td>
- <td>Number</td>
- <td class="number"><code>$global-radius</code></td>
- <td><p>Border radius of the switch</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$switch-margin</code></td>
- <td>Number</td>
- <td class="number"><code>$global-margin</code></td>
- <td><p>border around a modal.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$switch-paddle-background</code></td>
- <td>Color</td>
- <td class="color"><code>$white</code></td>
- <td><p>Background color for the switch container and paddle.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$switch-paddle-offset</code></td>
- <td>Number</td>
- <td class="number"><code>0.25rem</code></td>
- <td><p>Spacing between a switch paddle and the edge of the body.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$switch-paddle-radius</code></td>
- <td>Number</td>
- <td class="number"><code>$global-radius</code></td>
- <td><p>border radius of the switch paddle</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$switch-paddle-transition</code></td>
- <td>Number</td>
- <td class="number"><code>all 0.25s ease-out</code></td>
- <td><p>switch transition.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="sass-mixins" class="docs-heading">Mixins<a class="docs-heading-icon" href="#sass-mixins"></a></h3>
-
- <p>We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.</p>
-
-
- <section >
- <h4 id="switch-container" class="docs-heading">switch-container<a class="docs-heading-icon" href="#switch-container"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> switch-container;</code></pre>
- </div>
-
- <p>Adds styles for a switch container. Apply this to a container class.</p>
-
-
-
-
-
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="switch-input" class="docs-heading">switch-input<a class="docs-heading-icon" href="#switch-input"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> switch-input;</code></pre>
- </div>
-
- <p>Adds styles for a switch input. Apply this to an <code><input></code> within a switch.</p>
-
-
-
-
-
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="switch-paddle" class="docs-heading">switch-paddle<a class="docs-heading-icon" href="#switch-paddle"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> switch-paddle;</code></pre>
- </div>
-
- <p>Adds styles for the background and paddle of a switch. Apply this to a <code><label></code> within a switch.</p>
-
-
-
-
-
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="switch-text" class="docs-heading">switch-text<a class="docs-heading-icon" href="#switch-text"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> switch-text;</code></pre>
- </div>
-
- <p>Adds base styles for active/inactive text inside a switch. Apply this to text elements inside the switch <code><label></code>.</p>
-
-
-
-
-
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="switch-text-active" class="docs-heading">switch-text-active<a class="docs-heading-icon" href="#switch-text-active"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> switch-text-active;</code></pre>
- </div>
-
- <p>Adds styles for the active state text within a switch.</p>
-
-
-
-
-
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="switch-text-inactive" class="docs-heading">switch-text-inactive<a class="docs-heading-icon" href="#switch-text-inactive"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> switch-text-inactive;</code></pre>
- </div>
-
- <p>Adds styles for the inactive state text within a switch.</p>
-
-
-
-
-
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="switch-size" class="docs-heading">switch-size<a class="docs-heading-icon" href="#switch-size"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> switch-size(<span class="hljs-variable">$font-size</span>, <span class="hljs-variable">$width</span>, <span class="hljs-variable">$height</span>, <span class="hljs-variable">$paddle-width</span>, <span class="hljs-variable">$paddle-offset</span>);</code></pre>
- </div>
-
- <p>Changes the size of a switch by modifying the size of the body and paddle. Apply this to a switch container.</p>
-
-
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$font-size</code></td>
- <td>Number</td>
- <td><code>1rem</code></td>
- <td><p>Font size of label text within the switch.</p>
-</td>
- </tr>
- <tr>
- <td><code>$width</code></td>
- <td>Number</td>
- <td><code>4rem</code></td>
- <td><p>Width of the switch body.</p>
-</td>
- </tr>
- <tr>
- <td><code>$height</code></td>
- <td>Number</td>
- <td><code>2rem</code></td>
- <td><p>Height of the switch body.</p>
-</td>
- </tr>
- <tr>
- <td><code>$paddle-width</code></td>
- <td>Number</td>
- <td><code>1.5rem</code></td>
- <td><p>Width of the switch paddle.</p>
-</td>
- </tr>
- <tr>
- <td><code>$paddle-offset</code></td>
- <td>Number</td>
- <td><code>0.25rem</code></td>
- <td><p>Spacing between the switch paddle and the edge of the switch body.</p>
-</td>
- </tr>
- </table>
- </section>
-
-
-
-
-
- </section>
-
-
-</section>
-
-
-<!-- <hr> -->
-<!-- <section class="docs-building-blocks">
- <h2 id="building-blocks" class="docs-heading" data-magellan-target="building-blocks">Building Blocks<a class="docs-heading-icon" href="#building-blocks"></a></h2>
-
- <p><a href="http://zurb.com/building-blocks">Building Blocks</a> is a ZURB-curated resource with useful code snippets that use Foundation components. Here are a few for this component:</p>
-
- <div class="warning callout">
- <p>These are placeholder items. If you have ideas for building blocks for this component, <a href="https://github.com/zurb/foundation-sites-6/issues/118">we're taking ideas on GitHub</a>.</p>
- </div>
-
- <div data-building-blocks></div>
-</section> -->
-
-</div>
-
-<div class="large-3 columns" data-sticky-container>
- <nav class="columns docs-toc-wrap" data-sticky data-anchor="docs" data-sticky-on="large">
- <div class="docs-toc hide" id="docsTOC">
- <ul class="vertical menu" data-docs-toc>
- <li class="docs-nav-title">On this page:</li>
- </ul>
- </div>
- <div class="foundation-toc-ad-unit" id="TOCAdUnit">
- </div>
- </nav>
-</div>
-
-</div>
-
-</article>
-
- </div>
- <div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
- <ul class="vertical menu docs-nav" id="docs-menu">
- <p class="docs-nav-version">
- <span data-docs-version></span>
- <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">(Changelog)</a>
- </p>
-
- <li class="docs-nav-title">Getting Started</li>
- <li><a href="installation.html">Installation</a></li>
- <li><a href="starter-projects.html">Starter Projects</a></li>
- <li><a href="compatibility.html">Compatibility</a></li>
- <li><a href="accessibility.html">Accessibility</a></li>
- <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
-
- <li class="docs-nav-title">Setup</li>
- <li><a href="global.html">Global Styles</a></li>
- <li><a href="rtl.html">Right-to-Left Support</a></li>
- <li><a href="flexbox.html">Flexbox</a></li>
- <li><a href="sass.html">Sass</a></li>
- <li><a href="javascript.html">JavaScript</a></li>
- <li><a href="javascript-utilities.html">JavaScript Utilities</a></li>
- <li><a href="media-queries.html">Media Queries</a></li>
-
- <li class="docs-nav-title">General</li>
- <li><a href="grid.html">Grid</a></li>
- <li><a href="flex-grid.html">Flex Grid</a></li>
- <li><a href="forms.html">Forms</a></li>
- <li><a href="visibility.html">Visibility Classes</a></li>
- <li><a href="float-classes.html">Float Classes</a></li>
-
- <li class="docs-nav-title">Typography</li>
- <li><a href="typography-base.html">Base Styles</a></li>
- <li><a href="typography-helpers.html">Helper Classes</a></li>
-
- <li class="docs-nav-title">Controls</li>
- <li><a href="button.html">Button</a></li>
- <li><a href="button-group.html">Button Group</a></li>
- <li><a href="close-button.html">Close Button</a></li>
- <li><a href="slider.html">Slider <span class="label">JS</span></a></li>
- <li class="current"><a href="switch.html">Switch</a></li>
-
- <li class="docs-nav-title">Navigation</li>
- <li><a href="navigation.html">Overview</a></li>
- <li><a href="menu.html">Menu</a></li>
- <li><a href="dropdown-menu.html">Dropdown Menu <span class="label">JS</span></a></li>
- <li><a href="drilldown-menu.html">Drilldown Menu <span class="label">JS</span></a></li>
- <li><a href="accordion-menu.html">Accordion Menu <span class="label">JS</span></a></li>
- <li><a href="top-bar.html">Top Bar</a></li>
- <li><a href="responsive-navigation.html">Responsive Navigation</a></li>
- <li><a href="magellan.html">Magellan <span class="label">JS</span></a></li>
- <li><a href="pagination.html">Pagination</a></li>
- <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
-
- <li class="docs-nav-title">Containers</li>
- <li><a href="accordion.html">Accordion <span class="label">JS</span></a></li>
- <li><a href="callout.html">Callout</a></li>
- <li><a href="dropdown.html">Dropdown <span class="label">JS</span></a></li>
- <li><a href="media-object.html">Media Object</a></li>
- <li><a href="off-canvas.html">Off-canvas <span class="label">JS</span></a></li>
- <li><a href="reveal.html">Reveal <span class="label">JS</span> <small>Modal</small></a></li>
- <li><a href="table.html">Table</a></li>
- <li><a href="tabs.html">Tabs <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Media</li>
- <li><a href="badge.html">Badge</a></li>
- <li><a href="flex-video.html">Flex Video</a></li>
- <li><a href="label.html">Label</a></li>
- <li><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
- <li><a href="progress-bar.html">Progress Bar</a></li>
- <li><a href="thumbnail.html">Thumbnail</a></li>
- <li><a href="tooltip.html">Tooltip <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Plugins</li>
- <li><a href="abide.html">Abide <small>Form Validation</small></a></li>
- <li><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
- <li><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
- <li><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
- <li><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
-
- <li class="docs-nav-title">Sass</li>
- <li><a href="sass-functions.html">Functions</a></li>
- <li><a href="sass-mixins.html">Mixins</a></li>
-
- <li class="docs-nav-title">Libraries</li>
- <li><a href="motion-ui.html">Motion UI</a></li>
- <li><a href="panini.html">Panini</a></li>
- <li><a href="style-sherpa.html">Style Sherpa</a></li>
-
- <li class="docs-nav-title">Older Versions</li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
- <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
- <li><a href="https://get.foundation/sites/docs/v/3.2.5/">Foundation 3</a></li>
- <li><a href="https://get.foundation/sites/docs/v/2.2.1/">Foundation 2</a></li>
- </ul>
-
- </div>
- </div>
-
- <!-- Small Business(Docs) -->
- <section id="studiosCallout">
- <div class="row">
- <div class="medium-4 large-4 columns">
- <img src="https://get.foundation/assets/img/smallbiz-footer.svg" alt="">
- </div>
- <div class="medium-8 large-8 columns banner-info">
- <div class="row column property-label">ZURB Foundation</div>
- <h3 class="light">Yeah, we can help with that.</h3>
- <p class="lead"> We’ll collaborate with your team throughout the entire project life cycle. We’ll take your concept and move it through ideation, hi-fi wireframes, visual design and code, all while informing you on the whys and hows along the way.</p>
- <div class="course-buttons">
- <a href="https://get.foundation/get-involved/premium-support.html" class="studios button" data-zcom-event="studios_foundation_click" id="foundationSmallV1">Show Me How →</a>
- </div>
- </div>
- </div>
- </section>
-
- <div class="docs-newsletter">
- <div class="row">
- <div class="medium-7 large-8 columns">
- <a target="_blank" href="https://get.foundation/learn/responsive-reading.html">
- <h5 class="">Download ZURB’s 21 Responsive Trends That Will Shape 2017</h5>
- <p style="margin-bottom: 0;">Stay informed with amazing responsive trends each month from ZURB.</p>
- </a>
- </div>
- <div class="medium-5 large-4 footer-signup-form columns">
- <a style="margin-bottom: 0;" target="_blank" href="https://get.foundation/learn/responsive-reading.html" class="button expanded">Download the PDF</a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-top bg-fblue">
- <div class="row property">
- <div class="medium-4 columns">
- <div class="property-info">
- <h3>Foundation for Sites</h3>
- <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
- </p>
- </div>
- </div>
-
- <div class="medium-8 columns">
- <div class="row collapse">
- <div class="medium-4 columns">
- <div class="learn-links">
- <h4 class="hide-for-small">Want more?</h4>
- <ul>
- <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
- <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
- <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
- <li><a href="http://zurb.com/university/courses">Training</a></li>
- <li><a href="http://zurb.com/library">Design Resources</a></li>
- </ul>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="support-links">
- <h4 class="hide-for-small">Talk to us</h4>
- <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
- <p><a href="https://get.foundation/get-involved/contribute.html">Get involved in<br>our amazing community.</a></p>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="connect-links">
- <h4 class="hide-for-small">Stay Updated</h4>
- <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
- <a href="http://zurb.com/news" class="small button">Stay Connected</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="row global">
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/studios" class="footer-link-block services">
- <span class="title">Studios</span>
- <span>Helping more than 200 startups succeed since 1998.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="https://get.foundation/" class="footer-link-block foundation">
- <span class="title">Foundation</span>
- <span>The most advanced front-end framework in the world.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/notable" class="footer-link-block apps">
- <span class="title">Notable Design Apps</span>
- <span>Prototype, iterate and collect feedback on your products.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/university" class="footer-link-block expo">
- <span class="title">University</span>
- <span>Ideas, thoughts and design resources shared with you.</span>
- </a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-bottom">
- <div class="row">
- <div class="medium-4 medium-push-8 columns">
- <ul class="home-social">
- <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
- <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
- <li><a href="http://zurb.com/contact" class="mail"></a></li>
- </ul>
- </div>
- <div class="medium-8 medium-pull-4 columns">
- <a href="http://www.zurb.com" class="zurb-logo regular"></a>
- <ul class="zurb-links">
- <li><a href="http://zurb.com/about">About</a></li>
- <li><a href="http://zurb.com/blog">Blog</a></li>
- <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
- <li><a href="http://zurb.com/contact">Contact</a></li>
- <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
- </ul>
- <p class="copyright">© 1998‐2016 ZURB, Inc. All rights reserved.</p>
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- <script>
- var _gaq = _gaq || [];
- _gaq.push(
- ['_setAccount', 'UA-2195009-2'],
- ['_trackPageview'],
- ['b._setAccount', 'UA-2195009-27'],
- ['b._trackPageview']
- );
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
-
- <script src="assets/js/vendor.js?hash=59e087e5e87e0b5808cade01d7c2dd88"></script>
- <script src="assets/js/foundation.js?hash=1b799957a52f4adea616cc172a419964"></script>
- <script src="assets/js/docs.js?hash=3bba9e8acabf70c7f4624fe77b4f4880"></script>
- <script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
-</body>
-</html>
+++ /dev/null
-<!doctype html>
-<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
-<html class="no-js" lang="en" dir="ltr">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="Okay, they're not the sexiest things ever, but tables get the job done (for tabular data, of course). They have responsive modifiers to help solve some of your layout issues based on your tables needs.">
- <link rel="icon" href="assets/img/icons/foundation-favicon.ico" type="image/x-icon">
- <title>Foundation for Sites 6 Docs | Tables</title>
- <link href="assets/css/docs.css?hash=e06e28eef9441c9bb207bd80eca6bee7" rel="stylesheet" />
- <link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=fcd8f96090dc7740d4a13b2c3da60a44" rel="stylesheet">
- <!-- <link rel="stylesheet" href="./node_modules/motion-ui/dist/motion-ui.css" /> -->
-</head>
-<body>
-
- <div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
-
- <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="mobile-ofc vertical menu">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
-
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/support.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/sort/unanswered">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
- </div>
-
- <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="vertical menu">
- <li><a href="#">Foundation</a></li>
- <li><a href="#">Dot</a></li>
- <li><a href="#">ZURB</a></li>
- <li><a href="#">Com</a></li>
- <li><a href="#">Slash</a></li>
- <li><a href="#">Sites</a></li>
- </ul>
- </div>
-
-
- <div class="off-canvas-content" data-off-canvas-content>
- <!-- Info Banner For Announcements or Links -->
- <!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
- <div class="info">
- <h5>Foundation 6 is here!</h5>
- </div>
- </a> -->
-
- <nav class="marketing-topbar show-for-medium">
-
- <ul class="menu">
- <li class="topbar-title"><a href="https://get.foundation/index.html"><img src="assets/img/logos/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
- </ul>
-
- <ul class="dropdown menu" data-dropdown-menu data-click-open="false">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/" target="_blank">F5 Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="https://get.foundation/emails/docs/" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
-
- </nav>
-
- <div class="title-bar hide-for-medium">
- <div class="title-bar-left">
- <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
- <span class="title-bar-title">Foundation</span>
- </div>
- </div>
-
-
- <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
-
- <div class="expanded row">
- <div class="medium-9 large-10 medium-push-3 large-push-2 columns">
-
-<article class="docs-component" id="docs-tables">
-
-<a href="#docs-menu" class="small secondary expanded button hide-for-medium">Jump to Nav</a>
-
-<header>
- <h1 class="docs-page-title">Tables</h1>
-
-
- <p class="lead docs-page-lead">Okay, they're not the sexiest things ever, but tables get the job done (for tabular data, of course). They have responsive modifiers to help solve some of your layout issues based on your tables needs.</p>
-
- <ul class="menu simple docs-contribute-menu">
- <li><a href="https://github.com/zurb/foundation-sites/edit/master/docs/pages/table.md" target="_blank"><i class="fi-pencil"></i>Edit this Page</a></li>
- <li><a href="https://github.com/zurb/foundation-sites/issues/new?title=%5BTables%5D%20ISSUE%20NAME%20HERE" target="_blank"><i class="fi-social-github"></i>Report a Bug</a></li>
- <li><a href="https://get.foundation/forum" target="_blank"><i class="fi-comment"></i>Get Help</a></li>
- </ul>
-</header>
-
-<hr>
-
-<div class="row">
-
-<div class="large-9 columns" id="docs">
-
-<h2 id="basics" class="docs-heading" data-magellan-target="basics">Basics<a class="docs-heading-icon" href="#basics"></a></h2><p>No bells or whistles here, just a straight up table for all of your basic table needs.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">table</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">thead</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">tr</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">th</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"200"</span>></span>Table Header<span class="hljs-tag"></<span class="hljs-name">th</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">th</span>></span>Table Header<span class="hljs-tag"></<span class="hljs-name">th</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">th</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"150"</span>></span>Table Header<span class="hljs-tag"></<span class="hljs-name">th</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">th</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"150"</span>></span>Table Header<span class="hljs-tag"></<span class="hljs-name">th</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">thead</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">tbody</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">tr</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Content Goes Here<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">td</span>></span>This is longer content Donec id elit non mi porta gravida at eget metus.<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Content Goes Here<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Content Goes Here<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">tr</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Content Goes Here<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">td</span>></span>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Content Goes Here<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Content Goes Here<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">tr</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Content Goes Here<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">td</span>></span>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Content Goes Here<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Content Goes Here<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">tbody</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">table</span>></span></code></pre></div>
-
-<div class="docs-code-live"><table>
- <thead>
- <tr>
- <th width="200">Table Header</th>
- <th>Table Header</th>
- <th width="150">Table Header</th>
- <th width="150">Table Header</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>Content Goes Here</td>
- <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
- <td>Content Goes Here</td>
- <td>Content Goes Here</td>
- </tr>
- <tr>
- <td>Content Goes Here</td>
- <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
- <td>Content Goes Here</td>
- <td>Content Goes Here</td>
- </tr>
- <tr>
- <td>Content Goes Here</td>
- <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
- <td>Content Goes Here</td>
- <td>Content Goes Here</td>
- </tr>
- </tbody>
-</table></div><hr>
-<h2 id="hover-state" class="docs-heading" data-magellan-target="hover-state">Hover State<a class="docs-heading-icon" href="#hover-state"></a></h2><p>Need to spiff up the table just a tad? Just add the class <code>.hover</code> to lightly darken the table rows on hover.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">table</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hover"</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">table</span>></span></code></pre></div><table class="hover">
- <thead>
- <tr>
- <th width="200">Table Header</th>
- <th>Table Header</th>
- <th width="150">Table Header</th>
- <th width="150">Table Header</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>Content Goes Here</td>
- <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
- <td>Content Goes Here</td>
- <td>Content Goes Here</td>
- </tr>
- <tr>
- <td>Content Goes Here</td>
- <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
- <td>Content Goes Here</td>
- <td>Content Goes Here</td>
- </tr>
- <tr>
- <td>Content Goes Here</td>
- <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
- <td>Content Goes Here</td>
- <td>Content Goes Here</td>
- </tr>
- </tbody>
-</table>
-
-<hr>
-<h2 id="stacked-table" class="docs-heading" data-magellan-target="stacked-table">Stacked Table<a class="docs-heading-icon" href="#stacked-table"></a></h2><p>To stack a table on small screens, add the class <code>.stack</code>.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">table</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"stack"</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">table</span>></span></code></pre></div><table class="stack">
- <thead>
- <tr>
- <th>Cookies</th>
- <th>Taste</th>
- <th>Calories</th>
- <th>Overall</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>Chocolate Chip</td>
- <td>Tastey</td>
- <td>120cal</td>
- <td>7.5/10</td>
- </tr>
- <tr>
- <td>Snickerdoodle</td>
- <td>Delicious</td>
- <td>95cal</td>
- <td>8/10</td>
- </tr>
- <tr>
- <td>Oatmeal Raisin</td>
- <td>Superb</td>
- <td>10cal</td>
- <td>11/10</td>
- </tr>
- </tbody>
-</table>
-
-<hr>
-<h2 id="scrolling-table" class="docs-heading" data-magellan-target="scrolling-table">Scrolling Table<a class="docs-heading-icon" href="#scrolling-table"></a></h2><p>Got a lot of tubular tabular data? Add a wrapper element with the class <code>.table-scroll</code> around your table to enable horizontal scrolling.</p>
-<div class="primary callout">
- <p>The wrapping element was added in Foundation 6.2—prior to that, you just added the class <code>.scroll</code> to the table itself. However, this method doesn't work great with Internet Explorer 9. <strong>If you don't need IE9 support, you can just add <code>.scroll</code> to your table, and the wrapping element isn't necessary.</strong>
-</div>
-
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"table-scroll"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">table</span>></span><span class="hljs-tag"></<span class="hljs-name">table</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div><div class="table-scroll">
- <table>
- <thead>
- <tr>
- <th>This is the description!</th>
- <th>One</th>
- <th>Two</th>
- <th>Three</th>
- <th>Four</th>
- <th>Five</th>
- <th>Six</th>
- <th>Seven</th>
- <th>Eight</th>
- <th>Nine</th>
- <th>Ten</th>
- <th>Eleven</th>
- <th>Twelve</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td style="display:block; width:400px;">These are all the words that people use to describe Foundation 6!</td>
- <td>Cool</td>
- <td>Swag</td>
- <td>Chill</td>
- <td>Killer</td>
- <td>Rad</td>
- <td>Baller</td>
- <td>OMG</td>
- <td>Sweet</td>
- <td>Awesome</td>
- <td>Beast</td>
- <td>Dope</td>
- <td>Tubular</td>
- </tr>
- <tr>
- <td>These are some words that people use to describe other web frameworks.</td>
- <td>Whatevs</td>
- <td>Ugh.</td>
- <td>LOL</td>
- <td>K</td>
- <td>Aight</td>
- <td>Eh.</td>
- <td>Grrr...</td>
- <td>Meh.</td>
- <td>TTYL</td>
- <td>Bleh.</td>
- <td>Really?</td>
- <td>Why?</td>
- </tr>
- <tr>
- <td>Here are some great super heros.</td>
- <td>Batman</td>
- <td>Superman</td>
- <td>Spiderman</td>
- <td>Wonder Woman</td>
- <td>Hulk</td>
- <td>Nicolas Cage</td>
- <td>Antman</td>
- <td>Aquaman</td>
- <td>Captain America</td>
- <td>Wolverine</td>
- <td>Thor</td>
- <td>Iron Man</td>
- </tr>
- </tbody>
- <tfoot>
- <tr>
- <td>Here's a footer, just in case</td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- </tr>
- </tfoot>
- </table>
-</div>
-
-
-<hr>
-<section>
- <h2 id="sass-reference" class="docs-heading" data-magellan-target="sass-reference">Sass Reference<a class="docs-heading-icon" href="#sass-reference"></a></h2>
-
- <section>
- <h3 id="sass-variables" class="docs-heading">Variables<a class="docs-heading-icon" href="#sass-variables"></a></h3>
-
- <p>The default styles of this component can be customized using these Sass variables in your project's <a href="sass.html#the-settings-file">settings file</a>.</p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td class="name"><code>$table-background</code></td>
- <td>Color</td>
- <td class="color"><code>$white</code></td>
- <td><p>Default color for table background.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$table-color-scale</code></td>
- <td>Number</td>
- <td class="number"><code>5%</code></td>
- <td><p>Default scale for darkening the striped table rows and the table border.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$table-border</code></td>
- <td>List</td>
- <td class="list"><code>1px solid smart-scale($table-background, $table-color-scale)</code></td>
- <td><p>Default style for table border.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$table-padding</code></td>
- <td>Number</td>
- <td class="number"><code>rem-calc(8 10 10)</code></td>
- <td><p>Default padding for table.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$table-hover-scale</code></td>
- <td>Number</td>
- <td class="number"><code>2%</code></td>
- <td><p>Default scale for darkening the table rows on hover.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$table-row-hover</code></td>
- <td>List</td>
- <td class="list"><code>darken($table-background, $table-hover-scale)</code></td>
- <td><p>Default color of standard rows on hover.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$table-row-stripe-hover</code></td>
- <td>List</td>
- <td class="list"><code>darken($table-background, $table-color-scale + $table-hover-scale)</code></td>
- <td><p>Default color of striped rows on hover.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$table-striped-background</code></td>
- <td>Color</td>
- <td class="color"><code>smart-scale($table-background, $table-color-scale)</code></td>
- <td><p>Default background color for striped rows.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$table-stripe</code></td>
- <td>Keyword</td>
- <td class="keyword"><code>even</code></td>
- <td><p>Default value for showing the stripe on rows of the tables, excluding the header and footer. If even, the even rows will have a background color. If odd, the odd rows will have a background color. If empty, or any other value, the table rows will have no striping.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$table-head-background</code></td>
- <td>Color</td>
- <td class="color"><code>smart-scale($table-background, $table-color-scale / 2)</code></td>
- <td><p>Default color for header background.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$table-foot-background</code></td>
- <td>Color</td>
- <td class="color"><code>smart-scale($table-background, $table-color-scale)</code></td>
- <td><p>Default color for footer background.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$table-head-font-color</code></td>
- <td>Color</td>
- <td class="color"><code>$body-font-color</code></td>
- <td><p>Default font color for header.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$show-header-for-stacked</code></td>
- <td>Boolean</td>
- <td class="boolean"><code>false</code></td>
- <td><p>Default value for showing the header when using stacked tables.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="sass-mixins" class="docs-heading">Mixins<a class="docs-heading-icon" href="#sass-mixins"></a></h3>
-
- <p>We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.</p>
-
-
- <section >
- <h4 id="table" class="docs-heading">table<a class="docs-heading-icon" href="#table"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> table(<span class="hljs-variable">$stripe</span>);</code></pre>
- </div>
-
- <p>Adds the general styles for tables.</p>
-
-
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$stripe</code></td>
- <td>Keyword</td>
- <td><code>$table-stripe</code></td>
- <td><p>Uses keywords even, odd, or none to darken rows of the table. The default value is even.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="table-scroll" class="docs-heading">table-scroll<a class="docs-heading-icon" href="#table-scroll"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> table-scroll;</code></pre>
- </div>
-
- <p>Adds the ability to horizontally scroll the table when the content overflows horizontally.</p>
-
-
-
-
-
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="table-hover" class="docs-heading">table-hover<a class="docs-heading-icon" href="#table-hover"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> table-hover;</code></pre>
- </div>
-
- <p>Slightly darkens the table rows on hover.</p>
-
-
-
-
-
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="table-stack" class="docs-heading">table-stack<a class="docs-heading-icon" href="#table-stack"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> table-stack(<span class="hljs-variable">$header</span>);</code></pre>
- </div>
-
- <p>Adds styles for a stacked table. Useful for small-screen layouts.</p>
-
-
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$header</code></td>
- <td>Boolean</td>
- <td><code>$show-header-for-stacked</code></td>
- <td><p>Show the first th of header when stacked.</p>
-</td>
- </tr>
- </table>
- </section>
-
-
-
-
-
- </section>
-
-
-</section>
-
-
-<!-- <hr> -->
-<!-- <section class="docs-building-blocks">
- <h2 id="building-blocks" class="docs-heading" data-magellan-target="building-blocks">Building Blocks<a class="docs-heading-icon" href="#building-blocks"></a></h2>
-
- <p><a href="http://zurb.com/building-blocks">Building Blocks</a> is a ZURB-curated resource with useful code snippets that use Foundation components. Here are a few for this component:</p>
-
- <div class="warning callout">
- <p>These are placeholder items. If you have ideas for building blocks for this component, <a href="https://github.com/zurb/foundation-sites-6/issues/118">we're taking ideas on GitHub</a>.</p>
- </div>
-
- <div data-building-blocks></div>
-</section> -->
-
-</div>
-
-<div class="large-3 columns" data-sticky-container>
- <nav class="columns docs-toc-wrap" data-sticky data-anchor="docs" data-sticky-on="large">
- <div class="docs-toc hide" id="docsTOC">
- <ul class="vertical menu" data-docs-toc>
- <li class="docs-nav-title">On this page:</li>
- </ul>
- </div>
- <div class="foundation-toc-ad-unit" id="TOCAdUnit">
- </div>
- </nav>
-</div>
-
-</div>
-
-</article>
-
- </div>
- <div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
- <ul class="vertical menu docs-nav" id="docs-menu">
- <p class="docs-nav-version">
- <span data-docs-version></span>
- <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">(Changelog)</a>
- </p>
-
- <li class="docs-nav-title">Getting Started</li>
- <li><a href="installation.html">Installation</a></li>
- <li><a href="starter-projects.html">Starter Projects</a></li>
- <li><a href="compatibility.html">Compatibility</a></li>
- <li><a href="accessibility.html">Accessibility</a></li>
- <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
-
- <li class="docs-nav-title">Setup</li>
- <li><a href="global.html">Global Styles</a></li>
- <li><a href="rtl.html">Right-to-Left Support</a></li>
- <li><a href="flexbox.html">Flexbox</a></li>
- <li><a href="sass.html">Sass</a></li>
- <li><a href="javascript.html">JavaScript</a></li>
- <li><a href="javascript-utilities.html">JavaScript Utilities</a></li>
- <li><a href="media-queries.html">Media Queries</a></li>
-
- <li class="docs-nav-title">General</li>
- <li><a href="grid.html">Grid</a></li>
- <li><a href="flex-grid.html">Flex Grid</a></li>
- <li><a href="forms.html">Forms</a></li>
- <li><a href="visibility.html">Visibility Classes</a></li>
- <li><a href="float-classes.html">Float Classes</a></li>
-
- <li class="docs-nav-title">Typography</li>
- <li><a href="typography-base.html">Base Styles</a></li>
- <li><a href="typography-helpers.html">Helper Classes</a></li>
-
- <li class="docs-nav-title">Controls</li>
- <li><a href="button.html">Button</a></li>
- <li><a href="button-group.html">Button Group</a></li>
- <li><a href="close-button.html">Close Button</a></li>
- <li><a href="slider.html">Slider <span class="label">JS</span></a></li>
- <li><a href="switch.html">Switch</a></li>
-
- <li class="docs-nav-title">Navigation</li>
- <li><a href="navigation.html">Overview</a></li>
- <li><a href="menu.html">Menu</a></li>
- <li><a href="dropdown-menu.html">Dropdown Menu <span class="label">JS</span></a></li>
- <li><a href="drilldown-menu.html">Drilldown Menu <span class="label">JS</span></a></li>
- <li><a href="accordion-menu.html">Accordion Menu <span class="label">JS</span></a></li>
- <li><a href="top-bar.html">Top Bar</a></li>
- <li><a href="responsive-navigation.html">Responsive Navigation</a></li>
- <li><a href="magellan.html">Magellan <span class="label">JS</span></a></li>
- <li><a href="pagination.html">Pagination</a></li>
- <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
-
- <li class="docs-nav-title">Containers</li>
- <li><a href="accordion.html">Accordion <span class="label">JS</span></a></li>
- <li><a href="callout.html">Callout</a></li>
- <li><a href="dropdown.html">Dropdown <span class="label">JS</span></a></li>
- <li><a href="media-object.html">Media Object</a></li>
- <li><a href="off-canvas.html">Off-canvas <span class="label">JS</span></a></li>
- <li><a href="reveal.html">Reveal <span class="label">JS</span> <small>Modal</small></a></li>
- <li class="current"><a href="table.html">Table</a></li>
- <li><a href="tabs.html">Tabs <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Media</li>
- <li><a href="badge.html">Badge</a></li>
- <li><a href="flex-video.html">Flex Video</a></li>
- <li><a href="label.html">Label</a></li>
- <li><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
- <li><a href="progress-bar.html">Progress Bar</a></li>
- <li><a href="thumbnail.html">Thumbnail</a></li>
- <li><a href="tooltip.html">Tooltip <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Plugins</li>
- <li><a href="abide.html">Abide <small>Form Validation</small></a></li>
- <li><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
- <li><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
- <li><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
- <li><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
-
- <li class="docs-nav-title">Sass</li>
- <li><a href="sass-functions.html">Functions</a></li>
- <li><a href="sass-mixins.html">Mixins</a></li>
-
- <li class="docs-nav-title">Libraries</li>
- <li><a href="motion-ui.html">Motion UI</a></li>
- <li><a href="panini.html">Panini</a></li>
- <li><a href="style-sherpa.html">Style Sherpa</a></li>
-
- <li class="docs-nav-title">Older Versions</li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
- <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
- <li><a href="https://get.foundation/sites/docs/v/3.2.5/">Foundation 3</a></li>
- <li><a href="https://get.foundation/sites/docs/v/2.2.1/">Foundation 2</a></li>
- </ul>
-
- </div>
- </div>
-
- <!-- Small Business(Docs) -->
- <section id="studiosCallout">
- <div class="row">
- <div class="medium-4 large-4 columns">
- <img src="https://get.foundation/assets/img/smallbiz-footer.svg" alt="">
- </div>
- <div class="medium-8 large-8 columns banner-info">
- <div class="row column property-label">ZURB Foundation</div>
- <h3 class="light">Yeah, we can help with that.</h3>
- <p class="lead"> We’ll collaborate with your team throughout the entire project life cycle. We’ll take your concept and move it through ideation, hi-fi wireframes, visual design and code, all while informing you on the whys and hows along the way.</p>
- <div class="course-buttons">
- <a href="https://get.foundation/get-involved/premium-support.html" class="studios button" data-zcom-event="studios_foundation_click" id="foundationSmallV1">Show Me How →</a>
- </div>
- </div>
- </div>
- </section>
-
- <div class="docs-newsletter">
- <div class="row">
- <div class="medium-7 large-8 columns">
- <a target="_blank" href="https://get.foundation/learn/responsive-reading.html">
- <h5 class="">Download ZURB’s 21 Responsive Trends That Will Shape 2017</h5>
- <p style="margin-bottom: 0;">Stay informed with amazing responsive trends each month from ZURB.</p>
- </a>
- </div>
- <div class="medium-5 large-4 footer-signup-form columns">
- <a style="margin-bottom: 0;" target="_blank" href="https://get.foundation/learn/responsive-reading.html" class="button expanded">Download the PDF</a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-top bg-fblue">
- <div class="row property">
- <div class="medium-4 columns">
- <div class="property-info">
- <h3>Foundation for Sites</h3>
- <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
- </p>
- </div>
- </div>
-
- <div class="medium-8 columns">
- <div class="row collapse">
- <div class="medium-4 columns">
- <div class="learn-links">
- <h4 class="hide-for-small">Want more?</h4>
- <ul>
- <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
- <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
- <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
- <li><a href="http://zurb.com/university/courses">Training</a></li>
- <li><a href="http://zurb.com/library">Design Resources</a></li>
- </ul>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="support-links">
- <h4 class="hide-for-small">Talk to us</h4>
- <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
- <p><a href="https://get.foundation/get-involved/contribute.html">Get involved in<br>our amazing community.</a></p>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="connect-links">
- <h4 class="hide-for-small">Stay Updated</h4>
- <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
- <a href="http://zurb.com/news" class="small button">Stay Connected</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="row global">
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/studios" class="footer-link-block services">
- <span class="title">Studios</span>
- <span>Helping more than 200 startups succeed since 1998.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="https://get.foundation/" class="footer-link-block foundation">
- <span class="title">Foundation</span>
- <span>The most advanced front-end framework in the world.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/notable" class="footer-link-block apps">
- <span class="title">Notable Design Apps</span>
- <span>Prototype, iterate and collect feedback on your products.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/university" class="footer-link-block expo">
- <span class="title">University</span>
- <span>Ideas, thoughts and design resources shared with you.</span>
- </a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-bottom">
- <div class="row">
- <div class="medium-4 medium-push-8 columns">
- <ul class="home-social">
- <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
- <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
- <li><a href="http://zurb.com/contact" class="mail"></a></li>
- </ul>
- </div>
- <div class="medium-8 medium-pull-4 columns">
- <a href="http://www.zurb.com" class="zurb-logo regular"></a>
- <ul class="zurb-links">
- <li><a href="http://zurb.com/about">About</a></li>
- <li><a href="http://zurb.com/blog">Blog</a></li>
- <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
- <li><a href="http://zurb.com/contact">Contact</a></li>
- <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
- </ul>
- <p class="copyright">© 1998‐2016 ZURB, Inc. All rights reserved.</p>
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- <script>
- var _gaq = _gaq || [];
- _gaq.push(
- ['_setAccount', 'UA-2195009-2'],
- ['_trackPageview'],
- ['b._setAccount', 'UA-2195009-27'],
- ['b._trackPageview']
- );
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
-
- <script src="assets/js/vendor.js?hash=ec4027f86cf79cd03ebfa5a38ed612e2"></script>
- <script src="assets/js/foundation.js?hash=6930880bab1de936976a34ce1a63a5eb"></script>
- <script src="assets/js/docs.js?hash=f4f027846002de2ee6ccbdb580c23ee0"></script>
- <script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
-</body>
-</html>
+++ /dev/null
-<!doctype html>
-<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
-<html class="no-js" lang="en" dir="ltr">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="Tabs are elements that help you organize and navigate multiple documents in a single container. They can be used for switching between items in the container.">
- <link rel="icon" href="assets/img/icons/foundation-favicon.ico" type="image/x-icon">
- <title>Foundation for Sites 6 Docs | Tabs</title>
- <link href="assets/css/docs.css?hash=78c48a804b6537406a78516ce8a40d54" rel="stylesheet" />
- <link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=293a4a432914c3a12d79b353107d62ba" rel="stylesheet">
- <!-- <link rel="stylesheet" href="./node_modules/motion-ui/dist/motion-ui.css" /> -->
-</head>
-<body>
-
- <div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
-
- <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="mobile-ofc vertical menu">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
-
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/support.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/sort/unanswered">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
- </div>
-
- <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="vertical menu">
- <li><a href="#">Foundation</a></li>
- <li><a href="#">Dot</a></li>
- <li><a href="#">ZURB</a></li>
- <li><a href="#">Com</a></li>
- <li><a href="#">Slash</a></li>
- <li><a href="#">Sites</a></li>
- </ul>
- </div>
-
-
- <div class="off-canvas-content" data-off-canvas-content>
- <!-- Info Banner For Announcements or Links -->
- <!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
- <div class="info">
- <h5>Foundation 6 is here!</h5>
- </div>
- </a> -->
-
- <nav class="marketing-topbar show-for-medium">
-
- <ul class="menu">
- <li class="topbar-title"><a href="https://get.foundation/index.html"><img src="assets/img/logos/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
- </ul>
-
- <ul class="dropdown menu" data-dropdown-menu data-click-open="false">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/" target="_blank">F5 Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="https://get.foundation/emails/docs/" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
-
- </nav>
-
- <div class="title-bar hide-for-medium">
- <div class="title-bar-left">
- <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
- <span class="title-bar-title">Foundation</span>
- </div>
- </div>
-
-
- <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
-
- <div class="expanded row">
- <div class="medium-9 large-10 medium-push-3 large-push-2 columns">
-
-<article class="docs-component" id="docs-tabs">
-
-<a href="#docs-menu" class="small secondary expanded button hide-for-medium">Jump to Nav</a>
-
-<header>
- <h1 class="docs-page-title">Tabs</h1>
-
- <span data-tooltip title="Requires a JavaScript library." class="docs-js label">JavaScript</span>
-
- <p class="lead docs-page-lead">Tabs are elements that help you organize and navigate multiple documents in a single container. They can be used for switching between items in the container.</p>
-
- <ul class="menu simple docs-contribute-menu">
- <li><a href="https://github.com/zurb/foundation-sites/edit/master/docs/pages/tabs.md" target="_blank"><i class="fi-pencil"></i>Edit this Page</a></li>
- <li><a href="https://github.com/zurb/foundation-sites/issues/new?title=%5BTabs%5D%20ISSUE%20NAME%20HERE" target="_blank"><i class="fi-social-github"></i>Report a Bug</a></li>
- <li><a href="https://get.foundation/forum" target="_blank"><i class="fi-comment"></i>Get Help</a></li>
- </ul>
-</header>
-
-<hr>
-
-<div class="row">
-
-<div class="large-9 columns" id="docs">
-
-<h2 id="basics" class="docs-heading" data-magellan-target="basics">Basics<a class="docs-heading-icon" href="#basics"></a></h2><p>There are two pieces to a tabbed interface: the tabs themselves, and the content for each tab. The tabs are an element with the class <code>.tabs</code>, and each item has the class <code>.tabs-title</code>. Each tab contains a link to a tab. The <code>href</code> of each link should match the ID of a tab.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tabs"</span> <span class="hljs-attr">data-tabs</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example-tabs"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tabs-title is-active"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#panel1"</span> <span class="hljs-attr">aria-selected</span>=<span class="hljs-string">"true"</span>></span>Tab 1<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tabs-title"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#panel2"</span>></span>Tab 2<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">ul</span>></span></code></pre></div><p>The tab content container has the class <code>.tabs-content</code>, while each section has the class <code>.tabs-panel</code>. Each content pane also has a unique ID, which is targeted by a link in the tabstrip.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tabs-content"</span> <span class="hljs-attr">data-tabs-content</span>=<span class="hljs-string">"example-tabs"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tabs-panel is-active"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"panel1"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tabs-panel"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"panel2"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Suspendisse dictum feugiat nisl ut dapibus. Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div><p>Put it all together, and we get this:</p>
-<ul class="tabs" data-tabs id="example-tabs">
- <li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Tab 1</a></li>
- <li class="tabs-title"><a href="#panel2">Tab 2</a></li>
- <li class="tabs-title"><a href="#panel3">Tab 3</a></li>
- <li class="tabs-title"><a href="#panel4">Tab 4</a></li>
- <li class="tabs-title"><a href="#panel5">Tab 5</a></li>
- <li class="tabs-title"><a href="#panel6">Tab 6</a></li>
-</ul>
-
-<div class="tabs-content" data-tabs-content="example-tabs">
- <div class="tabs-panel is-active" id="panel1">
- <p>one</p>
- <p>Check me out! I'm a super cool Tab panel with text content!</p>
- </div>
- <div class="tabs-panel" id="panel2">
- <p>two</p>
- <img class="thumbnail" src="assets/img/generic/rectangle-7.jpg">
- </div>
- <div class="tabs-panel" id="panel3">
- <p>three</p>
- <p>Check me out! I'm a super cool Tab panel with text content!</p>
- </div>
- <div class="tabs-panel" id="panel4">
- <p>four</p>
- <img class="thumbnail" src="assets/img/generic/rectangle-2.jpg">
- </div>
- <div class="tabs-panel" id="panel5">
- <p>five</p>
- <p>Check me out! I'm a super cool Tab panel with text content!</p>
- </div>
- <div class="tabs-panel" id="panel6">
- <p>six</p>
- <img class="thumbnail" src="assets/img/generic/rectangle-8.jpg">
- </div>
-</div>
-
-<hr>
-<h2 id="vertical-tabs" class="docs-heading" data-magellan-target="vertical-tabs">Vertical Tabs<a class="docs-heading-icon" href="#vertical-tabs"></a></h2><p>Add the <code>.vertical</code> class to a tabstrip to stack tabs vertically. You can also place the tabstrip and the tab contents in a grid to make them sit side-by-side.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row collapse"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"medium-3 columns"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tabs vertical"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example-vert-tabs"</span> <span class="hljs-attr">data-tabs</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tabs-title is-active"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#panel1v"</span> <span class="hljs-attr">aria-selected</span>=<span class="hljs-string">"true"</span>></span>Tab 1<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tabs-title"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#panel2v"</span>></span>Tab 2<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tabs-title"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#panel3v"</span>></span>Tab 3<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tabs-title"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#panel4v"</span>></span>Tab 4<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tabs-title"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#panel5v"</span>></span>Tab 5<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tabs-title"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#panel6v"</span>></span>Tab 6<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"medium-9 columns"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tabs-content vertical"</span> <span class="hljs-attr">data-tabs-content</span>=<span class="hljs-string">"example-vert-tabs"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tabs-panel is-active"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"panel1v"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tabs-panel"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"panel2v"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tabs-panel"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"panel3v"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"thumbnail"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"assets/img/generic/rectangle-3.jpg"</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tabs-panel"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"panel4v"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tabs-panel"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"panel5v"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tabs-panel"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"panel6v"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"thumbnail"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"assets/img/generic/rectangle-5.jpg"</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="row collapse">
- <div class="medium-3 columns">
- <ul class="tabs vertical" id="example-vert-tabs" data-tabs>
- <li class="tabs-title is-active"><a href="#panel1v" aria-selected="true">Tab 1</a></li>
- <li class="tabs-title"><a href="#panel2v">Tab 2</a></li>
- <li class="tabs-title"><a href="#panel3v">Tab 3</a></li>
- <li class="tabs-title"><a href="#panel4v">Tab 4</a></li>
- <li class="tabs-title"><a href="#panel5v">Tab 5</a></li>
- <li class="tabs-title"><a href="#panel6v">Tab 6</a></li>
- </ul>
- </div>
- <div class="medium-9 columns">
- <div class="tabs-content vertical" data-tabs-content="example-vert-tabs">
- <div class="tabs-panel is-active" id="panel1v">
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
- </div>
- <div class="tabs-panel" id="panel2v">
- <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
- </div>
- <div class="tabs-panel" id="panel3v">
- <img class="thumbnail" src="assets/img/generic/rectangle-3.jpg">
- </div>
- <div class="tabs-panel" id="panel4v">
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
- </div>
- <div class="tabs-panel" id="panel5v">
- <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- </div>
- <div class="tabs-panel" id="panel6v">
- <img class="thumbnail" src="assets/img/generic/rectangle-5.jpg">
- </div>
- </div>
- </div>
-</div></div>
-
-<hr>
-<section>
- <h2 id="sass-reference" class="docs-heading" data-magellan-target="sass-reference">Sass Reference<a class="docs-heading-icon" href="#sass-reference"></a></h2>
-
- <section>
- <h3 id="sass-variables" class="docs-heading">Variables<a class="docs-heading-icon" href="#sass-variables"></a></h3>
-
- <p>The default styles of this component can be customized using these Sass variables in your project's <a href="sass.html#the-settings-file">settings file</a>.</p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td class="name"><code>$tab-margin</code></td>
- <td>Number</td>
- <td class="number"><code>0</code></td>
- <td><p>Default margin of the tab bar.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$tab-background</code></td>
- <td>Color</td>
- <td class="color"><code>$white</code></td>
- <td><p>Default background color of a tab bar.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$tab-background-active</code></td>
- <td>Color</td>
- <td class="color"><code>$light-gray</code></td>
- <td><p>active background color of a tab bar.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$tab-item-font-size</code></td>
- <td>Number</td>
- <td class="number"><code>rem-calc(12)</code></td>
- <td><p>Font size of tab items.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$tab-item-background-hover</code></td>
- <td></td>
- <td class=""><code>$white</code></td>
- <td><p>Default background color on hover for items in a Menu.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$tab-item-padding</code></td>
- <td>Number</td>
- <td class="number"><code>1.25rem 1.5rem</code></td>
- <td><p>Default padding of a tab item.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$tab-expand-max</code></td>
- <td>Number</td>
- <td class="number"><code>6</code></td>
- <td><p>Maximum number of <code>expand-n</code> classes to include in the CSS.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$tab-content-background</code></td>
- <td>Color</td>
- <td class="color"><code>$white</code></td>
- <td><p>Default background color of tab content.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$tab-content-border</code></td>
- <td>Color</td>
- <td class="color"><code>$light-gray</code></td>
- <td><p>Default border color of tab content.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$tab-content-color</code></td>
- <td>Color</td>
- <td class="color"><code>foreground($tab-background, $primary-color)</code></td>
- <td><p>Default text color of tab content.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$tab-content-padding</code></td>
- <td>Number or List</td>
- <td class="number | list"><code>1rem</code></td>
- <td><p>Default padding for tab content.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="sass-mixins" class="docs-heading">Mixins<a class="docs-heading-icon" href="#sass-mixins"></a></h3>
-
- <p>We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.</p>
-
-
- <section >
- <h4 id="tabs-container" class="docs-heading">tabs-container<a class="docs-heading-icon" href="#tabs-container"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> tabs-container;</code></pre>
- </div>
-
- <p>Adds styles for a tab container. Apply this to a <code><ul></code>.</p>
-
-
-
-
-
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="tabs-container-vertical" class="docs-heading">tabs-container-vertical<a class="docs-heading-icon" href="#tabs-container-vertical"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> tabs-container-vertical;</code></pre>
- </div>
-
- <p>Augments a tab container to have vertical tabs. Use this in conjunction with <code>tabs-container()</code>.</p>
-
-
-
-
-
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="tabs-title" class="docs-heading">tabs-title<a class="docs-heading-icon" href="#tabs-title"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> tabs-title;</code></pre>
- </div>
-
- <p>Adds styles for the links within a tab container. Apply this to the <code><li></code> elements inside a tab container.</p>
-
-
-
-
-
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="tabs-content" class="docs-heading">tabs-content<a class="docs-heading-icon" href="#tabs-content"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> tabs-content;</code></pre>
- </div>
-
- <p>Adds styles for the wrapper that surrounds a tab group's content panes.</p>
-
-
-
-
-
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="tabs-content-vertical" class="docs-heading">tabs-content-vertical<a class="docs-heading-icon" href="#tabs-content-vertical"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> tabs-content-vertical;</code></pre>
- </div>
-
- <p>Augments a tab content container to have a vertical style, by shifting the border around. Use this in conjunction with <code>tabs-content()</code>.</p>
-
-
-
-
-
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="tabs-panel" class="docs-heading">tabs-panel<a class="docs-heading-icon" href="#tabs-panel"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> tabs-panel;</code></pre>
- </div>
-
- <p>Adds styles for an individual tab content panel within the tab content container.</p>
-
-
-
-
-
- </section>
-
-
-
-
-
- </section>
-
-
-</section>
-
-<hr>
-<section>
- <h2 id="javascript-reference" class="docs-heading" data-magellan-target="javascript-reference">JavaScript Reference<a class="docs-heading-icon" href="#javascript-reference"></a></h2>
-
-
- <section>
- <h3 id="js-module" class="docs-heading">Initializing<a class="docs-heading-icon" href="#js-module"></a></h3>
-
- <p>The file <code>foundation.tabs.js</code> must be included in your JavaScript to use this plugin, along with <code>foundation.core.js</code>. <strong>This plugin also requires these utility libraries:</strong></p>
-
-
- <ul>
- <li><code>foundation.util.keyboard.js</code></li>
- </ul>
-
- <ul>
- <li><code>foundation.util.timerAndImageLoader.js</code></li>
- </ul>
-
-
- </section>
-
-
- <section>
- <h3 id="js-class" class="docs-heading">Foundation.Tabs<a class="docs-heading-icon" href="#js-class"></a></h3>
-
- <p>Creates a new instance of tabs.</p>
-
-
- <div class="docs-code"><pre><code><span class="hljs-keyword">var</span> elem = <span class="hljs-keyword">new</span> Foundation.Tabs(element, options);</code></pre></div>
-
- <p><strong>Fires these events:</strong>
- Tabs#event:init
- </p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>element</code></td>
- <td>jQuery</td>
- <td>jQuery object to make into tabs.</td>
- </tr>
- <tr>
- <td><code>options</code></td>
- <td>Object</td>
- <td>Overrides to the default plugin settings.</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="js-options" class="docs-heading">Plugin Options<a class="docs-heading-icon" href="#js-options"></a></h3>
-
- <p>Use these options to customize an instance of Tabs. Plugin options can be set as individual data attributes, one combined <code>data-options</code> attribute, or as an object passed to the plugin's constructor. <a href="javascript.html#initializing">Learn more about how JavaScript plugins are initialized.</a></p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Default</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>data-auto-focus</code></td>
- <td><code>false</code></td>
- <td>Allows the window to scroll to content of active pane on load if set to true.</td>
- </tr>
- <tr>
- <td><code>data-wrap-on-keys</code></td>
- <td><code>true</code></td>
- <td>Allows keyboard input to 'wrap' around the tab links.</td>
- </tr>
- <tr>
- <td><code>data-match-height</code></td>
- <td><code>false</code></td>
- <td>Allows the tab content panes to match heights if set to true.</td>
- </tr>
- <tr>
- <td><code>data-link-class</code></td>
- <td><code>tabs-title</code></td>
- <td>Class applied to `li`'s in tab link list.</td>
- </tr>
- <tr>
- <td><code>data-panel-class</code></td>
- <td><code>tabs-panel</code></td>
- <td>Class applied to the content containers.</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="js-events" class="docs-heading">Events<a class="docs-heading-icon" href="#js-events"></a></h3>
-
- <p>These events will fire from any element with a Tabs plugin attached.</p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>change.zf.tabs</code></td>
- <td>Fires when the plugin has successfully changed tabs.</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="js-functions" class="docs-heading">Methods<a class="docs-heading-icon" href="#js-functions"></a></h3>
-
- <section>
- <h4 id="_handletabchange" class="docs-heading">_handleTabChange<a class="docs-heading-icon" href="#_handletabchange"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'_handleTabChange'</span>, $target);</code></pre>
- </div>
-
- <p>Opens the tab <code>$targetContent</code> defined by <code>$target</code>.</p>
-
-
- <p><strong>Fires these events:</strong>
- Tabs#event:change
- </p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$target</code></td>
- <td>jQuery</td>
- <td>Tab to open.</td>
- </tr>
- </table>
-
- <hr>
- </section>
- <section>
- <h4 id="selecttab" class="docs-heading">selectTab<a class="docs-heading-icon" href="#selecttab"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'selectTab'</span>, elem);</code></pre>
- </div>
-
- <p>Public method for selecting a content pane to display.</p>
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>elem</code></td>
- <td>jQuery</td>
- <td>jQuery object or string of the id of the pane to display.</td>
- </tr>
- </table>
-
- <hr>
- </section>
- <section>
- <h4 id="destroy" class="docs-heading">destroy<a class="docs-heading-icon" href="#destroy"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'destroy'</span>);</code></pre>
- </div>
-
- <p>Destroys an instance of an tabs.</p>
-
-
- <p><strong>Fires these events:</strong>
- Tabs#event:destroyed
- </p>
-
-
-
- </section>
- </section>
-</section>
-
-<!-- <hr> -->
-<!-- <section class="docs-building-blocks">
- <h2 id="building-blocks" class="docs-heading" data-magellan-target="building-blocks">Building Blocks<a class="docs-heading-icon" href="#building-blocks"></a></h2>
-
- <p><a href="http://zurb.com/building-blocks">Building Blocks</a> is a ZURB-curated resource with useful code snippets that use Foundation components. Here are a few for this component:</p>
-
- <div class="warning callout">
- <p>These are placeholder items. If you have ideas for building blocks for this component, <a href="https://github.com/zurb/foundation-sites-6/issues/118">we're taking ideas on GitHub</a>.</p>
- </div>
-
- <div data-building-blocks></div>
-</section> -->
-
-</div>
-
-<div class="large-3 columns" data-sticky-container>
- <nav class="columns docs-toc-wrap" data-sticky data-anchor="docs" data-sticky-on="large">
- <div class="docs-toc hide" id="docsTOC">
- <ul class="vertical menu" data-docs-toc>
- <li class="docs-nav-title">On this page:</li>
- </ul>
- </div>
- <div class="foundation-toc-ad-unit" id="TOCAdUnit">
- </div>
- </nav>
-</div>
-
-</div>
-
-</article>
-
- </div>
- <div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
- <ul class="vertical menu docs-nav" id="docs-menu">
- <p class="docs-nav-version">
- <span data-docs-version></span>
- <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">(Changelog)</a>
- </p>
-
- <li class="docs-nav-title">Getting Started</li>
- <li><a href="installation.html">Installation</a></li>
- <li><a href="starter-projects.html">Starter Projects</a></li>
- <li><a href="compatibility.html">Compatibility</a></li>
- <li><a href="accessibility.html">Accessibility</a></li>
- <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
-
- <li class="docs-nav-title">Setup</li>
- <li><a href="global.html">Global Styles</a></li>
- <li><a href="rtl.html">Right-to-Left Support</a></li>
- <li><a href="flexbox.html">Flexbox</a></li>
- <li><a href="sass.html">Sass</a></li>
- <li><a href="javascript.html">JavaScript</a></li>
- <li><a href="javascript-utilities.html">JavaScript Utilities</a></li>
- <li><a href="media-queries.html">Media Queries</a></li>
-
- <li class="docs-nav-title">General</li>
- <li><a href="grid.html">Grid</a></li>
- <li><a href="flex-grid.html">Flex Grid</a></li>
- <li><a href="forms.html">Forms</a></li>
- <li><a href="visibility.html">Visibility Classes</a></li>
- <li><a href="float-classes.html">Float Classes</a></li>
-
- <li class="docs-nav-title">Typography</li>
- <li><a href="typography-base.html">Base Styles</a></li>
- <li><a href="typography-helpers.html">Helper Classes</a></li>
-
- <li class="docs-nav-title">Controls</li>
- <li><a href="button.html">Button</a></li>
- <li><a href="button-group.html">Button Group</a></li>
- <li><a href="close-button.html">Close Button</a></li>
- <li><a href="slider.html">Slider <span class="label">JS</span></a></li>
- <li><a href="switch.html">Switch</a></li>
-
- <li class="docs-nav-title">Navigation</li>
- <li><a href="navigation.html">Overview</a></li>
- <li><a href="menu.html">Menu</a></li>
- <li><a href="dropdown-menu.html">Dropdown Menu <span class="label">JS</span></a></li>
- <li><a href="drilldown-menu.html">Drilldown Menu <span class="label">JS</span></a></li>
- <li><a href="accordion-menu.html">Accordion Menu <span class="label">JS</span></a></li>
- <li><a href="top-bar.html">Top Bar</a></li>
- <li><a href="responsive-navigation.html">Responsive Navigation</a></li>
- <li><a href="magellan.html">Magellan <span class="label">JS</span></a></li>
- <li><a href="pagination.html">Pagination</a></li>
- <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
-
- <li class="docs-nav-title">Containers</li>
- <li><a href="accordion.html">Accordion <span class="label">JS</span></a></li>
- <li><a href="callout.html">Callout</a></li>
- <li><a href="dropdown.html">Dropdown <span class="label">JS</span></a></li>
- <li><a href="media-object.html">Media Object</a></li>
- <li><a href="off-canvas.html">Off-canvas <span class="label">JS</span></a></li>
- <li><a href="reveal.html">Reveal <span class="label">JS</span> <small>Modal</small></a></li>
- <li><a href="table.html">Table</a></li>
- <li class="current"><a href="tabs.html">Tabs <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Media</li>
- <li><a href="badge.html">Badge</a></li>
- <li><a href="flex-video.html">Flex Video</a></li>
- <li><a href="label.html">Label</a></li>
- <li><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
- <li><a href="progress-bar.html">Progress Bar</a></li>
- <li><a href="thumbnail.html">Thumbnail</a></li>
- <li><a href="tooltip.html">Tooltip <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Plugins</li>
- <li><a href="abide.html">Abide <small>Form Validation</small></a></li>
- <li><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
- <li><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
- <li><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
- <li><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
-
- <li class="docs-nav-title">Sass</li>
- <li><a href="sass-functions.html">Functions</a></li>
- <li><a href="sass-mixins.html">Mixins</a></li>
-
- <li class="docs-nav-title">Libraries</li>
- <li><a href="motion-ui.html">Motion UI</a></li>
- <li><a href="panini.html">Panini</a></li>
- <li><a href="style-sherpa.html">Style Sherpa</a></li>
-
- <li class="docs-nav-title">Older Versions</li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
- <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
- <li><a href="https://get.foundation/sites/docs/v/3.2.5/">Foundation 3</a></li>
- <li><a href="https://get.foundation/sites/docs/v/2.2.1/">Foundation 2</a></li>
- </ul>
-
- </div>
- </div>
-
- <!-- Small Business(Docs) -->
- <section id="studiosCallout">
- <div class="row">
- <div class="medium-4 large-4 columns">
- <img src="https://get.foundation/assets/img/smallbiz-footer.svg" alt="">
- </div>
- <div class="medium-8 large-8 columns banner-info">
- <div class="row column property-label">ZURB Foundation</div>
- <h3 class="light">Yeah, we can help with that.</h3>
- <p class="lead"> We’ll collaborate with your team throughout the entire project life cycle. We’ll take your concept and move it through ideation, hi-fi wireframes, visual design and code, all while informing you on the whys and hows along the way.</p>
- <div class="course-buttons">
- <a href="https://get.foundation/get-involved/premium-support.html" class="studios button" data-zcom-event="studios_foundation_click" id="foundationSmallV1">Show Me How →</a>
- </div>
- </div>
- </div>
- </section>
-
- <div class="docs-newsletter">
- <div class="row">
- <div class="medium-7 large-8 columns">
- <a target="_blank" href="https://get.foundation/learn/responsive-reading.html">
- <h5 class="">Download ZURB’s 21 Responsive Trends That Will Shape 2017</h5>
- <p style="margin-bottom: 0;">Stay informed with amazing responsive trends each month from ZURB.</p>
- </a>
- </div>
- <div class="medium-5 large-4 footer-signup-form columns">
- <a style="margin-bottom: 0;" target="_blank" href="https://get.foundation/learn/responsive-reading.html" class="button expanded">Download the PDF</a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-top bg-fblue">
- <div class="row property">
- <div class="medium-4 columns">
- <div class="property-info">
- <h3>Foundation for Sites</h3>
- <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
- </p>
- </div>
- </div>
-
- <div class="medium-8 columns">
- <div class="row collapse">
- <div class="medium-4 columns">
- <div class="learn-links">
- <h4 class="hide-for-small">Want more?</h4>
- <ul>
- <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
- <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
- <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
- <li><a href="http://zurb.com/university/courses">Training</a></li>
- <li><a href="http://zurb.com/library">Design Resources</a></li>
- </ul>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="support-links">
- <h4 class="hide-for-small">Talk to us</h4>
- <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
- <p><a href="https://get.foundation/get-involved/contribute.html">Get involved in<br>our amazing community.</a></p>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="connect-links">
- <h4 class="hide-for-small">Stay Updated</h4>
- <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
- <a href="http://zurb.com/news" class="small button">Stay Connected</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="row global">
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/studios" class="footer-link-block services">
- <span class="title">Studios</span>
- <span>Helping more than 200 startups succeed since 1998.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="https://get.foundation/" class="footer-link-block foundation">
- <span class="title">Foundation</span>
- <span>The most advanced front-end framework in the world.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/notable" class="footer-link-block apps">
- <span class="title">Notable Design Apps</span>
- <span>Prototype, iterate and collect feedback on your products.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/university" class="footer-link-block expo">
- <span class="title">University</span>
- <span>Ideas, thoughts and design resources shared with you.</span>
- </a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-bottom">
- <div class="row">
- <div class="medium-4 medium-push-8 columns">
- <ul class="home-social">
- <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
- <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
- <li><a href="http://zurb.com/contact" class="mail"></a></li>
- </ul>
- </div>
- <div class="medium-8 medium-pull-4 columns">
- <a href="http://www.zurb.com" class="zurb-logo regular"></a>
- <ul class="zurb-links">
- <li><a href="http://zurb.com/about">About</a></li>
- <li><a href="http://zurb.com/blog">Blog</a></li>
- <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
- <li><a href="http://zurb.com/contact">Contact</a></li>
- <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
- </ul>
- <p class="copyright">© 1998‐2016 ZURB, Inc. All rights reserved.</p>
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- <script>
- var _gaq = _gaq || [];
- _gaq.push(
- ['_setAccount', 'UA-2195009-2'],
- ['_trackPageview'],
- ['b._setAccount', 'UA-2195009-27'],
- ['b._trackPageview']
- );
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
-
- <script src="assets/js/vendor.js?hash=27af988129e3205f119408ecb7240b67"></script>
- <script src="assets/js/foundation.js?hash=db5dbc8eab8df8ddbc962d3900f149ff"></script>
- <script src="assets/js/docs.js?hash=03f0792b84a76d66bd1182af5f8b2f89"></script>
- <script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
-</body>
-</html>
+++ /dev/null
-<!doctype html>
-<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
-<html class="no-js" lang="en" dir="ltr">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="If you're going to use an image as an anchor, we've got you covered. All you gotta do is add one class to your image and voilà!">
- <link rel="icon" href="assets/img/icons/foundation-favicon.ico" type="image/x-icon">
- <title>Foundation for Sites 6 Docs | Thumbnail</title>
- <link href="assets/css/docs.css?hash=16f340ae6eed08035099026c52e169b6" rel="stylesheet" />
- <link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=d8747bc1e49eb4296fd8ff2f0ec45c70" rel="stylesheet">
- <!-- <link rel="stylesheet" href="./node_modules/motion-ui/dist/motion-ui.css" /> -->
-</head>
-<body>
-
- <div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
-
- <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="mobile-ofc vertical menu">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
-
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/support.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/sort/unanswered">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
- </div>
-
- <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="vertical menu">
- <li><a href="#">Foundation</a></li>
- <li><a href="#">Dot</a></li>
- <li><a href="#">ZURB</a></li>
- <li><a href="#">Com</a></li>
- <li><a href="#">Slash</a></li>
- <li><a href="#">Sites</a></li>
- </ul>
- </div>
-
-
- <div class="off-canvas-content" data-off-canvas-content>
- <!-- Info Banner For Announcements or Links -->
- <!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
- <div class="info">
- <h5>Foundation 6 is here!</h5>
- </div>
- </a> -->
-
- <nav class="marketing-topbar show-for-medium">
-
- <ul class="menu">
- <li class="topbar-title"><a href="https://get.foundation/index.html"><img src="assets/img/logos/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
- </ul>
-
- <ul class="dropdown menu" data-dropdown-menu data-click-open="false">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/" target="_blank">F5 Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="https://get.foundation/emails/docs/" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
-
- </nav>
-
- <div class="title-bar hide-for-medium">
- <div class="title-bar-left">
- <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
- <span class="title-bar-title">Foundation</span>
- </div>
- </div>
-
-
- <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
-
- <div class="expanded row">
- <div class="medium-9 large-10 medium-push-3 large-push-2 columns">
-
-<article class="docs-component" id="docs-thumbnail">
-
-<a href="#docs-menu" class="small secondary expanded button hide-for-medium">Jump to Nav</a>
-
-<header>
- <h1 class="docs-page-title">Thumbnail</h1>
-
-
- <p class="lead docs-page-lead">If you're going to use an image as an anchor, we've got you covered. All you gotta do is add one class to your image and voilà!</p>
-
- <ul class="menu simple docs-contribute-menu">
- <li><a href="https://github.com/zurb/foundation-sites/edit/master/docs/pages/thumbnail.md" target="_blank"><i class="fi-pencil"></i>Edit this Page</a></li>
- <li><a href="https://github.com/zurb/foundation-sites/issues/new?title=%5BThumbnail%5D%20ISSUE%20NAME%20HERE" target="_blank"><i class="fi-social-github"></i>Report a Bug</a></li>
- <li><a href="https://get.foundation/forum" target="_blank"><i class="fi-comment"></i>Get Help</a></li>
- </ul>
-</header>
-
-<hr>
-
-<div class="row">
-
-<div class="large-9 columns" id="docs">
-
-<p>The <code>.thumbnail</code> class can be applied directly to an <code><img></code> element, or an <code><a></code> that wraps it. Make sure the <code><img></code> has an <code>alt</code> attribute that describes the contents of the image.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"thumbnail"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"assets/img/thumbnail/01.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Photo of Uranus."</span>></span></code></pre></div><div class="row">
- <div class="small-4 columns">
- <img class="thumbnail" src="assets/img/thumbnail/01.jpg" alt="Photo of Uranus.">
- </div>
- <div class="small-4 columns">
- <img class="thumbnail" src="assets/img/thumbnail/02.jpg" alt="Photo of Neptune.">
- </div>
- <div class="small-4 columns">
- <img class="thumbnail" src="assets/img/thumbnail/03.jpg" alt="Photo of Pluto.">
- </div>
-</div>
-
-
-<hr>
-<section>
- <h2 id="sass-reference" class="docs-heading" data-magellan-target="sass-reference">Sass Reference<a class="docs-heading-icon" href="#sass-reference"></a></h2>
-
- <section>
- <h3 id="sass-variables" class="docs-heading">Variables<a class="docs-heading-icon" href="#sass-variables"></a></h3>
-
- <p>The default styles of this component can be customized using these Sass variables in your project's <a href="sass.html#the-settings-file">settings file</a>.</p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td class="name"><code>$thumbnail-border</code></td>
- <td>Border</td>
- <td class="border"><code>solid 4px $white</code></td>
- <td><p>Border around thumbnail images.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$thumbnail-margin-bottom</code></td>
- <td>Length</td>
- <td class="length"><code>$global-margin</code></td>
- <td><p>Bottom margin for thumbnail images.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$thumbnail-shadow</code></td>
- <td>Shadow</td>
- <td class="shadow"><code>0 0 0 1px rgba($black, 0.2)</code></td>
- <td><p>Box shadow under thumbnail images.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$thumbnail-shadow-hover</code></td>
- <td>Shadow</td>
- <td class="shadow"><code>0 0 6px 1px rgba($primary-color, 0.5)</code></td>
- <td><p>Box shadow under thumbnail images.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$thumbnail-transition</code></td>
- <td>Transition</td>
- <td class="transition"><code>box-shadow 200ms ease-out</code></td>
- <td><p>Transition proprties for thumbnail images.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$thumbnail-radius</code></td>
- <td>Number</td>
- <td class="number"><code>$global-radius</code></td>
- <td><p>Default radius for thumbnail images.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="sass-mixins" class="docs-heading">Mixins<a class="docs-heading-icon" href="#sass-mixins"></a></h3>
-
- <p>We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.</p>
-
-
- <section >
- <h4 id="thumbnail" class="docs-heading">thumbnail<a class="docs-heading-icon" href="#thumbnail"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> thumbnail;</code></pre>
- </div>
-
- <p>Adds thumbnail styles to an element.</p>
-
-
-
-
-
- </section>
-
-
-
-
-
- </section>
-
-
-</section>
-
-
-<!-- <hr> -->
-<!-- <section class="docs-building-blocks">
- <h2 id="building-blocks" class="docs-heading" data-magellan-target="building-blocks">Building Blocks<a class="docs-heading-icon" href="#building-blocks"></a></h2>
-
- <p><a href="http://zurb.com/building-blocks">Building Blocks</a> is a ZURB-curated resource with useful code snippets that use Foundation components. Here are a few for this component:</p>
-
- <div class="warning callout">
- <p>These are placeholder items. If you have ideas for building blocks for this component, <a href="https://github.com/zurb/foundation-sites-6/issues/118">we're taking ideas on GitHub</a>.</p>
- </div>
-
- <div data-building-blocks></div>
-</section> -->
-
-</div>
-
-<div class="large-3 columns" data-sticky-container>
- <nav class="columns docs-toc-wrap" data-sticky data-anchor="docs" data-sticky-on="large">
- <div class="docs-toc hide" id="docsTOC">
- <ul class="vertical menu" data-docs-toc>
- <li class="docs-nav-title">On this page:</li>
- </ul>
- </div>
- <div class="foundation-toc-ad-unit" id="TOCAdUnit">
- </div>
- </nav>
-</div>
-
-</div>
-
-</article>
-
- </div>
- <div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
- <ul class="vertical menu docs-nav" id="docs-menu">
- <p class="docs-nav-version">
- <span data-docs-version></span>
- <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">(Changelog)</a>
- </p>
-
- <li class="docs-nav-title">Getting Started</li>
- <li><a href="installation.html">Installation</a></li>
- <li><a href="starter-projects.html">Starter Projects</a></li>
- <li><a href="compatibility.html">Compatibility</a></li>
- <li><a href="accessibility.html">Accessibility</a></li>
- <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
-
- <li class="docs-nav-title">Setup</li>
- <li><a href="global.html">Global Styles</a></li>
- <li><a href="rtl.html">Right-to-Left Support</a></li>
- <li><a href="flexbox.html">Flexbox</a></li>
- <li><a href="sass.html">Sass</a></li>
- <li><a href="javascript.html">JavaScript</a></li>
- <li><a href="javascript-utilities.html">JavaScript Utilities</a></li>
- <li><a href="media-queries.html">Media Queries</a></li>
-
- <li class="docs-nav-title">General</li>
- <li><a href="grid.html">Grid</a></li>
- <li><a href="flex-grid.html">Flex Grid</a></li>
- <li><a href="forms.html">Forms</a></li>
- <li><a href="visibility.html">Visibility Classes</a></li>
- <li><a href="float-classes.html">Float Classes</a></li>
-
- <li class="docs-nav-title">Typography</li>
- <li><a href="typography-base.html">Base Styles</a></li>
- <li><a href="typography-helpers.html">Helper Classes</a></li>
-
- <li class="docs-nav-title">Controls</li>
- <li><a href="button.html">Button</a></li>
- <li><a href="button-group.html">Button Group</a></li>
- <li><a href="close-button.html">Close Button</a></li>
- <li><a href="slider.html">Slider <span class="label">JS</span></a></li>
- <li><a href="switch.html">Switch</a></li>
-
- <li class="docs-nav-title">Navigation</li>
- <li><a href="navigation.html">Overview</a></li>
- <li><a href="menu.html">Menu</a></li>
- <li><a href="dropdown-menu.html">Dropdown Menu <span class="label">JS</span></a></li>
- <li><a href="drilldown-menu.html">Drilldown Menu <span class="label">JS</span></a></li>
- <li><a href="accordion-menu.html">Accordion Menu <span class="label">JS</span></a></li>
- <li><a href="top-bar.html">Top Bar</a></li>
- <li><a href="responsive-navigation.html">Responsive Navigation</a></li>
- <li><a href="magellan.html">Magellan <span class="label">JS</span></a></li>
- <li><a href="pagination.html">Pagination</a></li>
- <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
-
- <li class="docs-nav-title">Containers</li>
- <li><a href="accordion.html">Accordion <span class="label">JS</span></a></li>
- <li><a href="callout.html">Callout</a></li>
- <li><a href="dropdown.html">Dropdown <span class="label">JS</span></a></li>
- <li><a href="media-object.html">Media Object</a></li>
- <li><a href="off-canvas.html">Off-canvas <span class="label">JS</span></a></li>
- <li><a href="reveal.html">Reveal <span class="label">JS</span> <small>Modal</small></a></li>
- <li><a href="table.html">Table</a></li>
- <li><a href="tabs.html">Tabs <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Media</li>
- <li><a href="badge.html">Badge</a></li>
- <li><a href="flex-video.html">Flex Video</a></li>
- <li><a href="label.html">Label</a></li>
- <li><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
- <li><a href="progress-bar.html">Progress Bar</a></li>
- <li class="current"><a href="thumbnail.html">Thumbnail</a></li>
- <li><a href="tooltip.html">Tooltip <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Plugins</li>
- <li><a href="abide.html">Abide <small>Form Validation</small></a></li>
- <li><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
- <li><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
- <li><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
- <li><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
-
- <li class="docs-nav-title">Sass</li>
- <li><a href="sass-functions.html">Functions</a></li>
- <li><a href="sass-mixins.html">Mixins</a></li>
-
- <li class="docs-nav-title">Libraries</li>
- <li><a href="motion-ui.html">Motion UI</a></li>
- <li><a href="panini.html">Panini</a></li>
- <li><a href="style-sherpa.html">Style Sherpa</a></li>
-
- <li class="docs-nav-title">Older Versions</li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
- <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
- <li><a href="https://get.foundation/sites/docs/v/3.2.5/">Foundation 3</a></li>
- <li><a href="https://get.foundation/sites/docs/v/2.2.1/">Foundation 2</a></li>
- </ul>
-
- </div>
- </div>
-
- <!-- Small Business(Docs) -->
- <section id="studiosCallout">
- <div class="row">
- <div class="medium-4 large-4 columns">
- <img src="https://get.foundation/assets/img/smallbiz-footer.svg" alt="">
- </div>
- <div class="medium-8 large-8 columns banner-info">
- <div class="row column property-label">ZURB Foundation</div>
- <h3 class="light">Yeah, we can help with that.</h3>
- <p class="lead"> We’ll collaborate with your team throughout the entire project life cycle. We’ll take your concept and move it through ideation, hi-fi wireframes, visual design and code, all while informing you on the whys and hows along the way.</p>
- <div class="course-buttons">
- <a href="https://get.foundation/get-involved/premium-support.html" class="studios button" data-zcom-event="studios_foundation_click" id="foundationSmallV1">Show Me How →</a>
- </div>
- </div>
- </div>
- </section>
-
- <div class="docs-newsletter">
- <div class="row">
- <div class="medium-7 large-8 columns">
- <a target="_blank" href="https://get.foundation/learn/responsive-reading.html">
- <h5 class="">Download ZURB’s 21 Responsive Trends That Will Shape 2017</h5>
- <p style="margin-bottom: 0;">Stay informed with amazing responsive trends each month from ZURB.</p>
- </a>
- </div>
- <div class="medium-5 large-4 footer-signup-form columns">
- <a style="margin-bottom: 0;" target="_blank" href="https://get.foundation/learn/responsive-reading.html" class="button expanded">Download the PDF</a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-top bg-fblue">
- <div class="row property">
- <div class="medium-4 columns">
- <div class="property-info">
- <h3>Foundation for Sites</h3>
- <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
- </p>
- </div>
- </div>
-
- <div class="medium-8 columns">
- <div class="row collapse">
- <div class="medium-4 columns">
- <div class="learn-links">
- <h4 class="hide-for-small">Want more?</h4>
- <ul>
- <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
- <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
- <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
- <li><a href="http://zurb.com/university/courses">Training</a></li>
- <li><a href="http://zurb.com/library">Design Resources</a></li>
- </ul>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="support-links">
- <h4 class="hide-for-small">Talk to us</h4>
- <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
- <p><a href="https://get.foundation/get-involved/contribute.html">Get involved in<br>our amazing community.</a></p>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="connect-links">
- <h4 class="hide-for-small">Stay Updated</h4>
- <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
- <a href="http://zurb.com/news" class="small button">Stay Connected</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="row global">
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/studios" class="footer-link-block services">
- <span class="title">Studios</span>
- <span>Helping more than 200 startups succeed since 1998.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="https://get.foundation/" class="footer-link-block foundation">
- <span class="title">Foundation</span>
- <span>The most advanced front-end framework in the world.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/notable" class="footer-link-block apps">
- <span class="title">Notable Design Apps</span>
- <span>Prototype, iterate and collect feedback on your products.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/university" class="footer-link-block expo">
- <span class="title">University</span>
- <span>Ideas, thoughts and design resources shared with you.</span>
- </a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-bottom">
- <div class="row">
- <div class="medium-4 medium-push-8 columns">
- <ul class="home-social">
- <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
- <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
- <li><a href="http://zurb.com/contact" class="mail"></a></li>
- </ul>
- </div>
- <div class="medium-8 medium-pull-4 columns">
- <a href="http://www.zurb.com" class="zurb-logo regular"></a>
- <ul class="zurb-links">
- <li><a href="http://zurb.com/about">About</a></li>
- <li><a href="http://zurb.com/blog">Blog</a></li>
- <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
- <li><a href="http://zurb.com/contact">Contact</a></li>
- <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
- </ul>
- <p class="copyright">© 1998‐2016 ZURB, Inc. All rights reserved.</p>
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- <script>
- var _gaq = _gaq || [];
- _gaq.push(
- ['_setAccount', 'UA-2195009-2'],
- ['_trackPageview'],
- ['b._setAccount', 'UA-2195009-27'],
- ['b._trackPageview']
- );
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
-
- <script src="assets/js/vendor.js?hash=053c35fed0dde473e9f17dd3f4ed94c7"></script>
- <script src="assets/js/foundation.js?hash=f0435a30f5b27ab304a4f44ca50f658e"></script>
- <script src="assets/js/docs.js?hash=50fcb5a7e7fec418eebd7c5ae2f5f3c5"></script>
- <script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
-</body>
-</html>
+++ /dev/null
-<!doctype html>
-<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
-<html class="no-js" lang="en" dir="ltr">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="Toggler makes it easy to toggle CSS or animate any element with a click.">
- <link rel="icon" href="assets/img/icons/foundation-favicon.ico" type="image/x-icon">
- <title>Foundation for Sites 6 Docs | Toggler</title>
- <link href="assets/css/docs.css?hash=d5e85f8f8a98cfffaf9f1e4dfb49bcab" rel="stylesheet" />
- <link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=722f5341a0e999c694a986ed99cc74e5" rel="stylesheet">
- <!-- <link rel="stylesheet" href="./node_modules/motion-ui/dist/motion-ui.css" /> -->
-</head>
-<body>
-
- <div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
-
- <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="mobile-ofc vertical menu">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
-
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/support.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/sort/unanswered">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
- </div>
-
- <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="vertical menu">
- <li><a href="#">Foundation</a></li>
- <li><a href="#">Dot</a></li>
- <li><a href="#">ZURB</a></li>
- <li><a href="#">Com</a></li>
- <li><a href="#">Slash</a></li>
- <li><a href="#">Sites</a></li>
- </ul>
- </div>
-
-
- <div class="off-canvas-content" data-off-canvas-content>
- <!-- Info Banner For Announcements or Links -->
- <!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
- <div class="info">
- <h5>Foundation 6 is here!</h5>
- </div>
- </a> -->
-
- <nav class="marketing-topbar show-for-medium">
-
- <ul class="menu">
- <li class="topbar-title"><a href="https://get.foundation/index.html"><img src="assets/img/logos/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
- </ul>
-
- <ul class="dropdown menu" data-dropdown-menu data-click-open="false">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/" target="_blank">F5 Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="https://get.foundation/emails/docs/" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
-
- </nav>
-
- <div class="title-bar hide-for-medium">
- <div class="title-bar-left">
- <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
- <span class="title-bar-title">Foundation</span>
- </div>
- </div>
-
-
- <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
-
- <div class="expanded row">
- <div class="medium-9 large-10 medium-push-3 large-push-2 columns">
-
-<article class="docs-component" id="docs-toggler">
-
-<a href="#docs-menu" class="small secondary expanded button hide-for-medium">Jump to Nav</a>
-
-<header>
- <h1 class="docs-page-title">Toggler</h1>
-
- <span data-tooltip title="Requires a JavaScript library." class="docs-js label">JavaScript</span>
- <span data-tooltip title="Supports Motion UI transitions." class="docs-mui label">Motion UI</span>
-
- <p class="lead docs-page-lead">Toggler makes it easy to toggle CSS or animate any element with a click.</p>
-
- <ul class="menu simple docs-contribute-menu">
- <li><a href="https://github.com/zurb/foundation-sites/edit/master/docs/pages/toggler.md" target="_blank"><i class="fi-pencil"></i>Edit this Page</a></li>
- <li><a href="https://github.com/zurb/foundation-sites/issues/new?title=%5BToggler%5D%20ISSUE%20NAME%20HERE" target="_blank"><i class="fi-social-github"></i>Report a Bug</a></li>
- <li><a href="https://get.foundation/forum" target="_blank"><i class="fi-comment"></i>Get Help</a></li>
- </ul>
-</header>
-
-<hr>
-
-<div class="row">
-
-<div class="large-9 columns" id="docs">
-
-<h2 id="toggle-a-css-class" class="docs-heading" data-magellan-target="toggle-a-css-class">Toggle a CSS class<a class="docs-heading-icon" href="#toggle-a-css-class"></a></h2><p>To setup a class toggle, start by adding the attribute <code>data-toggler</code> to an element. The value of <code>data-toggler</code> is the class you want to toggle. Also give the element a unique ID so it can be targeted.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"menuBar"</span> <span class="hljs-attr">data-toggler</span>=<span class="hljs-string">".expanded"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>One<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Two<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Three<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Four<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">ul</span>></span></code></pre></div><p>Then, add <code>data-toggle</code> to any element, with the ID of the target as the value of the attribute. Now, any time you click on this element, the class will toggle on and off on the target.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">p</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">data-toggle</span>=<span class="hljs-string">"menuBar"</span>></span>Expand!<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">p</span>></span></code></pre></div><p><a data-toggle="menuBar">Expand!</a></p>
-
-<ul class="menu" id="menuBar" data-toggler=".expanded">
- <li><a href="#">One</a></li>
- <li><a href="#">Two</a></li>
- <li><a href="#">Three</a></li>
- <li><a href="#">Four</a></li>
-</ul>
-
-<hr>
-<h2 id="toggle-with-animation" class="docs-heading" data-magellan-target="toggle-with-animation">Toggle with Animation<a class="docs-heading-icon" href="#toggle-with-animation"></a></h2><p>Instead of toggling a class, you can also toggle visibility. When toggled, the element comes into or out of view using a Motion UI class.</p>
-<p>Instead of <code>data-toggler</code>, add the attribute <code>data-animate</code>. The value of the attribute is the <em>in animation</em> you want, followed by the <em>out animation</em>.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">p</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">data-toggle</span>=<span class="hljs-string">"panel"</span>></span>Toggle Panel<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">p</span>></span>
-
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"callout"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"panel"</span> <span class="hljs-attr">data-toggler</span> <span class="hljs-attr">data-animate</span>=<span class="hljs-string">"hinge-in-from-top spin-out"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">h4</span>></span>Hello!<span class="hljs-tag"></<span class="hljs-name">h4</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta quas optio alias voluptas nobis iusto mollitia asperiores incidunt reprehenderit doloribus voluptatibus officiis minus, inventore, quasi nisi. Consequuntur, quidem. Sint, dicta?<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><p><a data-toggle="panel">Toggle Panel</a></p>
-
-<div class="callout" id="panel" data-toggler data-animate="hinge-in-from-top spin-out">
- <h4>Hello!</h4>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta quas optio alias voluptas nobis iusto mollitia asperiores incidunt reprehenderit doloribus voluptatibus officiis minus, inventore, quasi nisi. Consequuntur, quidem. Sint, dicta?</p>
-</div></div><hr>
-<h2 id="mark-as-closable" class="docs-heading" data-magellan-target="mark-as-closable">Mark as Closable<a class="docs-heading-icon" href="#mark-as-closable"></a></h2><p>To create an element that can be closed once, add the attribute <code>data-closable</code>. Then add a click trigger inside the element using <code>data-close</code>.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"callout"</span> <span class="hljs-attr">data-closable</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"close-button"</span> <span class="hljs-attr">data-close</span>></span>&times;<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore praesentium sint alias dolorum qui vel quaerat, libero consequatur non esse asperiores veritatis commodi, odit eum ipsam nemo dicta iste aliquam.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="callout" data-closable>
- <button class="close-button" data-close>×</button>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore praesentium sint alias dolorum qui vel quaerat, libero consequatur non esse asperiores veritatis commodi, odit eum ipsam nemo dicta iste aliquam.</p>
-</div></div><hr>
-<h3 id="with-alternate-animation" class="docs-heading">With Alternate Animation<a class="docs-heading-icon" href="#with-alternate-animation"></a></h3><p><code>data-closable</code> can be configured with a custom exit animation.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"callout"</span> <span class="hljs-attr">data-closable</span>=<span class="hljs-string">"slide-out-right"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"close-button"</span> <span class="hljs-attr">data-close</span>></span>&times;<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore praesentium sint alias dolorum qui vel quaerat, libero consequatur non esse asperiores veritatis commodi, odit eum ipsam nemo dicta iste aliquam.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="callout" data-closable="slide-out-right">
- <button class="close-button" data-close>×</button>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore praesentium sint alias dolorum qui vel quaerat, libero consequatur non esse asperiores veritatis commodi, odit eum ipsam nemo dicta iste aliquam.</p>
-</div></div><hr>
-<h3 id="toggle-on-focus" class="docs-heading">Toggle on focus<a class="docs-heading-icon" href="#toggle-on-focus"></a></h3><p>The <code>data-toggle</code> attribute only toggles classes/visibility on click. You can also have the toggle fire when an element is <em>focused</em> or <em>unfocused</em> using <code>data-toggle-focus</code>.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">data-toggle-focus</span>=<span class="hljs-string">"form-callout"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Click in here to reveal extra content"</span>></span>
-
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"secondary callout is-hidden"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"form-callout"</span> <span class="hljs-attr">data-toggler</span>=<span class="hljs-string">"is-hidden"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span>></span>This is only visible when the above field has focus.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><input type="text" data-toggle-focus="form-callout" placeholder="Click in here to reveal extra content">
-
-<div class="secondary callout is-hidden" id="form-callout" data-toggler="is-hidden">
- <p>This is only visible when the above field has focus.</p>
-</div></div><hr>
-<h2 id="multiple-targets" class="docs-heading" data-magellan-target="multiple-targets">Multiple Targets<a class="docs-heading-icon" href="#multiple-targets"></a></h2><p>The <code>data-toggle</code>, <code>data-close</code>, and <code>data-open</code> attributes can now target multiple elements! The syntax is simple; just pass a <em>space</em> separated list to the <code>data-x</code> attribute like so:</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">data-toggle</span>=<span class="hljs-string">"foo bar baz"</span>></span>Toggle things<span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></pre></div><p>Then the elements with ids of <code>foo</code>, <code>bar</code>, and <code>baz</code> will be toggled any time your button, (or any other element you choose), is clicked.</p>
-<p><button class="button primary" data-toggle="thumb1 thumb2 thumb3">Toggle All These</button></p>
-<div class="row">
- <div class="small-4 columns">
- <img class="thumbnail" id="thumb1" data-toggler data-animate="hinge-in-from-top spin-out" src="assets/img/thumbnail/01.jpg" alt="Photo of Uranus.">
- </div>
- <div class="small-4 columns">
- <img class="thumbnail" id="thumb2" data-toggler data-animate="hinge-in-from-top spin-out" src="assets/img/thumbnail/02.jpg" alt="Photo of Uranus.">
- </div>
- <div class="small-4 columns">
- <img class="thumbnail" id="thumb3" data-toggler data-animate="hinge-in-from-top spin-out" src="assets/img/thumbnail/03.jpg" alt="Photo of Uranus.">
- </div>
-</div>
-
-
-
-<hr>
-<section>
- <h2 id="javascript-reference" class="docs-heading" data-magellan-target="javascript-reference">JavaScript Reference<a class="docs-heading-icon" href="#javascript-reference"></a></h2>
-
-
- <section>
- <h3 id="js-module" class="docs-heading">Initializing<a class="docs-heading-icon" href="#js-module"></a></h3>
-
- <p>The file <code>foundation.toggler.js</code> must be included in your JavaScript to use this plugin, along with <code>foundation.core.js</code>. <strong>This plugin also requires these utility libraries:</strong></p>
-
-
- <ul>
- <li><code>foundation.util.motion.js</code></li>
- </ul>
-
- <ul>
- <li><code>foundation.util.triggers.js</code></li>
- </ul>
-
-
- </section>
-
-
- <section>
- <h3 id="js-class" class="docs-heading">Foundation.Toggler<a class="docs-heading-icon" href="#js-class"></a></h3>
-
- <p>Creates a new instance of Toggler.</p>
-
-
- <div class="docs-code"><pre><code><span class="hljs-keyword">var</span> elem = <span class="hljs-keyword">new</span> Foundation.Toggler(element, options);</code></pre></div>
-
- <p><strong>Fires these events:</strong>
- Toggler#event:init
- </p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>element</code></td>
- <td>Object</td>
- <td>jQuery object to add the trigger to.</td>
- </tr>
- <tr>
- <td><code>options</code></td>
- <td>Object</td>
- <td>Overrides to the default plugin settings.</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="js-options" class="docs-heading">Plugin Options<a class="docs-heading-icon" href="#js-options"></a></h3>
-
- <p>Use these options to customize an instance of Toggler. Plugin options can be set as individual data attributes, one combined <code>data-options</code> attribute, or as an object passed to the plugin's constructor. <a href="javascript.html#initializing">Learn more about how JavaScript plugins are initialized.</a></p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Default</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>data-animate</code></td>
- <td><code>false</code></td>
- <td>Tells the plugin if the element should animated when toggled.</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="js-events" class="docs-heading">Events<a class="docs-heading-icon" href="#js-events"></a></h3>
-
- <p>These events will fire from any element with a Toggler plugin attached.</p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>on.zf.toggler</code></td>
- <td>Fires if the target element has the class after a toggle.</td>
- </tr>
- <tr>
- <td><code>off.zf.toggler</code></td>
- <td>Fires if the target element does not have the class after a toggle.</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="js-functions" class="docs-heading">Methods<a class="docs-heading-icon" href="#js-functions"></a></h3>
-
- <section>
- <h4 id="toggle" class="docs-heading">toggle<a class="docs-heading-icon" href="#toggle"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'toggle'</span>);</code></pre>
- </div>
-
- <p>Toggles the target class on the target element. An event is fired from the original trigger depending on if the resultant state was "on" or "off".</p>
-
-
- <p><strong>Fires these events:</strong>
- Toggler#event:on
- Toggler#event:off
- </p>
-
-
- <hr>
- </section>
- <section>
- <h4 id="destroy" class="docs-heading">destroy<a class="docs-heading-icon" href="#destroy"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'destroy'</span>);</code></pre>
- </div>
-
- <p>Destroys the instance of Toggler on the element.</p>
-
-
-
-
-
- </section>
- </section>
-</section>
-
-
-</div>
-
-<div class="large-3 columns" data-sticky-container>
- <nav class="columns docs-toc-wrap" data-sticky data-anchor="docs" data-sticky-on="large">
- <div class="docs-toc hide" id="docsTOC">
- <ul class="vertical menu" data-docs-toc>
- <li class="docs-nav-title">On this page:</li>
- </ul>
- </div>
- <div class="foundation-toc-ad-unit" id="TOCAdUnit">
- </div>
- </nav>
-</div>
-
-</div>
-
-</article>
-
- </div>
- <div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
- <ul class="vertical menu docs-nav" id="docs-menu">
- <p class="docs-nav-version">
- <span data-docs-version></span>
- <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">(Changelog)</a>
- </p>
-
- <li class="docs-nav-title">Getting Started</li>
- <li><a href="installation.html">Installation</a></li>
- <li><a href="starter-projects.html">Starter Projects</a></li>
- <li><a href="compatibility.html">Compatibility</a></li>
- <li><a href="accessibility.html">Accessibility</a></li>
- <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
-
- <li class="docs-nav-title">Setup</li>
- <li><a href="global.html">Global Styles</a></li>
- <li><a href="rtl.html">Right-to-Left Support</a></li>
- <li><a href="flexbox.html">Flexbox</a></li>
- <li><a href="sass.html">Sass</a></li>
- <li><a href="javascript.html">JavaScript</a></li>
- <li><a href="javascript-utilities.html">JavaScript Utilities</a></li>
- <li><a href="media-queries.html">Media Queries</a></li>
-
- <li class="docs-nav-title">General</li>
- <li><a href="grid.html">Grid</a></li>
- <li><a href="flex-grid.html">Flex Grid</a></li>
- <li><a href="forms.html">Forms</a></li>
- <li><a href="visibility.html">Visibility Classes</a></li>
- <li><a href="float-classes.html">Float Classes</a></li>
-
- <li class="docs-nav-title">Typography</li>
- <li><a href="typography-base.html">Base Styles</a></li>
- <li><a href="typography-helpers.html">Helper Classes</a></li>
-
- <li class="docs-nav-title">Controls</li>
- <li><a href="button.html">Button</a></li>
- <li><a href="button-group.html">Button Group</a></li>
- <li><a href="close-button.html">Close Button</a></li>
- <li><a href="slider.html">Slider <span class="label">JS</span></a></li>
- <li><a href="switch.html">Switch</a></li>
-
- <li class="docs-nav-title">Navigation</li>
- <li><a href="navigation.html">Overview</a></li>
- <li><a href="menu.html">Menu</a></li>
- <li><a href="dropdown-menu.html">Dropdown Menu <span class="label">JS</span></a></li>
- <li><a href="drilldown-menu.html">Drilldown Menu <span class="label">JS</span></a></li>
- <li><a href="accordion-menu.html">Accordion Menu <span class="label">JS</span></a></li>
- <li><a href="top-bar.html">Top Bar</a></li>
- <li><a href="responsive-navigation.html">Responsive Navigation</a></li>
- <li><a href="magellan.html">Magellan <span class="label">JS</span></a></li>
- <li><a href="pagination.html">Pagination</a></li>
- <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
-
- <li class="docs-nav-title">Containers</li>
- <li><a href="accordion.html">Accordion <span class="label">JS</span></a></li>
- <li><a href="callout.html">Callout</a></li>
- <li><a href="dropdown.html">Dropdown <span class="label">JS</span></a></li>
- <li><a href="media-object.html">Media Object</a></li>
- <li><a href="off-canvas.html">Off-canvas <span class="label">JS</span></a></li>
- <li><a href="reveal.html">Reveal <span class="label">JS</span> <small>Modal</small></a></li>
- <li><a href="table.html">Table</a></li>
- <li><a href="tabs.html">Tabs <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Media</li>
- <li><a href="badge.html">Badge</a></li>
- <li><a href="flex-video.html">Flex Video</a></li>
- <li><a href="label.html">Label</a></li>
- <li><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
- <li><a href="progress-bar.html">Progress Bar</a></li>
- <li><a href="thumbnail.html">Thumbnail</a></li>
- <li><a href="tooltip.html">Tooltip <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Plugins</li>
- <li><a href="abide.html">Abide <small>Form Validation</small></a></li>
- <li><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
- <li><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
- <li class="current"><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
- <li><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
-
- <li class="docs-nav-title">Sass</li>
- <li><a href="sass-functions.html">Functions</a></li>
- <li><a href="sass-mixins.html">Mixins</a></li>
-
- <li class="docs-nav-title">Libraries</li>
- <li><a href="motion-ui.html">Motion UI</a></li>
- <li><a href="panini.html">Panini</a></li>
- <li><a href="style-sherpa.html">Style Sherpa</a></li>
-
- <li class="docs-nav-title">Older Versions</li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
- <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
- <li><a href="https://get.foundation/sites/docs/v/3.2.5/">Foundation 3</a></li>
- <li><a href="https://get.foundation/sites/docs/v/2.2.1/">Foundation 2</a></li>
- </ul>
-
- </div>
- </div>
-
- <!-- Small Business(Docs) -->
- <section id="studiosCallout">
- <div class="row">
- <div class="medium-4 large-4 columns">
- <img src="https://get.foundation/assets/img/smallbiz-footer.svg" alt="">
- </div>
- <div class="medium-8 large-8 columns banner-info">
- <div class="row column property-label">ZURB Foundation</div>
- <h3 class="light">Yeah, we can help with that.</h3>
- <p class="lead"> We’ll collaborate with your team throughout the entire project life cycle. We’ll take your concept and move it through ideation, hi-fi wireframes, visual design and code, all while informing you on the whys and hows along the way.</p>
- <div class="course-buttons">
- <a href="https://get.foundation/get-involved/premium-support.html" class="studios button" data-zcom-event="studios_foundation_click" id="foundationSmallV1">Show Me How →</a>
- </div>
- </div>
- </div>
- </section>
-
- <div class="docs-newsletter">
- <div class="row">
- <div class="medium-7 large-8 columns">
- <a target="_blank" href="https://get.foundation/learn/responsive-reading.html">
- <h5 class="">Download ZURB’s 21 Responsive Trends That Will Shape 2017</h5>
- <p style="margin-bottom: 0;">Stay informed with amazing responsive trends each month from ZURB.</p>
- </a>
- </div>
- <div class="medium-5 large-4 footer-signup-form columns">
- <a style="margin-bottom: 0;" target="_blank" href="https://get.foundation/learn/responsive-reading.html" class="button expanded">Download the PDF</a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-top bg-fblue">
- <div class="row property">
- <div class="medium-4 columns">
- <div class="property-info">
- <h3>Foundation for Sites</h3>
- <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
- </p>
- </div>
- </div>
-
- <div class="medium-8 columns">
- <div class="row collapse">
- <div class="medium-4 columns">
- <div class="learn-links">
- <h4 class="hide-for-small">Want more?</h4>
- <ul>
- <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
- <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
- <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
- <li><a href="http://zurb.com/university/courses">Training</a></li>
- <li><a href="http://zurb.com/library">Design Resources</a></li>
- </ul>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="support-links">
- <h4 class="hide-for-small">Talk to us</h4>
- <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
- <p><a href="https://get.foundation/get-involved/contribute.html">Get involved in<br>our amazing community.</a></p>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="connect-links">
- <h4 class="hide-for-small">Stay Updated</h4>
- <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
- <a href="http://zurb.com/news" class="small button">Stay Connected</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="row global">
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/studios" class="footer-link-block services">
- <span class="title">Studios</span>
- <span>Helping more than 200 startups succeed since 1998.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="https://get.foundation/" class="footer-link-block foundation">
- <span class="title">Foundation</span>
- <span>The most advanced front-end framework in the world.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/notable" class="footer-link-block apps">
- <span class="title">Notable Design Apps</span>
- <span>Prototype, iterate and collect feedback on your products.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/university" class="footer-link-block expo">
- <span class="title">University</span>
- <span>Ideas, thoughts and design resources shared with you.</span>
- </a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-bottom">
- <div class="row">
- <div class="medium-4 medium-push-8 columns">
- <ul class="home-social">
- <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
- <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
- <li><a href="http://zurb.com/contact" class="mail"></a></li>
- </ul>
- </div>
- <div class="medium-8 medium-pull-4 columns">
- <a href="http://www.zurb.com" class="zurb-logo regular"></a>
- <ul class="zurb-links">
- <li><a href="http://zurb.com/about">About</a></li>
- <li><a href="http://zurb.com/blog">Blog</a></li>
- <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
- <li><a href="http://zurb.com/contact">Contact</a></li>
- <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
- </ul>
- <p class="copyright">© 1998‐2016 ZURB, Inc. All rights reserved.</p>
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- <script>
- var _gaq = _gaq || [];
- _gaq.push(
- ['_setAccount', 'UA-2195009-2'],
- ['_trackPageview'],
- ['b._setAccount', 'UA-2195009-27'],
- ['b._trackPageview']
- );
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
-
- <script src="assets/js/vendor.js?hash=51ed3586ed2e5c8b4f849359f816c413"></script>
- <script src="assets/js/foundation.js?hash=c1b0e3d363479691d0819fa2055cc84a"></script>
- <script src="assets/js/docs.js?hash=e1fdc494f99fd64f07919e020734e542"></script>
- <script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
-</body>
-</html>
+++ /dev/null
-<!doctype html>
-<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
-<html class="no-js" lang="en" dir="ltr">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="Tooltips? More like <em>Cooltips</em>. But really though, tooltips are nifty for displaying extended information for a term or action on a page.">
- <link rel="icon" href="assets/img/icons/foundation-favicon.ico" type="image/x-icon">
- <title>Foundation for Sites 6 Docs | Tooltip</title>
- <link href="assets/css/docs.css?hash=c8461ef556ebffaa6d5ad997113edd19" rel="stylesheet" />
- <link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=4a40a934d876c327961d4be23ac80c9e" rel="stylesheet">
- <!-- <link rel="stylesheet" href="./node_modules/motion-ui/dist/motion-ui.css" /> -->
-</head>
-<body>
-
- <div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
-
- <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="mobile-ofc vertical menu">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
-
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/support.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/sort/unanswered">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
- </div>
-
- <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="vertical menu">
- <li><a href="#">Foundation</a></li>
- <li><a href="#">Dot</a></li>
- <li><a href="#">ZURB</a></li>
- <li><a href="#">Com</a></li>
- <li><a href="#">Slash</a></li>
- <li><a href="#">Sites</a></li>
- </ul>
- </div>
-
-
- <div class="off-canvas-content" data-off-canvas-content>
- <!-- Info Banner For Announcements or Links -->
- <!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
- <div class="info">
- <h5>Foundation 6 is here!</h5>
- </div>
- </a> -->
-
- <nav class="marketing-topbar show-for-medium">
-
- <ul class="menu">
- <li class="topbar-title"><a href="https://get.foundation/index.html"><img src="assets/img/logos/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
- </ul>
-
- <ul class="dropdown menu" data-dropdown-menu data-click-open="false">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/" target="_blank">F5 Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="https://get.foundation/emails/docs/" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
-
- </nav>
-
- <div class="title-bar hide-for-medium">
- <div class="title-bar-left">
- <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
- <span class="title-bar-title">Foundation</span>
- </div>
- </div>
-
-
- <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
-
- <div class="expanded row">
- <div class="medium-9 large-10 medium-push-3 large-push-2 columns">
-
-<article class="docs-component" id="docs-tooltip">
-
-<a href="#docs-menu" class="small secondary expanded button hide-for-medium">Jump to Nav</a>
-
-<header>
- <h1 class="docs-page-title">Tooltip</h1>
-
- <span data-tooltip title="Requires a JavaScript library." class="docs-js label">JavaScript</span>
-
- <p class="lead docs-page-lead">Tooltips? More like <em>Cooltips</em>. But really though, tooltips are nifty for displaying extended information for a term or action on a page.</p>
-
- <ul class="menu simple docs-contribute-menu">
- <li><a href="https://github.com/zurb/foundation-sites/edit/master/docs/pages/tooltip.md" target="_blank"><i class="fi-pencil"></i>Edit this Page</a></li>
- <li><a href="https://github.com/zurb/foundation-sites/issues/new?title=%5BTooltip%5D%20ISSUE%20NAME%20HERE" target="_blank"><i class="fi-social-github"></i>Report a Bug</a></li>
- <li><a href="https://get.foundation/forum" target="_blank"><i class="fi-comment"></i>Get Help</a></li>
- </ul>
-</header>
-
-<hr>
-
-<div class="row">
-
-<div class="large-9 columns" id="docs">
-
-<h2 id="basic-tooltip" class="docs-heading" data-magellan-target="basic-tooltip">Basic Tooltip<a class="docs-heading-icon" href="#basic-tooltip"></a></h2><p>By default, a tooltip appears below the defined term on hover.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">p</span>></span>
-The <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">data-tooltip</span> <span class="hljs-attr">aria-haspopup</span>=<span class="hljs-string">"true"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"has-tip"</span> <span class="hljs-attr">data-disable-hover</span>=<span class="hljs-string">"false"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"1"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Fancy word for a beetle."</span>></span>scarabaeus<span class="hljs-tag"></<span class="hljs-name">span</span>></span> hung quite clear of any branches, and, if allowed to fall, would have fallen at our feet. Legrand immediately took the scythe, and cleared with it a circular space, three or four yards in diameter, just beneath the insect, and, having accomplished this, ordered Jupiter to let go the string and come down from the tree.
-<span class="hljs-tag"></<span class="hljs-name">p</span>></span></code></pre></div>
-
-<div class="docs-code-live"><p>
-The <span data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover="false" tabindex="1" title="Fancy word for a beetle.">scarabaeus</span> hung quite clear of any branches, and, if allowed to fall, would have fallen at our feet. Legrand immediately took the scythe, and cleared with it a circular space, three or four yards in diameter, just beneath the insect, and, having accomplished this, ordered Jupiter to let go the string and come down from the tree.
-</p></div><hr>
-<h2 id="tooltip-top" class="docs-heading" data-magellan-target="tooltip-top">Tooltip Top<a class="docs-heading-icon" href="#tooltip-top"></a></h2><p>To get a tip-top top tooltip (lol), just add the class <code>.top</code> to the <code><span></code> element.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">p</span>></span>
-...clearing away the brambles with the
-<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">data-tooltip</span> <span class="hljs-attr">aria-haspopup</span>=<span class="hljs-string">"true"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"has-tip top"</span> <span class="hljs-attr">data-disable-hover</span>=<span class="hljs-string">"false"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"2"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"A tool used for cutting crops."</span>></span>scythe.<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
-At the spot thus attained a second peg was driven, and about this, as a centre, a rude circle, about four feet in diameter, described. Taking now a spade himself, and giving one to Jupiter and one to me, Legrand begged us to set about one to digging as quickly as possible.
-<span class="hljs-tag"></<span class="hljs-name">p</span>></span></code></pre></div>
-
-<div class="docs-code-live"><p>
-...clearing away the brambles with the
-<span data-tooltip aria-haspopup="true" class="has-tip top" data-disable-hover="false" tabindex="2" title="A tool used for cutting crops.">scythe.</span>
-At the spot thus attained a second peg was driven, and about this, as a centre, a rude circle, about four feet in diameter, described. Taking now a spade himself, and giving one to Jupiter and one to me, Legrand begged us to set about one to digging as quickly as possible.
-</p></div><hr>
-<h2 id="tooltip-clicking" class="docs-heading" data-magellan-target="tooltip-clicking">Tooltip clicking<a class="docs-heading-icon" href="#tooltip-clicking"></a></h2><p>By default, clicking on a tooltip will leave it open until you click somewhere else. However, you can disable that by adding data-click-open="false"</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">p</span>></span>
-this
-<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">data-tooltip</span> <span class="hljs-attr">aria-haspopup</span>=<span class="hljs-string">"true"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"has-tip top"</span> <span class="hljs-attr">data-disable-hover</span>=<span class="hljs-string">"false"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"2"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"You see? I'm open!"</span>></span>tooltip will stay open<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
-
-while
-<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">data-tooltip</span> <span class="hljs-attr">aria-haspopup</span>=<span class="hljs-string">"true"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"has-tip top"</span> <span class="hljs-attr">data-click-open</span>=<span class="hljs-string">"false"</span> <span class="hljs-attr">data-disable-hover</span>=<span class="hljs-string">"false"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"2"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"I don't stay open"</span>></span>this one will only be open when hovered<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">p</span>></span></code></pre></div>
-
-<div class="docs-code-live"><p>
-this
-<span data-tooltip aria-haspopup="true" class="has-tip top" data-disable-hover="false" tabindex="2" title="You see? I'm open!">tooltip will stay open</span>
-
-while
-<span data-tooltip aria-haspopup="true" class="has-tip top" data-click-open="false" data-disable-hover="false" tabindex="2" title="I don't stay open">this one will only be open when hovered</span>
-</p></div><hr>
-<h2 id="tooltip-right-and-left" class="docs-heading" data-magellan-target="tooltip-right-and-left">Tooltip Right and Left<a class="docs-heading-icon" href="#tooltip-right-and-left"></a></h2><p>You can also position the tooltips to the right and left of the word by adding the classes <code>.right</code> or <code>.left</code> to the <code><span></code> element.</p>
-<div class="primary callout">
- <p>When using Foundation in <a href="rtl.html">right-to-left</a> mode, "right" still means right, and "left" still means left.</p>
-</div>
-
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">p</span>></span>
-To speak the truth, I had no especial relish for such amusement at any time, and, at that particular moment, would most willingly have declined it; for the night was coming on, and I felt much fatigued with the exercise already taken; but I saw no mode of escape, and was fearful of disturbing my poor friend's equanimity by a refusal. Could I have depended, indeed, upon Jupiter's aid, I would have had no hesitation in attempting to get the
-<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">data-tooltip</span> <span class="hljs-attr">aria-haspopup</span>=<span class="hljs-string">"true"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"has-tip right"</span> <span class="hljs-attr">data-disable-hover</span>=<span class="hljs-string">"false"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Someone not using Foundation."</span>></span>lunatic<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
-home by force; but I was too well assured of the old negro's disposition, to hope that he would assist me, under any circumstances, in a personal contest with his master. I made no doubt that the latter had been infected with some of the innumerable Southern superstitions about money buried, and that his phantasy had received confirmation by the finding of the scarabaeus, or, perhaps, by Jupiter's obstinacy in maintaining it to be "a bug of real gold." A mind disposed to lunacy would readily be led away by such suggestions -especially if chiming in with favorite preconceived ideas -and then I called to mind the poor fellow's speech about the beetle's being "the
-<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">data-tooltip</span> <span class="hljs-attr">aria-haspopup</span>=<span class="hljs-string">"true"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"has-tip left"</span> <span class="hljs-attr">data-disable-hover</span>=<span class="hljs-string">"false"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"4"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Sometimes referred to as a homepage."</span>></span>index<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
-of his fortune." Upon the whole, I was sadly vexed and puzzled, but, at length, I concluded to make a virtue of necessity -to dig with a good will, and thus the sooner to convince the visionary, by ocular demonstration, of the fallacy of the opinions he entertained. <span class="hljs-tag"></<span class="hljs-name">p</span>></span></code></pre></div>
-
-<div class="docs-code-live"><p>
-To speak the truth, I had no especial relish for such amusement at any time, and, at that particular moment, would most willingly have declined it; for the night was coming on, and I felt much fatigued with the exercise already taken; but I saw no mode of escape, and was fearful of disturbing my poor friend's equanimity by a refusal. Could I have depended, indeed, upon Jupiter's aid, I would have had no hesitation in attempting to get the
-<span data-tooltip aria-haspopup="true" class="has-tip right" data-disable-hover="false" tabindex="3" title="Someone not using Foundation.">lunatic</span>
-home by force; but I was too well assured of the old negro's disposition, to hope that he would assist me, under any circumstances, in a personal contest with his master. I made no doubt that the latter had been infected with some of the innumerable Southern superstitions about money buried, and that his phantasy had received confirmation by the finding of the scarabaeus, or, perhaps, by Jupiter's obstinacy in maintaining it to be "a bug of real gold." A mind disposed to lunacy would readily be led away by such suggestions -especially if chiming in with favorite preconceived ideas -and then I called to mind the poor fellow's speech about the beetle's being "the
-<span data-tooltip aria-haspopup="true" class="has-tip left" data-disable-hover="false" tabindex="4" title="Sometimes referred to as a homepage.">index</span>
-of his fortune." Upon the whole, I was sadly vexed and puzzled, but, at length, I concluded to make a virtue of necessity -to dig with a good will, and thus the sooner to convince the visionary, by ocular demonstration, of the fallacy of the opinions he entertained. </p></div>
-
-<hr>
-<section>
- <h2 id="sass-reference" class="docs-heading" data-magellan-target="sass-reference">Sass Reference<a class="docs-heading-icon" href="#sass-reference"></a></h2>
-
- <section>
- <h3 id="sass-variables" class="docs-heading">Variables<a class="docs-heading-icon" href="#sass-variables"></a></h3>
-
- <p>The default styles of this component can be customized using these Sass variables in your project's <a href="sass.html#the-settings-file">settings file</a>.</p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td class="name"><code>$has-tip-font-weight</code></td>
- <td>Keyword or Number</td>
- <td class="keyword | number"><code>$global-weight-bold</code></td>
- <td><p>Default font weight of the defined term.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$has-tip-border-bottom</code></td>
- <td>List</td>
- <td class="list"><code>dotted 1px $dark-gray</code></td>
- <td><p>Default border bottom of the defined term.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$tooltip-background-color</code></td>
- <td>Color</td>
- <td class="color"><code>$black</code></td>
- <td><p>Default color of the tooltip background.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$tooltip-color</code></td>
- <td>Color</td>
- <td class="color"><code>$white</code></td>
- <td><p>Default color of the tooltip font.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$tooltip-padding</code></td>
- <td>Number</td>
- <td class="number"><code>0.75rem</code></td>
- <td><p>Default padding of the tooltip background.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$tooltip-font-size</code></td>
- <td>Number</td>
- <td class="number"><code>$small-font-size</code></td>
- <td><p>Default font size of the tooltip text. By default, we recommend a smaller font size than the body copy.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$tooltip-pip-width</code></td>
- <td>Number</td>
- <td class="number"><code>0.75rem</code></td>
- <td><p>Default pip width for tooltips.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$tooltip-pip-height</code></td>
- <td>Number</td>
- <td class="number"><code>$tooltip-pip-width * 0.866</code></td>
- <td><p>Default pip height for tooltips. This is helpful for calculating the distance of the tooltip from the tooltip word.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$tooltip-radius</code></td>
- <td>Number</td>
- <td class="number"><code>$global-radius</code></td>
- <td><p>Default radius for tooltips.</p>
-</td>
- </tr>
- </table>
- </section>
-
-
-
-</section>
-
-<hr>
-<section>
- <h2 id="javascript-reference" class="docs-heading" data-magellan-target="javascript-reference">JavaScript Reference<a class="docs-heading-icon" href="#javascript-reference"></a></h2>
-
-
- <section>
- <h3 id="js-module" class="docs-heading">Initializing<a class="docs-heading-icon" href="#js-module"></a></h3>
-
- <p>The file <code>foundation.tooltip.js</code> must be included in your JavaScript to use this plugin, along with <code>foundation.core.js</code>. <strong>This plugin also requires these utility libraries:</strong></p>
-
-
- <ul>
- <li><code>foundation.util.box.js</code></li>
- </ul>
-
- <ul>
- <li><code>foundation.util.triggers.js</code></li>
- </ul>
-
-
- </section>
-
-
- <section>
- <h3 id="js-class" class="docs-heading">Foundation.Tooltip<a class="docs-heading-icon" href="#js-class"></a></h3>
-
- <p>Creates a new instance of a Tooltip.</p>
-
-
- <div class="docs-code"><pre><code><span class="hljs-keyword">var</span> elem = <span class="hljs-keyword">new</span> Foundation.Tooltip(element, options);</code></pre></div>
-
- <p><strong>Fires these events:</strong>
- Tooltip#event:init
- </p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>element</code></td>
- <td>jQuery</td>
- <td>jQuery object to attach a tooltip to.</td>
- </tr>
- <tr>
- <td><code>options</code></td>
- <td>Object</td>
- <td>object to extend the default configuration.</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="js-options" class="docs-heading">Plugin Options<a class="docs-heading-icon" href="#js-options"></a></h3>
-
- <p>Use these options to customize an instance of Tooltip. Plugin options can be set as individual data attributes, one combined <code>data-options</code> attribute, or as an object passed to the plugin's constructor. <a href="javascript.html#initializing">Learn more about how JavaScript plugins are initialized.</a></p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Default</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>data-hover-delay</code></td>
- <td><code>200</code></td>
- <td>Time, in ms, before a tooltip should open on hover.</td>
- </tr>
- <tr>
- <td><code>data-fade-in-duration</code></td>
- <td><code>150</code></td>
- <td>Time, in ms, a tooltip should take to fade into view.</td>
- </tr>
- <tr>
- <td><code>data-fade-out-duration</code></td>
- <td><code>150</code></td>
- <td>Time, in ms, a tooltip should take to fade out of view.</td>
- </tr>
- <tr>
- <td><code>data-disable-hover</code></td>
- <td><code>false</code></td>
- <td>Disables hover events from opening the tooltip if set to true</td>
- </tr>
- <tr>
- <td><code>data-template-classes</code></td>
- <td><code>my-cool-tip-class</code></td>
- <td>Optional addtional classes to apply to the tooltip template on init.</td>
- </tr>
- <tr>
- <td><code>data-tooltip-class</code></td>
- <td><code>tooltip</code></td>
- <td>Non-optional class added to tooltip templates. Foundation default is 'tooltip'.</td>
- </tr>
- <tr>
- <td><code>data-trigger-class</code></td>
- <td><code>has-tip</code></td>
- <td>Class applied to the tooltip anchor element.</td>
- </tr>
- <tr>
- <td><code>data-show-on</code></td>
- <td><code>small</code></td>
- <td>Minimum breakpoint size at which to open the tooltip.</td>
- </tr>
- <tr>
- <td><code>data-template</code></td>
- <td><code><div class="tooltip"></div></code></td>
- <td>Custom template to be used to generate markup for tooltip.</td>
- </tr>
- <tr>
- <td><code>data-tip-text</code></td>
- <td><code>Some cool space fact here.</code></td>
- <td>Text displayed in the tooltip template on open.</td>
- </tr>
- <tr>
- <td><code>data-click-open</code></td>
- <td><code>true</code></td>
- <td>Allows the tooltip to remain open if triggered with a click or touch event.</td>
- </tr>
- <tr>
- <td><code>data-position-class</code></td>
- <td><code>top</code></td>
- <td>Additional positioning classes, set by the JS</td>
- </tr>
- <tr>
- <td><code>data-v-offset</code></td>
- <td><code>10</code></td>
- <td>Distance, in pixels, the template should push away from the anchor on the Y axis.</td>
- </tr>
- <tr>
- <td><code>data-h-offset</code></td>
- <td><code>12</code></td>
- <td>Distance, in pixels, the template should push away from the anchor on the X axis, if aligned to a side.</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="js-events" class="docs-heading">Events<a class="docs-heading-icon" href="#js-events"></a></h3>
-
- <p>These events will fire from any element with a Tooltip plugin attached.</p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>tooltip.zf.tooltip</code></td>
- <td>Fires to close all other open tooltips on the page</td>
- </tr>
- <tr>
- <td><code>show.zf.tooltip</code></td>
- <td>Fires when the tooltip is shown</td>
- </tr>
- <tr>
- <td><code>hide.zf.tooltip</code></td>
- <td>fires when the tooltip is hidden</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="js-functions" class="docs-heading">Methods<a class="docs-heading-icon" href="#js-functions"></a></h3>
-
- <section>
- <h4 id="show" class="docs-heading">show<a class="docs-heading-icon" href="#show"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'show'</span>);</code></pre>
- </div>
-
- <p>reveals the tooltip, and fires an event to close any other open tooltips on the page</p>
-
-
- <p><strong>Fires these events:</strong>
- Tooltip#event:closeme
- Tooltip#event:show
- </p>
-
-
- <hr>
- </section>
- <section>
- <h4 id="hide" class="docs-heading">hide<a class="docs-heading-icon" href="#hide"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'hide'</span>);</code></pre>
- </div>
-
- <p>Hides the current tooltip, and resets the positioning class if it was changed due to collision</p>
-
-
- <p><strong>Fires these events:</strong>
- Tooltip#event:hide
- </p>
-
-
- <hr>
- </section>
- <section>
- <h4 id="toggle" class="docs-heading">toggle<a class="docs-heading-icon" href="#toggle"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'toggle'</span>);</code></pre>
- </div>
-
- <p>adds a toggle method, in addition to the static show() & hide() functions</p>
-
-
-
-
- <hr>
- </section>
- <section>
- <h4 id="destroy" class="docs-heading">destroy<a class="docs-heading-icon" href="#destroy"></a></h4>
-
- <div class="docs-code">
- <pre><code>$(<span class="hljs-string">'#element'</span>).foundation(<span class="hljs-string">'destroy'</span>);</code></pre>
- </div>
-
- <p>Destroys an instance of tooltip, removes template element from the view.</p>
-
-
-
-
-
- </section>
- </section>
-</section>
-
-<!-- <hr> -->
-<!-- <section class="docs-building-blocks">
- <h2 id="building-blocks" class="docs-heading" data-magellan-target="building-blocks">Building Blocks<a class="docs-heading-icon" href="#building-blocks"></a></h2>
-
- <p><a href="http://zurb.com/building-blocks">Building Blocks</a> is a ZURB-curated resource with useful code snippets that use Foundation components. Here are a few for this component:</p>
-
- <div class="warning callout">
- <p>These are placeholder items. If you have ideas for building blocks for this component, <a href="https://github.com/zurb/foundation-sites-6/issues/118">we're taking ideas on GitHub</a>.</p>
- </div>
-
- <div data-building-blocks></div>
-</section> -->
-
-</div>
-
-<div class="large-3 columns" data-sticky-container>
- <nav class="columns docs-toc-wrap" data-sticky data-anchor="docs" data-sticky-on="large">
- <div class="docs-toc hide" id="docsTOC">
- <ul class="vertical menu" data-docs-toc>
- <li class="docs-nav-title">On this page:</li>
- </ul>
- </div>
- <div class="foundation-toc-ad-unit" id="TOCAdUnit">
- </div>
- </nav>
-</div>
-
-</div>
-
-</article>
-
- </div>
- <div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
- <ul class="vertical menu docs-nav" id="docs-menu">
- <p class="docs-nav-version">
- <span data-docs-version></span>
- <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">(Changelog)</a>
- </p>
-
- <li class="docs-nav-title">Getting Started</li>
- <li><a href="installation.html">Installation</a></li>
- <li><a href="starter-projects.html">Starter Projects</a></li>
- <li><a href="compatibility.html">Compatibility</a></li>
- <li><a href="accessibility.html">Accessibility</a></li>
- <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
-
- <li class="docs-nav-title">Setup</li>
- <li><a href="global.html">Global Styles</a></li>
- <li><a href="rtl.html">Right-to-Left Support</a></li>
- <li><a href="flexbox.html">Flexbox</a></li>
- <li><a href="sass.html">Sass</a></li>
- <li><a href="javascript.html">JavaScript</a></li>
- <li><a href="javascript-utilities.html">JavaScript Utilities</a></li>
- <li><a href="media-queries.html">Media Queries</a></li>
-
- <li class="docs-nav-title">General</li>
- <li><a href="grid.html">Grid</a></li>
- <li><a href="flex-grid.html">Flex Grid</a></li>
- <li><a href="forms.html">Forms</a></li>
- <li><a href="visibility.html">Visibility Classes</a></li>
- <li><a href="float-classes.html">Float Classes</a></li>
-
- <li class="docs-nav-title">Typography</li>
- <li><a href="typography-base.html">Base Styles</a></li>
- <li><a href="typography-helpers.html">Helper Classes</a></li>
-
- <li class="docs-nav-title">Controls</li>
- <li><a href="button.html">Button</a></li>
- <li><a href="button-group.html">Button Group</a></li>
- <li><a href="close-button.html">Close Button</a></li>
- <li><a href="slider.html">Slider <span class="label">JS</span></a></li>
- <li><a href="switch.html">Switch</a></li>
-
- <li class="docs-nav-title">Navigation</li>
- <li><a href="navigation.html">Overview</a></li>
- <li><a href="menu.html">Menu</a></li>
- <li><a href="dropdown-menu.html">Dropdown Menu <span class="label">JS</span></a></li>
- <li><a href="drilldown-menu.html">Drilldown Menu <span class="label">JS</span></a></li>
- <li><a href="accordion-menu.html">Accordion Menu <span class="label">JS</span></a></li>
- <li><a href="top-bar.html">Top Bar</a></li>
- <li><a href="responsive-navigation.html">Responsive Navigation</a></li>
- <li><a href="magellan.html">Magellan <span class="label">JS</span></a></li>
- <li><a href="pagination.html">Pagination</a></li>
- <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
-
- <li class="docs-nav-title">Containers</li>
- <li><a href="accordion.html">Accordion <span class="label">JS</span></a></li>
- <li><a href="callout.html">Callout</a></li>
- <li><a href="dropdown.html">Dropdown <span class="label">JS</span></a></li>
- <li><a href="media-object.html">Media Object</a></li>
- <li><a href="off-canvas.html">Off-canvas <span class="label">JS</span></a></li>
- <li><a href="reveal.html">Reveal <span class="label">JS</span> <small>Modal</small></a></li>
- <li><a href="table.html">Table</a></li>
- <li><a href="tabs.html">Tabs <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Media</li>
- <li><a href="badge.html">Badge</a></li>
- <li><a href="flex-video.html">Flex Video</a></li>
- <li><a href="label.html">Label</a></li>
- <li><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
- <li><a href="progress-bar.html">Progress Bar</a></li>
- <li><a href="thumbnail.html">Thumbnail</a></li>
- <li class="current"><a href="tooltip.html">Tooltip <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Plugins</li>
- <li><a href="abide.html">Abide <small>Form Validation</small></a></li>
- <li><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
- <li><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
- <li><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
- <li><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
-
- <li class="docs-nav-title">Sass</li>
- <li><a href="sass-functions.html">Functions</a></li>
- <li><a href="sass-mixins.html">Mixins</a></li>
-
- <li class="docs-nav-title">Libraries</li>
- <li><a href="motion-ui.html">Motion UI</a></li>
- <li><a href="panini.html">Panini</a></li>
- <li><a href="style-sherpa.html">Style Sherpa</a></li>
-
- <li class="docs-nav-title">Older Versions</li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
- <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
- <li><a href="https://get.foundation/sites/docs/v/3.2.5/">Foundation 3</a></li>
- <li><a href="https://get.foundation/sites/docs/v/2.2.1/">Foundation 2</a></li>
- </ul>
-
- </div>
- </div>
-
- <!-- Small Business(Docs) -->
- <section id="studiosCallout">
- <div class="row">
- <div class="medium-4 large-4 columns">
- <img src="https://get.foundation/assets/img/smallbiz-footer.svg" alt="">
- </div>
- <div class="medium-8 large-8 columns banner-info">
- <div class="row column property-label">ZURB Foundation</div>
- <h3 class="light">Yeah, we can help with that.</h3>
- <p class="lead"> We’ll collaborate with your team throughout the entire project life cycle. We’ll take your concept and move it through ideation, hi-fi wireframes, visual design and code, all while informing you on the whys and hows along the way.</p>
- <div class="course-buttons">
- <a href="https://get.foundation/get-involved/premium-support.html" class="studios button" data-zcom-event="studios_foundation_click" id="foundationSmallV1">Show Me How →</a>
- </div>
- </div>
- </div>
- </section>
-
- <div class="docs-newsletter">
- <div class="row">
- <div class="medium-7 large-8 columns">
- <a target="_blank" href="https://get.foundation/learn/responsive-reading.html">
- <h5 class="">Download ZURB’s 21 Responsive Trends That Will Shape 2017</h5>
- <p style="margin-bottom: 0;">Stay informed with amazing responsive trends each month from ZURB.</p>
- </a>
- </div>
- <div class="medium-5 large-4 footer-signup-form columns">
- <a style="margin-bottom: 0;" target="_blank" href="https://get.foundation/learn/responsive-reading.html" class="button expanded">Download the PDF</a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-top bg-fblue">
- <div class="row property">
- <div class="medium-4 columns">
- <div class="property-info">
- <h3>Foundation for Sites</h3>
- <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
- </p>
- </div>
- </div>
-
- <div class="medium-8 columns">
- <div class="row collapse">
- <div class="medium-4 columns">
- <div class="learn-links">
- <h4 class="hide-for-small">Want more?</h4>
- <ul>
- <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
- <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
- <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
- <li><a href="http://zurb.com/university/courses">Training</a></li>
- <li><a href="http://zurb.com/library">Design Resources</a></li>
- </ul>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="support-links">
- <h4 class="hide-for-small">Talk to us</h4>
- <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
- <p><a href="https://get.foundation/get-involved/contribute.html">Get involved in<br>our amazing community.</a></p>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="connect-links">
- <h4 class="hide-for-small">Stay Updated</h4>
- <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
- <a href="http://zurb.com/news" class="small button">Stay Connected</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="row global">
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/studios" class="footer-link-block services">
- <span class="title">Studios</span>
- <span>Helping more than 200 startups succeed since 1998.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="https://get.foundation/" class="footer-link-block foundation">
- <span class="title">Foundation</span>
- <span>The most advanced front-end framework in the world.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/notable" class="footer-link-block apps">
- <span class="title">Notable Design Apps</span>
- <span>Prototype, iterate and collect feedback on your products.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/university" class="footer-link-block expo">
- <span class="title">University</span>
- <span>Ideas, thoughts and design resources shared with you.</span>
- </a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-bottom">
- <div class="row">
- <div class="medium-4 medium-push-8 columns">
- <ul class="home-social">
- <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
- <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
- <li><a href="http://zurb.com/contact" class="mail"></a></li>
- </ul>
- </div>
- <div class="medium-8 medium-pull-4 columns">
- <a href="http://www.zurb.com" class="zurb-logo regular"></a>
- <ul class="zurb-links">
- <li><a href="http://zurb.com/about">About</a></li>
- <li><a href="http://zurb.com/blog">Blog</a></li>
- <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
- <li><a href="http://zurb.com/contact">Contact</a></li>
- <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
- </ul>
- <p class="copyright">© 1998‐2016 ZURB, Inc. All rights reserved.</p>
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- <script>
- var _gaq = _gaq || [];
- _gaq.push(
- ['_setAccount', 'UA-2195009-2'],
- ['_trackPageview'],
- ['b._setAccount', 'UA-2195009-27'],
- ['b._trackPageview']
- );
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
-
- <script src="assets/js/vendor.js?hash=ebb84f79f16cb693d1c6e9f504cd5db4"></script>
- <script src="assets/js/foundation.js?hash=d971ba24091bed6b04c0cbdecb050ba0"></script>
- <script src="assets/js/docs.js?hash=0a5e2d9b7d9c8bb9f104b2e25bfa0de6"></script>
- <script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
-</body>
-</html>
+++ /dev/null
-<!doctype html>
-<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
-<html class="no-js" lang="en" dir="ltr">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="The new top bar is a simpler wrapper around our flexible menu components.">
- <link rel="icon" href="assets/img/icons/foundation-favicon.ico" type="image/x-icon">
- <title>Foundation for Sites 6 Docs | Top Bar</title>
- <link href="assets/css/docs.css?hash=df44a3b8c35e521df2cc7fd711e08863" rel="stylesheet" />
- <link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=d6b658b026a0f6d9b9db82165c0f0307" rel="stylesheet">
- <!-- <link rel="stylesheet" href="./node_modules/motion-ui/dist/motion-ui.css" /> -->
-</head>
-<body>
-
- <div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
-
- <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="mobile-ofc vertical menu">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
-
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/support.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/sort/unanswered">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
- </div>
-
- <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="vertical menu">
- <li><a href="#">Foundation</a></li>
- <li><a href="#">Dot</a></li>
- <li><a href="#">ZURB</a></li>
- <li><a href="#">Com</a></li>
- <li><a href="#">Slash</a></li>
- <li><a href="#">Sites</a></li>
- </ul>
- </div>
-
-
- <div class="off-canvas-content" data-off-canvas-content>
- <!-- Info Banner For Announcements or Links -->
- <!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
- <div class="info">
- <h5>Foundation 6 is here!</h5>
- </div>
- </a> -->
-
- <nav class="marketing-topbar show-for-medium">
-
- <ul class="menu">
- <li class="topbar-title"><a href="https://get.foundation/index.html"><img src="assets/img/logos/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
- </ul>
-
- <ul class="dropdown menu" data-dropdown-menu data-click-open="false">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/" target="_blank">F5 Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="https://get.foundation/emails/docs/" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
-
- </nav>
-
- <div class="title-bar hide-for-medium">
- <div class="title-bar-left">
- <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
- <span class="title-bar-title">Foundation</span>
- </div>
- </div>
-
-
- <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
-
- <div class="expanded row">
- <div class="medium-9 large-10 medium-push-3 large-push-2 columns">
-
-<article class="docs-component" id="docs-top-bar">
-
-<a href="#docs-menu" class="small secondary expanded button hide-for-medium">Jump to Nav</a>
-
-<header>
- <h1 class="docs-page-title">Top Bar</h1>
-
-
- <p class="lead docs-page-lead">The new top bar is a simpler wrapper around our flexible menu components.</p>
-
- <ul class="menu simple docs-contribute-menu">
- <li><a href="https://github.com/zurb/foundation-sites/edit/master/docs/pages/top-bar.md" target="_blank"><i class="fi-pencil"></i>Edit this Page</a></li>
- <li><a href="https://github.com/zurb/foundation-sites/issues/new?title=%5BTop%20Bar%5D%20ISSUE%20NAME%20HERE" target="_blank"><i class="fi-social-github"></i>Report a Bug</a></li>
- <li><a href="https://get.foundation/forum" target="_blank"><i class="fi-comment"></i>Get Help</a></li>
- </ul>
-</header>
-
-<hr>
-
-<div class="row">
-
-<div class="large-9 columns" id="docs">
-
-<div class="primary callout">
- <p>The features of Foundation 5's top bar are still around, but they've been reworked into smaller, individual plugins. Check out our page on <a href="responsive-navigation.html">responsive navigation</a> to learn more.</p>
-</div>
-
-<h2 id="basics" class="docs-heading" data-magellan-target="basics">Basics<a class="docs-heading-icon" href="#basics"></a></h2><p>A top bar (<code>.top-bar</code>) can have two sections: a left-hand section (<code>.top-bar-left</code>) and a right-hand section (<code>.top-bar-right</code>). On small screens, these sections stack on top of each other.</p>
-<p>In the below example, our top bar includes a <a href="dropdown-menu.html">dropdown menu</a>, along with a text input field and action button. The dropdown menu inherits the background color of the top bar. If you're using the Sass version of Foundation, you can change this with the <code>$topbar-submenu-background</code> variable.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"top-bar"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"top-bar-left"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"dropdown menu"</span> <span class="hljs-attr">data-dropdown-menu</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu-text"</span>></span>Site Title<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>One<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu vertical"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>One<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Two<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Three<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Two<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Three<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"top-bar-right"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"search"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Search"</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button"</span>></span>Search<span class="hljs-tag"></<span class="hljs-name">button</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="top-bar">
- <div class="top-bar-left">
- <ul class="dropdown menu" data-dropdown-menu>
- <li class="menu-text">Site Title</li>
- <li>
- <a href="#">One</a>
- <ul class="menu vertical">
- <li><a href="#">One</a></li>
- <li><a href="#">Two</a></li>
- <li><a href="#">Three</a></li>
- </ul>
- </li>
- <li><a href="#">Two</a></li>
- <li><a href="#">Three</a></li>
- </ul>
- </div>
- <div class="top-bar-right">
- <ul class="menu">
- <li><input type="search" placeholder="Search"></li>
- <li><button type="button" class="button">Search</button></li>
- </ul>
- </div>
-</div></div><hr>
-<h2 id="advanced-layout" class="docs-heading" data-magellan-target="advanced-layout">Advanced Layout<a class="docs-heading-icon" href="#advanced-layout"></a></h2><p>You can further divide a top bar into a title area and content area. Use the <code>.top-bar-title</code> class to create a title/branding area. Next to that can be any element, which is used for the rest of the content.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"top-bar"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"top-bar-title"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"top-bar-left"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"top-bar-right"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div><p>In the below example, we've combined the above pattern with the Responsive Toggler plugin, creating a responsive top bar with a toggle click trigger on mobile.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"top-bar"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"top-bar-title"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">data-responsive-toggle</span>=<span class="hljs-string">"responsive-menu"</span> <span class="hljs-attr">data-hide-for</span>=<span class="hljs-string">"medium"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu-icon dark"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">data-toggle</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">span</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Site Title<span class="hljs-tag"></<span class="hljs-name">strong</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"responsive-menu"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"top-bar-left"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"dropdown menu"</span> <span class="hljs-attr">data-dropdown-menu</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>One<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu vertical"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>One<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Two<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Three<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Two<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Three<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"top-bar-right"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"search"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Search"</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button"</span>></span>Search<span class="hljs-tag"></<span class="hljs-name">button</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><div class="top-bar">
- <div class="top-bar-title">
- <span data-responsive-toggle="responsive-menu" data-hide-for="medium">
- <button class="menu-icon dark" type="button" data-toggle></button>
- </span>
- <strong>Site Title</strong>
- </div>
- <div id="responsive-menu">
- <div class="top-bar-left">
- <ul class="dropdown menu" data-dropdown-menu>
- <li>
- <a href="#">One</a>
- <ul class="menu vertical">
- <li><a href="#">One</a></li>
- <li><a href="#">Two</a></li>
- <li><a href="#">Three</a></li>
- </ul>
- </li>
- <li><a href="#">Two</a></li>
- <li><a href="#">Three</a></li>
- </ul>
- </div>
- <div class="top-bar-right">
- <ul class="menu">
- <li><input type="search" placeholder="Search"></li>
- <li><button type="button" class="button">Search</button></li>
- </ul>
- </div>
- </div>
-</div></div><hr>
-<h2 id="stacking" class="docs-heading" data-magellan-target="stacking">Stacking<a class="docs-heading-icon" href="#stacking"></a></h2><p>By default, the two sections of a top bar will stack on top of each other on small screens. This can be changed by adding the class <code>.stacked-for-medium</code> or <code>.stacked-for-large</code>.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"top-bar stacked-for-medium"</span>></span>
- <span class="hljs-comment"><!-- ... --></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div><div class="top-bar stacked-for-medium">
- <div class="top-bar-left">
- <ul class="dropdown menu" data-dropdown-menu>
- <li class="menu-text">Site Title</li>
- <li>
- <a href="#">One</a>
- <ul class="menu vertical">
- <li><a href="#">One</a></li>
- <li><a href="#">Two</a></li>
- <li><a href="#">Three</a></li>
- </ul>
- </li>
- <li><a href="#">Two</a></li>
- <li><a href="#">Three</a></li>
- </ul>
- </div>
- <div class="top-bar-right">
- <ul class="menu">
- <li><input type="search" placeholder="Search"></li>
- <li><button type="button" class="button">Search</button></li>
- </ul>
- </div>
-</div>
-
-<hr>
-<h2 id="sticky-navigation" class="docs-heading" data-magellan-target="sticky-navigation">Sticky Navigation<a class="docs-heading-icon" href="#sticky-navigation"></a></h2><p>See the documentation for the <a href="sticky.html#sticky-navigation">Sticky</a> plugin to see how to easily make a sticky nav bar.</p>
-
-
-<hr>
-<section>
- <h2 id="sass-reference" class="docs-heading" data-magellan-target="sass-reference">Sass Reference<a class="docs-heading-icon" href="#sass-reference"></a></h2>
-
- <section>
- <h3 id="sass-variables" class="docs-heading">Variables<a class="docs-heading-icon" href="#sass-variables"></a></h3>
-
- <p>The default styles of this component can be customized using these Sass variables in your project's <a href="sass.html#the-settings-file">settings file</a>.</p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td class="name"><code>$topbar-padding</code></td>
- <td>Number</td>
- <td class="number"><code>0.5rem</code></td>
- <td><p>Padding for the top bar.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$topbar-background</code></td>
- <td>Color</td>
- <td class="color"><code>$light-gray</code></td>
- <td><p>Background color for the top bar. This color also cascades to menus within the top bar.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$topbar-submenu-background</code></td>
- <td>Color</td>
- <td class="color"><code>$topbar-background</code></td>
- <td><p>Background color submenus within the top bar. Usefull if $topbar-background is transparent.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$topbar-title-spacing</code></td>
- <td>Number</td>
- <td class="number"><code>1rem</code></td>
- <td><p>Spacing for the top bar title.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$topbar-input-width</code></td>
- <td>Number</td>
- <td class="number"><code>200px</code></td>
- <td><p>Maximum width of <code><input></code> elements inside the top bar.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$topbar-unstack-breakpoint</code></td>
- <td>Breakpoint</td>
- <td class="breakpoint"><code>medium</code></td>
- <td><p>Breakpoint at which top bar switches from mobile to desktop view.</p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
- <section>
- <h3 id="sass-mixins" class="docs-heading">Mixins<a class="docs-heading-icon" href="#sass-mixins"></a></h3>
-
- <p>We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.</p>
-
-
- <section >
- <h4 id="top-bar-container" class="docs-heading">top-bar-container<a class="docs-heading-icon" href="#top-bar-container"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> top-bar-container;</code></pre>
- </div>
-
- <p>Adds styles for a top bar container.</p>
-
-
-
-
-
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="top-bar-stacked" class="docs-heading">top-bar-stacked<a class="docs-heading-icon" href="#top-bar-stacked"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> top-bar-stacked;</code></pre>
- </div>
-
- <p>Makes sections of a top bar stack on top of each other.</p>
-
-
-
-
-
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="top-bar-unstack" class="docs-heading">top-bar-unstack<a class="docs-heading-icon" href="#top-bar-unstack"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> top-bar-unstack;</code></pre>
- </div>
-
- <p>Undoes the CSS applied by the <code>top-bar-stacked()</code> mixin.</p>
-
-
-
-
-
- </section>
-
-
-
-
-
- </section>
-
-
-</section>
-
-
-<!-- <hr> -->
-<!-- <section class="docs-building-blocks">
- <h2 id="building-blocks" class="docs-heading" data-magellan-target="building-blocks">Building Blocks<a class="docs-heading-icon" href="#building-blocks"></a></h2>
-
- <p><a href="http://zurb.com/building-blocks">Building Blocks</a> is a ZURB-curated resource with useful code snippets that use Foundation components. Here are a few for this component:</p>
-
- <div class="warning callout">
- <p>These are placeholder items. If you have ideas for building blocks for this component, <a href="https://github.com/zurb/foundation-sites-6/issues/118">we're taking ideas on GitHub</a>.</p>
- </div>
-
- <div data-building-blocks></div>
-</section> -->
-
-</div>
-
-<div class="large-3 columns" data-sticky-container>
- <nav class="columns docs-toc-wrap" data-sticky data-anchor="docs" data-sticky-on="large">
- <div class="docs-toc hide" id="docsTOC">
- <ul class="vertical menu" data-docs-toc>
- <li class="docs-nav-title">On this page:</li>
- </ul>
- </div>
- <div class="foundation-toc-ad-unit" id="TOCAdUnit">
- </div>
- </nav>
-</div>
-
-</div>
-
-</article>
-
- </div>
- <div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
- <ul class="vertical menu docs-nav" id="docs-menu">
- <p class="docs-nav-version">
- <span data-docs-version></span>
- <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">(Changelog)</a>
- </p>
-
- <li class="docs-nav-title">Getting Started</li>
- <li><a href="installation.html">Installation</a></li>
- <li><a href="starter-projects.html">Starter Projects</a></li>
- <li><a href="compatibility.html">Compatibility</a></li>
- <li><a href="accessibility.html">Accessibility</a></li>
- <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
-
- <li class="docs-nav-title">Setup</li>
- <li><a href="global.html">Global Styles</a></li>
- <li><a href="rtl.html">Right-to-Left Support</a></li>
- <li><a href="flexbox.html">Flexbox</a></li>
- <li><a href="sass.html">Sass</a></li>
- <li><a href="javascript.html">JavaScript</a></li>
- <li><a href="javascript-utilities.html">JavaScript Utilities</a></li>
- <li><a href="media-queries.html">Media Queries</a></li>
-
- <li class="docs-nav-title">General</li>
- <li><a href="grid.html">Grid</a></li>
- <li><a href="flex-grid.html">Flex Grid</a></li>
- <li><a href="forms.html">Forms</a></li>
- <li><a href="visibility.html">Visibility Classes</a></li>
- <li><a href="float-classes.html">Float Classes</a></li>
-
- <li class="docs-nav-title">Typography</li>
- <li><a href="typography-base.html">Base Styles</a></li>
- <li><a href="typography-helpers.html">Helper Classes</a></li>
-
- <li class="docs-nav-title">Controls</li>
- <li><a href="button.html">Button</a></li>
- <li><a href="button-group.html">Button Group</a></li>
- <li><a href="close-button.html">Close Button</a></li>
- <li><a href="slider.html">Slider <span class="label">JS</span></a></li>
- <li><a href="switch.html">Switch</a></li>
-
- <li class="docs-nav-title">Navigation</li>
- <li><a href="navigation.html">Overview</a></li>
- <li><a href="menu.html">Menu</a></li>
- <li><a href="dropdown-menu.html">Dropdown Menu <span class="label">JS</span></a></li>
- <li><a href="drilldown-menu.html">Drilldown Menu <span class="label">JS</span></a></li>
- <li><a href="accordion-menu.html">Accordion Menu <span class="label">JS</span></a></li>
- <li class="current"><a href="top-bar.html">Top Bar</a></li>
- <li><a href="responsive-navigation.html">Responsive Navigation</a></li>
- <li><a href="magellan.html">Magellan <span class="label">JS</span></a></li>
- <li><a href="pagination.html">Pagination</a></li>
- <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
-
- <li class="docs-nav-title">Containers</li>
- <li><a href="accordion.html">Accordion <span class="label">JS</span></a></li>
- <li><a href="callout.html">Callout</a></li>
- <li><a href="dropdown.html">Dropdown <span class="label">JS</span></a></li>
- <li><a href="media-object.html">Media Object</a></li>
- <li><a href="off-canvas.html">Off-canvas <span class="label">JS</span></a></li>
- <li><a href="reveal.html">Reveal <span class="label">JS</span> <small>Modal</small></a></li>
- <li><a href="table.html">Table</a></li>
- <li><a href="tabs.html">Tabs <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Media</li>
- <li><a href="badge.html">Badge</a></li>
- <li><a href="flex-video.html">Flex Video</a></li>
- <li><a href="label.html">Label</a></li>
- <li><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
- <li><a href="progress-bar.html">Progress Bar</a></li>
- <li><a href="thumbnail.html">Thumbnail</a></li>
- <li><a href="tooltip.html">Tooltip <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Plugins</li>
- <li><a href="abide.html">Abide <small>Form Validation</small></a></li>
- <li><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
- <li><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
- <li><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
- <li><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
-
- <li class="docs-nav-title">Sass</li>
- <li><a href="sass-functions.html">Functions</a></li>
- <li><a href="sass-mixins.html">Mixins</a></li>
-
- <li class="docs-nav-title">Libraries</li>
- <li><a href="motion-ui.html">Motion UI</a></li>
- <li><a href="panini.html">Panini</a></li>
- <li><a href="style-sherpa.html">Style Sherpa</a></li>
-
- <li class="docs-nav-title">Older Versions</li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
- <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
- <li><a href="https://get.foundation/sites/docs/v/3.2.5/">Foundation 3</a></li>
- <li><a href="https://get.foundation/sites/docs/v/2.2.1/">Foundation 2</a></li>
- </ul>
-
- </div>
- </div>
-
- <!-- Small Business(Docs) -->
- <section id="studiosCallout">
- <div class="row">
- <div class="medium-4 large-4 columns">
- <img src="https://get.foundation/assets/img/smallbiz-footer.svg" alt="">
- </div>
- <div class="medium-8 large-8 columns banner-info">
- <div class="row column property-label">ZURB Foundation</div>
- <h3 class="light">Yeah, we can help with that.</h3>
- <p class="lead"> We’ll collaborate with your team throughout the entire project life cycle. We’ll take your concept and move it through ideation, hi-fi wireframes, visual design and code, all while informing you on the whys and hows along the way.</p>
- <div class="course-buttons">
- <a href="https://get.foundation/get-involved/premium-support.html" class="studios button" data-zcom-event="studios_foundation_click" id="foundationSmallV1">Show Me How →</a>
- </div>
- </div>
- </div>
- </section>
-
- <div class="docs-newsletter">
- <div class="row">
- <div class="medium-7 large-8 columns">
- <a target="_blank" href="https://get.foundation/learn/responsive-reading.html">
- <h5 class="">Download ZURB’s 21 Responsive Trends That Will Shape 2017</h5>
- <p style="margin-bottom: 0;">Stay informed with amazing responsive trends each month from ZURB.</p>
- </a>
- </div>
- <div class="medium-5 large-4 footer-signup-form columns">
- <a style="margin-bottom: 0;" target="_blank" href="https://get.foundation/learn/responsive-reading.html" class="button expanded">Download the PDF</a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-top bg-fblue">
- <div class="row property">
- <div class="medium-4 columns">
- <div class="property-info">
- <h3>Foundation for Sites</h3>
- <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
- </p>
- </div>
- </div>
-
- <div class="medium-8 columns">
- <div class="row collapse">
- <div class="medium-4 columns">
- <div class="learn-links">
- <h4 class="hide-for-small">Want more?</h4>
- <ul>
- <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
- <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
- <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
- <li><a href="http://zurb.com/university/courses">Training</a></li>
- <li><a href="http://zurb.com/library">Design Resources</a></li>
- </ul>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="support-links">
- <h4 class="hide-for-small">Talk to us</h4>
- <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
- <p><a href="https://get.foundation/get-involved/contribute.html">Get involved in<br>our amazing community.</a></p>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="connect-links">
- <h4 class="hide-for-small">Stay Updated</h4>
- <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
- <a href="http://zurb.com/news" class="small button">Stay Connected</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="row global">
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/studios" class="footer-link-block services">
- <span class="title">Studios</span>
- <span>Helping more than 200 startups succeed since 1998.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="https://get.foundation/" class="footer-link-block foundation">
- <span class="title">Foundation</span>
- <span>The most advanced front-end framework in the world.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/notable" class="footer-link-block apps">
- <span class="title">Notable Design Apps</span>
- <span>Prototype, iterate and collect feedback on your products.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/university" class="footer-link-block expo">
- <span class="title">University</span>
- <span>Ideas, thoughts and design resources shared with you.</span>
- </a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-bottom">
- <div class="row">
- <div class="medium-4 medium-push-8 columns">
- <ul class="home-social">
- <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
- <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
- <li><a href="http://zurb.com/contact" class="mail"></a></li>
- </ul>
- </div>
- <div class="medium-8 medium-pull-4 columns">
- <a href="http://www.zurb.com" class="zurb-logo regular"></a>
- <ul class="zurb-links">
- <li><a href="http://zurb.com/about">About</a></li>
- <li><a href="http://zurb.com/blog">Blog</a></li>
- <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
- <li><a href="http://zurb.com/contact">Contact</a></li>
- <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
- </ul>
- <p class="copyright">© 1998‐2016 ZURB, Inc. All rights reserved.</p>
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- <script>
- var _gaq = _gaq || [];
- _gaq.push(
- ['_setAccount', 'UA-2195009-2'],
- ['_trackPageview'],
- ['b._setAccount', 'UA-2195009-27'],
- ['b._trackPageview']
- );
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
-
- <script src="assets/js/vendor.js?hash=38bb208c04460af6c65cedd262afebdd"></script>
- <script src="assets/js/foundation.js?hash=c7a8d16be1efb47d0260435d0bc6d1e9"></script>
- <script src="assets/js/docs.js?hash=605f4bb3a0154065079960805654fca4"></script>
- <script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
-</body>
-</html>
+++ /dev/null
-<!doctype html>
-<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
-<html class="no-js" lang="en" dir="ltr">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="Typography in Foundation 6 is meant to make your life easier by providing clean, attractive, simple default styles for all of the most basic typographical elements.">
- <link rel="icon" href="assets/img/icons/foundation-favicon.ico" type="image/x-icon">
- <title>Foundation for Sites 6 Docs | Base Typography</title>
- <link href="assets/css/docs.css?hash=abe94607e676f7cafc08c320b110ef09" rel="stylesheet" />
- <link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=57c86f0291e7ae743aad1749ebcb49db" rel="stylesheet">
- <!-- <link rel="stylesheet" href="./node_modules/motion-ui/dist/motion-ui.css" /> -->
-</head>
-<body>
-
- <div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
-
- <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="mobile-ofc vertical menu">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
-
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/support.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/sort/unanswered">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
- </div>
-
- <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="vertical menu">
- <li><a href="#">Foundation</a></li>
- <li><a href="#">Dot</a></li>
- <li><a href="#">ZURB</a></li>
- <li><a href="#">Com</a></li>
- <li><a href="#">Slash</a></li>
- <li><a href="#">Sites</a></li>
- </ul>
- </div>
-
-
- <div class="off-canvas-content" data-off-canvas-content>
- <!-- Info Banner For Announcements or Links -->
- <!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
- <div class="info">
- <h5>Foundation 6 is here!</h5>
- </div>
- </a> -->
-
- <nav class="marketing-topbar show-for-medium">
-
- <ul class="menu">
- <li class="topbar-title"><a href="https://get.foundation/index.html"><img src="assets/img/logos/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
- </ul>
-
- <ul class="dropdown menu" data-dropdown-menu data-click-open="false">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/" target="_blank">F5 Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="https://get.foundation/emails/docs/" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
-
- </nav>
-
- <div class="title-bar hide-for-medium">
- <div class="title-bar-left">
- <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
- <span class="title-bar-title">Foundation</span>
- </div>
- </div>
-
-
- <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
-
- <div class="expanded row">
- <div class="medium-9 large-10 medium-push-3 large-push-2 columns">
-
-<article class="docs-component" id="docs-base-typography">
-
-<a href="#docs-menu" class="small secondary expanded button hide-for-medium">Jump to Nav</a>
-
-<header>
- <h1 class="docs-page-title">Base Typography</h1>
-
-
- <p class="lead docs-page-lead">Typography in Foundation 6 is meant to make your life easier by providing clean, attractive, simple default styles for all of the most basic typographical elements.</p>
-
- <ul class="menu simple docs-contribute-menu">
- <li><a href="https://github.com/zurb/foundation-sites/edit/master/docs/pages/typography-base.md" target="_blank"><i class="fi-pencil"></i>Edit this Page</a></li>
- <li><a href="https://github.com/zurb/foundation-sites/issues/new?title=%5BBase%20Typography%5D%20ISSUE%20NAME%20HERE" target="_blank"><i class="fi-social-github"></i>Report a Bug</a></li>
- <li><a href="https://get.foundation/forum" target="_blank"><i class="fi-comment"></i>Get Help</a></li>
- </ul>
-</header>
-
-<hr>
-
-<div class="row">
-
-<div class="large-9 columns" id="docs">
-
-<h2 id="paragraphs" class="docs-heading" data-magellan-target="paragraphs">Paragraphs<a class="docs-heading-icon" href="#paragraphs"></a></h2><p>This is a paragraph. Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm. To show what a paragraph looks like this needs a little more content—so, did you know that there are storms occurring on Jupiter that are larger than the Earth? Pretty cool. Use the <code><strong></code> and <code><em></code> tags to denote text that should be displayed or read with emphasis. Browsers will <strong>bold</strong> and <em>italicize</em> the words, while screen readers will read them with <em>emphasis</em>.</p>
-<div class="callout primary">
- <p>If the emphasis of a phrase is important, don't make the emphasis purely visual—use the <code><em></code> or <code><strong></code> tags to mark it as well. Both of these tags have built-in styles, but there's no harm in adding additional styles in specific contexts.</p>
-</div>
-
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">p</span>></span>This is a paragraph. Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm. To show what a paragraph looks like this needs a little more content so, did you know that there are storms occurring on Jupiter that are larger than the Earth? Pretty cool. Wrap strong around type to <span class="hljs-tag"><<span class="hljs-name">strong</span>></span>make it bold!<span class="hljs-tag"></<span class="hljs-name">strong</span>></span>. You can also use em to <span class="hljs-tag"><<span class="hljs-name">em</span>></span>italicize your words<span class="hljs-tag"></<span class="hljs-name">em</span>></span>.<span class="hljs-tag"></<span class="hljs-name">p</span>></span></code></pre></div><hr>
-<h2 id="header" class="docs-heading" data-magellan-target="header">Header<a class="docs-heading-icon" href="#header"></a></h2><p>Foundation includes styles for all headings—they're balanced and sized along a modular scale.</p>
-<div class="callout primary">
- <p>Avoid skipping heading levels when structuring your document, as it confuses screen readers. For example, after using an <code><h2></code> in your code, the next heading used should be either <code><h2></code> or <code><h3></code>. If you need a heading to look bigger or smaller to match a specific style, use CSS to override the default size.</p>
-</div>
-
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">h1</span>></span>h1. This is a very large header.<span class="hljs-tag"></<span class="hljs-name">h1</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">h2</span>></span>h2. This is a large header.<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">h3</span>></span>h3. This is a medium header.<span class="hljs-tag"></<span class="hljs-name">h3</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">h4</span>></span>h4. This is a moderate header.<span class="hljs-tag"></<span class="hljs-name">h4</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">h5</span>></span>h5. This is a small header.<span class="hljs-tag"></<span class="hljs-name">h5</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">h6</span>></span>h6. This is a tiny header.<span class="hljs-tag"></<span class="hljs-name">h6</span>></span></code></pre></div>
-
-<div class="docs-code-live"><h1>h1. This is a very large header.</h1>
-<h2>h2. This is a large header.</h2>
-<h3>h3. This is a medium header.</h3>
-<h4>h4. This is a moderate header.</h4>
-<h5>h5. This is a small header.</h5>
-<h6>h6. This is a tiny header.</h6></div><hr>
-<h3 id="header-sizes" class="docs-heading">Header Sizes<a class="docs-heading-icon" href="#header-sizes"></a></h3><p>The framework includes two typographic scales—one uses a narrow range of sizes for small- and medium-sized screens, and the other uses a wider range of sizes for large-sized screens. You can change these scales, or add new ones for other breakpoints, by editing the <code>$header-sizes</code> map in your project's <a href="sass.html#the-settings-file">Settings File</a>.</p>
-<table>
-<thead>
-<tr>
-<th>Header</th>
-<th>Default</th>
-<th>Large and up</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td><code><h1></code></td>
-<td>24px</td>
-<td>48px</td>
-</tr>
-<tr>
-<td><code><h2></code></td>
-<td>20px</td>
-<td>40px</td>
-</tr>
-<tr>
-<td><code><h3></code></td>
-<td>19px</td>
-<td>31px</td>
-</tr>
-<tr>
-<td><code><h4></code></td>
-<td>18px</td>
-<td>25px</td>
-</tr>
-<tr>
-<td><code><h5></code></td>
-<td>17px</td>
-<td>20px</td>
-</tr>
-<tr>
-<td><code><h6></code></td>
-<td>16px</td>
-<td>16px</td>
-</tr>
-</tbody>
-</table>
-<hr>
-<h3 id="small-header-segments" class="docs-heading">Small Header Segments<a class="docs-heading-icon" href="#small-header-segments"></a></h3><p>By inserting a <code><small></code> element into a header Foundation will scale the header font size down for an inline element, allowing you to use this for subtitles or other secondary header text.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">h3</span>></span>Foundation for Sites <span class="hljs-tag"><<span class="hljs-name">small</span>></span>Version 6.0.4<span class="hljs-tag"></<span class="hljs-name">small</span>></span><span class="hljs-tag"></<span class="hljs-name">h3</span>></span></code></pre></div>
-
-<div class="docs-code-live"><h3>Foundation for Sites <small>Version 6.0.4</small></h3></div><hr>
-<h2 id="links" class="docs-heading" data-magellan-target="links">Links<a class="docs-heading-icon" href="#links"></a></h2><p>Links are very standard, and the color is preset to the Foundation primary color. <a href="global.html">Learn more about Foundation's global colors.</a></p>
-<div class="callout">
- <p>To make links screen reader-friendly, avoid using vague words like "here" or "read more" within link text. The text of the link itself should adequately describe where the link goes.</p>
-</div>
-
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">p</span>></span>Links are very standard, and the color is preset to the Foundation primary color. <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"global.html"</span>></span>Learn more about Foundation's global colors.<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">p</span>></span></code></pre></div><hr>
-<h2 id="dividers" class="docs-heading" data-magellan-target="dividers">Dividers<a class="docs-heading-icon" href="#dividers"></a></h2><p>Use dividers to define thematic breaks between paragraphs. To denote the end of one section of a page and the start of another, it's better to use the <code><section></code> tag.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">hr</span>></span></code></pre></div><hr>
-<h2 id="unordered-lists" class="docs-heading" data-magellan-target="unordered-lists">Unordered Lists<a class="docs-heading-icon" href="#unordered-lists"></a></h2><p>Use an unordered list to... <em>list things</em>, if the order of the items doesn't matter.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">ul</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>List item with a much longer description or more content.<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>List item<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>List item
- <span class="hljs-tag"><<span class="hljs-name">ul</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Nested list item<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Nested list item<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Nested list item<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>List item<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>List item<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>List item<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">ul</span>></span></code></pre></div>
-
-<div class="docs-code-live"><ul>
- <li>List item with a much longer description or more content.</li>
- <li>List item</li>
- <li>List item
- <ul>
- <li>Nested list item</li>
- <li>Nested list item</li>
- <li>Nested list item</li>
- </ul>
- </li>
- <li>List item</li>
- <li>List item</li>
- <li>List item</li>
-</ul></div><hr>
-<h2 id="ordered-lists" class="docs-heading" data-magellan-target="ordered-lists">Ordered Lists<a class="docs-heading-icon" href="#ordered-lists"></a></h2><p>Use an <code><ol></code> when creating a list where the order of the items is important, like ranking pizza toppings from best to worst.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">ol</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Cheese (essential)<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Pepperoni<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Bacon
- <span class="hljs-tag"><<span class="hljs-name">ol</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Normal bacon<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Canadian bacon<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">ol</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Sausage<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Onions<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Mushrooms<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">ol</span>></span></code></pre></div>
-
-<div class="docs-code-live"><ol>
- <li>Cheese (essential)</li>
- <li>Pepperoni</li>
- <li>Bacon
- <ol>
- <li>Normal bacon</li>
- <li>Canadian bacon</li>
- </ol>
- </li>
- <li>Sausage</li>
- <li>Onions</li>
- <li>Mushrooms</li>
-</ol></div><hr>
-<h2 id="definition-lists" class="docs-heading" data-magellan-target="definition-lists">Definition Lists<a class="docs-heading-icon" href="#definition-lists"></a></h2><p>A definition list (<code><dl></code>) is used to display name-value pairs, like metadata or a dictionary definition. Each term (<code><dt></code>) is paired with one or more definitions (<code><dd></code>).</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">dl</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">dt</span>></span>Time<span class="hljs-tag"></<span class="hljs-name">dt</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">dd</span>></span>The indefinite continued progress of existence and events in the past, present, and future regarded as a whole.<span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">dt</span>></span>Space<span class="hljs-tag"></<span class="hljs-name">dt</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">dd</span>></span>A continuous area or expanse that is free, available, or unoccupied.<span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">dd</span>></span>The dimensions of height, depth, and width within which all things exist and move.<span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">dl</span>></span></code></pre></div>
-
-<div class="docs-code-live"><dl>
- <dt>Time</dt>
- <dd>The indefinite continued progress of existence and events in the past, present, and future regarded as a whole.</dd>
- <dt>Space</dt>
- <dd>A continuous area or expanse that is free, available, or unoccupied.</dd>
- <dd>The dimensions of height, depth, and width within which all things exist and move.</dd>
-</dl></div><hr>
-<h2 id="blockquotes" class="docs-heading" data-magellan-target="blockquotes">Blockquotes<a class="docs-heading-icon" href="#blockquotes"></a></h2><p>Sometimes other people say smart things, and you may want to mention those things with a quote. We've got you covered.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">blockquote</span>></span>
- Those people who think they know everything are a great annoyance to those of us who do.
- <span class="hljs-tag"><<span class="hljs-name">cite</span>></span>Isaac Asimov<span class="hljs-tag"></<span class="hljs-name">cite</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">blockquote</span>></span></code></pre></div>
-
-<div class="docs-code-live"><blockquote>
- Those people who think they know everything are a great annoyance to those of us who do.
- <cite>Isaac Asimov</cite>
-</blockquote></div><hr>
-<h2 id="abbreviations" class="docs-heading" data-magellan-target="abbreviations">Abbreviations<a class="docs-heading-icon" href="#abbreviations"></a></h2><p>Use the <code><abbr></code> tag to annotate a shortened term. Abbreviations must always have a <code>title</code> attribute which clarifies the full term.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">p</span>></span>In my dream last night, I saw <span class="hljs-tag"><<span class="hljs-name">abbr</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"John Ronald Reuel"</span>></span>J. R. R.<span class="hljs-tag"></<span class="hljs-name">abbr</span>></span> Tolkien and George <span class="hljs-tag"><<span class="hljs-name">abbr</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Raymond Richard"</span>></span>R. R.<span class="hljs-tag"></<span class="hljs-name">abbr</span>></span> Martin hanging out on Sunset <span class="hljs-tag"><<span class="hljs-name">abbr</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Boulevard"</span>></span>Blvd<span class="hljs-tag"></<span class="hljs-name">abbr</span>></span>.<span class="hljs-tag"></<span class="hljs-name">p</span>></span></code></pre></div>
-
-<div class="docs-code-live"><p>In my dream last night, I saw <abbr title="John Ronald Reuel">J. R. R.</abbr> Tolkien and George <abbr title="Raymond Richard">R. R.</abbr> Martin hanging out on Sunset <abbr title="Boulevard">Blvd</abbr>.</p></div><hr>
-<h2 id="code" class="docs-heading" data-magellan-target="code">Code<a class="docs-heading-icon" href="#code"></a></h2><p>Format references to code with the <code><code></code> tag.</p>
-<div class="docs-code" data-docs-code><pre><code class="html">Remember to escape angle brackets when printing HTML: <span class="hljs-tag"><<span class="hljs-name">code</span>></span>&lt;div&gt;<span class="hljs-tag"></<span class="hljs-name">code</span>></span></code></pre></div>
-
-<div class="docs-code-live">Remember to escape angle brackets when printing HTML: <code><div></code></div><hr>
-<h2 id="keystrokes" class="docs-heading" data-magellan-target="keystrokes">Keystrokes<a class="docs-heading-icon" href="#keystrokes"></a></h2><p>Use the <code><kbd></code> element to annotate a key stroke or combination.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">p</span>></span>Press <span class="hljs-tag"><<span class="hljs-name">kbd</span>></span>Cmd+Q<span class="hljs-tag"></<span class="hljs-name">kbd</span>></span> (or <span class="hljs-tag"><<span class="hljs-name">kbd</span>></span>Ctrl+Q<span class="hljs-tag"></<span class="hljs-name">kbd</span>></span> on Windows) to play Half-Life 3.<span class="hljs-tag"></<span class="hljs-name">p</span>></span></code></pre></div>
-
-<div class="docs-code-live"><p>Press <kbd>Cmd+Q</kbd> (or <kbd>Ctrl+Q</kbd> on Windows) to play Half-Life 3.</p></div><hr>
-<h2 id="accessibility" class="docs-heading" data-magellan-target="accessibility">Accessibility<a class="docs-heading-icon" href="#accessibility"></a></h2><p>Text is core to the content of your page, so making it accessible to everyone is important. Here are some general guidelines to follow.</p>
-<h3 id="text-vs-images" class="docs-heading">Text vs. Images<a class="docs-heading-icon" href="#text-vs-images"></a></h3><p>Prefer using actual text over text inside a graphic. Assistive technologies can't read an image, and the text in an image can't be resized by a browser, like normal text. If an image has text that needs to be read, add it in the <code>alt</code> attribute of the image.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"assets/img/buy-now.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Buy now"</span>></span></code></pre></div><hr>
-<h3 id="contrast" class="docs-heading">Contrast<a class="docs-heading-icon" href="#contrast"></a></h3><p>The contrast between the color of an element's text and its background should be high enough that low-vision users can read it. <strong>The minimum recommended contrast ratio is 4.5:1.</strong> There are no automated tools that can effectively check this for you, but if you aren't sure about a specific color combination, you can run it through one of many color contrast checkers, such as <a href="http://webaim.org/resources/contrastchecker/">WebAIM's color contrast checker</a>.</p>
-<p>Google Chrome's <a href="https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb?hl=en">Accessibility Developer Tools</a> also includes a contrast checker. By selecting an element in the inspector, you can see if the contrast meets the minimum standards.</p>
-<p><img class="thumbnail" src="assets/img/a11y/chrome-a11y-inspector.jpg" alt="Screenshot of Google Chrome's Accessibility Tools"></p>
-<hr>
-<h3 id="type-size" class="docs-heading">Type Size<a class="docs-heading-icon" href="#type-size"></a></h3><p>When possible, use the <code>rem</code> and <code>em</code> units to size everything. Not just font size, but also padding, margins, and any length value. This ensures that your design scales up and down uniformly if the user changes their browser's text size. It's common for vision-impaired users to resize their browser up to 200% zoom.</p>
-<p>We use the <code>rem</code> unit nearly everywhere in Foundation, and even wrote a Sass function to make it a little easier. The <code>rem-calc()</code> function can take one or more pixel values and convert them to proper <code>rem</code> values.</p>
-<div class="docs-code" data-docs-code><pre><code class="scss"><span class="hljs-selector-class">.element</span> {
- <span class="hljs-attribute">width</span>: rem-calc(<span class="hljs-number">300</span>);
- <span class="hljs-attribute">padding</span>: rem-calc(<span class="hljs-number">10</span> <span class="hljs-number">16</span>);
-}</code></pre></div><hr>
-<h3 id="more-resources" class="docs-heading">More Resources<a class="docs-heading-icon" href="#more-resources"></a></h3><ul>
-<li><a href="http://webaim.org/techniques/fonts/">WebAIM: Fonts</a></li>
-<li><a href="http://webaim.org/techniques/hypertext/">WebAIM: Links and HyperText</a></li>
-<li><a href="http://webaim.org/techniques/semanticstructure/">WebAIM: Writing Clearly and Simply</a></li>
-<li><a href="http://webaim.org/resources/contrastchecker/">WebAIM: Color Contrast Checker</a></li>
-</ul>
-<hr>
-<h2 id="print-styles" class="docs-heading" data-magellan-target="print-styles">Print Styles<a class="docs-heading-icon" href="#print-styles"></a></h2><p>Foundation includes print styles developed by HTML5 Boilerplate to give you some basic print-specific styles. These are activated when you print through a media query. It includes:</p>
-<ul>
-<li>Clearing out backgrounds, box shadows and text shadows</li>
-<li>Appending link URLs after the anchor text</li>
-<li>Adding borders to <code><blockquote></code> and <code><pre></code> elements</li>
-<li>Page cleanup and window minimization</li>
-</ul>
-<p>On top of that, Foundation includes a couple of simple classes you can use to control elements printing, or not printing. Simply attach <code>.show-for-print</code> to an element to only show when printing, and <code>.hide-for-print</code> to hide something when printing.</p>
-
-
-<hr>
-<section>
- <h2 id="sass-reference" class="docs-heading" data-magellan-target="sass-reference">Sass Reference<a class="docs-heading-icon" href="#sass-reference"></a></h2>
-
- <section>
- <h3 id="sass-variables" class="docs-heading">Variables<a class="docs-heading-icon" href="#sass-variables"></a></h3>
-
- <p>The default styles of this component can be customized using these Sass variables in your project's <a href="sass.html#the-settings-file">settings file</a>.</p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td class="name"><code>$print-transparent-backgrounds</code></td>
- <td>Boolean</td>
- <td class="boolean"><code>true</code></td>
- <td><p>If <code>true</code>, all elements will have transparent backgrounds when printed, to save on ink.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$header-font-family</code></td>
- <td>String or List</td>
- <td class="string | list"><code>$body-font-family</code></td>
- <td><p>Font family for header elements.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$header-font-weight</code></td>
- <td>String</td>
- <td class="string"><code>$global-weight-normal</code></td>
- <td><p>Font weight of headers.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$header-font-style</code></td>
- <td>String</td>
- <td class="string"><code>normal</code></td>
- <td><p>Font style (e.g. italicized) of headers.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$font-family-monospace</code></td>
- <td>String or List</td>
- <td class="string | list"><code>Consolas, 'Liberation Mono', Courier, monospace</code></td>
- <td><p>Font stack used for elements that use monospaced type, such as code samples</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$header-sizes</code></td>
- <td>Map</td>
- <td class="map"><code>
- small: (
- 'h1': 24<br>
- 'h2': 20<br>
- 'h3': 19<br>
- 'h4': 18<br>
- 'h5': 17<br>
- 'h6': 16<br>
- )<br>
- medium: (
- 'h1': 48<br>
- 'h2': 40<br>
- 'h3': 31<br>
- 'h4': 25<br>
- 'h5': 20<br>
- 'h6': 16<br>
- )<br>
-</code></td>
- <td><p>Sizes of headings at various screen sizes. Each key is a breakpoint, and each value is a map of heading sizes.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$header-color</code></td>
- <td>Color</td>
- <td class="color"><code>inherit</code></td>
- <td><p>Color of headers.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$header-lineheight</code></td>
- <td>Number</td>
- <td class="number"><code>1.4</code></td>
- <td><p>Line height of headers.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$header-margin-bottom</code></td>
- <td>Number</td>
- <td class="number"><code>0.5rem</code></td>
- <td><p>Bottom margin of headers.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$header-text-rendering</code></td>
- <td>String</td>
- <td class="string"><code>optimizeLegibility</code></td>
- <td><p>Text rendering method of headers.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$small-font-size</code></td>
- <td>Number</td>
- <td class="number"><code>80%</code></td>
- <td><p>Font size of <code><small></code> elements.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$header-small-font-color</code></td>
- <td>Color</td>
- <td class="color"><code>$medium-gray</code></td>
- <td><p>Color of <code><small></code> elements when placed inside headers.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$paragraph-lineheight</code></td>
- <td>Number</td>
- <td class="number"><code>1.6</code></td>
- <td><p>Line height of text inside <code><p></code> elements.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$paragraph-margin-bottom</code></td>
- <td>Number</td>
- <td class="number"><code>1rem</code></td>
- <td><p>Bottom margin of paragraphs.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$paragraph-text-rendering</code></td>
- <td>String</td>
- <td class="string"><code>optimizeLegibility</code></td>
- <td><p>Text rendering method for paragraph text.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$code-color</code></td>
- <td>Color</td>
- <td class="color"><code>$black</code></td>
- <td><p>Text color of code samples.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$code-font-family</code></td>
- <td>String or List</td>
- <td class="string | list"><code>$font-family-monospace</code></td>
- <td><p>Font family of code samples.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$code-font-weight</code></td>
- <td>String</td>
- <td class="string"><code>$global-weight-normal</code></td>
- <td><p>Font weight of text in code samples.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$code-background</code></td>
- <td>Color</td>
- <td class="color"><code>$light-gray</code></td>
- <td><p>Background color of code samples.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$code-border</code></td>
- <td>List</td>
- <td class="list"><code>1px solid $medium-gray</code></td>
- <td><p>Border around code samples.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$code-padding</code></td>
- <td>Number or List</td>
- <td class="number | list"><code>rem-calc(2 5 1)</code></td>
- <td><p>Padding around text of code samples.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$anchor-color</code></td>
- <td>Color</td>
- <td class="color"><code>$primary-color</code></td>
- <td><p>Default color for links.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$anchor-color-hover</code></td>
- <td>Color</td>
- <td class="color"><code>scale-color($anchor-color, $lightness: -14%)</code></td>
- <td><p>Default color for links on hover.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$anchor-text-decoration</code></td>
- <td>String</td>
- <td class="string"><code>none</code></td>
- <td><p>Default text deocration for links.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$anchor-text-decoration-hover</code></td>
- <td>String</td>
- <td class="string"><code>none</code></td>
- <td><p>Default text decoration for links on hover.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$hr-width</code></td>
- <td>Number</td>
- <td class="number"><code>$global-width</code></td>
- <td><p>Maximum width of a divider.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$hr-border</code></td>
- <td>List</td>
- <td class="list"><code>1px solid $medium-gray</code></td>
- <td><p>Default border for a divider.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$hr-margin</code></td>
- <td>Number or List</td>
- <td class="number | list"><code>rem-calc(20) auto</code></td>
- <td><p>Default margin for a divider.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$list-lineheight</code></td>
- <td>Number</td>
- <td class="number"><code>$paragraph-lineheight</code></td>
- <td><p>Line height for items in a list.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$list-margin-bottom</code></td>
- <td>Number</td>
- <td class="number"><code>$paragraph-margin-bottom</code></td>
- <td><p>Bottom margin for items in a list.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$list-style-type</code></td>
- <td>String</td>
- <td class="string"><code>disc</code></td>
- <td><p>Bullet type to use for unordered lists (e.g., <code>square</code>, <code>circle</code>, <code>disc</code>).</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$list-style-position</code></td>
- <td>String</td>
- <td class="string"><code>outside</code></td>
- <td><p>Positioning for bullets on unordered list items.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$list-side-margin</code></td>
- <td>Number</td>
- <td class="number"><code>1.25rem</code></td>
- <td><p>Left (or right) margin for lists.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$list-nested-side-margin</code></td>
- <td>Number</td>
- <td class="number"><code>1.25rem</code></td>
- <td><p>Left (or right) margin for a list inside a list.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$defnlist-margin-bottom</code></td>
- <td>Number</td>
- <td class="number"><code>1rem</code></td>
- <td><p>Bottom margin for <code><dl></code> elements.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$defnlist-term-weight</code></td>
- <td>String</td>
- <td class="string"><code>$global-weight-bold</code></td>
- <td><p>Font weight for <code><dt></code> elements.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$defnlist-term-margin-bottom</code></td>
- <td>Number</td>
- <td class="number"><code>0.3rem</code></td>
- <td><p>Spacing between <code><dt></code> and <code><dd></code> elements.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$blockquote-color</code></td>
- <td>Color</td>
- <td class="color"><code>$dark-gray</code></td>
- <td><p>Text color of <code><blockquote></code> elements.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$blockquote-padding</code></td>
- <td>Number or List</td>
- <td class="number | list"><code>rem-calc(9 20 0 19)</code></td>
- <td><p>Padding inside a <code><blockquote></code> element.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$blockquote-border</code></td>
- <td>List</td>
- <td class="list"><code>1px solid $medium-gray</code></td>
- <td><p>Side border for <code><blockquote></code> elements.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$cite-font-size</code></td>
- <td>Number</td>
- <td class="number"><code>rem-calc(13)</code></td>
- <td><p>Font size for <code><cite></code> elements.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$cite-color</code></td>
- <td>Color</td>
- <td class="color"><code>$dark-gray</code></td>
- <td><p>Text color for <code><cite></code> elements.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$keystroke-font</code></td>
- <td>String or List</td>
- <td class="string | list"><code>$font-family-monospace</code></td>
- <td><p>Font family for <code><kbd></code> elements.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$keystroke-color</code></td>
- <td>Color</td>
- <td class="color"><code>$black</code></td>
- <td><p>Text color for <code><kbd></code> elements.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$keystroke-background</code></td>
- <td>Color</td>
- <td class="color"><code>$light-gray</code></td>
- <td><p>Background color for <code><kbd></code> elements.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$keystroke-padding</code></td>
- <td>Number or List</td>
- <td class="number | list"><code>rem-calc(2 4 0)</code></td>
- <td><p>Padding for <code><kbd></code> elements.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$keystroke-radius</code></td>
- <td>Number or List</td>
- <td class="number | list"><code>$global-radius</code></td>
- <td><p>Border radius for <code><kbd></code> elements.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$abbr-underline</code></td>
- <td>List</td>
- <td class="list"><code>1px dotted $black</code></td>
- <td><p>Bottom border style for <code><abbr></code> elements.</p>
-</td>
- </tr>
- </table>
- </section>
-
-
-
-</section>
-
-
-<!-- <hr> -->
-<!-- <section class="docs-building-blocks">
- <h2 id="building-blocks" class="docs-heading" data-magellan-target="building-blocks">Building Blocks<a class="docs-heading-icon" href="#building-blocks"></a></h2>
-
- <p><a href="http://zurb.com/building-blocks">Building Blocks</a> is a ZURB-curated resource with useful code snippets that use Foundation components. Here are a few for this component:</p>
-
- <div class="warning callout">
- <p>These are placeholder items. If you have ideas for building blocks for this component, <a href="https://github.com/zurb/foundation-sites-6/issues/118">we're taking ideas on GitHub</a>.</p>
- </div>
-
- <div data-building-blocks></div>
-</section> -->
-
-</div>
-
-<div class="large-3 columns" data-sticky-container>
- <nav class="columns docs-toc-wrap" data-sticky data-anchor="docs" data-sticky-on="large">
- <div class="docs-toc hide" id="docsTOC">
- <ul class="vertical menu" data-docs-toc>
- <li class="docs-nav-title">On this page:</li>
- </ul>
- </div>
- <div class="foundation-toc-ad-unit" id="TOCAdUnit">
- </div>
- </nav>
-</div>
-
-</div>
-
-</article>
-
- </div>
- <div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
- <ul class="vertical menu docs-nav" id="docs-menu">
- <p class="docs-nav-version">
- <span data-docs-version></span>
- <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">(Changelog)</a>
- </p>
-
- <li class="docs-nav-title">Getting Started</li>
- <li><a href="installation.html">Installation</a></li>
- <li><a href="starter-projects.html">Starter Projects</a></li>
- <li><a href="compatibility.html">Compatibility</a></li>
- <li><a href="accessibility.html">Accessibility</a></li>
- <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
-
- <li class="docs-nav-title">Setup</li>
- <li><a href="global.html">Global Styles</a></li>
- <li><a href="rtl.html">Right-to-Left Support</a></li>
- <li><a href="flexbox.html">Flexbox</a></li>
- <li><a href="sass.html">Sass</a></li>
- <li><a href="javascript.html">JavaScript</a></li>
- <li><a href="javascript-utilities.html">JavaScript Utilities</a></li>
- <li><a href="media-queries.html">Media Queries</a></li>
-
- <li class="docs-nav-title">General</li>
- <li><a href="grid.html">Grid</a></li>
- <li><a href="flex-grid.html">Flex Grid</a></li>
- <li><a href="forms.html">Forms</a></li>
- <li><a href="visibility.html">Visibility Classes</a></li>
- <li><a href="float-classes.html">Float Classes</a></li>
-
- <li class="docs-nav-title">Typography</li>
- <li class="current"><a href="typography-base.html">Base Styles</a></li>
- <li><a href="typography-helpers.html">Helper Classes</a></li>
-
- <li class="docs-nav-title">Controls</li>
- <li><a href="button.html">Button</a></li>
- <li><a href="button-group.html">Button Group</a></li>
- <li><a href="close-button.html">Close Button</a></li>
- <li><a href="slider.html">Slider <span class="label">JS</span></a></li>
- <li><a href="switch.html">Switch</a></li>
-
- <li class="docs-nav-title">Navigation</li>
- <li><a href="navigation.html">Overview</a></li>
- <li><a href="menu.html">Menu</a></li>
- <li><a href="dropdown-menu.html">Dropdown Menu <span class="label">JS</span></a></li>
- <li><a href="drilldown-menu.html">Drilldown Menu <span class="label">JS</span></a></li>
- <li><a href="accordion-menu.html">Accordion Menu <span class="label">JS</span></a></li>
- <li><a href="top-bar.html">Top Bar</a></li>
- <li><a href="responsive-navigation.html">Responsive Navigation</a></li>
- <li><a href="magellan.html">Magellan <span class="label">JS</span></a></li>
- <li><a href="pagination.html">Pagination</a></li>
- <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
-
- <li class="docs-nav-title">Containers</li>
- <li><a href="accordion.html">Accordion <span class="label">JS</span></a></li>
- <li><a href="callout.html">Callout</a></li>
- <li><a href="dropdown.html">Dropdown <span class="label">JS</span></a></li>
- <li><a href="media-object.html">Media Object</a></li>
- <li><a href="off-canvas.html">Off-canvas <span class="label">JS</span></a></li>
- <li><a href="reveal.html">Reveal <span class="label">JS</span> <small>Modal</small></a></li>
- <li><a href="table.html">Table</a></li>
- <li><a href="tabs.html">Tabs <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Media</li>
- <li><a href="badge.html">Badge</a></li>
- <li><a href="flex-video.html">Flex Video</a></li>
- <li><a href="label.html">Label</a></li>
- <li><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
- <li><a href="progress-bar.html">Progress Bar</a></li>
- <li><a href="thumbnail.html">Thumbnail</a></li>
- <li><a href="tooltip.html">Tooltip <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Plugins</li>
- <li><a href="abide.html">Abide <small>Form Validation</small></a></li>
- <li><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
- <li><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
- <li><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
- <li><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
-
- <li class="docs-nav-title">Sass</li>
- <li><a href="sass-functions.html">Functions</a></li>
- <li><a href="sass-mixins.html">Mixins</a></li>
-
- <li class="docs-nav-title">Libraries</li>
- <li><a href="motion-ui.html">Motion UI</a></li>
- <li><a href="panini.html">Panini</a></li>
- <li><a href="style-sherpa.html">Style Sherpa</a></li>
-
- <li class="docs-nav-title">Older Versions</li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
- <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
- <li><a href="https://get.foundation/sites/docs/v/3.2.5/">Foundation 3</a></li>
- <li><a href="https://get.foundation/sites/docs/v/2.2.1/">Foundation 2</a></li>
- </ul>
-
- </div>
- </div>
-
- <!-- Small Business(Docs) -->
- <section id="studiosCallout">
- <div class="row">
- <div class="medium-4 large-4 columns">
- <img src="https://get.foundation/assets/img/smallbiz-footer.svg" alt="">
- </div>
- <div class="medium-8 large-8 columns banner-info">
- <div class="row column property-label">ZURB Foundation</div>
- <h3 class="light">Yeah, we can help with that.</h3>
- <p class="lead"> We’ll collaborate with your team throughout the entire project life cycle. We’ll take your concept and move it through ideation, hi-fi wireframes, visual design and code, all while informing you on the whys and hows along the way.</p>
- <div class="course-buttons">
- <a href="https://get.foundation/get-involved/premium-support.html" class="studios button" data-zcom-event="studios_foundation_click" id="foundationSmallV1">Show Me How →</a>
- </div>
- </div>
- </div>
- </section>
-
- <div class="docs-newsletter">
- <div class="row">
- <div class="medium-7 large-8 columns">
- <a target="_blank" href="https://get.foundation/learn/responsive-reading.html">
- <h5 class="">Download ZURB’s 21 Responsive Trends That Will Shape 2017</h5>
- <p style="margin-bottom: 0;">Stay informed with amazing responsive trends each month from ZURB.</p>
- </a>
- </div>
- <div class="medium-5 large-4 footer-signup-form columns">
- <a style="margin-bottom: 0;" target="_blank" href="https://get.foundation/learn/responsive-reading.html" class="button expanded">Download the PDF</a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-top bg-fblue">
- <div class="row property">
- <div class="medium-4 columns">
- <div class="property-info">
- <h3>Foundation for Sites</h3>
- <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
- </p>
- </div>
- </div>
-
- <div class="medium-8 columns">
- <div class="row collapse">
- <div class="medium-4 columns">
- <div class="learn-links">
- <h4 class="hide-for-small">Want more?</h4>
- <ul>
- <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
- <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
- <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
- <li><a href="http://zurb.com/university/courses">Training</a></li>
- <li><a href="http://zurb.com/library">Design Resources</a></li>
- </ul>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="support-links">
- <h4 class="hide-for-small">Talk to us</h4>
- <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
- <p><a href="https://get.foundation/get-involved/contribute.html">Get involved in<br>our amazing community.</a></p>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="connect-links">
- <h4 class="hide-for-small">Stay Updated</h4>
- <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
- <a href="http://zurb.com/news" class="small button">Stay Connected</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="row global">
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/studios" class="footer-link-block services">
- <span class="title">Studios</span>
- <span>Helping more than 200 startups succeed since 1998.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="https://get.foundation/" class="footer-link-block foundation">
- <span class="title">Foundation</span>
- <span>The most advanced front-end framework in the world.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/notable" class="footer-link-block apps">
- <span class="title">Notable Design Apps</span>
- <span>Prototype, iterate and collect feedback on your products.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/university" class="footer-link-block expo">
- <span class="title">University</span>
- <span>Ideas, thoughts and design resources shared with you.</span>
- </a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-bottom">
- <div class="row">
- <div class="medium-4 medium-push-8 columns">
- <ul class="home-social">
- <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
- <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
- <li><a href="http://zurb.com/contact" class="mail"></a></li>
- </ul>
- </div>
- <div class="medium-8 medium-pull-4 columns">
- <a href="http://www.zurb.com" class="zurb-logo regular"></a>
- <ul class="zurb-links">
- <li><a href="http://zurb.com/about">About</a></li>
- <li><a href="http://zurb.com/blog">Blog</a></li>
- <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
- <li><a href="http://zurb.com/contact">Contact</a></li>
- <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
- </ul>
- <p class="copyright">© 1998‐2016 ZURB, Inc. All rights reserved.</p>
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- <script>
- var _gaq = _gaq || [];
- _gaq.push(
- ['_setAccount', 'UA-2195009-2'],
- ['_trackPageview'],
- ['b._setAccount', 'UA-2195009-27'],
- ['b._trackPageview']
- );
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
-
- <script src="assets/js/vendor.js?hash=2f328d2472a19ba04ba549e86da54158"></script>
- <script src="assets/js/foundation.js?hash=6e5aee2b02771bd567b00e689dc5f293"></script>
- <script src="assets/js/docs.js?hash=c7584f60c5c05c1bad156e6c4a268919"></script>
- <script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
-</body>
-</html>
+++ /dev/null
-<!doctype html>
-<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
-<html class="no-js" lang="en" dir="ltr">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="Our helper classes allow you to scaffold certain typographic styles faster.">
- <link rel="icon" href="assets/img/icons/foundation-favicon.ico" type="image/x-icon">
- <title>Foundation for Sites 6 Docs | Typography Helpers</title>
- <link href="assets/css/docs.css?hash=9bcd97e6832ad4e9e3b76392e2e320cc" rel="stylesheet" />
- <link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=a5fde5df5d6278c07962ea3adfad2d26" rel="stylesheet">
- <!-- <link rel="stylesheet" href="./node_modules/motion-ui/dist/motion-ui.css" /> -->
-</head>
-<body>
-
- <div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
-
- <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="mobile-ofc vertical menu">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
-
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/support.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/sort/unanswered">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
- </div>
-
- <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="vertical menu">
- <li><a href="#">Foundation</a></li>
- <li><a href="#">Dot</a></li>
- <li><a href="#">ZURB</a></li>
- <li><a href="#">Com</a></li>
- <li><a href="#">Slash</a></li>
- <li><a href="#">Sites</a></li>
- </ul>
- </div>
-
-
- <div class="off-canvas-content" data-off-canvas-content>
- <!-- Info Banner For Announcements or Links -->
- <!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
- <div class="info">
- <h5>Foundation 6 is here!</h5>
- </div>
- </a> -->
-
- <nav class="marketing-topbar show-for-medium">
-
- <ul class="menu">
- <li class="topbar-title"><a href="https://get.foundation/index.html"><img src="assets/img/logos/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
- </ul>
-
- <ul class="dropdown menu" data-dropdown-menu data-click-open="false">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/" target="_blank">F5 Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="https://get.foundation/emails/docs/" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
-
- </nav>
-
- <div class="title-bar hide-for-medium">
- <div class="title-bar-left">
- <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
- <span class="title-bar-title">Foundation</span>
- </div>
- </div>
-
-
- <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
-
- <div class="expanded row">
- <div class="medium-9 large-10 medium-push-3 large-push-2 columns">
-
-<article class="docs-component" id="docs-typography-helpers">
-
-<a href="#docs-menu" class="small secondary expanded button hide-for-medium">Jump to Nav</a>
-
-<header>
- <h1 class="docs-page-title">Typography Helpers</h1>
-
-
- <p class="lead docs-page-lead">Our helper classes allow you to scaffold certain typographic styles faster.</p>
-
- <ul class="menu simple docs-contribute-menu">
- <li><a href="https://github.com/zurb/foundation-sites/edit/master/docs/pages/typography-helpers.md" target="_blank"><i class="fi-pencil"></i>Edit this Page</a></li>
- <li><a href="https://github.com/zurb/foundation-sites/issues/new?title=%5BTypography%20Helpers%5D%20ISSUE%20NAME%20HERE" target="_blank"><i class="fi-social-github"></i>Report a Bug</a></li>
- <li><a href="https://get.foundation/forum" target="_blank"><i class="fi-comment"></i>Get Help</a></li>
- </ul>
-</header>
-
-<hr>
-
-<div class="row">
-
-<div class="large-9 columns" id="docs">
-
-<h2 id="text-alignment" class="docs-heading" data-magellan-target="text-alignment">Text Alignment<a class="docs-heading-icon" href="#text-alignment"></a></h2><p>You can change the text alignment of an element by adding <code>.text-left</code>, <code>.text-right</code>, <code>.text-center</code> or <code>.text-justify</code> to an element.</p>
-<p>Adding a breakpoint to the front of a text alignment class will cause it to only be applied on that size screen or larger. For example, <code>.medium-text-center</code> will keep text left-aligned on the smallest screens, but switch to center-aligned on medium screens and larger.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-left"</span>></span><span class="hljs-comment"><!-- ... --></span><span class="hljs-tag"></<span class="hljs-name">p</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-right"</span>></span><span class="hljs-comment"><!-- ... --></span><span class="hljs-tag"></<span class="hljs-name">p</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center"</span>></span><span class="hljs-comment"><!-- ... --></span><span class="hljs-tag"></<span class="hljs-name">p</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-justify"</span>></span><span class="hljs-comment"><!-- ... --></span><span class="hljs-tag"></<span class="hljs-name">p</span>></span></code></pre></div><p class="text-left"><strong>This text is left-aligned.</strong> Set in the year 0 F.E. ("Foundation Era"), The Psychohistorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire. Though the empire appears stable and powerful, it is slowly decaying in ways that parallel the decline of the Western Roman Empire.</p>
-
-<p class="text-right"><strong>This text is right-aligned.</strong> Set in the year 0 F.E. ("Foundation Era"), The Psychohistorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire. Though the empire appears stable and powerful, it is slowly decaying in ways that parallel the decline of the Western Roman Empire.</p>
-
-<p class="text-center"><strong>This text is center-aligned.</strong> Set in the year 0 F.E. ("Foundation Era"), The Psychohistorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire. Though the empire appears stable and powerful, it is slowly decaying in ways that parallel the decline of the Western Roman Empire.</p>
-
-<p class="text-justify"><strong>This text is justified.</strong> Set in the year 0 F.E. ("Foundation Era"), The Psychohistorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire. Though the empire appears stable and powerful, it is slowly decaying in ways that parallel the decline of the Western Roman Empire.</p>
-
-<hr>
-<h2 id="subheader" class="docs-heading" data-magellan-target="subheader">Subheader<a class="docs-heading-icon" href="#subheader"></a></h2><p>Lighten up your headers by adding a class of <code>.subheader</code> to any header element.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"subheader"</span>></span>h1.subheader<span class="hljs-tag"></<span class="hljs-name">h1</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"subheader"</span>></span>h2.subheader<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">h3</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"subheader"</span>></span>h3.subheader<span class="hljs-tag"></<span class="hljs-name">h3</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">h4</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"subheader"</span>></span>h4.subheader<span class="hljs-tag"></<span class="hljs-name">h4</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">h5</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"subheader"</span>></span>h5.subheader<span class="hljs-tag"></<span class="hljs-name">h5</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">h6</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"subheader"</span>></span>h6.subheader<span class="hljs-tag"></<span class="hljs-name">h6</span>></span></code></pre></div>
-
-<div class="docs-code-live"><h1 class="subheader">h1.subheader</h1>
-<h2 class="subheader">h2.subheader</h2>
-<h3 class="subheader">h3.subheader</h3>
-<h4 class="subheader">h4.subheader</h4>
-<h5 class="subheader">h5.subheader</h5>
-<h6 class="subheader">h6.subheader</h6></div><hr>
-<h2 id="lead-paragraph" class="docs-heading" data-magellan-target="lead-paragraph">Lead Paragraph<a class="docs-heading-icon" href="#lead-paragraph"></a></h2><p>A slightly-larger-than-normal block of text, useful for decks, blurbs, or other descriptive text.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"lead"</span>></span>What are your cats <span class="hljs-tag"><<span class="hljs-name">em</span>></span>really<span class="hljs-tag"></<span class="hljs-name">em</span>></span> dreaming about while they sleep?<span class="hljs-tag"></<span class="hljs-name">p</span>></span></code></pre></div>
-
-<div class="docs-code-live"><p class="lead">What are your cats <em>really</em> dreaming about while they sleep?</p></div><hr>
-<h2 id="un-bulleted-list" class="docs-heading" data-magellan-target="un-bulleted-list">Un-bulleted List<a class="docs-heading-icon" href="#un-bulleted-list"></a></h2><p>In Foundation, the <code><ul></code> is a bulleted list by default, but you can add the class <code>.no-bullet</code> to remove the bullets.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"no-bullet"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>List item with a much longer description or more content.<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>List item<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>List item
- <span class="hljs-tag"><<span class="hljs-name">ul</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Nested list item<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Nested list item<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Nested list item<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>List item<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>List item<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span>></span>List item<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">ul</span>></span></code></pre></div>
-
-<div class="docs-code-live"><ul class="no-bullet">
- <li>List item with a much longer description or more content.</li>
- <li>List item</li>
- <li>List item
- <ul>
- <li>Nested list item</li>
- <li>Nested list item</li>
- <li>Nested list item</li>
- </ul>
- </li>
- <li>List item</li>
- <li>List item</li>
- <li>List item</li>
-</ul></div><hr>
-<h2 id="statistics" class="docs-heading" data-magellan-target="statistics">Statistics<a class="docs-heading-icon" href="#statistics"></a></h2><p>If you're building a dashboard, you might need to display some important numbers <em>real big</em>. Just add the <code>.stat</code> class to any element to amp up the font size.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">p</span>></span>Days without merge conflict<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"stat"</span>></span>128<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div>
-
-<div class="docs-code-live"><p>Days without merge conflict</p>
-<div class="stat">128</div></div>
-
-<hr>
-<section>
- <h2 id="sass-reference" class="docs-heading" data-magellan-target="sass-reference">Sass Reference<a class="docs-heading-icon" href="#sass-reference"></a></h2>
-
- <section>
- <h3 id="sass-variables" class="docs-heading">Variables<a class="docs-heading-icon" href="#sass-variables"></a></h3>
-
- <p>The default styles of this component can be customized using these Sass variables in your project's <a href="sass.html#the-settings-file">settings file</a>.</p>
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Name</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td class="name"><code>$lead-font-size</code></td>
- <td>Number</td>
- <td class="number"><code>$global-font-size * 1.25</code></td>
- <td><p>Default font size for lead paragraphs.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$lead-lineheight</code></td>
- <td>String</td>
- <td class="string"><code>1.6</code></td>
- <td><p>Default line height for lead paragraphs.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$subheader-lineheight</code></td>
- <td>Number</td>
- <td class="number"><code>1.4</code></td>
- <td><p>Default line height for subheaders.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$subheader-color</code></td>
- <td>Color</td>
- <td class="color"><code>$dark-gray</code></td>
- <td><p>Default font color for subheaders.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$subheader-font-weight</code></td>
- <td>String</td>
- <td class="string"><code>$global-weight-normal</code></td>
- <td><p>Default font weight for subheaders.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$subheader-margin-top</code></td>
- <td>Number</td>
- <td class="number"><code>0.2rem</code></td>
- <td><p>Default top margin for subhheaders.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$subheader-margin-bottom</code></td>
- <td>Number</td>
- <td class="number"><code>0.5rem</code></td>
- <td><p>Default bottom margin for subheaders.</p>
-</td>
- </tr>
- <tr>
- <td class="name"><code>$stat-font-size</code></td>
- <td>Number</td>
- <td class="number"><code>2.5rem</code></td>
- <td><p>Default font size for statistic numbers.</p>
-</td>
- </tr>
- </table>
- </section>
-
-
-
-</section>
-
-
-<!-- <hr> -->
-<!-- <section class="docs-building-blocks">
- <h2 id="building-blocks" class="docs-heading" data-magellan-target="building-blocks">Building Blocks<a class="docs-heading-icon" href="#building-blocks"></a></h2>
-
- <p><a href="http://zurb.com/building-blocks">Building Blocks</a> is a ZURB-curated resource with useful code snippets that use Foundation components. Here are a few for this component:</p>
-
- <div class="warning callout">
- <p>These are placeholder items. If you have ideas for building blocks for this component, <a href="https://github.com/zurb/foundation-sites-6/issues/118">we're taking ideas on GitHub</a>.</p>
- </div>
-
- <div data-building-blocks></div>
-</section> -->
-
-</div>
-
-<div class="large-3 columns" data-sticky-container>
- <nav class="columns docs-toc-wrap" data-sticky data-anchor="docs" data-sticky-on="large">
- <div class="docs-toc hide" id="docsTOC">
- <ul class="vertical menu" data-docs-toc>
- <li class="docs-nav-title">On this page:</li>
- </ul>
- </div>
- <div class="foundation-toc-ad-unit" id="TOCAdUnit">
- </div>
- </nav>
-</div>
-
-</div>
-
-</article>
-
- </div>
- <div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
- <ul class="vertical menu docs-nav" id="docs-menu">
- <p class="docs-nav-version">
- <span data-docs-version></span>
- <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">(Changelog)</a>
- </p>
-
- <li class="docs-nav-title">Getting Started</li>
- <li><a href="installation.html">Installation</a></li>
- <li><a href="starter-projects.html">Starter Projects</a></li>
- <li><a href="compatibility.html">Compatibility</a></li>
- <li><a href="accessibility.html">Accessibility</a></li>
- <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
-
- <li class="docs-nav-title">Setup</li>
- <li><a href="global.html">Global Styles</a></li>
- <li><a href="rtl.html">Right-to-Left Support</a></li>
- <li><a href="flexbox.html">Flexbox</a></li>
- <li><a href="sass.html">Sass</a></li>
- <li><a href="javascript.html">JavaScript</a></li>
- <li><a href="javascript-utilities.html">JavaScript Utilities</a></li>
- <li><a href="media-queries.html">Media Queries</a></li>
-
- <li class="docs-nav-title">General</li>
- <li><a href="grid.html">Grid</a></li>
- <li><a href="flex-grid.html">Flex Grid</a></li>
- <li><a href="forms.html">Forms</a></li>
- <li><a href="visibility.html">Visibility Classes</a></li>
- <li><a href="float-classes.html">Float Classes</a></li>
-
- <li class="docs-nav-title">Typography</li>
- <li><a href="typography-base.html">Base Styles</a></li>
- <li class="current"><a href="typography-helpers.html">Helper Classes</a></li>
-
- <li class="docs-nav-title">Controls</li>
- <li><a href="button.html">Button</a></li>
- <li><a href="button-group.html">Button Group</a></li>
- <li><a href="close-button.html">Close Button</a></li>
- <li><a href="slider.html">Slider <span class="label">JS</span></a></li>
- <li><a href="switch.html">Switch</a></li>
-
- <li class="docs-nav-title">Navigation</li>
- <li><a href="navigation.html">Overview</a></li>
- <li><a href="menu.html">Menu</a></li>
- <li><a href="dropdown-menu.html">Dropdown Menu <span class="label">JS</span></a></li>
- <li><a href="drilldown-menu.html">Drilldown Menu <span class="label">JS</span></a></li>
- <li><a href="accordion-menu.html">Accordion Menu <span class="label">JS</span></a></li>
- <li><a href="top-bar.html">Top Bar</a></li>
- <li><a href="responsive-navigation.html">Responsive Navigation</a></li>
- <li><a href="magellan.html">Magellan <span class="label">JS</span></a></li>
- <li><a href="pagination.html">Pagination</a></li>
- <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
-
- <li class="docs-nav-title">Containers</li>
- <li><a href="accordion.html">Accordion <span class="label">JS</span></a></li>
- <li><a href="callout.html">Callout</a></li>
- <li><a href="dropdown.html">Dropdown <span class="label">JS</span></a></li>
- <li><a href="media-object.html">Media Object</a></li>
- <li><a href="off-canvas.html">Off-canvas <span class="label">JS</span></a></li>
- <li><a href="reveal.html">Reveal <span class="label">JS</span> <small>Modal</small></a></li>
- <li><a href="table.html">Table</a></li>
- <li><a href="tabs.html">Tabs <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Media</li>
- <li><a href="badge.html">Badge</a></li>
- <li><a href="flex-video.html">Flex Video</a></li>
- <li><a href="label.html">Label</a></li>
- <li><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
- <li><a href="progress-bar.html">Progress Bar</a></li>
- <li><a href="thumbnail.html">Thumbnail</a></li>
- <li><a href="tooltip.html">Tooltip <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Plugins</li>
- <li><a href="abide.html">Abide <small>Form Validation</small></a></li>
- <li><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
- <li><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
- <li><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
- <li><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
-
- <li class="docs-nav-title">Sass</li>
- <li><a href="sass-functions.html">Functions</a></li>
- <li><a href="sass-mixins.html">Mixins</a></li>
-
- <li class="docs-nav-title">Libraries</li>
- <li><a href="motion-ui.html">Motion UI</a></li>
- <li><a href="panini.html">Panini</a></li>
- <li><a href="style-sherpa.html">Style Sherpa</a></li>
-
- <li class="docs-nav-title">Older Versions</li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
- <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
- <li><a href="https://get.foundation/sites/docs/v/3.2.5/">Foundation 3</a></li>
- <li><a href="https://get.foundation/sites/docs/v/2.2.1/">Foundation 2</a></li>
- </ul>
-
- </div>
- </div>
-
- <!-- Small Business(Docs) -->
- <section id="studiosCallout">
- <div class="row">
- <div class="medium-4 large-4 columns">
- <img src="https://get.foundation/assets/img/smallbiz-footer.svg" alt="">
- </div>
- <div class="medium-8 large-8 columns banner-info">
- <div class="row column property-label">ZURB Foundation</div>
- <h3 class="light">Yeah, we can help with that.</h3>
- <p class="lead"> We’ll collaborate with your team throughout the entire project life cycle. We’ll take your concept and move it through ideation, hi-fi wireframes, visual design and code, all while informing you on the whys and hows along the way.</p>
- <div class="course-buttons">
- <a href="https://get.foundation/get-involved/premium-support.html" class="studios button" data-zcom-event="studios_foundation_click" id="foundationSmallV1">Show Me How →</a>
- </div>
- </div>
- </div>
- </section>
-
- <div class="docs-newsletter">
- <div class="row">
- <div class="medium-7 large-8 columns">
- <a target="_blank" href="https://get.foundation/learn/responsive-reading.html">
- <h5 class="">Download ZURB’s 21 Responsive Trends That Will Shape 2017</h5>
- <p style="margin-bottom: 0;">Stay informed with amazing responsive trends each month from ZURB.</p>
- </a>
- </div>
- <div class="medium-5 large-4 footer-signup-form columns">
- <a style="margin-bottom: 0;" target="_blank" href="https://get.foundation/learn/responsive-reading.html" class="button expanded">Download the PDF</a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-top bg-fblue">
- <div class="row property">
- <div class="medium-4 columns">
- <div class="property-info">
- <h3>Foundation for Sites</h3>
- <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
- </p>
- </div>
- </div>
-
- <div class="medium-8 columns">
- <div class="row collapse">
- <div class="medium-4 columns">
- <div class="learn-links">
- <h4 class="hide-for-small">Want more?</h4>
- <ul>
- <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
- <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
- <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
- <li><a href="http://zurb.com/university/courses">Training</a></li>
- <li><a href="http://zurb.com/library">Design Resources</a></li>
- </ul>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="support-links">
- <h4 class="hide-for-small">Talk to us</h4>
- <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
- <p><a href="https://get.foundation/get-involved/contribute.html">Get involved in<br>our amazing community.</a></p>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="connect-links">
- <h4 class="hide-for-small">Stay Updated</h4>
- <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
- <a href="http://zurb.com/news" class="small button">Stay Connected</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="row global">
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/studios" class="footer-link-block services">
- <span class="title">Studios</span>
- <span>Helping more than 200 startups succeed since 1998.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="https://get.foundation/" class="footer-link-block foundation">
- <span class="title">Foundation</span>
- <span>The most advanced front-end framework in the world.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/notable" class="footer-link-block apps">
- <span class="title">Notable Design Apps</span>
- <span>Prototype, iterate and collect feedback on your products.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/university" class="footer-link-block expo">
- <span class="title">University</span>
- <span>Ideas, thoughts and design resources shared with you.</span>
- </a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-bottom">
- <div class="row">
- <div class="medium-4 medium-push-8 columns">
- <ul class="home-social">
- <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
- <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
- <li><a href="http://zurb.com/contact" class="mail"></a></li>
- </ul>
- </div>
- <div class="medium-8 medium-pull-4 columns">
- <a href="http://www.zurb.com" class="zurb-logo regular"></a>
- <ul class="zurb-links">
- <li><a href="http://zurb.com/about">About</a></li>
- <li><a href="http://zurb.com/blog">Blog</a></li>
- <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
- <li><a href="http://zurb.com/contact">Contact</a></li>
- <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
- </ul>
- <p class="copyright">© 1998‐2016 ZURB, Inc. All rights reserved.</p>
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- <script>
- var _gaq = _gaq || [];
- _gaq.push(
- ['_setAccount', 'UA-2195009-2'],
- ['_trackPageview'],
- ['b._setAccount', 'UA-2195009-27'],
- ['b._trackPageview']
- );
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
-
- <script src="assets/js/vendor.js?hash=33ce06a666981d869a9220d1365672e5"></script>
- <script src="assets/js/foundation.js?hash=224199b5b31516f4e22eb9d17a1e9cb0"></script>
- <script src="assets/js/docs.js?hash=b02556cb230b00b82e6d3f77ca765848"></script>
- <script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
-</body>
-</html>
+++ /dev/null
-<!doctype html>
-<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
-<html class="no-js" lang="en" dir="ltr">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="Visibility classes let you show or hide elements based on screen size or device orientation. You can also use visibility classes to control which elements users see depending on their browsing environment.">
- <link rel="icon" href="assets/img/icons/foundation-favicon.ico" type="image/x-icon">
- <title>Foundation for Sites 6 Docs | Visibility Classes</title>
- <link href="assets/css/docs.css?hash=254f370b76f2b62d4d6d5710134a5c9e" rel="stylesheet" />
- <link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=5f8faa96a08617aca5c2183e2872fb50" rel="stylesheet">
- <!-- <link rel="stylesheet" href="./node_modules/motion-ui/dist/motion-ui.css" /> -->
-</head>
-<body>
-
- <div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
-
- <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="mobile-ofc vertical menu">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
-
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/support.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/sort/unanswered">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
- </div>
-
- <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
- <button class="close-button" aria-label="Close menu" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <ul class="vertical menu">
- <li><a href="#">Foundation</a></li>
- <li><a href="#">Dot</a></li>
- <li><a href="#">ZURB</a></li>
- <li><a href="#">Com</a></li>
- <li><a href="#">Slash</a></li>
- <li><a href="#">Sites</a></li>
- </ul>
- </div>
-
-
- <div class="off-canvas-content" data-off-canvas-content>
- <!-- Info Banner For Announcements or Links -->
- <!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
- <div class="info">
- <h5>Foundation 6 is here!</h5>
- </div>
- </a> -->
-
- <nav class="marketing-topbar show-for-medium">
-
- <ul class="menu">
- <li class="topbar-title"><a href="https://get.foundation/index.html"><img src="assets/img/logos/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
- </ul>
-
- <ul class="dropdown menu" data-dropdown-menu data-click-open="false">
-
- <li>
- <a href="https://get.foundation/learn/about.html">About</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
- <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
- <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
- <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
- <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/develop/getting-started.html">Develop</a>
- <ul class="submenu menu vertical" data-submenu>
- <li class="title">Frameworks</li>
- <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
- <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
- <li><a href="https://get.foundation/apps.html">Foundation for Apps</a></li>
- <li class="divider"></li>
- <li class="title">Develop</li>
- <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
- <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
- <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
- <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
- <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
- <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
- <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
- <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
- <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
- <li><a href="https://get.foundation/forum/">Foundation Forum</a></li>
- <li><a href="https://get.foundation/learn/events.html">Events</a></li>
- <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
- <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
- <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
- </ul>
- </li>
-
- <li>
- <a href="https://get.foundation/frameworks-docs.html">Docs</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/" target="_blank">F5 Docs</a></li>
- <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
- <li><a href="https://get.foundation/emails/docs/" target="_blank">Email Docs</a></li>
- </ul>
- </li>
-
- <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
-
- </ul>
-
- </nav>
-
- <div class="title-bar hide-for-medium">
- <div class="title-bar-left">
- <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
- <span class="title-bar-title">Foundation</span>
- </div>
- </div>
-
-
- <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
-
- <div class="expanded row">
- <div class="medium-9 large-10 medium-push-3 large-push-2 columns">
-
-<article class="docs-component" id="docs-visibility-classes">
-
-<a href="#docs-menu" class="small secondary expanded button hide-for-medium">Jump to Nav</a>
-
-<header>
- <h1 class="docs-page-title">Visibility Classes</h1>
-
-
- <p class="lead docs-page-lead">Visibility classes let you show or hide elements based on screen size or device orientation. You can also use visibility classes to control which elements users see depending on their browsing environment.</p>
-
- <ul class="menu simple docs-contribute-menu">
- <li><a href="https://github.com/zurb/foundation-sites/edit/master/docs/pages/visibility.md" target="_blank"><i class="fi-pencil"></i>Edit this Page</a></li>
- <li><a href="https://github.com/zurb/foundation-sites/issues/new?title=%5BVisibility%20Classes%5D%20ISSUE%20NAME%20HERE" target="_blank"><i class="fi-social-github"></i>Report a Bug</a></li>
- <li><a href="https://get.foundation/forum" target="_blank"><i class="fi-comment"></i>Get Help</a></li>
- </ul>
-</header>
-
-<hr>
-
-<div class="row">
-
-<div class="large-9 columns" id="docs">
-
-<div class="callout primary">
- <p>Visibility classes use <code>!important</code> to ensure they aren't overriden by more specific selectors. This is the only component in the framework that uses <code>!important</code>.</p>
-</div>
-
-<div class="callout primary">
- <p>There are no classes to detect touchscreen devices, as both desktop and mobile browsers inconsistently report touch support. Learn more here: <a href="http://www.stucox.com/blog/you-cant-detect-a-touchscreen/">You Can't Detect a Touchscreen</a></p>
-</div>
-
-<h2 id="show-by-screen-size" class="docs-heading" data-magellan-target="show-by-screen-size">Show by Screen Size<a class="docs-heading-icon" href="#show-by-screen-size"></a></h2><p>In this example, we use the <code>.show</code> visibility classes to show certain strings of text based on the device on which users view a page. If their browser meets the class's conditions, the element will be shown. If not, it will be hidden.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">p</span>></span>You are on a small screen or larger.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"show-for-medium"</span>></span>You are on a medium screen or larger.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"show-for-large"</span>></span>You are on a large screen or larger.<span class="hljs-tag"></<span class="hljs-name">p</span>></span></code></pre></div>
-
-<div class="docs-code-live"><p>You are on a small screen or larger.</p>
-<p class="show-for-medium">You are on a medium screen or larger.</p>
-<p class="show-for-large">You are on a large screen or larger.</p></div><p>These classes automatically hide the element on screen sizes <em>below</em> what's specified in the class. So <code>.show-for-medium</code> will hide the element on small, and show it on medium and larger.</p>
-<p>A separate set of classes allow you to show content <em>only</em> on a certain screen size. Just add <code>-only</code> to the end of the class.</p>
-<div class="primary callout">
- <p>Don't see any text below the code sample? You must be on an <em>extra</em> large screen.</p>
-</div>
-
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"show-for-small-only"</span>></span>You are <span class="hljs-tag"><<span class="hljs-name">em</span>></span>definitely<span class="hljs-tag"></<span class="hljs-name">em</span>></span> on a small screen.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"show-for-medium-only"</span>></span>You are <span class="hljs-tag"><<span class="hljs-name">em</span>></span>definitely<span class="hljs-tag"></<span class="hljs-name">em</span>></span> on a medium screen.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"show-for-large-only"</span>></span>You are <span class="hljs-tag"><<span class="hljs-name">em</span>></span>definitely<span class="hljs-tag"></<span class="hljs-name">em</span>></span> on a large screen.<span class="hljs-tag"></<span class="hljs-name">p</span>></span></code></pre></div>
-
-<div class="docs-code-live"><p class="show-for-small-only">You are <em>definitely</em> on a small screen.</p>
-<p class="show-for-medium-only">You are <em>definitely</em> on a medium screen.</p>
-<p class="show-for-large-only">You are <em>definitely</em> on a large screen.</p></div><hr>
-<h2 id="hide-by-screen-size" class="docs-heading" data-magellan-target="hide-by-screen-size">Hide by Screen Size<a class="docs-heading-icon" href="#hide-by-screen-size"></a></h2><p>This example shows the opposite: It uses the <code>.hide</code> visibility classes to state which elements should disappear based on the device's screen size.</p>
-<div class="primary callout">
- <p>There's no <code>.hide-for-small</code> class, because that would just permanently hide the element. For that, you can use the plain old <code>.hide</code> class instead.</p>
-</div>
-
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hide-for-medium"</span>></span>You are <span class="hljs-tag"><<span class="hljs-name">em</span>></span>not<span class="hljs-tag"></<span class="hljs-name">em</span>></span> on a medium screen or larger.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hide-for-large"</span>></span>You are <span class="hljs-tag"><<span class="hljs-name">em</span>></span>not<span class="hljs-tag"></<span class="hljs-name">em</span>></span> on a large screen or larger.<span class="hljs-tag"></<span class="hljs-name">p</span>></span></code></pre></div>
-
-<div class="docs-code-live"><p class="hide-for-medium">You are <em>not</em> on a medium screen or larger.</p>
-<p class="hide-for-large">You are <em>not</em> on a large screen or larger.</p></div><p class="show-for-large">If you're reading this, you're on a large screen, and can't see either of the above examples.</p>
-
-<p>Like with <code>.show</code>, these classes also have <code>-only</code> versions.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hide-for-small-only"</span>></span>You are <span class="hljs-tag"><<span class="hljs-name">em</span>></span>definitely not<span class="hljs-tag"></<span class="hljs-name">em</span>></span> on a small screen.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hide-for-medium-only"</span>></span>You are <span class="hljs-tag"><<span class="hljs-name">em</span>></span>definitely not<span class="hljs-tag"></<span class="hljs-name">em</span>></span> on a medium screen.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hide-for-large-only"</span>></span>You are <span class="hljs-tag"><<span class="hljs-name">em</span>></span>definitely not<span class="hljs-tag"></<span class="hljs-name">em</span>></span> on a large screen.<span class="hljs-tag"></<span class="hljs-name">p</span>></span></code></pre></div>
-
-<div class="docs-code-live"><p class="hide-for-small-only">You are <em>definitely not</em> on a small screen.</p>
-<p class="hide-for-medium-only">You are <em>definitely not</em> on a medium screen.</p>
-<p class="hide-for-large-only">You are <em>definitely not</em> on a large screen.</p></div><h3 id="generic-hide-classes" class="docs-heading">Generic Hide Classes<a class="docs-heading-icon" href="#generic-hide-classes"></a></h3><p>And if you really just need something hidden no matter what, there are classes for that as well. The <code>.hide</code> and <code>.invisible</code> classes respectively set <code>display: none</code> and <code>visibility: hidden</code> on an element. Note that both of these classes hide content from screen readers.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hide"</span>></span>Can't touch this.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"invisible"</span>></span>Can sort of touch this.<span class="hljs-tag"></<span class="hljs-name">p</span>></span></code></pre></div><hr>
-<h2 id="orientation-detection" class="docs-heading" data-magellan-target="orientation-detection">Orientation Detection<a class="docs-heading-icon" href="#orientation-detection"></a></h2><p>This straightforward example shows how two strings of text determine whether or not an element is visible in different orientations. This will change on mobile devices when you rotate the device. On desktop, the orientation is almost always reported as landscape.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"show-for-landscape"</span>></span>You are in landscape orientation.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"show-for-portrait"</span>></span>You are in portrait orientation.<span class="hljs-tag"></<span class="hljs-name">p</span>></span></code></pre></div>
-
-<div class="docs-code-live"><p class="show-for-landscape">You are in landscape orientation.</p>
-<p class="show-for-portrait">You are in portrait orientation.</p></div><hr>
-<h2 id="accessibility" class="docs-heading" data-magellan-target="accessibility">Accessibility<a class="docs-heading-icon" href="#accessibility"></a></h2><p>Adding <code>display: none</code> to an element will prevent screen readers from reading it. However, there are techniques to hide content while still making it readable by screen readers.</p>
-<h3 id="show-for-screen-readers-only" class="docs-heading">Show for Screen Readers Only<a class="docs-heading-icon" href="#show-for-screen-readers-only"></a></h3><p>To visually hide content, while still allowing assistive technology to read it, add the class show-for-sr.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"show-for-sr"</span>></span>This text can only be read by a screen reader.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">p</span>></span>There's a line of text above this one, you just can't see it.<span class="hljs-tag"></<span class="hljs-name">p</span>></span></code></pre></div>
-
-<div class="docs-code-live"><p class="show-for-sr">This text can only be read by a screen reader.</p>
-<p>There's a line of text above this one, you just can't see it.</p></div><h3 id="hide-for-screen-readers-only" class="docs-heading">Hide for Screen Readers Only<a class="docs-heading-icon" href="#hide-for-screen-readers-only"></a></h3><p>To hide text from assistive technology, while still keeping it visible, add the attribute <code>aria-hidden="true"</code>. This doesn't affect how the element looks, but screen readers will skip over it.</p>
-<div class="primary callout">
- <p>It's usually not a good idea to hide content from screen readers. <code>aria-hidden</code> is best used to mask purely visual elements of a page.</p>
-</div>
-
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">aria-hidden</span>=<span class="hljs-string">"true"</span>></span>This text can be seen, but won't be read by a screen reader.<span class="hljs-tag"></<span class="hljs-name">p</span>></span></code></pre></div>
-
-<div class="docs-code-live"><p aria-hidden="true">This text can be seen, but won't be read by a screen reader.</p></div><h3 id="creating-skip-links" class="docs-heading">Creating Skip Links<a class="docs-heading-icon" href="#creating-skip-links"></a></h3><p>If your site has a lot of navigation, a screen reader will have to read through the entire navigation to get to your site's content. To remedy this, you can add a <em>skip link</em> at the very top of your page, which will send the user farther down the page, past the navigation when clicked on.</p>
-<p>Use the class <code>.show-on-focus</code> to hide an element, except when it has focus. Adding tabindex="0" to the target element makes if focusable.</p>
-<div class="docs-code" data-docs-code><pre><code class="html"><span class="hljs-tag"><<span class="hljs-name">p</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"show-on-focus"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#mainContent"</span>></span>Skip to Content<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">p</span>></span>
-
-<span class="hljs-tag"><<span class="hljs-name">header</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"header"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"banner"</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">header</span>></span>
-
-<span class="hljs-tag"><<span class="hljs-name">main</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"mainContent"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"main"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"0"</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">main</span>></span></code></pre></div>
-
-<div class="docs-code-live"><p><a class="show-on-focus" href="#mainContent">Skip to Content</a></p>
-
-<header id="header" role="banner">
-</header>
-
-<main id="mainContent" role="main" tabindex="0">
-</main></div>
-
-<hr>
-<section>
- <h2 id="sass-reference" class="docs-heading" data-magellan-target="sass-reference">Sass Reference<a class="docs-heading-icon" href="#sass-reference"></a></h2>
-
-
-
-
- <section>
- <h3 id="sass-mixins" class="docs-heading">Mixins<a class="docs-heading-icon" href="#sass-mixins"></a></h3>
-
- <p>We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.</p>
-
-
- <section >
- <h4 id="show-for" class="docs-heading">show-for<a class="docs-heading-icon" href="#show-for"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> show-for(<span class="hljs-variable">$size</span>);</code></pre>
- </div>
-
- <p>Hide an element by default, only displaying it above a certain screen size.</p>
-
-
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$size</code></td>
- <td>Keyword</td>
- <td><code><span style="color: #999;">None</span></code></td>
- <td><p>Breakpoint to use. <strong>Must be a breakpoint defined in <code>$breakpoints</code>.</strong></p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="show-for-only" class="docs-heading">show-for-only<a class="docs-heading-icon" href="#show-for-only"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> show-for-only(<span class="hljs-variable">$size</span>);</code></pre>
- </div>
-
- <p>Hide an element by default, only displaying it within a certain breakpoint.</p>
-
-
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$size</code></td>
- <td>Keyword</td>
- <td><code><span style="color: #999;">None</span></code></td>
- <td><p>Breakpoint to use. <strong>Must be a breakpoint defined in <code>$breakpoints</code>.</strong></p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="hide-for" class="docs-heading">hide-for<a class="docs-heading-icon" href="#hide-for"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> hide-for(<span class="hljs-variable">$size</span>);</code></pre>
- </div>
-
- <p>Show an element by default, and hide it above a certain screen size.</p>
-
-
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$size</code></td>
- <td>Keyword</td>
- <td><code><span style="color: #999;">None</span></code></td>
- <td><p>Breakpoint to use. <strong>Must be a breakpoint defined in <code>$breakpoints</code>.</strong></p>
-</td>
- </tr>
- </table>
- </section>
-
- <hr>
-
-
-
- <section >
- <h4 id="hide-for-only" class="docs-heading">hide-for-only<a class="docs-heading-icon" href="#hide-for-only"></a></h4>
-
-
-
- <div class="docs-code">
- <pre><code>@<span class="hljs-keyword">include</span> hide-for-only(<span class="hljs-variable">$size</span>);</code></pre>
- </div>
-
- <p>Show an element by default, and hide it above a certain screen size.</p>
-
-
-
-
-
- <table class="docs-variable-table">
- <thead>
- <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
- </thead>
- <tr>
- <td><code>$size</code></td>
- <td>Keyword</td>
- <td><code><span style="color: #999;">None</span></code></td>
- <td><p>Breakpoint to use. <strong>Must be a breakpoint defined in <code>$breakpoints</code>.</strong></p>
-</td>
- </tr>
- </table>
- </section>
-
-
-
-
-
- </section>
-
-
-</section>
-
-
-<!-- <hr> -->
-<!-- <section class="docs-building-blocks">
- <h2 id="building-blocks" class="docs-heading" data-magellan-target="building-blocks">Building Blocks<a class="docs-heading-icon" href="#building-blocks"></a></h2>
-
- <p><a href="http://zurb.com/building-blocks">Building Blocks</a> is a ZURB-curated resource with useful code snippets that use Foundation components. Here are a few for this component:</p>
-
- <div class="warning callout">
- <p>These are placeholder items. If you have ideas for building blocks for this component, <a href="https://github.com/zurb/foundation-sites-6/issues/118">we're taking ideas on GitHub</a>.</p>
- </div>
-
- <div data-building-blocks></div>
-</section> -->
-
-</div>
-
-<div class="large-3 columns" data-sticky-container>
- <nav class="columns docs-toc-wrap" data-sticky data-anchor="docs" data-sticky-on="large">
- <div class="docs-toc hide" id="docsTOC">
- <ul class="vertical menu" data-docs-toc>
- <li class="docs-nav-title">On this page:</li>
- </ul>
- </div>
- <div class="foundation-toc-ad-unit" id="TOCAdUnit">
- </div>
- </nav>
-</div>
-
-</div>
-
-</article>
-
- </div>
- <div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
- <ul class="vertical menu docs-nav" id="docs-menu">
- <p class="docs-nav-version">
- <span data-docs-version></span>
- <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">(Changelog)</a>
- </p>
-
- <li class="docs-nav-title">Getting Started</li>
- <li><a href="installation.html">Installation</a></li>
- <li><a href="starter-projects.html">Starter Projects</a></li>
- <li><a href="compatibility.html">Compatibility</a></li>
- <li><a href="accessibility.html">Accessibility</a></li>
- <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
-
- <li class="docs-nav-title">Setup</li>
- <li><a href="global.html">Global Styles</a></li>
- <li><a href="rtl.html">Right-to-Left Support</a></li>
- <li><a href="flexbox.html">Flexbox</a></li>
- <li><a href="sass.html">Sass</a></li>
- <li><a href="javascript.html">JavaScript</a></li>
- <li><a href="javascript-utilities.html">JavaScript Utilities</a></li>
- <li><a href="media-queries.html">Media Queries</a></li>
-
- <li class="docs-nav-title">General</li>
- <li><a href="grid.html">Grid</a></li>
- <li><a href="flex-grid.html">Flex Grid</a></li>
- <li><a href="forms.html">Forms</a></li>
- <li class="current"><a href="visibility.html">Visibility Classes</a></li>
- <li><a href="float-classes.html">Float Classes</a></li>
-
- <li class="docs-nav-title">Typography</li>
- <li><a href="typography-base.html">Base Styles</a></li>
- <li><a href="typography-helpers.html">Helper Classes</a></li>
-
- <li class="docs-nav-title">Controls</li>
- <li><a href="button.html">Button</a></li>
- <li><a href="button-group.html">Button Group</a></li>
- <li><a href="close-button.html">Close Button</a></li>
- <li><a href="slider.html">Slider <span class="label">JS</span></a></li>
- <li><a href="switch.html">Switch</a></li>
-
- <li class="docs-nav-title">Navigation</li>
- <li><a href="navigation.html">Overview</a></li>
- <li><a href="menu.html">Menu</a></li>
- <li><a href="dropdown-menu.html">Dropdown Menu <span class="label">JS</span></a></li>
- <li><a href="drilldown-menu.html">Drilldown Menu <span class="label">JS</span></a></li>
- <li><a href="accordion-menu.html">Accordion Menu <span class="label">JS</span></a></li>
- <li><a href="top-bar.html">Top Bar</a></li>
- <li><a href="responsive-navigation.html">Responsive Navigation</a></li>
- <li><a href="magellan.html">Magellan <span class="label">JS</span></a></li>
- <li><a href="pagination.html">Pagination</a></li>
- <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
-
- <li class="docs-nav-title">Containers</li>
- <li><a href="accordion.html">Accordion <span class="label">JS</span></a></li>
- <li><a href="callout.html">Callout</a></li>
- <li><a href="dropdown.html">Dropdown <span class="label">JS</span></a></li>
- <li><a href="media-object.html">Media Object</a></li>
- <li><a href="off-canvas.html">Off-canvas <span class="label">JS</span></a></li>
- <li><a href="reveal.html">Reveal <span class="label">JS</span> <small>Modal</small></a></li>
- <li><a href="table.html">Table</a></li>
- <li><a href="tabs.html">Tabs <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Media</li>
- <li><a href="badge.html">Badge</a></li>
- <li><a href="flex-video.html">Flex Video</a></li>
- <li><a href="label.html">Label</a></li>
- <li><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
- <li><a href="progress-bar.html">Progress Bar</a></li>
- <li><a href="thumbnail.html">Thumbnail</a></li>
- <li><a href="tooltip.html">Tooltip <span class="label">JS</span></a></li>
-
- <li class="docs-nav-title">Plugins</li>
- <li><a href="abide.html">Abide <small>Form Validation</small></a></li>
- <li><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
- <li><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
- <li><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
- <li><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
-
- <li class="docs-nav-title">Sass</li>
- <li><a href="sass-functions.html">Functions</a></li>
- <li><a href="sass-mixins.html">Mixins</a></li>
-
- <li class="docs-nav-title">Libraries</li>
- <li><a href="motion-ui.html">Motion UI</a></li>
- <li><a href="panini.html">Panini</a></li>
- <li><a href="style-sherpa.html">Style Sherpa</a></li>
-
- <li class="docs-nav-title">Older Versions</li>
- <li><a href="https://get.foundation/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
- <li><a href="https://get.foundation/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
- <li><a href="https://get.foundation/sites/docs/v/3.2.5/">Foundation 3</a></li>
- <li><a href="https://get.foundation/sites/docs/v/2.2.1/">Foundation 2</a></li>
- </ul>
-
- </div>
- </div>
-
- <!-- Small Business(Docs) -->
- <section id="studiosCallout">
- <div class="row">
- <div class="medium-4 large-4 columns">
- <img src="https://get.foundation/assets/img/smallbiz-footer.svg" alt="">
- </div>
- <div class="medium-8 large-8 columns banner-info">
- <div class="row column property-label">ZURB Foundation</div>
- <h3 class="light">Yeah, we can help with that.</h3>
- <p class="lead"> We’ll collaborate with your team throughout the entire project life cycle. We’ll take your concept and move it through ideation, hi-fi wireframes, visual design and code, all while informing you on the whys and hows along the way.</p>
- <div class="course-buttons">
- <a href="https://get.foundation/get-involved/premium-support.html" class="studios button" data-zcom-event="studios_foundation_click" id="foundationSmallV1">Show Me How →</a>
- </div>
- </div>
- </div>
- </section>
-
- <div class="docs-newsletter">
- <div class="row">
- <div class="medium-7 large-8 columns">
- <a target="_blank" href="https://get.foundation/learn/responsive-reading.html">
- <h5 class="">Download ZURB’s 21 Responsive Trends That Will Shape 2017</h5>
- <p style="margin-bottom: 0;">Stay informed with amazing responsive trends each month from ZURB.</p>
- </a>
- </div>
- <div class="medium-5 large-4 footer-signup-form columns">
- <a style="margin-bottom: 0;" target="_blank" href="https://get.foundation/learn/responsive-reading.html" class="button expanded">Download the PDF</a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-top bg-fblue">
- <div class="row property">
- <div class="medium-4 columns">
- <div class="property-info">
- <h3>Foundation for Sites</h3>
- <p>Foundation is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
- </p>
- </div>
- </div>
-
- <div class="medium-8 columns">
- <div class="row collapse">
- <div class="medium-4 columns">
- <div class="learn-links">
- <h4 class="hide-for-small">Want more?</h4>
- <ul>
- <li><a href="https://get.foundation/apps">Foundation for Apps</a></li>
- <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
- <li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
- <li><a href="http://zurb.com/university/courses">Training</a></li>
- <li><a href="http://zurb.com/library">Design Resources</a></li>
- </ul>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="support-links">
- <h4 class="hide-for-small">Talk to us</h4>
- <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
- <p><a href="https://get.foundation/get-involved/contribute.html">Get involved in<br>our amazing community.</a></p>
- </div>
- </div>
- <div class="medium-4 columns">
- <div class="connect-links">
- <h4 class="hide-for-small">Stay Updated</h4>
- <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
- <a href="http://zurb.com/news" class="small button">Stay Connected</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="row global">
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/studios" class="footer-link-block services">
- <span class="title">Studios</span>
- <span>Helping more than 200 startups succeed since 1998.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="https://get.foundation/" class="footer-link-block foundation">
- <span class="title">Foundation</span>
- <span>The most advanced front-end framework in the world.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/notable" class="footer-link-block apps">
- <span class="title">Notable Design Apps</span>
- <span>Prototype, iterate and collect feedback on your products.</span>
- </a>
- </div>
- <div class="medium-3 small-6 columns">
- <a href="http://zurb.com/university" class="footer-link-block expo">
- <span class="title">University</span>
- <span>Ideas, thoughts and design resources shared with you.</span>
- </a>
- </div>
- </div>
- </div>
-
- <div class="zurb-footer-bottom">
- <div class="row">
- <div class="medium-4 medium-push-8 columns">
- <ul class="home-social">
- <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
- <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
- <li><a href="http://zurb.com/contact" class="mail"></a></li>
- </ul>
- </div>
- <div class="medium-8 medium-pull-4 columns">
- <a href="http://www.zurb.com" class="zurb-logo regular"></a>
- <ul class="zurb-links">
- <li><a href="http://zurb.com/about">About</a></li>
- <li><a href="http://zurb.com/blog">Blog</a></li>
- <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
- <li><a href="http://zurb.com/contact">Contact</a></li>
- <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
- </ul>
- <p class="copyright">© 1998‐2016 ZURB, Inc. All rights reserved.</p>
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- <script>
- var _gaq = _gaq || [];
- _gaq.push(
- ['_setAccount', 'UA-2195009-2'],
- ['_trackPageview'],
- ['b._setAccount', 'UA-2195009-27'],
- ['b._trackPageview']
- );
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
-
- <script src="assets/js/vendor.js?hash=bd6ad7d19556018ce7812f17a575c22c"></script>
- <script src="assets/js/foundation.js?hash=a5b1b08b79f7d14509629f425c98a149"></script>
- <script src="assets/js/docs.js?hash=acc41b7c73909d1397eb83c2f9873fde"></script>
- <script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
-</body>
-</html>
projects / thirdparty / foundation / foundation-sites.git / commitdiff
