<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="example1Hint1" aria-errormessage="example1Error1" required pattern="number">
- <span class="form-error" id="example1Error1">
- Yo, you had better fill this out, it's required.
- </span>
- </label>
- <p class="help-text" id="example1Hint1">Here's how you use this input field!</p>
- </div>
- <div class="small-12 columns">
- <label>Password Required
- <input type="password" id="password" placeholder="yeti4preZ" aria-describedby="example1Hint2" aria-errormessage="example1Error2" required >
- <span class="form-error" id="example1Error2">
- I'm required!
- </span>
- </label>
- <p class="help-text" id="example1Hint2">Enter a password please.</p>
- </div>
- <div class="small-12 columns">
- <label>Re-enter Password
- <input type="password" placeholder="yeti4preZ" aria-describedby="example1Hint3" aria-errormessage="example1Error3" required pattern="alpha_numeric" data-equalto="password">
- <span class="form-error" id="example1Error3">
- Hey, passwords are supposed to match!
- </span>
- </label>
- <p class="help-text" id="example1Hint3">This field is using the `data-equalto="password"` attribute, causing it to match the password field above.</p>
+ <div class="grid-container">
+ <div class="grid-x grid-margin-x">
+ <div class="cell small-12">
+ <label>Number Required
+ <input type="text" placeholder="1234" aria-describedby="example1Hint1" aria-errormessage="example1Error1" required pattern="number">
+ <span class="form-error" id="example1Error1">
+ Yo, you had better fill this out, it's required.
+ </span>
+ </label>
+ <p class="help-text" id="example1Hint1">Here's how you use this input field!</p>
+ </div>
+ <div class="cell small-12">
+ <label>Password Required
+ <input type="password" id="password" placeholder="yeti4preZ" aria-describedby="example1Hint2" aria-errormessage="example1Error2" required >
+ <span class="form-error" id="example1Error2">
+ I'm required!
+ </span>
+ </label>
+ <p class="help-text" id="example1Hint2">Enter a password please.</p>
+ </div>
+ <div class="cell small-12">
+ <label>Re-enter Password
+ <input type="password" placeholder="yeti4preZ" aria-describedby="example1Hint3" aria-errormessage="example1Error3" required pattern="alpha_numeric" data-equalto="password">
+ <span class="form-error" id="example1Error3">
+ Hey, passwords are supposed to match!
+ </span>
+ </label>
+ <p class="help-text" id="example1Hint3">This field is using the `data-equalto="password"` attribute, causing it to match the password field above.</p>
+ </div>
</div>
</div>
- <div class="row">
- <div class="large-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://foundation.zurb.com" pattern="url">
- </label>
- </div>
- <div class="large-6 columns">
- <label>Website Pattern, not required, but throws error if it doesn't match the Regular Expression for a valid URL or a Domain.
- <input type="text" placeholder="https://zurb.com or zurb.com" pattern="website">
- </label>
+ <div class="grid-container">
+ <div class="grid-x grid-margin-x">
+ <div class="cell large-6">
+ <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://foundation.zurb.com" pattern="url">
+ </label>
+ </div>
+ <div class="cell large-6">
+ <label>Website Pattern, not required, but throws error if it doesn't match the Regular Expression for a valid URL or a Domain.
+ <input type="text" placeholder="https://zurb.com or zurb.com" pattern="website">
+ </label>
+ </div>
</div>
</div>
- <div class="row">
- <div class="large-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 class="grid-container">
+ <div class="grid-x grid-margin-x">
+ <div class="cell large-6">
+ <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>
+ <fieldset class="cell large-6">
+ <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>
- <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">
- <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>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>
+ <div class="grid-container">
+ <div class="grid-x grid-margin-x">
+ <fieldset class="cell large-6">
+ <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="cell large-6">
+ <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>
+ </div>
</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 class="grid-container">
+ <div class="grid-x grid-margin-x">
+ <fieldset class="cell large-6">
+ <button class="button" type="submit" value="Submit">Submit</button>
+ </fieldset>
+ <fieldset class="cell large-6">
+ <button class="button" type="reset" value="Reset">Reset</button>
+ </fieldset>
+ </div>
</div>
</form>
```
```html
<form data-abide>
- <div class="small-12 columns">
+ <div class="grid-x grid-margin-x">
+ <div class="cell small-12">
<label>Nothing Required!
<input type="text" placeholder="Use me, or don't" aria-describedby="example5Hint1" data-abide-ignore>
</label>
<p class="help-text" id="example5Hint1">This input is ignored by Abide using `data-abide-ignore`</p>
</div>
- <div class="small-12 columns">
+ <div class="cell small-12">
<label>Disabled!
<input type="text" placeholder="Disabled input" aria-describedby="example5Hint2" disabled>
</label>
<p class="help-text" id="example5Hint2">This input is ignored by Abide using `disabled`</p>
</div>
- <div class="small-12 columns">
+ <div class="cell small-12">
<label>Hidden!
<input type="hidden" placeholder="Hidden input" aria-describedby="example5Hint3" >
</label>
<p class="help-text" id="example5Hint3">This input is ignored by Abide using `type="hidden"`</p>
</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>
+ <div class="grid-container">
+ <div class="grid-x grid-margin-x">
+ <fieldset class="cell small-12">
+ <button class="button" type="submit" value="Submit">Submit</button>
+ </fieldset>
+ <fieldset class="cell small-12">
+ <button class="button" type="reset" value="Reset">Reset</button>
+ </fieldset>
+ </div>
</div>
</form>
```
</div>
```
-<div class="row small-up-3">
- <div class="column">
+<div class="grid-x grid-margin-x small-up-3">
+ <div class="cell">
<div class="card">
<img src="assets/img/generic/rectangle-1.jpg">
<div class="card-section">
</div>
</div>
</div>
- <div class="column">
+ <div class="cell">
<div class="card">
<div class="card-section">
<img src="assets/img/generic/rectangle-1.jpg">
</div>
```
-<div class="row small-up-3">
- <div class="column">
+<div class="grid-x grid-margin-x small-up-3">
+ <div class="cell">
<div class="card">
<div class="card-section">
<p>Images work just fine below the content too!</p>
</div>
</div>
</div>
-<div class="row small-up-2 medium-up-3">
- <div class="column">
+<div class="grid-x grid-padding-x small-up-2 medium-up-3">
+ <div class="cell">
<div class="card">
<img src="assets/img/generic/rectangle-1.jpg">
<div class="card-section">
</div>
</div>
</div>
- <div class="column">
+ <div class="cell">
<div class="card">
<img src="assets/img/generic/rectangle-1.jpg">
<div class="card-section">
</div>
</div>
</div>
- <div class="column">
+ <div class="cell">
<div class="card">
<img src="assets/img/generic/rectangle-1.jpg">
<div class="card-section">
<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 class="grid-container">
+ <div class="grid-x grid-margin-x">
+ <div class="cell medium-6">
+ <label>Name
+ <input type="text" placeholder="Kirk, James T.">
+ </label>
+ </div>
+ <div class="cell medium-6">
+ <label>Rank
+ <input type="text" placeholder="Captain">
+ </label>
+ </div>
</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 class="row small-up-1 medium-up-3">
- <div class="column">
- <p>Bottom Left</p>
- <button class="button" type="button" data-toggle="example-dropdown-bottom-left">Toggle Dropdown</button>
- <div class="dropdown-pane" data-position="bottom" data-alignment="left" id="example-dropdown-bottom-left" data-dropdown data-auto-focus="true">
- <p>This dropdown has position bottom and alignment left should align with its top left corner at the bottom left of the button</p>
+<div class="grid-container">
+ <div class="grid-x grid-margin-x small-up-1 medium-up-3">
+ <div class="cell">
+ <p>Bottom Left</p>
+ <button class="button" type="button" data-toggle="example-dropdown-bottom-left">Toggle Dropdown</button>
+ <div class="dropdown-pane" data-position="bottom" data-alignment="left" id="example-dropdown-bottom-left" data-dropdown data-auto-focus="true">
+ <p>This dropdown has position bottom and alignment left should align with its top left corner at the bottom left of the button</p>
+ </div>
</div>
- </div>
-
- <div class="column">
- <p>Bottom Center</p>
- <button class="button" type="button" data-toggle="example-dropdown-bottom-center">Toggle Dropdown</button>
- <div class="dropdown-pane" data-position="bottom" data-alignment="center" id="example-dropdown-bottom-center" data-dropdown data-auto-focus="true">
- <p>This dropdown has position bottom and alignment center should align below the button with its center aligned with the center of the button</p>
+ <div class="cell">
+ <p>Bottom Center</p>
+ <button class="button" type="button" data-toggle="example-dropdown-bottom-center">Toggle Dropdown</button>
+ <div class="dropdown-pane" data-position="bottom" data-alignment="center" id="example-dropdown-bottom-center" data-dropdown data-auto-focus="true">
+ <p>This dropdown has position bottom and alignment center should align below the button with its center aligned with the center of the button</p>
+ </div>
</div>
- </div>
-
- <div class="column">
- <p>Bottom Right</p>
- <button class="button" type="button" data-toggle="example-dropdown-bottom-right">Toggle Dropdown</button>
- <div class="dropdown-pane" data-position="bottom" data-alignment="right" id="example-dropdown-bottom-right" data-dropdown data-auto-focus="true">
- <p>This dropdown has position bottom and alignment right should align with its top right corner at the bottom right of the button</p>
+ <div class="cell">
+ <p>Bottom Right</p>
+ <button class="button" type="button" data-toggle="example-dropdown-bottom-right">Toggle Dropdown</button>
+ <div class="dropdown-pane" data-position="bottom" data-alignment="right" id="example-dropdown-bottom-right" data-dropdown data-auto-focus="true">
+ <p>This dropdown has position bottom and alignment right should align with its top right corner at the bottom right of the button</p>
+ </div>
</div>
- </div>
-
- <div class="column">
- <p>Top Left</p>
- <button class="button" type="button" data-toggle="example-dropdown-top-left">Toggle Dropdown</button>
- <div class="dropdown-pane" data-position="top" data-alignment="left" id="example-dropdown-top-left" data-dropdown data-auto-focus="true">
- <p>This dropdown has position top and alignment left should align with its bottom left corner at the top left of the button</p>
+ <div class="cell">
+ <p>Top Left</p>
+ <button class="button" type="button" data-toggle="example-dropdown-top-left">Toggle Dropdown</button>
+ <div class="dropdown-pane" data-position="top" data-alignment="left" id="example-dropdown-top-left" data-dropdown data-auto-focus="true">
+ <p>This dropdown has position top and alignment left should align with its bottom left corner at the top left of the button</p>
+ </div>
</div>
- </div>
-
- <div class="column">
- <p>Top Center</p>
- <button class="button" type="button" data-toggle="example-dropdown-top-center">Toggle Dropdown</button>
- <div class="dropdown-pane" data-position="top" data-alignment="center" id="example-dropdown-top-center" data-dropdown data-auto-focus="true">
- <p>This dropdown has position top and alignment center should align above with its center aligned with the center of the button</p>
+ <div class="cell">
+ <p>Top Center</p>
+ <button class="button" type="button" data-toggle="example-dropdown-top-center">Toggle Dropdown</button>
+ <div class="dropdown-pane" data-position="top" data-alignment="center" id="example-dropdown-top-center" data-dropdown data-auto-focus="true">
+ <p>This dropdown has position top and alignment center should align above with its center aligned with the center of the button</p>
+ </div>
</div>
- </div>
-
- <div class="column">
- <p>Top Right</p>
- <button class="button" type="button" data-toggle="example-dropdown-top-right">Toggle Dropdown</button>
- <div class="dropdown-pane" data-position="top" data-alignment="right" id="example-dropdown-top-right" data-dropdown data-auto-focus="true">
- <p>This dropdown has position top and alignment right should align with its bottom right corner at the top right of the button</p>
+ <div class="cell">
+ <p>Top Right</p>
+ <button class="button" type="button" data-toggle="example-dropdown-top-right">Toggle Dropdown</button>
+ <div class="dropdown-pane" data-position="top" data-alignment="right" id="example-dropdown-top-right" data-dropdown data-auto-focus="true">
+ <p>This dropdown has position top and alignment right should align with its bottom right corner at the top right of the button</p>
+ </div>
</div>
</div>
</div>
</div>
```
-<div class="row small-up-1 medium-up-2">
- <div class="column">
- <p>Right Top</p>
- <button class="button" type="button" data-toggle="example-dropdown-right-top">Toggle Dropdown</button>
- <div class="dropdown-pane" data-position="right" data-alignment="top" id="example-dropdown-right-top" data-dropdown data-auto-focus="true">
- <p>This dropdown has position right and alignment top should align with its top left corner at the top right of the button</p>
+<div class="grid-container">
+ <div class="grid-x grid-margin-x small-up-1 medium-up-2">
+ <div class="cell">
+ <p>Right Top</p>
+ <button class="button" type="button" data-toggle="example-dropdown-right-top">Toggle Dropdown</button>
+ <div class="dropdown-pane" data-position="right" data-alignment="top" id="example-dropdown-right-top" data-dropdown data-auto-focus="true">
+ <p>This dropdown has position right and alignment top should align with its top left corner at the top right of the button</p>
+ </div>
</div>
- </div>
- <div class="column">
- <p>Left Top</p>
- <button class="button" type="button" data-toggle="example-dropdown-left-top">Toggle Dropdown</button>
- <div class="dropdown-pane" data-position="left" data-alignment="top" id="example-dropdown-left-top" data-dropdown data-auto-focus="true">
- <p>This dropdown has position left and alignment top should align with its top right corner at the top left of the button</p>
+ <div class="cell">
+ <p>Left Top</p>
+ <button class="button" type="button" data-toggle="example-dropdown-left-top">Toggle Dropdown</button>
+ <div class="dropdown-pane" data-position="left" data-alignment="top" id="example-dropdown-left-top" data-dropdown data-auto-focus="true">
+ <p>This dropdown has position left and alignment top should align with its top right corner at the top left of the button</p>
+ </div>
</div>
- </div>
-
- <div class="column">
- <p>Right Center</p>
- <button class="button" type="button" data-toggle="example-dropdown-right-center">Toggle Dropdown</button>
- <div class="dropdown-pane" data-position="right" data-alignment="center" id="example-dropdown-right-center" data-dropdown data-auto-focus="true">
- <p>This dropdown has position right and alignment center should align to the right of the button with the center of the dropdown vertically aligned with the center of the button</p>
+ <div class="cell">
+ <p>Right Center</p>
+ <button class="button" type="button" data-toggle="example-dropdown-right-center">Toggle Dropdown</button>
+ <div class="dropdown-pane" data-position="right" data-alignment="center" id="example-dropdown-right-center" data-dropdown data-auto-focus="true">
+ <p>This dropdown has position right and alignment center should align to the right of the button with the center of the dropdown vertically aligned with the center of the button</p>
+ </div>
</div>
- </div>
- <div class="column">
- <p>Left Center</p>
- <button class="button" type="button" data-toggle="example-dropdown-left-center">Toggle Dropdown</button>
- <div class="dropdown-pane" data-position="left" data-alignment="center" id="example-dropdown-left-center" data-dropdown data-auto-focus="true">
- <p>This dropdown has position left and alignment center should align to the left of the button with the center of the dropdown vertically aligned with the center of the button</p>
+ <div class="cell">
+ <p>Left Center</p>
+ <button class="button" type="button" data-toggle="example-dropdown-left-center">Toggle Dropdown</button>
+ <div class="dropdown-pane" data-position="left" data-alignment="center" id="example-dropdown-left-center" data-dropdown data-auto-focus="true">
+ <p>This dropdown has position left and alignment center should align to the left of the button with the center of the dropdown vertically aligned with the center of the button</p>
+ </div>
</div>
- </div>
-
- <div class="column">
- <p>Right Bottom</p>
- <button class="button" type="button" data-toggle="example-dropdown-right-bottom">Toggle Dropdown</button>
- <div class="dropdown-pane" data-position="right" data-alignment="bottom" id="example-dropdown-right-bottom" data-dropdown data-auto-focus="true">
- <p>This dropdown has position right and alignment bottom should align with its bottom left corner at the bottom right of the button</p>
+ <div class="cell">
+ <p>Right Bottom</p>
+ <button class="button" type="button" data-toggle="example-dropdown-right-bottom">Toggle Dropdown</button>
+ <div class="dropdown-pane" data-position="right" data-alignment="bottom" id="example-dropdown-right-bottom" data-dropdown data-auto-focus="true">
+ <p>This dropdown has position right and alignment bottom should align with its bottom left corner at the bottom right of the button</p>
+ </div>
</div>
- </div>
- <div class="column">
- <p>Left Bottom</p>
- <button class="button" type="button" data-toggle="example-dropdown-left-bottom">Toggle Dropdown</button>
- <div class="dropdown-pane" data-position="left" data-alignment="bottom" id="example-dropdown-left-bottom" data-dropdown data-auto-focus="true">
- <p>This dropdown has position left and alignment bottom should align with its bottom right corner at the bottom left of the button</p>
+ <div class="cell">
+ <p>Left Bottom</p>
+ <button class="button" type="button" data-toggle="example-dropdown-left-bottom">Toggle Dropdown</button>
+ <div class="dropdown-pane" data-position="left" data-alignment="bottom" id="example-dropdown-left-bottom" data-dropdown data-auto-focus="true">
+ <p>This dropdown has position left and alignment bottom should align with its bottom right corner at the bottom left of the button</p>
+ </div>
</div>
</div>
</div>
</p>
<div class="docs-codepen-container">
- <a class="codepen-logo-link" href="https://codepen.io/
brettsmason/pen/pPKqrq?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+ <a class="codepen-logo-link" href="https://codepen.io/
colin-marshall/pen/BryEYL?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html_example
-<div class="row" data-equalizer data-equalize-on="medium" id="test-eq">
- <div class="medium-4 columns">
+<div class="grid-x grid-margin-x" data-equalizer data-equalize-on="medium" id="test-eq">
+ <div class="cell medium-4">
<div class="callout" data-equalizer-watch>
<img src= "assets/img/generic/square-1.jpg">
</div>
</div>
- <div class="medium-4 columns">
+ <div class="cell medium-4">
<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="cell medium-4">
<div class="callout" data-equalizer-watch>
<img src= "assets/img/generic/rectangle-1.jpg">
</div>
In the below example, the first set of Equalizer elements have the value `foo`, while the inside elements have the value `bar`. In the live example, we've also set the `equalizeOn` option to 'medium' for the parent elements, and the child Equalizer contained in the first div equalizes on stack, and maintains equal height.
<div class="docs-codepen-container">
- <a class="codepen-logo-link" href="https://codepen.io/
brettsmason/pen/zwayPO?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+ <a class="codepen-logo-link" href="https://codepen.io/
colin-marshall/pen/oqgOoR?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html
-<div class="row" data-equalizer="foo">
- <div class="medium-4 columns" data-equalizer-watch="foo">
+<div class="grid-x" data-equalizer="foo">
+ <div class="cell medium-4" data-equalizer-watch="foo">
<div class="callout" data-equalizer-watch="foo" data-equalizer="bar">
<h3>Parent panel</h3>
<div class="callout" data-equalizer-watch="bar"></div>
<div class="callout" data-equalizer-watch="bar"></div>
</div>
</div>
- <div class="medium-4 columns">
+ <div class="cell medium-4">
<div class="callout panel" data-equalizer-watch="foo"></div>
</div>
- <div class="medium-4 columns">
+ <div class="cell medium-4">
<div class="callout" data-equalizer-watch="foo"></div>
</div>
</div>
```
-<div class="row" data-equalize-on="medium" data-equalizer="foo">
- <div class="medium-4 columns" >
+<div class="grid-x grid-margin-x" data-equalize-on="medium" data-equalizer="foo">
+ <div class="cell medium-4" >
<div class="callout" data-equalizer-watch="foo" data-equalizer="bar" data-equalize-on-stack="true">
<h3>Parent panel</h3>
<div class="callout" data-equalizer-watch="bar">
</div>
</div>
</div>
- <div class="medium-4 columns">
+ <div class="cell medium-4">
<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="cell medium-4">
<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 class="docs-codepen-container">
- <a class="codepen-logo-link" href="https://codepen.io/
brettsmason/pen/pPKqrq?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+ <a class="codepen-logo-link" href="https://codepen.io/
colin-marshall/pen/MVYRBG?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html
-<div class="row small-up-1 medium-up-2 large-up-4" data-equalizer data-equalize-by-row="true">
- <div class="column" data-equalizer-watch></div>
- <div class="column" data-equalizer-watch></div>
- <div class="column" data-equalizer-watch></div>
+<div class="grid-x grid-padding-x small-up-1 medium-up-2 large-up-4" data-equalizer data-equalize-by-row="true">
+ <div class="cell" data-equalizer-watch></div>
+ <div class="cell" data-equalizer-watch></div>
+ <div class="cell" data-equalizer-watch></div>
<!-- ... -->
</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="grid-x grid-padding-x small-up-1 medium-up-2 large-up-4" data-equalizer data-equalize-by-row="true">
+ <div class="cell">
<div class="callout" data-equalizer-watch>
<img src="https://placehold.it/180x200" class="thumbnail" alt="">
<p>Lorem ipsum dolor sit amet<p>
</div>
</div>
- <div class="column">
+ <div class="cell">
<div class="callout" data-equalizer-watch>
<p>Lorem ipsum dolor sit amet<p>
</div>
</div>
- <div class="column">
+ <div class="cell">
<div class="callout" data-equalizer-watch>
<p>Lorem ipsum dolor sit amet<p>
</div>
</div>
- <div class="column">
+ <div class="cell">
<div class="callout" data-equalizer-watch>
<img src="https://placehold.it/180x180" class="thumbnail" alt="">
</div>
</div>
- <div class="column">
+ <div class="cell">
<div class="callout" data-equalizer-watch>
<p>Lorem ipsum dolor sit amet<p>
</div>
</div>
- <div class="column">
+ <div class="cell">
<div class="callout" data-equalizer-watch>
<p>Lorem ipsum dolor sit amet<p>
</div>
</div>
- <div class="column">
+ <div class="cell">
<div class="callout" data-equalizer-watch>
<img src="https://placehold.it/180x400" class="thumbnail" alt="">
</div>
</div>
- <div class="column">
+ <div class="cell">
<div class="callout" data-equalizer-watch>
<img src="https://placehold.it/180x200" class="thumbnail" alt="">
<p>Lorem ipsum dolor sit amet<p>
</div>
</div>
- <div class="column">
+ <div class="cell">
<div class="callout" data-equalizer-watch>
<p>Lorem ipsum dolor sit amet<p>
</div>
</div>
- <div class="column">
+ <div class="cell">
<div class="callout" data-equalizer-watch>
<p>Lorem ipsum dolor sit amet<p>
</div>
</div>
- <div class="column">
+ <div class="cell">
<div class="callout" data-equalizer-watch>
<img src="https://placehold.it/180x180" class="thumbnail" alt="">
</div>
</div>
- <div class="column">
+ <div class="cell">
<div class="callout" data-equalizer-watch>
<p>Lorem ipsum dolor sit amet<p>
</div>
</div>
- <div class="column">
+ <div class="cell">
<div class="callout" data-equalizer-watch>
<p>Lorem ipsum dolor sit amet<p>
</div>
</div>
- <div class="column">
+ <div class="cell">
<div class="callout" data-equalizer-watch>
<p>Lorem ipsum dolor sit amet<p>
</div>
</div>
- <div class="column">
+ <div class="cell">
<div class="callout" data-equalizer-watch>
<p>Lorem ipsum dolor sit amet<p>
</div>
</div>
- <div class="column">
+ <div class="cell">
<div class="callout" data-equalizer-watch>
<p>Lorem ipsum dolor sit amet<p>
</div>
</div>
- <div class="column">
+ <div class="cell">
<div class="callout" data-equalizer-watch>
<p>Lorem ipsum dolor sit amet<p>
</div>
</div>
- <div class="column">
+ <div class="cell">
<div class="callout" data-equalizer-watch>
<img src="https://placehold.it/180x400" class="thumbnail" alt="">
</div>
Foundation has an accessible default color palette. The primary color is used for interactive elements, such as links and buttons. The secondary, success, warning, and alert colors are used to give more context to UI elements and actions.
-<div class="row small-up-1 medium-up-3 large-up-5">
- <div class="column column-block">
+<div class="grid-x grid-margin-x small-up-1 medium-up-3 large-up-5">
+ <div class="cell">
<div class="docs-color-block">
<div class="docs-color-block-primary"></div>
<p>Primary</p>
</div>
</div>
- <div class="column column-block">
+ <div class="cell">
<div class="docs-color-block">
<div class="docs-color-block-secondary"></div>
<p>Secondary</p>
</div>
</div>
- <div class="column column-block">
+ <div class="cell">
<div class="docs-color-block">
<div class="docs-color-block-success"></div>
<p>Success</p>
</div>
</div>
- <div class="column column-block">
+ <div class="cell">
<div class="docs-color-block">
<div class="docs-color-block-warning"></div>
<p>Warning</p>
</div>
</div>
- <div class="column column-block">
+ <div class="cell">
<div class="docs-color-block">
<div class="docs-color-block-alert"></div>
<p>Alert</p>
</div>
</div>
- <div class="column column-block">
+ <div class="cell">
<div class="docs-color-block">
<div class="docs-color-block-white"></div>
<p>White</p>
</div>
</div>
- <div class="column column-block">
+ <div class="cell">
<div class="docs-color-block">
<div class="docs-color-block-light-gray"></div>
<p>Light Gray</p>
</div>
</div>
- <div class="column column-block">
+ <div class="cell">
<div class="docs-color-block">
<div class="docs-color-block-medium-gray"></div>
<p>Medium Gray</p>
</div>
</div>
- <div class="column column-block">
+ <div class="cell">
<div class="docs-color-block">
<div class="docs-color-block-dark-gray"></div>
<p>Dark Gray</p>
</div>
</div>
- <div class="column column-block">
+ <div class="cell">
<div class="docs-color-block">
<div class="docs-color-block-black"></div>
<p>Black</p>
<div class="accordion-content" data-tab-content>
<a href="{{root}}starter-projects.html?video=lFrpnk0Oo_8" target="_blank">
- <div class="row accordion-content-item">
- <div class="medium-4 columns accordion-content-item-thumbnail">
+ <div class="grid-x grid-margin-x accordion-content-item">
+ <div class="cell medium-4 accordion-content-item-thumbnail">
<img src="https://i3.ytimg.com/vi/lFrpnk0Oo_8/maxresdefault.jpg" class="" height="" width="" alt="">
</div>
- <div class="medium-8 columns">
+ <div class="cell medium-8">
<h5>Foundation Starter Projects - CSS Download</h5>
<p>This video will take you through downloading and getting started with the Foundation CSS project.</p>
<span class="accordion-content-item-cta"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="" height="" width="" alt=""> Watch Video</span>
</a>
<a href="{{root}}starter-projects.html?video=3Uj74uJ3GSQ" target="_blank">
- <div class="row accordion-content-item">
- <div class="medium-4 columns accordion-content-item-thumbnail">
+ <div class="grid-x grid-margin-x accordion-content-item">
+ <div class="cell medium-4 accordion-content-item-thumbnail">
<img src="https://i3.ytimg.com/vi/3Uj74uJ3GSQ/maxresdefault.jpg" class="" height="" width="" alt="">
</div>
- <div class="medium-8 columns">
+ <div class="cell medium-8">
<h5>Foundation Starter Projects - ZURB Stack</h5>
<p>This video will take you through downloading and getting started with the Foundation ZURB stack.</p>
<span class="accordion-content-item-cta"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="" height="" width="" alt=""> Watch Video</span>
<div class="accordion-content" data-tab-content>
<a target="_blank" href="http://foundation.zurb.com/learn/get-your-team-on-a-solid-foundation.html">
- <div class="row accordion-content-item">
- <div class="medium-4 columns accordion-content-item-thumbnail">
+ <div class="grid-x grid-margin-x accordion-content-item">
+ <div class="cell medium-4 accordion-content-item-thumbnail">
<img src="https://i.ytimg.com/vi/kLgRITKjcWw/mqdefault.jpg" class="" height="" width="" alt="">
</div>
- <div class="medium-8 columns">
+ <div class="cell medium-8">
<h5>The World’s Most Advanced Front-end Framework</h5>
<p>Coming from another framework? It’s the perfect time to make the switch and learn Foundation. Download our free e-book that will help you convince your team that Foundation is better, easier to learn, and more flexible than anything else out there.
</p>
</a>
<a target="_blank" href="http://foundation.zurb.com/learn/build-your-career-on-a-solid-foundation.html">
- <div class="row accordion-content-item">
- <div class="medium-4 columns accordion-content-item-thumbnail">
+ <div class="grid-x grid-margin-x accordion-content-item">
+ <div class="cell medium-4 accordion-content-item-thumbnail">
<img src="https://i.ytimg.com/vi/dZZk9Kz5j_0/mqdefault.jpg" class="" height="" width="" alt="">
</div>
- <div class="medium-8 columns">
+ <div class="cell medium-8">
<h5>Build Your Career on a Solid Foundation</h5>
<p>Web technologies are rapidly changing, but time and resources are finite. Find out why Learning Foundation places you at the cutting edge of the website development.
</p>
</div>
</a>
- <!-- <div class="row accordion-content-item">
- <div class="medium-4 columns accordion-content-item-thumbnail">
+ <!-- <div class="grid-x grid-margin-x accordion-content-item">
+ <div class="cell medium-4 accordion-content-item-thumbnail">
<div class="responsive-embed widescreen">
<img src="https://placehold.it/300x300" class="" height="" width="" alt="">
</div>
</div>
- <div class="medium-8 columns">
+ <div class="cell medium-8">
<h5>Leverage the Power of Design for Your Business</h5>
<p>With a robust ecosystem of community integrations, and the new Foundation Building Blocks, Foundation can help bridge the gap between your development team and your designers. Check out our free e-book on how you can use Foundation to leverage the power of design in your business.
</p>
<div class="accordion-content " data-tab-content>
<a target="_blank" href="http://foundation.zurb.com/templates.html">
- <div class="row accordion-content-item">
- <div class="medium-4 columns accordion-content-item-thumbnail">
+ <div class="grid-x grid-margin-x accordion-content-item">
+ <div class="cell medium-4 accordion-content-item-thumbnail">
<img src="https://foundation.zurb.com/assets/img/sites-templates/foundation6-templates-07.svg">
</div>
- <div class="medium-8 columns">
+ <div class="cell medium-8">
<h5>Foundation Templates</h5>
<p>Get eight responsive templates to kick off your projects built with the same techniques we teach in our Introduction to Foundation 6 Course to build your business upon.</p>
<span class="accordion-content-item-cta">View Templates</span>
</a>
<a target="_blank" href="http://zurb.com/article/1469/foundation-building-blocks-over-100-compo">
- <div class="row accordion-content-item">
- <div class="medium-4 columns accordion-content-item-thumbnail">
+ <div class="grid-x grid-margin-x accordion-content-item">
+ <div class="cell medium-4 accordion-content-item-thumbnail">
<img src="https://i3.ytimg.com/vi/SmhGUT_N-jw/maxresdefault.jpg" class="" height="" width="" alt="" style="height: 142px;">
</div>
- <div class="medium-8 columns">
+ <div class="cell medium-8">
<h5>Foundation Building Blocks</h5>
<p>Building Blocks are coded UI components you can drop into any standard Foundation project. Building Blocks will help you rapidly accelerate your development time.</p>
<span class="accordion-content-item-cta">Learn More</span>
</a>
<a target="_blank" href="http://foundation.zurb.com/building-blocks/kits.html">
- <div class="row accordion-content-item">
- <div class="medium-4 columns accordion-content-item-thumbnail">
+ <div class="grid-x grid-margin-x accordion-content-item">
+ <div class="cell medium-4 accordion-content-item-thumbnail">
<img src="https://foundation.zurb.com/building-blocks/assets/img/kits/dashboard/dashboard-kit.jpg" style="height: 142px; width: 100%;">
</div>
- <div class="medium-8 columns">
+ <div class="cell medium-8">
<h5>Foundation Kits</h5>
<p>Foundation Kits are curated bundles of Building Blocks designed for building specific types of websites and apps. Download from 7 powerful Kits to jumpstart your next project.</p>
<span class="accordion-content-item-cta">View Kits</span>
<div class="accordion-content" data-tab-content>
<a target="_blank" href="http://foundation.zurb.com/learn/zero-to-website-in-no-time-flat.html">
- <div class="row accordion-content-item">
- <div class="medium-4 columns accordion-content-item-thumbnail">
+ <div class="grid-x grid-margin-x accordion-content-item">
+ <div class="cell medium-4 accordion-content-item-thumbnail">
<img src="https://i.ytimg.com/vi/KHMXOTbLAGE/mqdefault.jpg" class="" height="" width="" alt="">
</div>
- <div class="medium-8 columns">
+ <div class="cell medium-8">
<h5>Zero to Website Guide</h5>
<p>Learning a framework for the first time can be overwhelming, so we’ve put together “Zero to Website,” a 60-page guide that will walk you through coding a real, live, responsive website from scratch with Foundation.</p>
<span class="accordion-content-item-cta">Get The Guide</span>
</a>
<a target="_blank" href="http://zurb.com/university/foundation-intro">
- <div class="row accordion-content-item accordion-course-callout">
- <div class="medium-4 columns accordion-content-item-thumbnail">
+ <div class="grid-x grid-margin-x accordion-content-item accordion-course-callout">
+ <div class="cell medium-4 accordion-content-item-thumbnail">
<img src="{{root}}assets/img/foundation-intro-class.jpg" style="height: 142px;">
</div>
- <div class="medium-8 columns">
+ <div class="cell medium-8">
<h5>Live Webinar: Introduction to Foundation 6</h5>
<p>Master Foundation ultra fast. The Foundation team will get you up to speed on everything you need to know to get the most out of Foundation 6.</p>
<span href="http://zurb.com/university/foundation-intro" class="accordion-content-item-cta">Learn More</span>
<div class="accordion-content" data-tab-content>
<a target="_blank" href="http://zurb.com/blog/foundation-6-4-a-new-grid-javascript-upgrades-and-slick-new-prototyping-mode">
- <div class="row accordion-content-item">
- <div class="medium-4 columns accordion-content-item-thumbnail">
+ <div class="grid-x grid-margin-x accordion-content-item">
+ <div class="cell medium-4 accordion-content-item-thumbnail">
<img src="https://i3.ytimg.com/vi/vrvt9xMFjIE/maxresdefault.jpg" class="" height="" width="" alt="">
</div>
- <div class="medium-8 columns">
+ <div class="cell medium-8">
<h5>Foundation 6.4.0 Update: A New Grid, JavaScript Upgrades, and Slick New Prototyping Mode</h5>
<p>Foundation 6.4 has dropped and it is AWESOME. This new release is jampacked with some incredible new features that enable you to build layouts and designs with Foundation that weren’t possible before.</p>
<span class="accordion-content-item-cta">Learn More</span>
</a>
<a target="_blank" href="https://github.com/zurb/foundation-sites/releases/tag/6.3.1">
- <div class="row accordion-content-item">
- <div class="medium-4 columns accordion-content-item-thumbnail">
+ <div class="grid-x grid-margin-x accordion-content-item">
+ <div class="cell medium-4 accordion-content-item-thumbnail">
<img src="{{root}}assets/img/docs-631.png" class="" height="" width="" alt="">
</div>
- <div class="medium-8 columns">
+ <div class="cell medium-8">
<h5>Foundation 6.3.1 Update: Sass mixins and bug fixes</h5>
<p>Foundation 6.3.1 contains plenty of bug fixes underlying reworks to old features. Along with bug fixes, Foundation gets some some new Sass mixins and optimizations that make it work in more scenarios and the docs got a lot of love. Enjoy it!</p>
<span class="accordion-content-item-cta">Learn More</span>
<div class="accordion-content" data-tab-content>
<a target="_blank" href="http://zurb.com/article/1469/foundation-building-blocks-over-100-compo">
- <div class="row accordion-content-item">
- <div class="medium-4 columns accordion-content-item-thumbnail">
+ <div class="grid-x grid-margin-x accordion-content-item">
+ <div class="cell medium-4 accordion-content-item-thumbnail">
<img src="https://i3.ytimg.com/vi/SmhGUT_N-jw/maxresdefault.jpg" class="" height="" width="" alt="">
</div>
- <div class="medium-8 columns">
+ <div class="cell medium-8">
<h5>Foundation Building Blocks Accelerate Your Development</h5>
<p>Building Blocks are coded UI components you can drop into any standard Foundation project. Building Blocks will help you rapidly accelerate your development time.</p>
<span class="accordion-content-item-cta">Learn More</span>
</a>
<a target="_blank" href="http://foundation.zurb.com/building-blocks/how-to.html">
- <div class="row accordion-content-item">
- <div class="medium-4 columns accordion-content-item-thumbnail">
+ <div class="grid-x grid-margin-x accordion-content-item">
+ <div class="cell medium-4 accordion-content-item-thumbnail">
<img src="https://i3.ytimg.com/vi/adLpmsU9v2g/maxresdefault.jpg" class="" height="" width="" alt="">
</div>
- <div class="medium-8 columns">
+ <div class="cell medium-8">
<h5>How to Use ZURB Foundation's Building Blocks</h5>
<p>The Foundation team has cut your development time in half again with Foundation Building Blocks. In this tutorial we'll show you how to find the right building block and the way to install it that works best for you.</p>
<span class="accordion-content-item-cta">Learn More</span>
<div class="accordion-content" data-tab-content>
<a target="_blank" href="https://circlingthesun.github.io/angular-foundation-6/">
- <div class="row accordion-content-item">
- <div class="medium-3 columns accordion-content-item-thumbnail">
+ <div class="grid-x grid-margin-x accordion-content-item">
+ <div class="cell medium-3 accordion-content-item-thumbnail">
<img src="https://circlingthesun.github.io/angular-foundation-6/assets/logo.png" class="" height="147" width="147" alt="" style="border: 0;">
</div>
- <div class="medium-9 columns">
+ <div class="cell medium-9">
<h5>Angular Foundation 6</h5>
<p>The awesome folks at Pinecone created an Angular port for Foundation. Angular.js assists with creating single-page applications, one-page web applications that only require HTML, CSS, and JavaScript on the client side.</p>
<span class="accordion-content-item-cta">Learn More</span>
</a>
<a target="_blank" href="https://react.foundation/">
- <div class="row accordion-content-item">
- <div class="medium-3 columns accordion-content-item-thumbnail">
+ <div class="grid-x grid-margin-x accordion-content-item">
+ <div class="cell medium-3 accordion-content-item-thumbnail">
<img src="https://cdn.worldvectorlogo.com/logos/react.svg" class="" height="" width="" alt="" style="border: 0;">
</div>
- <div class="medium-9 columns">
+ <div class="cell medium-9">
<h5>React + Foundation 6</h5>
<p>React is a JavaScript library for building user interfaces. Now you can use Foundation for Sites 6 components implemented in React with CSS Modules!</p>
<span class="accordion-content-item-cta">Learn More</span>
</a>
<a target="_blank" href="http://jointswp.com/">
- <div class="row accordion-content-item">
- <div class="medium-3 columns accordion-content-item-thumbnail">
+ <div class="grid-x grid-margin-x accordion-content-item">
+ <div class="cell medium-3 accordion-content-item-thumbnail">
<img src="https://s.w.org/about/images/logos/wordpress-logo-simplified-rgb.png" class="" height="147" width="147" alt="" style="border: 0;">
</div>
- <div class="medium-9 columns">
+ <div class="cell medium-9">
<h5>JointsWP: Foundation 6 meets WordPress</h5>
<p>JointsWP is a blank WordPress theme built with Foundation 6, giving you all the power and flexibility you need to build complex, mobile friendly websites without starting from scratch.</p>
<span class="accordion-content-item-cta">Learn More</span>
</div>
</a>
- <a target="_blank" href="https://medium.com/@tommaso.marcelli/setting-up-vue-2-and-foundation-6-3f858b4ad20">
- <div class="row accordion-content-item">
- <div class="medium-3 columns accordion-content-item-thumbnail">
+ <a target="_blank" href="https://cell medium.com/@tommaso.marcelli/setting-up-vue-2-and-foundation-6-3f858b4ad20">
+ <div class="grid-x grid-margin-x accordion-content-item">
+ <div class="cell medium-3 accordion-content-item-thumbnail">
<img src="{{root}}assets/img/docs-vue.jpeg" class="" height="147" width="147" alt="" style="border: 0;">
</div>
- <div class="medium-9 columns">
+ <div class="cell medium-9">
<h5>Setting up Vue 2 and Foundation 6</h5>
<p>This is a demo integration of Foundation for Sites 6.3 in a VueJS 2.1 single-page application.</p>
<span class="accordion-content-item-cta">Learn More</span>
<div class="accordion-content" data-tab-content>
<a target="_blank" href="http://foundation.zurb.com/foundationturns5">
- <div class="row accordion-content-item">
- <div class="medium-4 columns accordion-content-item-thumbnail">
+ <div class="grid-x grid-margin-x accordion-content-item">
+ <div class="cell medium-4 accordion-content-item-thumbnail">
<img src="{{root}}assets/img/foundation-turns-5.png" class="" height="" width="" alt="">
</div>
- <div class="medium-8 columns">
+ <div class="cell medium-8">
<h5>5 Years of Shaping the Web</h5>
<p>This year Foundation turned five years old. It was the first to be responsive, the first to be semantic, the first to be mobile first, the first to be built with Sass, and the first to have accessibility built in. Learn more about the framework and where it's going next.</p>
<span class="accordion-content-item-cta">Learn More</span>
</a>
<a target="_blank" href="http://foundation.zurb.com/showcase/brands.html">
- <div class="row accordion-content-item">
- <div class="medium-4 columns accordion-content-item-thumbnail">
+ <div class="grid-x grid-margin-x accordion-content-item">
+ <div class="cell medium-4 accordion-content-item-thumbnail">
<img src="{{root}}assets/img/foundation-brands.png" class="" height="" width="" alt="">
</div>
- <div class="medium-8 columns">
+ <div class="cell medium-8">
<h5>Foundation Brands</h5>
<p>Big brands are relying more and more on the world's most advanced, responsive front-end framework. Their sites are now built so that customers can connect with them on any device.</p>
<span class="accordion-content-item-cta">Learn More</span>
</a>
<a target="_blank" href="http://foundation.zurb.com/showcase/case-studies.html">
- <div class="row accordion-content-item">
- <div class="medium-4 columns accordion-content-item-thumbnail">
+ <div class="grid-x grid-margin-x accordion-content-item">
+ <div class="cell medium-4 accordion-content-item-thumbnail">
<img src="https://foundation.zurb.com/assets/img/learn/case-studies/meundies-mockup1.jpg" class="" height="" width="" alt="">
</div>
- <div class="medium-8 columns">
+ <div class="cell medium-8">
<h5>Foundation Case Studies</h5>
<p>Foundation in the wild. See how people are using Foundation to build responsive, future-friendly sites. We learn what went into their designs, decisions, and how Foundation helped them get to their goals.</p>
</div>
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.
-<div class="row">
- <div class="column small-2 text-right">
+<div class="grid-x grid-margin-x">
+ <div class="cell small-2 text-right">
<a href="https://www.npmjs.com/package/foundation-sites">
<img class="docs-install-vendor-icon" src="{{root}}assets/img/icons/logo-npm.svg" alt="NPM">
</a>
</div>
- <div class="column small-10">
+ <div class="cell small-10">
<div class="docs-code">
<code class="bash">
npm install foundation-sites
</div>
</div>
- <div class="column small-2 text-right">
+ <div class="cell small-2 text-right">
<a href="https://yarnpkg.com/en/package/foundation-sites">
<img class="docs-install-vendor-icon" src="{{root}}assets/img/icons/logo-yarn.svg" alt="Yarn">
</a>
</div>
- <div class="column small-10">
+ <div class="cell small-10">
<div class="docs-code">
<code class="bash">
yarn add foundation-sites
</div>
</div>
- <div class="column small-2 text-right">
+ <div class="cell small-2 text-right">
<a href="https://bower.io/search/?q=foundation-sites">
<img class="docs-install-vendor-icon" src="{{root}}assets/img/icons/logo-bower.svg" alt="Bower">
</a>
</div>
- <div class="column small-10">
+ <div class="cell small-10">
<div class="docs-code">
<code class="bash">
bower install foundation-sites
</div>
</div>
- <div class="column small-2 text-right">
+ <div class="cell small-2 text-right">
<a href="https://rubygems.org/gems/foundation-rails">
<img class="docs-install-vendor-icon" src="{{root}}assets/img/icons/logo-rubygems.svg" alt="Ruby Gems">
</a>
</div>
- <div class="column small-10">
+ <div class="cell small-10">
<div class="docs-code">
<code class="bash">
gem install foundation-rails
</div>
</div>
- <div class="column small-2 text-right">
+ <div class="cell small-2 text-right">
<a href="https://atmospherejs.com/zurb/foundation-sites">
<img class="docs-install-vendor-icon" src="{{root}}assets/img/icons/logo-meteor.svg" alt="Meteor">
</a>
</div>
- <div class="column small-10">
+ <div class="cell small-10">
<div class="docs-code">
<code class="bash">
meteor add zurb:foundation-sites
</div>
</div>
- <div class="column small-2 text-right">
+ <div class="cell small-2 text-right">
<a href="https://packagist.org/packages/zurb/foundation">
<img class="docs-install-vendor-icon" src="{{root}}assets/img/icons/logo-composer.svg" alt="Composer">
</a>
</div>
- <div class="column small-10">
+ <div class="cell small-10">
<div class="docs-code">
<code class="bash">
php composer.phar require zurb/foundation
</div>
</div>
- <div class="column small-2 text-right">
+ <div class="cell small-2 text-right">
<a href="https://www.nuget.org/packages/foundation-sites/">
<img class="docs-install-vendor-icon" src="{{root}}assets/img/icons/logo-nuget.svg" alt="NuGet">
</a>
</div>
- <div class="column small-10">
+ <div class="cell small-10">
<div class="docs-code">
<code class="bash">
Install-Package foundation-sites
After you selected "Foundation for Sites", Foundation CLI will ask you which template you want to use. You can choose between:
-<div class="row">
- <div class="column small-6">
+<div class="grid-x grid-margin-x">
+ <div class="cell small-6">
<h3>Basic template</h3>
<p>
<b>Recommended for beginners</b><br>
</p>
</div>
- <div class="column small-6">
+ <div class="cell small-6">
<h3>ZURB template</h3>
<p>
<b>Recommended for experienced (or curious) users</b><br>
## Download
-<div class="row">
- <div class="column small-6">
+<div class="grid-x grid-margin-x">
+ <div class="cell small-6">
<div class="responsive-embed widescreen mb1">
<iframe width="560" height="315" src="https://www.youtube.com/embed/lFrpnk0Oo_8" frameborder="0" allowfullscreen></iframe>
<a id="docs-mobile-video-link" class="docs-mobile-video" target="_blank" href="https://youtu.be/lFrpnk0Oo_8"></a>
</div>
</div>
- <div class="column small-6">
+ <div class="cell small-6">
<p>
If you aren't into Sass, we have a starter template with compiled CSS and JavaScript, as well as a starting `index.html` file for you to hack on. Just unzip and get coding!
</p>
```html_example
<form data-abide novalidate>
- <div class="row">
- <div class="columns">
+ <div class="grid-x grid-margin-x">
+ <div class="cell">
<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>
</div>
- <div class="row">
- <div class="small-12 columns">
+ <div class="grid-x grid-margin-x">
+ <div class="cell small-12">
<label>Number Required
<input type="text" placeholder="1234" aria-describedby="exampleHelpText" required pattern="number">
<span class="form-error">
</label>
<p class="help-text" id="exampleHelpText">Here's how you use this input field!</p>
</div>
- <div class="small-12 columns">
+ <div class="cell small-12">
<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">
+ <div class="cell small-12">
<label>Password Required
<input type="password" id="password" placeholder="yeti4preZ" aria-describedby="exampleHelpText" required >
<span class="form-error">
</label>
<p class="help-text" id="exampleHelpText">Enter a password please.</p>
</div>
- <div class="small-12 columns">
+ <div class="cell small-12">
<label>Re-enter Password
<input type="password" placeholder="yeti4preZ" aria-describedby="exampleHelpText2" required pattern="alpha_numeric" data-equalto="password">
<span class="form-error">
<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">
+ <div class="grid-x grid-margin-x">
+ <div class="cell medium-6">
<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://foundation.zurb.com" pattern="url">
</label>
</div>
- <div class="medium-6 columns">
+ <div class="cell medium-6">
<label>European Cars, Choose One, it can't be the blank option.
<select id="select" required>
<option value=""></option>
</label>
</div>
</div>
- <div class="row">
- <fieldset class="medium-6 columns">
+ <div class="grid-x grid-margin-x">
+ <fieldset class="cell medium-6">
<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="medium-6 columns">
+ <fieldset class="cell medium-6">
<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="medium-6 columns">
+ <fieldset class="cell medium-6">
<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="medium-6 columns">
+ <div class="grid-x grid-margin-x">
+ <fieldset class="cell medium-6">
<button class="button" type="submit" value="Submit">Submit</button>
</fieldset>
- <fieldset class="medium-6 columns">
+ <fieldset class="cell medium-6">
<button class="button" type="reset" value="Reset">Reset</button>
</fieldset>
</div>
</div>
```html_example
-<div class="row" data-equalizer data-equalize-on="medium" id="test-eq">
- <div class="medium-4 columns">
+<div class="grid-x grid-margin-x" data-equalizer data-equalize-on="medium" id="test-eq">
+ <div class="cell medium-4">
<div class="callout" data-equalizer-watch>
<img src= "assets/img/generic/square-1.jpg">
</div>
</div>
- <div class="medium-4 columns">
+ <div class="cell medium-4">
<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="cell medium-4">
<div class="callout" data-equalizer-watch>
<img src= "assets/img/generic/rectangle-1.jpg">
</div>
<option value="apollo">Apollo</option>
</select>
</label>
- <div class="row">
- <fieldset class="large-6 columns">
+ <div class="grid-x grid-margin-x">
+ <fieldset class="cell large-6">
<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">
+ <fieldset class="cell large-6">
<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">
+ <div class="grid-x grid-margin-x">
+ <div class="cell small-3">
<label for="middle-label" class="text-right middle">Label</label>
</div>
- <div class="small-9 columns">
+ <div class="cell small-9">
<input type="text" id="middle-label" placeholder="Right- and middle-aligned text input">
</div>
</div>
</div>
```html_example
-<div class="row">
- <div class="small-4 columns">
+<div class="grid-x grid-margin-x">
+ <div class="cell small-4">
<img class="thumbnail" src="assets/img/thumbnail/01.jpg" alt="Photo of Uranus.">
</div>
- <div class="small-4 columns">
+ <div class="cell small-4">
<img class="thumbnail" src="assets/img/thumbnail/02.jpg" alt="Photo of Neptune.">
</div>
- <div class="small-4 columns">
+ <div class="cell small-4">
<img class="thumbnail" src="assets/img/thumbnail/03.jpg" alt="Photo of Pluto.">
</div>
</div>
This below example is a simplified version of the table of contents on the right side of this page.
```html
-<div class="large-3 columns" data-sticky-container>
- <nav class="columns sticky" data-sticky data-anchor="exampleId" data-sticky-on="large">
- <ul class="vertical 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>
+<div class="cell large-3">
+ <nav class="sticky-container" data-sticky-container>
+ <div class="sticky" data-sticky data-anchor="exampleId" data-sticky-on="large">
+ <ul class="vertical 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>
+ </div>
</nav>
</div>
```
Many components can be modified at different screen sizes using special *breakpoint classes*. The grid is the most obvious example. In the code below, the left-hand column is six columns wide on small screens, hence `.small-6`. On medium-sized screens, the class `.medium-4` overrides the small style, changing the column to be four wide.
```html
-<div class="row">
- <div class="small-6 medium-4 columns"></div>
- <div class="small-6 medium-8 columns"></div>
+<div class="grid-x grid-margin-x">
+ <div class="cell small-6 medium-4"></div>
+ <div class="cell small-6 medium-8"></div>
</div>
```
```
<button type="button" class="button" data-toggle="motion-example-1">Fade</button><button type="button" class="button" data-toggle="motion-example-2">Slide</button>
-<div class="row">
- <div class="small-6 columns">
+<div class="grid-x grid-margin-x">
+ <div class="cell small-6">
<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 class="cell small-6">
<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>
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. **Refer to [Motion UI's animation documentation](https://github.com/zurb/motion-ui/blob/master/docs/animations.md) to learn more.**
<button type="button" class="button" data-docs-example-series>Play Animation</button>
-<div class="row" id="series-example">
- <div class="small-4 columns">
+<div class="grid-x grid-margin-x" id="series-example">
+ <div class="cell small-4">
<img class="thumbnail" src= "assets/img/generic/square-1.jpg" id="series-example-1">
</div>
- <div class="small-4 columns">
+ <div class="cell small-4">
<img class="thumbnail" src= "assets/img/generic/square-2.jpg" id="series-example-2">
</div>
- <div class="small-4 columns">
+ <div class="cell small-4">
<img class="thumbnail" src= "assets/img/generic/square-3.jpg" id="series-example-3">
</div>
</div>
<button type="button" class="button" data-toggle="offCanvasLeftSplit1">Open Left</button>
<button type="button" class="button" data-toggle="offCanvasRightSplit2">Open Right</button>
-<div class="row">
- <div class="small-6 columns">
+<div class="grid-x grid-margin-x">
+ <div class="cell small-6">
<div class="off-canvas-wrapper">
<div class="off-canvas-absolute position-left" id="offCanvasLeftSplit1" data-off-canvas>
<!-- Your menu or Off-canvas content goes here -->
</div>
</div>
</div>
- <div class="small-6 columns">
+ <div class="cell small-6">
<div class="off-canvas-wrapper">
<div class="off-canvas-absolute position-right" id="offCanvasRightSplit2" data-off-canvas>
<!-- Your menu or Off-canvas content goes here -->
<button type="button" class="button" data-toggle="offCanvasTop1">Open Top</button>
<button type="button" class="button" data-toggle="offCanvasBottom1">Open Bottom</button>
-<div class="row column">
+<div class="cell">
<div class="off-canvas-wrapper">
<div class="off-canvas position-left" id="offCanvasLeft1" data-off-canvas>
<!-- Your menu or Off-canvas content goes here -->
```
<div class="docs-code-live">
- <div class="row">
- <div class="medium-4 columns">
+ <div class="grid-x grid-margin-x">
+ <div class="cell medium-4">
<div class="radius bordered shadow card">
<img src="assets/img/generic/rectangle-1.jpg">
<div class="card-divider">
</div>
</div>
</div>
- <div class="medium-4 columns">
+ <div class="cell medium-4">
<div class="radius bordered shadow card">
<img src="assets/img/generic/rectangle-1.jpg">
<div class="card-divider">
</div>
</div>
</div>
- <div class="medium-4 columns">
+ <div class="cell medium-4">
<div class="radius bordered shadow card">
<img src="assets/img/generic/rectangle-1.jpg">
<div class="card-divider">
```
<div class="docs-code-live">
- <div class="row">
- <div class="small-12 medium-4 columns">
+ <div class="grid-x grid-margin-x">
+ <div class="cell small-12 medium-4">
<h3 class="separator-left">Lorem</h3>
</div>
- <div class="small-12 medium-4 columns">
+ <div class="cell small-12 medium-4">
<h3 class="separator-center">Ipsum Dolor</h3>
</div>
- <div class="small-12 medium-4 columns">
+ <div class="cell small-12 medium-4">
<h3 class="separator-right">Tempor</h3>
</div>
</div>
</div>
```html_example
-<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 class="grid-x grid-margin-x">
+ <div class="cell small-10">
+ <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="cell small-2">
+ <input type="number" id="sliderOutput1">
</div>
-</div>
-<div class="small-2 columns">
- <input type="number" id="sliderOutput1">
</div>
```
Or with a step size:
```html_example
-<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 class="grid-x grid-margin-x">
+ <div class="cell small-10">
+ <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="cell small-2">
+ <input type="number" id="sliderOutput2">
</div>
-</div>
-<div class="small-2 columns">
- <input type="number" id="sliderOutput2">
</div>
```
---
The nonLinearBase-option is optional and defaults to 5.
```html_example
-<div class="small-10 columns">
-<div class="slider" data-slider data-initial-start="50" data-step="1" data-position-value-function="log" data-non-linear-base="5">
- <span class="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="sliderOutputNonLinear"></span>
-</div>
-</div>
-<div class="small-2 columns">
- <input type="number" id="sliderOutputNonLinear">
+<div class="grid-x grid-margin-x">
+ <div class="cell small-10">
+ <div class="slider" data-slider data-initial-start="50" data-step="1" data-position-value-function="log" data-non-linear-base="5">
+ <span class="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="sliderOutputNonLinear"></span>
+ </div>
+ </div>
+ <div class="cell small-2">
+ <input type="number" id="sliderOutputNonLinear">
+ </div>
</div>
```
</div>
```html
-<div class="columns small-6 right" data-sticky-container>
+<div class="cell small-6 right" data-sticky-container>
<div class="sticky" data-sticky data-margin-top="0">
<img class="thumbnail" src="assets/img/generic/rectangle-3.jpg">
<!-- This sticky element would stick to the window, with a marginTop of 0 -->
</div>
</div>
-
-<div class="columns small-6 right" data-sticky-container>
+<div class="cell small-6 right" data-sticky-container>
<div class="sticky" data-sticky data-anchor="foo">
<img class="thumbnail" src="assets/img/generic/rectangle-3.jpg">
<!-- This sticky element would stick to the window for the height of the element #foo, with a 1em marginTop -->
```
<!-- ```html_example -->
-<div class="row">
- <div class="columns small-6" id="example1" data-something>
+<div class="grid-x grid-margin-x">
+ <div class="cell 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>
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="cell small-6 right" data-sticky-container>
<div class="sticky" data-sticky data-margin-top="6" data-anchor="example1" data-sticky-on="small">
<img class="thumbnail" src="assets/img/generic/rectangle-3.jpg">
</div>
</div>
```html
-<div class="columns small-6 right" data-sticky-container>
+<div class="cell 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 class="row">
- <div class="columns small-6">
+<div class="grid-x grid-margin-x">
+ <div class="cell 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.
</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="cell small-6 right" data-sticky-container>
<div class="sticky" data-sticky data-margin-top="6" data-top-anchor="example2:top" data-btm-anchor="foo:bottom">
<img class="thumbnail" src="assets/img/generic/rectangle-5.jpg">
</div>
Using `data-stick-to="bottom"`.
Here is an example using two anchors (like above) with a stick to bottom.
```html
-<div class="columns small-6 right" data-sticky-container>
+<div class="cell small-6 right" data-sticky-container>
<div class="sticky" data-sticky data-stick-to="bottom" data-top-anchor="example3" data-btm-anchor="foo2:top">
<img class="thumbnail" src="assets/img/generic/rectangle-5.jpg">
</div>
```
-<div class="row">
- <div class="columns small-6">
+<div class="grid-x grid-margin-x">
+ <div class="cell 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>
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="cell small-6 right" data-sticky-container>
<div class="sticky" data-sticky data-margin-top="6" 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>
{{{{raw}}}}
```handlebars
-<div class="column row"><div class="row collapse">
- <div class="large-3 medium-4 columns" data-sticky-container>
- <ul class="vertical menu">
+<div class="row">
+
+ <div class="large-3 medium-4 columns">
+ <dl class="vertical tabs" data-tab>
{{#each pages}}
- <li><a href="#{{ anchor }}">{{ title }}</a></li>
+ <dd{{#if @first}} class="active"{{/if}}><a href="#{{ anchor }}">{{ title }}</a></dd>
{{/each}}
- </ul>
+ </dl>
</div>
<div class="large-9 medium-8 columns">
- {{#each pages}}
- <section class="ss-section" id="{{ anchor }}">
- {{ body }}
- </section>
- {{/each}}
+ <div class="tabs-content">
+ {{#each pages}}
+ <section class="content {{#if @first}}active{{/if}}" id="{{ anchor }}">
+ {{ body }}
+ </section>
+ {{/each}}
+ </div>
</div>
-</div></div>
+</div>
```
The template has access to a `pages` variable, which is an array with the data for each page. When looping through `pages` using `{{#each}}`, you have access to these variables:
</div>
```html_example
-<div class="row collapse">
- <div class="medium-3 columns">
- <ul class="vertical tabs" data-tabs id="example-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" data-tabs-content="example-tabs">
- <div class="tabs-panel is-active" id="panel1v">
- <p>One</p>
- <p>Check me out! I'm a super cool Tab panel with text content!</p>
- </div>
- <div class="tabs-panel" id="panel2v">
- <p>Two</p>
- <img class="thumbnail" src="assets/img/generic/rectangle-7.jpg">
- </div>
- <div class="tabs-panel" id="panel3v">
- <p>Three</p>
- <p>Check me out! I'm a super cool Tab panel with text content!</p>
- </div>
- <div class="tabs-panel" id="panel4v">
- <p>Four</p>
- <img class="thumbnail" src="assets/img/generic/rectangle-2.jpg">
- </div>
- <div class="tabs-panel" id="panel5v">
- <p>Five</p>
- <p>Check me out! I'm a super cool Tab panel with text content!</p>
- </div>
- <div class="tabs-panel" id="panel6v">
- <p>Six</p>
- <img class="thumbnail" src="assets/img/generic/rectangle-8.jpg">
+<div class="grid-container">
+ <div class="grid-x grid-margin-x">
+ <div class="cell medium-3">
+ <ul class="vertical tabs" data-tabs id="example-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="cell medium-9">
+ <div class="tabs-content" data-tabs-content="example-tabs">
+ <div class="tabs-panel is-active" id="panel1v">
+ <p>One</p>
+ <p>Check me out! I'm a super cool Tab panel with text content!</p>
+ </div>
+ <div class="tabs-panel" id="panel2v">
+ <p>Two</p>
+ <img class="thumbnail" src="assets/img/generic/rectangle-7.jpg">
+ </div>
+ <div class="tabs-panel" id="panel3v">
+ <p>Three</p>
+ <p>Check me out! I'm a super cool Tab panel with text content!</p>
+ </div>
+ <div class="tabs-panel" id="panel4v">
+ <p>Four</p>
+ <img class="thumbnail" src="assets/img/generic/rectangle-2.jpg">
+ </div>
+ <div class="tabs-panel" id="panel5v">
+ <p>Five</p>
+ <p>Check me out! I'm a super cool Tab panel with text content!</p>
+ </div>
+ <div class="tabs-panel" id="panel6v">
+ <p>Six</p>
+ <img class="thumbnail" src="assets/img/generic/rectangle-8.jpg">
+ </div>
</div>
</div>
</div>
<img class="thumbnail" src="assets/img/thumbnail/03.jpg" alt="Photo of Pluto.">
```
-<div class="row">
- <div class="small-4 columns text-center">
+<div class="grid-x grid-margin-x">
+ <div class="cell small-4 text-center">
<img class="thumbnail" src="assets/img/thumbnail/01.jpg" alt="Photo of Uranus.">
</div>
- <div class="small-4 columns text-center">
+ <div class="cell small-4 text-center">
<a href="#" class="thumbnail"><img src="assets/img/thumbnail/02.jpg" alt="Photo of Neptune."></a>
</div>
- <div class="small-4 columns text-center">
+ <div class="cell small-4 text-center">
<img class="thumbnail" src="assets/img/thumbnail/03.jpg" alt="Photo of Pluto.">
</div>
</div>
Then the elements with ids of `foo`, `bar`, and `baz` will be toggled any time your button, (or any other element you choose), is clicked.
<button class="button primary" data-toggle="thumb1 thumb2 thumb3">Toggle All These</button>
-<div class="row">
- <div class="small-4 columns">
+<div class="grid-x grid-margin-x">
+ <div class="cell small-4">
<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">
+ <div class="cell small-4">
<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">
+ <div class="cell small-4">
<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>
</button>
```
-<div class="row small-up-1 medium-up-3">
- <div class="column">
+<div class="grid-x grid-margin-x small-up-1 medium-up-3">
+ <div class="cell">
<button class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="bottom" data-alignment="left">
Bottom Left
</button>
</div>
- <div class="column">
+ <div class="cell">
<button class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="bottom" data-alignment="center">
Bottom Center
</button>
</div>
- <div class="column">
+ <div class="cell">
<button class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="bottom" data-alignment="right">
Bottom Right
</button>
</div>
- <div class="column">
+ <div class="cell">
<button class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="top" data-alignment="left">
Top Left
</button>
</div>
- <div class="column">
+ <div class="cell">
<button class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="top" data-alignment="center">
Top Center
</button>
</div>
- <div class="column">
+ <div class="cell">
<button class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="top" data-alignment="right">
Top Right
</button>
</button>
```
-<div class="row small-up-1 medium-up-2">
- <div class="column">
+<div class="grid-x grid-margin-x small-up-1 medium-up-2">
+ <div class="cell">
<button class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="right" data-alignment="top">
Right Top
</button>
</div>
- <div class="column">
+ <div class="cell">
<button class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="left" data-alignment="top">
Left Top
</button>
</div>
- <div class="column">
+ <div class="cell">
<button class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="right" data-alignment="center">
Right Center
</button>
</div>
- <div class="column">
+ <div class="cell">
<button class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="left" data-alignment="center">
Left Center
</button>
</div>
- <div class="column">
+ <div class="cell">
<button class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="right" data-alignment="bottom">
Right Bottom
</button>
</div>
- <div class="column">
+ <div class="cell">
<button class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="left" data-alignment="bottom">
Left Bottom
</button>
projects / thirdparty / foundation / foundation-sites.git / commitdiff
