</div>
- <div class='column row' id='root'>
- <h3 class='text-center'>Creating a sticky Nav Menu with Title Bar, DropdownMenu, and Sticky!</h3>
- <div class='callout primary'>
- <p class='lead'>It's important to note that sticky requires a bit of developer input to work properly. To create a sticky nav bar like this one, set the nav container width to 100%. It's also important to set the minimum top-anchor point to 1px, otherwise it'll never stick!</p>
+ <div class="column row" id="root">
+ <h3 class="text-center">Creating a sticky Nav Menu with Title Bar, DropdownMenu, and Sticky!</h3>
+ <div class="callout primary">
+ <p class="lead">It's important to note that sticky requires a bit of developer input to work properly. To create a sticky nav bar like this one, set the nav container width to 100%. It's also important to set the minimum top-anchor point to 1px, otherwise it'll never stick!</p>
<p>Here we're also having a bit of fun with transitions using event triggers from the sticky plugin. When the nav bar becomes sticky, it emits <code>sticky.zf.stuckto:top</code>, which we're listening to. Then we're adding a class to reduce the height and top padding of our nav bar.</p>
</div>
<p>
</ul>
```
-<ul class="accordion" data-accordion data-multi-expand='true'>
+<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 >
</ul>
```
-<ul class="accordion" data-accordion data-allow-all-closed='true'>
+<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 >
```html
<label id="ageLabel">Age</label>
-<div class="slider" aria-labelledby="ageLabel" aria-describedby="ageHelpText" data-slider data-initial-start='50' data-end='200'>
+<div class="slider" aria-labelledby="ageLabel" aria-describedby="ageHelpText" 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">
Provides a number of event listeners and triggers your script can hook into. Most are self-explanatory, and used in many Foundation plugins.
```html
-<button data-open='someId'>I open something!</button>
-<button data-close='someId'>I close something!</button>
-<button data-toggle='someId'>I toggle something!</button>
+<button data-open="someId">I open something!</button>
+<button data-close="someId">I close something!</button>
+<button data-toggle="someId">I toggle something!</button>
```
```js
-// Add the data-open/close/toggle='idOfElement' tag to your markup.
+// Add the data-open/close/toggle="idOfElement" tag to your markup.
// When a click event is triggered on that element, these are the non-bubbling events directed at your element.
// If you don't use an `id` selector, an event will be triggered that bubbles up to window.
$('selector').on('open.zf.trigger', handleOpen);
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!
```html
-<div data-scroll='someId'>...</div>
-<div data-resize='someId'>...</div>
+<div data-scroll="someId">...</div>
+<div data-resize="someId">...</div>
```
```js
$('#someId').on('scrollme.zf.trigger', handleScroll);
<li><a href="#0">Item 1A Loooong</a></li>
<li>
<a href='#0'> Item 1 sub</a>
- <ul class='menu'>
+ <ul class="menu">
<li><a href='#0'>Item 1 subA</a></li>
<li><a href='#0'>Item 1 subB</a></li>
<li>
<a href='#0'> Item 1 sub</a>
- <ul class='menu'>
+ <ul class="menu">
<li><a href='#0'>Item 1 subA</a></li>
<li><a href='#0'>Item 1 subB</a></li>
</ul>
</li>
<li>
<a href='#0'> Item 1 sub</a>
- <ul class='menu'>
+ <ul class="menu">
<li><a href='#0'>Item 1 subA</a></li>
</ul>
</li>
</div>
```html_example
-<div class="slider" data-slider data-initial-start='50' data-end='200'>
+<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">
+<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'>
+<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>
</div>
```html_example
-<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>
+<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 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>
+ <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>
## ZURB Template
<div class="responsive-embed widescreen mb1">
- <iframe id="zurb-template-starter" data-linkable-video='3Uj74uJ3GSQ' width="500" height="315" src="https://www.youtube.com/embed/3Uj74uJ3GSQ?enablejsapi=1" enablejsapi="1" frameborder="0" allowfullscreen ></iframe>
+ <iframe id="zurb-template-starter" data-linkable-video="3Uj74uJ3GSQ" width="500" height="315" src="https://www.youtube.com/embed/3Uj74uJ3GSQ?enablejsapi=1" enablejsapi="1" frameborder="0" allowfullscreen ></iframe>
<a id="docs-mobile-video-link" class="docs-mobile-video" target="_blank" href="https://www.youtube.com/watch?v=3Uj74uJ3GSQ"></a>
</div>
<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='primary callout'>
+<div class="primary callout">
<p>Inspecting the value of the underlying input should be done by evaluating the <code>checked</code> property of said input.</p>
</div>
<div class="row">
<div class="small-12 column">
<label for="fieldName">Name</label>
- <input id="fieldName" type='text' class="getinfo" required maxlength='40' name='name' />
+ <input id="fieldName" type="text" class="getinfo" required maxlength="40" name="name" />
</div>
<div class="small-12 medium-6 column">
<label for="fieldCompany">Company</label>
- <input id="fieldCompany" type='text' class="getinfo" required maxlength='40' name='Company' />
+ <input id="fieldCompany" type="text" class="getinfo" required maxlength="40" name="Company" />
</div>
<div class="small-12 medium-6 column">
<label for="fieldEmail">Email Address</label>
- <input id="fieldEmail" type='email' class="getinfo" required maxlength='100' name='email' />
+ <input id="fieldEmail" type="email" class="getinfo" required maxlength="100" name="email" />
</div>
<div class="small-12 column">
<label for="fieldText">Ask us about our upcoming trainings</label>
<form data-abide novalidate>
<input required type="text" placeholder="Required - try submitting without a value">
- <span class='form-error'>This field is required</span>
+ <span class="form-error">This field is required</span>
<input type="hidden" value="foo">
<button type="submit" class="button">Submit</button>
<button type="reset" class="button">Reset</button>
<form data-abide novalidate>
<div class="row column">
<input required type="text" placeholder="Required">
- <span class='form-error'>This field is required</span>
+ <span class="form-error">This field is required</span>
</div>
<div class="row column">
<input required id="ignoreAfter" type="text" placeholder="Ignored">
- <span class='form-error'>You should never see this error!</span>
+ <span class="form-error">You should never see this error!</span>
</div>
<button type="submit" class="button">Submit</button>
<button type="reset" class="button">Reset</button>
</div>
</div>
</div>
- <div class='column row'>
+ <div class="column row">
<h3>Sticky navbar height transition</h3>
<p>The content should follow the nav-bar resizing without red flashing (sticky-container background)</p>
</div>
A medium 4 cell
</div>
<div class="cell medium-4 medium-cell-block">
- <p class='wide' >A medium 4 cell block... on medium this content should overflow and let you horizontally scroll across... one might use this for an array of options</p>
+ <p class="wide" >A medium 4 cell block... on medium this content should overflow and let you horizontally scroll across... one might use this for an array of options</p>
</div>
<div class="cell medium-4">
A medium 4 cell