From 4a31dd8f0cc961550e26ce4e9e8daf1558e97cdc Mon Sep 17 00:00:00 2001 From: Joe Workman Date: Sat, 7 Dec 2019 14:56:45 -0800 Subject: [PATCH] Rebuild docs --- _build/abide.html | 1401 -------- _build/accessibility.html | 1084 +++--- _build/accordion-menu.html | 804 ----- _build/accordion.html | 979 ------ _build/badge.html | 617 ---- _build/base-typography.html | 1083 ------ _build/breadcrumbs.html | 640 ---- _build/button-group.html | 790 ----- _build/button.html | 937 ----- _build/callout.html | 794 ----- _build/close-button.html | 654 ---- _build/compatibility.html | 1079 +++--- _build/data/search.json | 5398 ----------------------------- _build/drilldown-menu.html | 792 ----- _build/dropdown-menu.html | 850 ----- _build/dropdown.html | 909 ----- _build/equalizer.html | 914 ----- _build/flex-grid.html | 1088 ------ _build/flex-video.html | 650 ---- _build/flexbox.html | 784 ----- _build/float-classes.html | 513 --- _build/forms.html | 1127 ------ _build/global.html | 785 ----- _build/grid.html | 1528 -------- _build/index.html | 1589 +++++---- _build/installation.html | 575 --- _build/interchange.html | 699 ---- _build/javascript-utilities.html | 1332 ++++--- _build/javascript.html | 1591 ++++++--- _build/kitchen-sink.html | 2051 ----------- _build/label.html | 619 ---- _build/magellan.html | 722 ---- _build/media-object.html | 796 ----- _build/media-queries.html | 1309 ++++--- _build/menu.html | 939 ----- _build/motion-ui.html | 613 ---- _build/navigation.html | 732 ---- _build/off-canvas.html | 1096 ------ _build/orbit.html | 1256 ------- _build/pagination.html | 760 ---- _build/panini.html | 602 ---- _build/progress-bar.html | 764 ---- _build/responsive-navigation.html | 777 ----- _build/reveal.html | 1142 ------ _build/rtl.html | 514 --- _build/sass-functions.html | 1028 ------ _build/sass-mixins.html | 863 ----- _build/sass.html | 1437 +++++--- _build/slider.html | 921 ----- _build/starter-projects.html | 528 --- _build/sticky.html | 864 ----- _build/style-sherpa.html | 554 --- _build/switch.html | 928 ----- _build/table.html | 957 ----- _build/tabs.html | 1043 ------ _build/thumbnail.html | 611 ---- _build/toggler.html | 708 ---- _build/tooltip.html | 876 ----- _build/top-bar.html | 792 ----- _build/typography-base.html | 1083 ------ _build/typography-helpers.html | 650 ---- _build/visibility.html | 741 ---- 62 files changed, 5579 insertions(+), 55683 deletions(-) delete mode 100644 _build/abide.html delete mode 100644 _build/accordion-menu.html delete mode 100644 _build/accordion.html delete mode 100644 _build/badge.html delete mode 100644 _build/base-typography.html delete mode 100644 _build/breadcrumbs.html delete mode 100644 _build/button-group.html delete mode 100644 _build/button.html delete mode 100644 _build/callout.html delete mode 100644 _build/close-button.html delete mode 100644 _build/data/search.json delete mode 100644 _build/drilldown-menu.html delete mode 100644 _build/dropdown-menu.html delete mode 100644 _build/dropdown.html delete mode 100644 _build/equalizer.html delete mode 100644 _build/flex-grid.html delete mode 100644 _build/flex-video.html delete mode 100644 _build/flexbox.html delete mode 100644 _build/float-classes.html delete mode 100644 _build/forms.html delete mode 100644 _build/global.html delete mode 100644 _build/grid.html delete mode 100644 _build/installation.html delete mode 100644 _build/interchange.html delete mode 100644 _build/kitchen-sink.html delete mode 100644 _build/label.html delete mode 100644 _build/magellan.html delete mode 100644 _build/media-object.html delete mode 100644 _build/menu.html delete mode 100644 _build/motion-ui.html delete mode 100644 _build/navigation.html delete mode 100644 _build/off-canvas.html delete mode 100644 _build/orbit.html delete mode 100644 _build/pagination.html delete mode 100644 _build/panini.html delete mode 100644 _build/progress-bar.html delete mode 100644 _build/responsive-navigation.html delete mode 100644 _build/reveal.html delete mode 100644 _build/rtl.html delete mode 100644 _build/sass-functions.html delete mode 100644 _build/sass-mixins.html delete mode 100644 _build/slider.html delete mode 100644 _build/starter-projects.html delete mode 100644 _build/sticky.html delete mode 100644 _build/style-sherpa.html delete mode 100644 _build/switch.html delete mode 100644 _build/table.html delete mode 100644 _build/tabs.html delete mode 100644 _build/thumbnail.html delete mode 100644 _build/toggler.html delete mode 100644 _build/tooltip.html delete mode 100644 _build/top-bar.html delete mode 100644 _build/typography-base.html delete mode 100644 _build/typography-helpers.html delete mode 100644 _build/visibility.html diff --git a/_build/abide.html b/_build/abide.html deleted file mode 100644 index 5988a367d..000000000 --- a/_build/abide.html +++ /dev/null @@ -1,1401 +0,0 @@ - - - - - - - - - - Foundation for Sites 6 Docs | Abide - - - - - - -
- - - -
- - -
- - -
- - - - - -
-
- - Foundation -
-
- - - - -
-
- -
- -Jump to Nav - -
-

Abide

- - JavaScript - -

Abide is a form validation library that extends the HTML5 validation API with custom validators.

- - -
- -
- -
- -
- -

Abide Demo

These input types create a text field: text, date, datetime, datetime-local, email, month, number, password, search, tel, time, url, and week.

-
<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>
- -
- -
-
- -

Here's how you use this input field!

-
-
- -

This input is ignored by Abide using `data-abide-ignore`

-
-
- -

Enter a password please.

-
-
- -

This field is using the `data-equalto="password"` attribute, causing it to match the password field above.

-
-
-
-
- -
-
- -
-
-
-
- Choose Your Favorite, and this is required, so you have to pick one. - - - -
-
- Choose Your Favorite - not required, you can leave this one blank. - - - -
-
- Check these out - - - -
-
-
-
- -
-
- -
-
-
-

 

- -
-

There are some errors in your form.

-
- - - - - -

Initial State

<form data-abide>
-  <!-- Add "display: none" right away -->
-  <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>
-  <label>
-    Name
-    <input type="text" required>
-    <span class="form-error">This field is required.</span>
-  </label>
-</form>

Error State

<form data-abide>
-  <!-- Add role="alert" -->
-  <!-- Add "display: block" -->
-  <div data-abide-error role="alert" class="alert callout" style="display: block;">
-    <p><i class="fi-alert"></i> There are some errors in your form.</p>
-  </div>
-  <!-- Add "is-invalid-label" -->
-  <label class="is-invalid-label">
-    Name
-    <!-- Add "is-invalid-input" -->
-    <input type="text" class="is-invalid-input" required aria-invalid aria-describedby="uuid">
-    <!-- Add "is-visible" -->
-    <span class="form-error is-visible" id="uuid">This field is required.</span>
-  </label>
-</form>

Event Listener

Setup event listener after foundation is initialized (especially for formvalid/forminvalid). Easier to chain via document selector.

-
    -
  • valid.zf.abide and invalid.zf.abide are field level events, triggered in validateInput function
      -
    • ev.target is the DOM field element,
      • -
    • elem is jQuery selector for field element
      • -
    -
    • -
  • formvalid.zf.abide and forminvalid.zf.abide are form events, triggered in validateForm function
      -
    • ev.target is the DOM form element,
      • -
    • frm is jQuery selector for form element
      • -
    -
    • -
-
$(document)
-  // field element is invalid
-  .on("invalid.zf.abide", function(ev,elem) {
-    console.log("Field id "+ev.target.id+" is invalid");
-  })
-  // field element is valid
-  .on("valid.zf.abide", function(ev,elem) {
-    console.log("Field name "+elem.attr('name')+" is valid");
-  })
-  // form validation failed
-  .on("forminvalid.zf.abide", function(ev,frm) {
-    console.log("Form id "+ev.target.id+" is invalid");
-  })
-  // form validation passed, form will submit if submit event not returned false
-  .on("formvalid.zf.abide", function(ev,frm) {
-    console.log("Form id "+frm.attr('id')+" is valid");
-    // ajax post form 
-  })
-  // to prevent form from submitting upon successful validation
-  .on("submit", function(ev) {
-    ev.preventDefault();
-    console.log("Submit for form id "+ev.target.id+" intercepted");
-  });
-// You can bind field or form event selectively
-$("#foo").on("invalid.zf.abide", function(ev,el) {
-  alert("Input field foo is invalid");
-});
-$("#bar").on("formvalid.zf.abide", function(ev,frm) {
-  alert("Form is valid, finally!");
-  // do something perhaps
-});

Adding Custom Pattern and Validator

    -
  • Override builtin patterns and validators before foundation is initialized
    • -
  • Add new patterns and validators before or after foundation is initialized
    • -
-
$(document).foundation();
-Foundation.Abide.defaults.patterns['dashes_only'] = /^[0-9-]*$/;
-Foundation.Abide.defaults.validators['greater_than'] =
-function($el,required,parent) {
-  // parameter 1 is jQuery selector
-  if (!required) return true;
-  var from = $('#'+$el.attr('data-greater-than')).val(),
-      to = $el.val();
-  return (parseInt(to) > parseInt(from));
-};
<input id="phone" type="text" pattern="dashes_only" required >
-<input id="min" type="number" required >
-<input id="max" type="number" data-validator="greater_than" data-greater-than="min" required>
- -
-
-

Sass Reference

- -
-

Variables

- -

The default styles of this component can be customized using these Sass variables in your project's settings file.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDefault ValueDescription
$abide-inputsBooleantrue

Sets if error styles should be added to inputs.

-
$abide-labelsBooleantrue

Sets if error styles should be added to labels.

-
$input-background-invalidColormap-get($foundation-palette, alert)

Background color to use for invalid text inputs.

-
$form-label-color-invalidColormap-get($foundation-palette, alert)

Color to use for labels of invalid inputs.

-
$input-error-colorColormap-get($foundation-palette, alert)

Default font color for form error text.

-
$input-error-font-sizeNumberrem-calc(12)

Default font size for form error text.

-
$input-error-font-weightKeyword$global-weight-bold

Default font weight for form error text.

-
-
- -
- -
-

Mixins

- -

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.

- - -
-

form-input-error

- - - -
- 
@include form-input-error($background, $background-alpha);
-
- -

Styles the background and border of an input field to have an error state.

- - - - - - - - - - - - - - - - - - - - - -
ParameterTypeDefault ValueDescription
$backgroundColor$alert-color

Color to use for the background and border.

-
$background-alphaNumber0.1

Transparency level of the background color.

-
-
- -
- - - -
-

form-error

- - - -
- 
@include form-error;
-
- -

Adds error styles to a form element, using the values in the settings file.

- - - - - -
- - - - - -
- - -
- -
-
-

JavaScript Reference

- - -
-

Initializing

- -

The file foundation.abide.js must be included in your JavaScript to use this plugin, along with foundation.core.js.

- - - -
- - -
-

Foundation.Abide

- -

Creates a new instance of Abide.

- - - 
var elem = new Foundation.Abide(element, options);
- -

Fires these events: - Abide#event:init -

- - - - - - - - - - - - - - - -
NameTypeDescription
elementObjectjQuery object to add the trigger to.
optionsObjectOverrides to the default plugin settings.
-
- -
- -
-

Plugin Options

- -

Use these options to customize an instance of Abide. Plugin options can be set as individual data attributes, one combined data-options attribute, or as an object passed to the plugin's constructor. Learn more about how JavaScript plugins are initialized.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameDefaultDescription
data-validate-onfieldChangeThe default event to validate inputs. Checkboxes and radios validate immediately. -Remove or change this value for manual validation.
data-label-error-classis-invalid-labelClass to be applied to input labels on failed validation.
data-input-error-classis-invalid-inputClass to be applied to inputs on failed validation.
data-form-error-selector.form-errorClass selector to use to target Form Errors for show/hide.
data-form-error-classis-visibleClass added to Form Errors on failed validation.
data-live-validatefalseSet to true to validate text inputs on any value change.
data-validatorsOptional 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.
-
- -
- -
-

Events

- -

These events will fire from any element with a Abide plugin attached.

- - - - - - - - - - - - - - - - - -
NameDescription
invalid.zf.abideFires 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.
forminvalid.zf.abideFires when the form is finished validating. Event trigger is either `formvalid.zf.abide` or `forminvalid.zf.abide`. -Trigger includes the element of the form.
formreset.zf.abideFires when the form has been reset.
-
- -
- -
-

Methods

- -
-

requiredCheck

- -
- 
$('#element').foundation('requiredCheck', element);
-
- -

Checks whether or not a form element has the required attribute and if it's checked or not

- - - - - - - - - - - - -
NameTypeDescription
elementObjectjQuery object to check for required attribute
- -
-
-
-

findFormError

- -
- 
$('#element').foundation('findFormError', $el);
-
- -

Based on $el, get the first element with selector in this order:

-
    -
  1. The element's direct sibling('s).
    2. -
  2. The element's parent's children.
    3. -
-

This allows for multiple form errors per input, though if none are found, no form errors will be shown.

- - - - - - - - - - - - -
NameTypeDescription
$elObjectjQuery object to use as reference to find the form error selector.
- -
-
-
-

findLabel

- -
- 
$('#element').foundation('findLabel', $el);
-
- -

Get the first element in this order:

-
    -
  1. The
    2. -
  2. The .closest()
    3. -
- - - - - - - - - - - - -
NameTypeDescription
$elObjectjQuery object to check for required attribute
- -
-
-
-

findRadioLabels

- -
- 
$('#element').foundation('findRadioLabels', $el);
-
- -

Get the set of labels associated with a set of radio els in this order

-
    -
  1. The
    2. -
  2. The .closest()
    3. -
- - - - - - - - - - - - -
NameTypeDescription
$elObjectjQuery object to check for required attribute
- -
-
-
-

addErrorClasses

- -
- 
$('#element').foundation('addErrorClasses', $el);
-
- -

Adds the CSS error class as specified by the Abide settings to the label, input, and the form

- - - - - - - - - - - - -
NameTypeDescription
$elObjectjQuery object to add the class to
- -
-
-
-

removeRadioErrorClasses

- -
- 
$('#element').foundation('removeRadioErrorClasses', groupName);
-
- -

Remove CSS error classes etc from an entire radio button group

- - - - - - - - - - - - -
NameTypeDescription
groupNameStringA string that specifies the name of a radio button group
- -
-
-
-

removeErrorClasses

- -
- 
$('#element').foundation('removeErrorClasses', $el);
-
- -

Removes CSS error class as specified by the Abide settings from the label, input, and the form

- - - - - - - - - - - - -
NameTypeDescription
$elObjectjQuery object to remove the class from
- -
-
-
-

validateInput

- -
- 
$('#element').foundation('validateInput', element);
-
- -

Goes through a form to find inputs and proceeds to validate them in ways specific to their type

- - -

Fires these events: - Abide#event:invalid - Abide#event:valid -

- - - - - - - - - - -
NameTypeDescription
elementObjectjQuery object to validate, should be an HTML input
- -
-
-
-

validateForm

- -
- 
$('#element').foundation('validateForm');
-
- -

Goes through a form and if there are any invalid inputs, it will display the form error element

- - -

Fires these events: - Abide#event:formvalid - Abide#event:forminvalid -

- - -
-
-
-

validateText

- -
- 
$('#element').foundation('validateText', $el, pattern);
-
- -

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.

- - - - - - - - - - - - - - - - - -
NameTypeDescription
$elObjectjQuery object to validate, should be a text input HTML element
patternStringstring value of one of the RegEx patterns in Abide.options.patterns
- -
-
-
-

validateRadio

- -
- 
$('#element').foundation('validateRadio', groupName);
-
- -

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.

- - - - - - - - - - - - -
NameTypeDescription
groupNameStringA string that specifies the name of a radio button group
- -
-
-
-

matchValidation

- -
- 
$('#element').foundation('matchValidation', $el, validators, required);
-
- -

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.

- - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
$elObjectjQuery input element.
validatorsStringa string of function names matching functions in the Abide.options.validators object.
requiredBooleanself explanatory?
- -
-
-
-

resetForm

- -
- 
$('#element').foundation('resetForm');
-
- -

Resets form inputs and styles

- - -

Fires these events: - Abide#event:formreset -

- - -
-
-
-

destroy

- -
- 
$('#element').foundation('destroy');
-
- -

Destroys an instance of Abide. -Removes error styles and classes from elements, without resetting their values.

- - - - - -
-
-
- - - - -
- -
- -
- -
- -
- -
-
- - -
-
- - -
-
-
- -
- -
-
- -
-
-
- -
Download ZURB’s 21 Responsive Trends That Will Shape 2017
-

Stay informed with amazing responsive trends each month from ZURB.

- -
- -
-
- -
-
-
-
-

Foundation for Sites

-

Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. -

-
-
- -
-
-
-
-

Want more?

- -
-
-
-
-

Talk to us

-

Tweet us at
@ZURBfoundation

-

Get involved in
our amazing community.

-
-
-
-
-

Stay Updated

-

Keep up with the latest on Foundation. Find us on Github.

- Stay Connected -
-
-
-
-
-
-
- - Studios - Helping more than 200 startups succeed since 1998. - -
-
- - Foundation - The most advanced front-end framework in the world. - -
-
- - Notable Design Apps - Prototype, iterate and collect feedback on your products. - -
-
- - University - Ideas, thoughts and design resources shared with you. - -
-
-
- -
-
-
-
    -
    • -
    • -
    • -
-
-
- - -

© 1998‐2016 ZURB, Inc. All rights reserved.

-
-
-
- -
-
- - - - - - - - - diff --git a/_build/accessibility.html b/_build/accessibility.html index 2f1bec43a..d533de857 100644 --- a/_build/accessibility.html +++ b/_build/accessibility.html @@ -1,538 +1,652 @@ - - - - - - - Foundation for Sites 6 Docs | Accessibility - - - - - - -
- -
- - -
- -
- - -
- -
- - - + + + + + + + +
+ +
+
+
+
+
Foundation Documentation
+ + + + +
+
+
+
+

Accessibility

+

Guidelines on this page will help you make your sites more accessible for keyboard navigation and screen readers.

+ +

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.

+

Care about accessibility or want to contribute? Submit a Pull Request or get into the conversation on GitHub.

+
-

Foundation and Accessibility

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.

-

Foundation's CSS makes use of the library what-input, 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.

-

If you're using the Sass version of Foundation, you can use this mixin to enable the feature on your own components:

-
.element {
-  @include disable-mouse-outline;
-  // ...
-}
-

Learn More

Resources

- - -
-
- - -
-
- -
-
-
- -
- -
-
- -
-
-
- -
Download ZURB’s 21 Responsive Trends That Will Shape 2017
-

Stay informed with amazing responsive trends each month from ZURB.

- + +
+
+
+
Stay on top of what’s happening in responsive design.
+

Sign up to receive monthly Responsive Reading highlights. Read Last Month's Edition »

+
+
+
+
+
+
- + +
+
+
+ + +
+
+
+
+

Foundation for Sites

+

Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. +

- -
-
-
-
-

Foundation for Sites

-

Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. -

-
-
- -
-
-
-
-

Want more?

- -
-
-
-
-

Talk to us

-

Tweet us at
@ZURBfoundation

-

Get involved in
our amazing community.

-
-
-
-
-

Stay Updated

-

Keep up with the latest on Foundation. Find us on Github.

- Stay Connected -
-
-
+
+ +
+
+
+
+

Want more?

+
-
-
- - Studios - Helping more than 200 startups succeed since 1998. - -
-
- - Foundation - The most advanced front-end framework in the world. - -
-
- - Notable Design Apps - Prototype, iterate and collect feedback on your products. - -
-
- - University - Ideas, thoughts and design resources shared with you. - +
+
+

Talk to us

+

Tweet us at
@ZURBfoundation

+

Business Support

+

Or check our support page

+
-
-
- -
-
-
-
    -
    • -
    • -
    • -
-
-
- - -

© 1998‐2016 ZURB, Inc. All rights reserved.

+
+
+

Stay Updated

+

Keep up with the latest on Foundation. Find us on Github.

+ Stay Connected
-
+
+
+ + Studios + Helping more than 200 startups succeed since 1998. + +
+
+ + Foundation + The most advanced front-end framework in the world. + +
+
+ + Notable Design Apps + Prototype, iterate and collect feedback on your products. + +
+
+ + University + Ideas, thoughts and design resources shared with you. + +
+
+
+ +
+
+
+
    +
    • +
    • +
    • +
+
+
+ + +

© 1998‐2015 ZURB, Inc. All rights reserved.

+
+
+
+ + + +
+
+ + + + + + + - - - - - - - diff --git a/_build/accordion-menu.html b/_build/accordion-menu.html deleted file mode 100644 index d36236496..000000000 --- a/_build/accordion-menu.html +++ /dev/null @@ -1,804 +0,0 @@ - - - - - - - - - - Foundation for Sites 6 Docs | Accordion Menu - - - - - - -
- - - -
- - -
- - -
- - - - - -
-
- - Foundation -
-
- - - - -
-
- -
- -Jump to Nav - -
-

Accordion Menu

- - JavaScript - -

Change a basic vertical Menu into a expandable accordion menu with the Accordion Menu plugin.

- - -
- -
- -
- -
- -

Basics

Accordion menus follow the basic Menu syntax of <ul>, <li>, and <a>. To convert a basic menu into an accordion, add the attribute data-accordion-menu. You probably also want it to be vertical, so add the class .vertical as well.

-

Any <a> will behave like a standard link. However, any <a> paired with a nested <ul> menu will then slide that sub-menu up and down when clicked on.

-
-

You can use the built-in .nested class to add an indent to a nested menu.

-
- -
-

To have a sub-menu already open when the page loads, add the class .is-active to that sub-menu.

-
- -
<ul class="vertical menu" data-accordion-menu>
-  <li>
-    <a href="#">Item 1</a>
-    <ul class="menu vertical nested">
-      <li><a href="#">Item 1A</a></li>
-      <li><a href="#">Item 1B</a></li>
-    </ul>
-  </li>
-  <li><a href="#">Item 2</a></li>
-</ul>
- - -
-
-

Sass Reference

- -
-

Variables

- -

The default styles of this component can be customized using these Sass variables in your project's settings file.

- - - - - - - - - - - - - - - - - -
NameTypeDefault ValueDescription
$accordionmenu-arrowsBooleantrue

Sets if accordion menus have the default arrow styles.

-
$accordionmenu-arrow-colorColor$primary-color

Sets accordion menu arrow color if arrow is used.

-
-
- - - -
- -
-
-

JavaScript Reference

- - -
-

Initializing

- -

The file foundation.accordionMenu.js must be included in your JavaScript to use this plugin, along with foundation.core.js. This plugin also requires these utility libraries:

- - -
    -
  • foundation.util.keyboard.js
    • -
- -
    -
  • foundation.util.motion.js
    • -
- -
    -
  • foundation.util.nest.js
    • -
- - -
- - -
-

Foundation.AccordionMenu

- -

Creates a new instance of an accordion menu.

- - - 
var elem = new Foundation.AccordionMenu(element, options);
- -

Fires these events: - AccordionMenu#event:init -

- - - - - - - - - - - - - - - -
NameTypeDescription
elementjQueryjQuery object to make into an accordion menu.
optionsObjectOverrides to the default plugin settings.
-
- -
- -
-

Plugin Options

- -

Use these options to customize an instance of Accordion Menu. Plugin options can be set as individual data attributes, one combined data-options attribute, or as an object passed to the plugin's constructor. Learn more about how JavaScript plugins are initialized.

- - - - - - - - - - - - - - - -
NameDefaultDescription
data-slide-speed250Amount of time to animate the opening of a submenu in ms.
data-multi-opentrueAllow the menu to have multiple open panes.
-
- -
- -
-

Events

- -

These events will fire from any element with a Accordion Menu plugin attached.

- - - - - - - - - - - - - -
NameDescription
down.zf.accordionMenuFires when the menu is done opening.
up.zf.accordionMenuFires when the menu is done collapsing up.
-
- -
- -
-

Methods

- -
-

hideAll

- -
- 
$('#element').foundation('hideAll');
-
- -

Closes all panes of the menu.

- - - - -
-
-
-

toggle

- -
- 
$('#element').foundation('toggle', $target);
-
- -

Toggles the open/close state of a submenu.

- - - - - - - - - - - - -
NameTypeDescription
$targetjQuerythe submenu to toggle
- -
-
-
-

down

- -
- 
$('#element').foundation('down', $target);
-
- -

Opens the sub-menu defined by $target.

- - -

Fires these events: - AccordionMenu#event:down -

- - - - - - - - - - -
NameTypeDescription
$targetjQuerySub-menu to open.
- -
-
-
-

up

- -
- 
$('#element').foundation('up', $target);
-
- -

Closes the sub-menu defined by $target. All sub-menus inside the target will be closed as well.

- - -

Fires these events: - AccordionMenu#event:up -

- - - - - - - - - - -
NameTypeDescription
$targetjQuerySub-menu to close.
- -
-
-
-

destroy

- -
- 
$('#element').foundation('destroy');
-
- -

Destroys an instance of accordion menu.

- - -

Fires these events: - AccordionMenu#event:destroyed -

- - - -
-
-
- - - - -
- -
- -
- -
- -
- -
-
- - -
-
- - -
-
-
- -
- -
-
- -
-
-
- -
Download ZURB’s 21 Responsive Trends That Will Shape 2017
-

Stay informed with amazing responsive trends each month from ZURB.

- -
- -
-
- -
-
-
-
-

Foundation for Sites

-

Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. -

-
-
- -
-
-
-
-

Want more?

- -
-
-
-
-

Talk to us

-

Tweet us at
@ZURBfoundation

-

Get involved in
our amazing community.

-
-
-
-
-

Stay Updated

-

Keep up with the latest on Foundation. Find us on Github.

- Stay Connected -
-
-
-
-
-
-
- - Studios - Helping more than 200 startups succeed since 1998. - -
-
- - Foundation - The most advanced front-end framework in the world. - -
-
- - Notable Design Apps - Prototype, iterate and collect feedback on your products. - -
-
- - University - Ideas, thoughts and design resources shared with you. - -
-
-
- -
-
-
-
    -
    • -
    • -
    • -
-
-
- - -

© 1998‐2016 ZURB, Inc. All rights reserved.

-
-
-
- -
-
- - - - - - - - - diff --git a/_build/accordion.html b/_build/accordion.html deleted file mode 100644 index 1415eea04..000000000 --- a/_build/accordion.html +++ /dev/null @@ -1,979 +0,0 @@ - - - - - - - - - - Foundation for Sites 6 Docs | Accordion - - - - - - -
- - - -
- - -
- - -
- - - - - -
-
- - Foundation -
-
- - - - -
-
- -
- -Jump to Nav - -
-

Accordion

- - JavaScript - -

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.

- - -
- -
- -
- -
- -

Basics

The container for an accordion needs the class .accordion, and the attribute data-accordion. Note that in these examples, we use a <ul>, but you can use any element you want.

-
<ul class="accordion" data-accordion></ul>

Inside the accordion, place a series of panes with the class .accordion-item and the attribute data-accordion-item. To mark which pane should be open by default, add the class .is-active to that pane.

-

Each pane has a title, an <a> with the class .accordion-title, and a content area, an element with the class .accordion-content and the attribute data-tab-content.

-
<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>
-      I would start in the open state, due to using the `is-active` state class.
-    </div>
-  </li>
-  <!-- ... -->
-</ul>

Once you put it all together, here's what you get!

- - -
-

Advanced Options

Multi-expand

By default, only one pane of an accordion can be open at a time. This can be changed by setting the multiExpand option to true.

-
<ul class="accordion" data-accordion data-multi-expand="true">
-  <!-- ... -->
-</ul>
- -
-

All Closed

By default, at least one pane in an accordion must be open. This can be changed by setting allowAllClosed option to true.

-
<ul class="accordion" data-accordion data-allow-all-closed="true">
-  <!-- ... -->
-</ul>
- - -
-
-

Sass Reference

- -
-

Variables

- -

The default styles of this component can be customized using these Sass variables in your project's settings file.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDefault ValueDescription
$accordion-backgroundColor$white

Default background color of an accordion group.

-
$accordion-plusminusBooleantrue

If true, adds plus and minus icons to the side of each accordion title.

-
$accordion-item-colorColorforeground($accordion-background, $primary-color)

Default text color for items in a Menu.

-
$accordion-item-background-hoverColor$light-gray

Default background color on hover for items in a Menu.

-
$accordion-item-paddingNumber or List1.25rem 1rem

Default padding of an accordion item.

-
$accordion-content-backgroundColor$white

Default background color of tab content.

-
$accordion-content-borderColor1px solid $light-gray

Default border color of tab content.

-
$accordion-content-colorColorforeground($accordion-content-background, $body-font-color)

Default text color of tab content.

-
$accordion-content-paddingNumber or List1rem

Default padding for tab content.

-
-
- -
- -
-

Mixins

- -

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.

- - -
-

accordion-container

- - - -
- 
@include accordion-container;
-
- -

Adds styles for an accordion container. Apply this to the same element that gets data-accordion.

- - - - - -
- -
- - - -
-

accordion-item

- - - -
- 
@include accordion-item;
-
- -

Adds styles for the accordion item. Apply this to the list item within an accordion ul.

- - - - - -
- -
- - - -
-

accordion-title

- - - -
- 
@include accordion-title;
-
- -

Adds styles for the title of an accordion item. Apply this to the link within an accordion item.

- - - - - -
- -
- - - -
-

accordion-content

- - - -
- 
@include accordion-content;
-
- -

Adds styles for accordion content. Apply this to the content pane below an accordion item's title.

- - - - - -
- - - - - -
- - -
- -
-
-

JavaScript Reference

- - -
-

Initializing

- -

The file foundation.accordion.js must be included in your JavaScript to use this plugin, along with foundation.core.js. This plugin also requires these utility libraries:

- - -
    -
  • foundation.util.keyboard.js
    • -
- -
    -
  • foundation.util.motion.js
    • -
- - -
- - -
-

Foundation.Accordion

- -

Creates a new instance of an accordion.

- - - 
var elem = new Foundation.Accordion(element, options);
- -

Fires these events: - Accordion#event:init -

- - - - - - - - - - - - - - - -
NameTypeDescription
elementjQueryjQuery object to make into an accordion.
optionsObjecta plain object with settings to override the default options.
-
- -
- -
-

Plugin Options

- -

Use these options to customize an instance of Accordion. Plugin options can be set as individual data attributes, one combined data-options attribute, or as an object passed to the plugin's constructor. Learn more about how JavaScript plugins are initialized.

- - - - - - - - - - - - - - - - - - - - -
NameDefaultDescription
data-slide-speed250Amount of time to animate the opening of an accordion pane.
data-multi-expandfalseAllow the accordion to have multiple open panes.
data-allow-all-closedfalseAllow the accordion to close all panes.
-
- -
- -
-

Events

- -

These events will fire from any element with a Accordion plugin attached.

- - - - - - - - - - - - - -
NameDescription
down.zf.accordionFires when the tab is done opening.
up.zf.accordionFires when the tab is done collapsing up.
-
- -
- -
-

Methods

- -
-

toggle

- -
- 
$('#element').foundation('toggle', $target);
-
- -

Toggles the selected content pane's open/close state.

- - - - - - - - - - - - -
NameTypeDescription
$targetjQueryjQuery object of the pane to toggle.
- -
-
-
-

down

- -
- 
$('#element').foundation('down', $target, firstTime);
-
- -

Opens the accordion tab defined by $target.

- - -

Fires these events: - Accordion#event:down -

- - - - - - - - - - - - - - - -
NameTypeDescription
$targetjQueryAccordion pane to open.
firstTimeBooleanflag to determine if reflow should happen.
- -
-
-
-

up

- -
- 
$('#element').foundation('up', $target);
-
- -

Closes the tab defined by $target.

- - -

Fires these events: - Accordion#event:up -

- - - - - - - - - - -
NameTypeDescription
$targetjQueryAccordion tab to close.
- -
-
-
-

destroy

- -
- 
$('#element').foundation('destroy');
-
- -

Destroys an instance of an accordion.

- - -

Fires these events: - Accordion#event:destroyed -

- - - -
-
-
- - - - -
- -
- -
- -
- -
- -
-
- - -
-
- - -
-
-
- -
- -
-
- -
-
-
- -
Download ZURB’s 21 Responsive Trends That Will Shape 2017
-

Stay informed with amazing responsive trends each month from ZURB.

- -
- -
-
- -
-
-
-
-

Foundation for Sites

-

Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. -

-
-
- -
-
-
-
-

Want more?

- -
-
-
-
-

Talk to us

-

Tweet us at
@ZURBfoundation

-

Get involved in
our amazing community.

-
-
-
-
-

Stay Updated

-

Keep up with the latest on Foundation. Find us on Github.

- Stay Connected -
-
-
-
-
-
-
- - Studios - Helping more than 200 startups succeed since 1998. - -
-
- - Foundation - The most advanced front-end framework in the world. - -
-
- - Notable Design Apps - Prototype, iterate and collect feedback on your products. - -
-
- - University - Ideas, thoughts and design resources shared with you. - -
-
-
- -
-
-
-
    -
    • -
    • -
    • -
-
-
- - -

© 1998‐2016 ZURB, Inc. All rights reserved.

-
-
-
- -
-
- - - - - - - - - diff --git a/_build/badge.html b/_build/badge.html deleted file mode 100644 index 7bf1922e7..000000000 --- a/_build/badge.html +++ /dev/null @@ -1,617 +0,0 @@ - - - - - - - - - - Foundation for Sites 6 Docs | Badge - - - - - - -
- - - -
- - -
- - -
- - - - - -
-
- - Foundation -
-
- - - - -
-
- -
- -Jump to Nav - -
-

Badge

- - -

The badge is a basic component that displays a number. It's useful for calling out a number of unread items.

- - -
- -
- -
- -
- -

Basics

Add the .badge class to an element to create a badge. In the below example, we're using <span>, but any tag will work fine.

-
<span class="badge">1</span>
- -
1


-

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 aria-describedby attribute on the main element.

-
<h1 aria-describedby="messageCount">Unread Messages</h1>
-<span class="badge" id="messageCount">1</span>

Finally, the content itself might need more context for users that use screen readers. You can add extra text inside the badge using the .show-for-sr class.

-
<span class="badge" id="messageCount">1 <span class="show-for-sr">unread message</span></span>
-

Coloring

Badges can be colored with the same classes used for buttons and other components.

-
<span class="secondary badge">2</span>
-<span class="success badge">3</span>
-<span class="alert badge">A</span>
-<span class="warning badge">B</span>
- -
2 -3 -A -B
-

With Icons

An icon can be used in place of text. We're using the Foundation icon font here, but any icon fonts or image-based icons will work fine.

-
<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>
- -
- -
- -
-
-

Sass Reference

- -
-

Variables

- -

The default styles of this component can be customized using these Sass variables in your project's settings file.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDefault ValueDescription
$badge-backgroundColor$primary-color

Default background color for badges.

-
$badge-colorColorforeground($badge-background)

Default text color for badges.

-
$badge-paddingNumber0.3em

Default padding inside badges.

-
$badge-minwidthNumber2.1em

Minimum width of a badge.

-
$badge-font-sizeNumber0.6rem

Default font size for badges.

-
-
- -
- -
-

Mixins

- -

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.

- - -
-

badge

- - - -
- 
@include badge;
-
- -

Generates the base styles for a badge.

- - - - - -
- - - - - -
- - -
- - - - - -
- -
- -
- -
- -
- -
-
- - -
-
- - -
-
-
- -
- -
-
- -
-
-
- -
Download ZURB’s 21 Responsive Trends That Will Shape 2017
-

Stay informed with amazing responsive trends each month from ZURB.

- -
- -
-
- -
-
-
-
-

Foundation for Sites

-

Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. -

-
-
- -
-
-
-
-

Want more?

- -
-
-
-
-

Talk to us

-

Tweet us at
@ZURBfoundation

-

Get involved in
our amazing community.

-
-
-
-
-

Stay Updated

-

Keep up with the latest on Foundation. Find us on Github.

- Stay Connected -
-
-
-
-
-
-
- - Studios - Helping more than 200 startups succeed since 1998. - -
-
- - Foundation - The most advanced front-end framework in the world. - -
-
- - Notable Design Apps - Prototype, iterate and collect feedback on your products. - -
-
- - University - Ideas, thoughts and design resources shared with you. - -
-
-
- -
-
-
-
    -
    • -
    • -
    • -
-
-
- - -

© 1998‐2016 ZURB, Inc. All rights reserved.

-
-
-
- -
-
- - - - - - - - - diff --git a/_build/base-typography.html b/_build/base-typography.html deleted file mode 100644 index d2038e3d7..000000000 --- a/_build/base-typography.html +++ /dev/null @@ -1,1083 +0,0 @@ - - - - - - - - - - Foundation for Sites 6 Docs | Base Typography - - - - - - -
- - - -
- - -
- - -
- - - - - -
-
- - Foundation -
-
- - - - -
-
- -
- -Jump to Nav - -
-

Base Typography

- - -

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.

- - -
- -
- -
- -
- -

Paragraphs

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 <strong> and <em> 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 emphasis.

-
-

If the emphasis of a phrase is important, don't make the emphasis purely visual—use the <em> or <strong> 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>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 <strong>make it bold!</strong>. You can also use em to <em>italicize your words</em>.</p>
-

Foundation includes styles for all headings—they're balanced and sized along a modular scale.

-
-

Avoid skipping heading levels when structuring your document, as it confuses screen readers. For example, after using an <h2> in your code, the next heading used should be either <h2> or <h3>. If you need a heading to look bigger or smaller to match a specific style, use CSS to override the default size.

-
- -
<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>
- -

h1. This is a very large header.

-

h2. This is a large header.

-

h3. This is a medium header.

-

h4. This is a moderate header.

-
h5. This is a small header.
-
h6. This is a tiny header.
-

Header Sizes

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 $header-sizes map in your project's Settings File.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
HeaderDefaultMedium and up
<h1>24px48px
<h2>20px40px
<h3>19px31px
<h4>18px25px
<h5>17px20px
<h6>16px16px
-
-

Small Header Segments

By inserting a <small> 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.

-
<h3>Foundation for Sites <small>Version 6</small></h3>
- -

Foundation for Sites Version 6

-

Links are very standard, and the color is preset to the Foundation primary color. Learn more about Foundation's global colors.

-
-

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>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>
-

Dividers

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 <section> tag.

-
<hr>
-

Unordered Lists

Use an unordered list to... list things, if the order of the items doesn't matter.

-
<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>
- -
    -
  • List item with a much longer description or more content.
    • -
  • List item
    • -
  • List item -
      -
    • Nested list item
      • -
    • Nested list item
      • -
    • Nested list item
      • -
    -
    • -
  • List item
    • -
  • List item
    • -
  • List item
    • -
-

Ordered Lists

Use an <ol> when creating a list where the order of the items is important, like ranking pizza toppings from best to worst.

-
<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>
- -
    -
  1. Cheese (essential)
    2. -
  2. Pepperoni
    3. -
  3. Bacon -
      -
    1. Normal bacon
      2. -
    2. Canadian bacon
      3. -
    -
    4. -
  4. Sausage
    5. -
  5. Onions
    6. -
  6. Mushrooms
    7. -
-

Definition Lists

A definition list (<dl>) is used to display name-value pairs, like metadata or a dictionary definition. Each term (<dt>) is paired with one or more definitions (<dd>).

-
<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>
- -
-
Time
-
The indefinite continued progress of existence and events in the past, present, and future regarded as a whole.
-
Space
-
A continuous area or expanse that is free, available, or unoccupied.
-
The dimensions of height, depth, and width within which all things exist and move.
-
-

Blockquotes

Sometimes other people say smart things, and you may want to mention those things with a quote. We've got you covered.

-
<blockquote>
-  Those people who think they know everything are a great annoyance to those of us who do.
-  <cite>Isaac Asimov</cite>
-</blockquote>
- -
- Those people who think they know everything are a great annoyance to those of us who do. - Isaac Asimov -
-

Abbreviations

Use the <abbr> tag to annotate a shortened term. Abbreviations must always have a title attribute which clarifies the full term.

-
<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>
- -

In my dream last night, I saw J. R. R. Tolkien and George R. R. Martin hanging out on Sunset Blvd.

-

Code

Format references to code with the <code> tag.

-
Remember to escape angle brackets when printing HTML: <code>&lt;div&gt;</code>
- -
Remember to escape angle brackets when printing HTML: <div>
-

Keystrokes

Use the <kbd> element to annotate a key stroke or combination.

-
<p>Press <kbd>Cmd+Q</kbd> (or <kbd>Ctrl+Q</kbd> on Windows) to play Half-Life 3.</p>
- -

Press Cmd+Q (or Ctrl+Q on Windows) to play Half-Life 3.

-

Accessibility

Text is core to the content of your page, so making it accessible to everyone is important. Here are some general guidelines to follow.

-

Text vs. Images

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 alt attribute of the image.

-
<img src="assets/img/buy-now.jpg" alt="Buy now">
-

Contrast

The contrast between the color of an element's text and its background should be high enough that low-vision users can read it. The minimum recommended contrast ratio is 4.5:1. 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 WebAIM's color contrast checker.

-

Google Chrome's Accessibility Developer Tools also includes a contrast checker. By selecting an element in the inspector, you can see if the contrast meets the minimum standards.

-

Screenshot of Google Chrome's Accessibility Tools

-
-

Type Size

When possible, use the rem and em 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.

-

We use the rem unit nearly everywhere in Foundation, and even wrote a Sass function to make it a little easier. The rem-calc() function can take one or more pixel values and convert them to proper rem values.

-
.element {
-  width: rem-calc(300);
-  padding: rem-calc(10 16);
-}
-

More Resources

-
-

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:

-
    -
  • Clearing out backgrounds, box shadows and text shadows
    • -
  • Appending link URLs after the anchor text
    • -
  • Adding borders to <blockquote> and <pre> elements
    • -
  • Page cleanup and window minimization
    • -
-

On top of that, Foundation includes a couple of simple classes you can use to control elements printing, or not printing. Simply attach .show-for-print to an element to only show when printing, and .hide-for-print to hide something when printing.

- - -
-
-

Sass Reference

- -
-

Variables

- -

The default styles of this component can be customized using these Sass variables in your project's settings file.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDefault ValueDescription
$print-transparent-backgroundsBooleantrue

If true, all elements will have transparent backgrounds when printed, to save on ink.

-
$header-font-familyString or List$body-font-family

Font family for header elements.

-
$header-font-weightString$global-weight-normal

Font weight of headers.

-
$header-font-styleStringnormal

Font style (e.g. italicized) of headers.

-
$font-family-monospaceString or ListConsolas, 'Liberation Mono', Courier, monospace

Font stack used for elements that use monospaced type, such as code samples

-
$header-sizesMap - small: ( - 'h1': 24
- 'h2': 20
- 'h3': 19
- 'h4': 18
- 'h5': 17
- 'h6': 16
- )
- medium: ( - 'h1': 48
- 'h2': 40
- 'h3': 31
- 'h4': 25
- 'h5': 20
- 'h6': 16
- )
-

Sizes of headings at various screen sizes. Each key is a breakpoint, and each value is a map of heading sizes.

-
$header-colorColorinherit

Color of headers.

-
$header-lineheightNumber1.4

Line height of headers.

-
$header-margin-bottomNumber0.5rem

Bottom margin of headers.

-
$header-text-renderingStringoptimizeLegibility

Text rendering method of headers.

-
$small-font-sizeNumber80%

Font size of <small> elements.

-
$header-small-font-colorColor$medium-gray

Color of <small> elements when placed inside headers.

-
$paragraph-lineheightNumber1.6

Line height of text inside <p> elements.

-
$paragraph-margin-bottomNumber1rem

Bottom margin of paragraphs.

-
$paragraph-text-renderingStringoptimizeLegibility

Text rendering method for paragraph text.

-
$code-colorColor$black

Text color of code samples.

-
$code-font-familyString or List$font-family-monospace

Font family of code samples.

-
$code-font-weightString$global-weight-normal

Font weight of text in code samples.

-
$code-backgroundColor$light-gray

Background color of code samples.

-
$code-borderList1px solid $medium-gray

Border around code samples.

-
$code-paddingNumber or Listrem-calc(2 5 1)

Padding around text of code samples.

-
$anchor-colorColor$primary-color

Default color for links.

-
$anchor-color-hoverColorscale-color($anchor-color, $lightness: -14%)

Default color for links on hover.

-
$anchor-text-decorationStringnone

Default text deocration for links.

-
$anchor-text-decoration-hoverStringnone

Default text decoration for links on hover.

-
$hr-widthNumber$global-width

Maximum width of a divider.

-
$hr-borderList1px solid $medium-gray

Default border for a divider.

-
$hr-marginNumber or Listrem-calc(20) auto

Default margin for a divider.

-
$list-lineheightNumber$paragraph-lineheight

Line height for items in a list.

-
$list-margin-bottomNumber$paragraph-margin-bottom

Bottom margin for items in a list.

-
$list-style-typeStringdisc

Bullet type to use for unordered lists (e.g., square, circle, disc).

-
$list-style-positionStringoutside

Positioning for bullets on unordered list items.

-
$list-side-marginNumber1.25rem

Left (or right) margin for lists.

-
$list-nested-side-marginNumber1.25rem

Left (or right) margin for a list inside a list.

-
$defnlist-margin-bottomNumber1rem

Bottom margin for <dl> elements.

-
$defnlist-term-weightString$global-weight-bold

Font weight for <dt> elements.

-
$defnlist-term-margin-bottomNumber0.3rem

Spacing between <dt> and <dd> elements.

-
$blockquote-colorColor$dark-gray

Text color of <blockquote> elements.

-
$blockquote-paddingNumber or Listrem-calc(9 20 0 19)

Padding inside a <blockquote> element.

-
$blockquote-borderList1px solid $medium-gray

Side border for <blockquote> elements.

-
$cite-font-sizeNumberrem-calc(13)

Font size for <cite> elements.

-
$cite-colorColor$dark-gray

Text color for <cite> elements.

-
$keystroke-fontString or List$font-family-monospace

Font family for <kbd> elements.

-
$keystroke-colorColor$black

Text color for <kbd> elements.

-
$keystroke-backgroundColor$light-gray

Background color for <kbd> elements.

-
$keystroke-paddingNumber or Listrem-calc(2 4 0)

Padding for <kbd> elements.

-
$keystroke-radiusNumber or List$global-radius

Border radius for <kbd> elements.

-
$abbr-underlineList1px dotted $black

Bottom border style for <abbr> elements.

-
-
- - - -
- - - - - -
- -
- -
- -
- -
- -
-
- - -
-
- - -
-
-
- -
- -
-
- -
-
-
- -
Download ZURB’s 21 Responsive Trends That Will Shape 2017
-

Stay informed with amazing responsive trends each month from ZURB.

- -
- -
-
- -
-
-
-
-

Foundation for Sites

-

Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. -

-
-
- -
-
-
-
-

Want more?

- -
-
-
-
-

Talk to us

-

Tweet us at
@ZURBfoundation

-

Get involved in
our amazing community.

-
-
-
-
-

Stay Updated

-

Keep up with the latest on Foundation. Find us on Github.

- Stay Connected -
-
-
-
-
-
-
- - Studios - Helping more than 200 startups succeed since 1998. - -
-
- - Foundation - The most advanced front-end framework in the world. - -
-
- - Notable Design Apps - Prototype, iterate and collect feedback on your products. - -
-
- - University - Ideas, thoughts and design resources shared with you. - -
-
-
- -
-
-
-
    -
    • -
    • -
    • -
-
-
- - -

© 1998‐2016 ZURB, Inc. All rights reserved.

-
-
-
- -
-
- - - - - - - - - diff --git a/_build/breadcrumbs.html b/_build/breadcrumbs.html deleted file mode 100644 index 8e67f61e7..000000000 --- a/_build/breadcrumbs.html +++ /dev/null @@ -1,640 +0,0 @@ - - - - - - - - - - Foundation for Sites 6 Docs | Breadcrumbs - - - - - - -
- - - -
- - -
- - -
- - - - - -
-
- - Foundation -
-
- - - - -
-
- -
- -Jump to Nav - -
-

Breadcrumbs

- - -

Breadcrumbs come in handy to show a navigation trail for users clicking through your site.

- - -
- -
- -
- -
- -

To make a set of breadcrumb links, just add the class .breadcrumbs to a <ul>, and then add links inside of the <li> elements.

-

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.

-

To mark a disabled item, add the class .disabled to the <li>, and just use plain text instead of a link.

-
-

We use a CSS ::after 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 aria-hidden="true" to create the separator instead.

-
- -
<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>
- -
- -
-
-

Sass Reference

- -
-

Variables

- -

The default styles of this component can be customized using these Sass variables in your project's settings file.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDefault ValueDescription
$breadcrumbs-marginNumber0 0 $global-margin 0

Margin around a breadcrumbs container.

-
$breadcrumbs-item-font-sizeNumberrem-calc(11)

Font size of breadcrumb links.

-
$breadcrumbs-item-colorColor$primary-color

Color of breadcrumb links.

-
$breadcrumbs-item-color-currentColor$black

Color of the active breadcrumb link.

-
$breadcrumbs-item-color-disabledNumber$medium-gray

Opacity of disabled breadcrumb links.

-
$breadcrumbs-item-marginNumber0.75rem

Margin between breadcrumb items.

-
$breadcrumbs-item-uppercaseBooleantrue

If true, makes breadcrumb links uppercase.

-
$breadcrumbs-item-slashBooleantrue

If true, adds a slash between breadcrumb links.

-
-
- -
- -
-

Mixins

- -

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.

- - -
- - - - -
- 
@include breadcrumbs-container;
-
- -

Adds styles for a breadcrumbs container, along with the styles for the <li> and <a> elements inside of it.

- - - - - -
- - - - - -
- - -
- - - - - -
- -
- -
- -
- -
- -
-
- - -
-
- - -
-
-
- -
- -
-
- -
-
-
- -
Download ZURB’s 21 Responsive Trends That Will Shape 2017
-

Stay informed with amazing responsive trends each month from ZURB.

- -
- -
-
- -
-
-
-
-

Foundation for Sites

-

Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. -

-
-
- -
-
-
-
-

Want more?

- -
-
-
-
-

Talk to us

-

Tweet us at
@ZURBfoundation

-

Get involved in
our amazing community.

-
-
-
-
-

Stay Updated

-

Keep up with the latest on Foundation. Find us on Github.

- Stay Connected -
-
-
-
-
-
-
- - Studios - Helping more than 200 startups succeed since 1998. - -
-
- - Foundation - The most advanced front-end framework in the world. - -
-
- - Notable Design Apps - Prototype, iterate and collect feedback on your products. - -
-
- - University - Ideas, thoughts and design resources shared with you. - -
-
-
- -
-
-
-
    -
    • -
    • -
    • -
-
-
- - -

© 1998‐2016 ZURB, Inc. All rights reserved.

-
-
-
- -
-
- - - - - - - - - diff --git a/_build/button-group.html b/_build/button-group.html deleted file mode 100644 index ac1f28c04..000000000 --- a/_build/button-group.html +++ /dev/null @@ -1,790 +0,0 @@ - - - - - - - - - - Foundation for Sites 6 Docs | Button Group - - - - - - -
- - - -
- - -
- - -
- - - - - -
-
- - Foundation -
-
- - - - -
-
- -
- -Jump to Nav - -
-

Button Group

- - Flexbox - -

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.

- - -
- -
- -
- -
- -

Basics

Add the .button-group class to a container, and inside it place any number of buttons. The buttons are separated by a small border.

-
<div class="button-group">
-  <a class="button">One</a>
-  <a class="button">Two</a>
-  <a class="button">Three</a>
-</div>
- -
- One - Two - Three -
-

Sizing

Button groups can be sized with the same classes as standard buttons: .tiny, .small, and .large.

-
<div class="small button-group">
-  <a class="button">Small</a>
-  <a class="button">Button</a>
-  <a class="button">Group</a>
-</div>
- -
- Small - Button - Group -
-

Coloring

Buttons within a button group can be colored individually with the .secondary, .success, .warning, and .alert classes.

-
<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>
- -
- View - Edit - Share - Delete -

The entire group can also be colored using the same classes.

-
<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>
- -
- Harder - Better - Faster - Stronger -
-

Even-width Group

Add the .expanded 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.

-
<div class="expanded button-group">
-  <a class="button">Expanded</a>
-  <a class="button">Button</a>
-  <a class="button">Group</a>
-</div>
- -
- Expanded - Button - Group -
-

Stacking

A button group can be made vertical with the .stacked class. You can also use .stacked-for-small to only stack a button group on small screens, or .stacked-for-medium to only stack on small and medium screens.

-
<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>
- -
- How - Low - Can - You - Go -
-

Split Buttons

To build a split button, just create a button group with two buttons.

-

To create a button with only an arrow, add the class .arrow-only. Note that the button still needs a label for screen readers, which can be embedded inside the button with a .show-for-sr element. In the example below, an assistive device will read the arrow button as "Show menu".

-
<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>
- -
- Primary Action - - Show menu - -
- -
-
-

Sass Reference

- -
-

Variables

- -

The default styles of this component can be customized using these Sass variables in your project's settings file.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDefault ValueDescription
$buttongroup-marginNumber1rem

Margin for button groups.

-
$buttongroup-spacingBorder1px

Margin between buttons in a button group.

-
$buttongroup-child-selectorString'.button'

Selector for the buttons inside a button group.

-
$buttongroup-expand-maxNumber6

Maximum number of buttons that can be in an even-width button group.

-
-
- -
- -
-

Mixins

- -

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.

- - -
-

button-group

- - - -
- 
@include button-group($child-selector);
-
- -

Add styles for a button group container.

- - - - - - - - - - - - - - - -
ParameterTypeDefault ValueDescription
$child-selectorString$buttongroup-child-selector

Selector for the buttons inside a button group.

-
-
- -
- - - -
-

button-group-expand

- - - -
- 
@include button-group-expand($selector);
-
- -

Creates a full-width button group, making each button equal width.

- - - - - - - - - - - - - - - -
ParameterTypeDefault ValueDescription
$selectorString$buttongroup-child-selector

Selector for the buttons inside a button group.

-
-
- -
- - - -
-

button-group-stack

- - - -
- 
@include button-group-stack($selector);
-
- -

Stacks the buttons in a button group.

- - - - - - - - - - - - - - - -
ParameterTypeDefault ValueDescription
$selectorString$buttongroup-child-selector

Selector for the buttons inside the button group.

-
-
- -
- - - -
-

button-group-unstack

- - - -
- 
@include button-group-unstack($selector);
-
- -

Un-stacks the buttons in a button group.

- - - - - - - - - - - - - - - -
ParameterTypeDefault ValueDescription
$selectorString$buttongroup-child-selector

Selector for the buttons inside the button group.

-
-
- - - - - -
- - -
- - - - - -
- -
- -
- -
- -
- -
-
- - -
-
- - -
-
-
- -
- -
-
- -
-
-
- -
Download ZURB’s 21 Responsive Trends That Will Shape 2017
-

Stay informed with amazing responsive trends each month from ZURB.

- -
- -
-
- -
-
-
-
-

Foundation for Sites

-

Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. -

-
-
- -
-
-
-
-

Want more?

- -
-
-
-
-

Talk to us

-

Tweet us at
@ZURBfoundation

-

Get involved in
our amazing community.

-
-
-
-
-

Stay Updated

-

Keep up with the latest on Foundation. Find us on Github.

- Stay Connected -
-
-
-
-
-
-
- - Studios - Helping more than 200 startups succeed since 1998. - -
-
- - Foundation - The most advanced front-end framework in the world. - -
-
- - Notable Design Apps - Prototype, iterate and collect feedback on your products. - -
-
- - University - Ideas, thoughts and design resources shared with you. - -
-
-
- -
-
-
-
    -
    • -
    • -
    • -
-
-
- - -

© 1998‐2016 ZURB, Inc. All rights reserved.

-
-
-
- -
-
- - - - - - - - - diff --git a/_build/button.html b/_build/button.html deleted file mode 100644 index 8cd3207c6..000000000 --- a/_build/button.html +++ /dev/null @@ -1,937 +0,0 @@ - - - - - - - - - - Foundation for Sites 6 Docs | Button - - - - - - -
- - - -
- - -
- - -
- - - - - -
-
- - Foundation -
-
- - - - -
-
- -
- -Jump to Nav - -
-

Button

- - -

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.

- - -
- -
- -
- -
- -

Basics

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.

-
    -
  • Use the <a> 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.
    • -
  • Use the <button> tag if the button performs an action that changes something on the current page. <button> elements almost always require JavaScript to function.
    • -
-
-

Add the attribute type="button" to <button> elements, unless the button submits a form, in which case you use type="submit"

-
- -
<!-- 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>
- -
-Learn More -View All Features - - - -
-

Sizing

Additional classes can be added to your button to change its size and shape.

-
<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>
- -
So Tiny -So Small -So Basic -So Large -Such Expand -Wow, Small Expand
-

Coloring

Give a button additional meaning by adding a coloring class, or .disabled to create a faded appearance.

-
-

The .disabled class is a purely visual style, and won't actually disable a control. For <button> elements, you can add the disabled attribute to disable it. If you want to disable a link, you should add the aria-disabled attribute to mark it as disabled for assistive technology.

-
- -
<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>
- -
Secondary Color -Success Color -Alert Color -Warning Color -Disabled Button
-

Hollow Style

Add the .hollow class to a button to give it a hollow style. Change the $button-fill variable in your settings file to hollow to make this the default style. Changing this setting will remove the .hollow class from your CSS.

-
<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>
- -
- - - -
-

Add a dropdown arrow to your button with the .dropdown class.

-
-

This doesn't add dropdown functionality automatically. To do that, you can attach our Dropdown plugin.

-
- -
<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>
- -
- - - -
-

Accessibility

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 aria-hidden="true", to prevent screen readers from trying to pronounce the symbol.

-

Use the .show-for-sr class to define screen reader-only text.

-
<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>
- -
- -
-
-

Sass Reference

- -
-

Variables

- -

The default styles of this component can be customized using these Sass variables in your project's settings file.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDefault ValueDescription
$button-paddingList0.85em 1em

Padding inside buttons.

-
$button-marginList0 0 $global-margin 0

Margin around buttons.

-
$button-fillKeywordsolid

Default fill for buttons. Can either be solid or hollow.

-
$button-backgroundColor$primary-color

Default background color for buttons.

-
$button-background-hoverColorscale-color($button-background, $lightness: -15%)

Background color on hover for buttons.

-
$button-colorList$white

Font color for buttons.

-
$button-color-altList$black

Font color for buttons, if the background is light.

-
$button-radiusNumber$global-radius

Border radius for buttons, defaulted to global-radius.

-
$button-sizesMap - tiny: 0.6rem
- small: 0.75rem
- default: 0.9rem
- large: 1.25rem
-

Sizes for buttons.

-
$button-opacity-disabledList0.25

opacity for a disabled button.

-
-
- -
- -
-

Mixins

- -

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.

- - -
-

button-expand

- - - -
- 
@include button-expand($expand);
-
- -

Expands a button to make it full-width.

- - - - - - - - - - - - - - - -
ParameterTypeDefault ValueDescription
$expandBooleantrue

Set to true to enable the expand behavior. Set to false to reverse this behavior.

-
-
- -
- - - -
-

button-style

- - - -
- 
@include button-style($background, $background-hover, $color);
-
- -

Sets the visual style of a button.

- - - - - - - - - - - - - - - - - - - - - - - - - - - -
ParameterTypeDefault ValueDescription
$backgroundColor$button-background

Background color of the button.

-
$background-hoverColor$button-background-hover

Background color of the button on hover. Set to auto to have the mixin automatically generate a hover color.

-
$colorColor$button-color

Text color of the button. Set to auto to automatically generate a color based on the background color.

-
-
- -
- - - -
-

button-hollow

- - - -
- 
@include button-hollow;
-
- -

Removes background fill on hover and focus for hollow buttons.

- - - - - -
- -
- - - -
-

button-disabled

- - - -
- 
@include button-disabled;
-
- -

Adds disabled styles to a button by fading the element, reseting the cursor, and disabling pointer events.

- - - - - -
- -
- - - -
-

button-dropdown

- - - -
- 
@include button-dropdown($size, $color, $offset);
-
- -

Adds a dropdown arrow to a button.

- - - - - - - - - - - - - - - - - - - - - - - - - - - -
ParameterTypeDefault ValueDescription
$sizeNumber0.4em

Size of the arrow. We recommend using an em value so the triangle scales when used inside different sizes of buttons.

-
$colorColorwhite

Color of the arrow.

-
$offsetNumber$button-padding

Distance between the arrow and the text of the button. Defaults to whatever the right padding of a button is.

-
-
- -
- - - -
-

button

- - - -
- 
@include button($expand, $background, $background-hover, $color, $style);
-
- -

Adds all styles for a button. For more granular control over styles, use the individual button mixins.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ParameterTypeDefault ValueDescription
$expandBooleanfalse

Set to true to make the button full-width.

-
$backgroundColor$button-background

Background color of the button.

-
$background-hoverColor$button-background-hover

Background color of the button on hover. Set to auto to have the mixin automatically generate a hover color.

-
$colorColor$button-color

Text color of the button. Set to auto to automatically generate a color based on the background color.

-
$styleKeywordsolid

Set to hollow to create a hollow button. The color defined in $background will be used as the primary color of the button.

-
-
- - - - - -
- - -
- - - - - -
- -
- -
- -
- -
- -
-
- - -
-
- - -
-
-
- -
- -
-
- -
-
-
- -
Download ZURB’s 21 Responsive Trends That Will Shape 2017
-

Stay informed with amazing responsive trends each month from ZURB.

- -
- -
-
- -
-
-
-
-

Foundation for Sites

-

Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. -

-
-
- -
-
-
-
-

Want more?

- -
-
-
-
-

Talk to us

-

Tweet us at
@ZURBfoundation

-

Get involved in
our amazing community.

-
-
-
-
-

Stay Updated

-

Keep up with the latest on Foundation. Find us on Github.

- Stay Connected -
-
-
-
-
-
-
- - Studios - Helping more than 200 startups succeed since 1998. - -
-
- - Foundation - The most advanced front-end framework in the world. - -
-
- - Notable Design Apps - Prototype, iterate and collect feedback on your products. - -
-
- - University - Ideas, thoughts and design resources shared with you. - -
-
-
- -
-
-
-
    -
    • -
    • -
    • -
-
-
- - -

© 1998‐2016 ZURB, Inc. All rights reserved.

-
-
-
- -
-
- - - - - - - - - diff --git a/_build/callout.html b/_build/callout.html deleted file mode 100644 index 01631a21c..000000000 --- a/_build/callout.html +++ /dev/null @@ -1,794 +0,0 @@ - - - - - - - - - - Foundation for Sites 6 Docs | Callout - - - - - - -
- - - -
- - -
- - -
- - - - - -
-
- - Foundation -
-
- - - - -
-
- -
- -Jump to Nav - -
-

Callout

- - -

Callouts combine panels and alerts from Foundation 5 into one generic container component.

- - -
- -
- -
- -
- -

Basics

A callout is just an element with a .callout class applied. You can put any kind of content inside.

-
<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>
- -
-
This is a callout.
-

It has an easy to override visual style, and is appropriately subdued.

- It's dangerous to go alone, take this. -
-

Coloring

Callouts can be colored using the .secondary, .primary, .success, .warning, or .alert classes. Links inside the callout will be tinted to match the color of the callout.

-
<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>
-
This is a secondary callout
-

It has an easy to override visual style, and is appropriately subdued.

- It's dangerous to go alone, take this. -
- -
-
This is a primary callout
-

It has an easy to override visual style, and is appropriately subdued.

- It's dangerous to go alone, take this. -
- -
-
This is a success callout
-

It has an easy to override visual style, and is appropriately subdued.

- It's dangerous to go alone, take this. -
- -
-
This is a warning callout
-

It has an easy to override visual style, and is appropriately subdued.

- It's dangerous to go alone, take this. -
- -
-
This is an alert callout
-

It has an easy to override visual style, and is appropriately subdued.

- It's dangerous to go alone, take this. -
- -
-

Sizing

Callouts can be sized using the .small and .large classes. These will affect the padding around content to be smaller and larger respectively.

-
<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>
- -
-
This is a secondary panel
-

It has an easy to override visual style, and is appropriately subdued.

- It's dangerous to go alone, take this. -
- -
-
This is a secondary panel
-

It has an easy to override visual style, and is appropriately subdued.

- It's dangerous to go alone, take this. -
-

Making Closable

Pair the callout with the close button component and data-closable attribute to create a dismissable alert box.

-
-

Any element can be used as a close trigger, not just close button. Adding the attribute data-close to any element within the callout will turn it into a close trigger.

-

When using the data-closable attribute, you can optionally add Motion UI classes to the attribute to change the closing animation. If no class is added, the plugin defaults to jQuery's .fadeOut() function.

-
- -
<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">&times;</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">&times;</span>
-  </button>
-</div>
- -
-
This is Important!
-

But when you're done reading it, click the close button in the corner to dismiss this alert.

-

I'm using the default data-closable parameters, and simply fade out.

- -
-
-
This a friendly message.
-

And when you're done with me, I close using a Motion UI animation.

- -
- -
-
-

Sass Reference

- -
-

Variables

- -

The default styles of this component can be customized using these Sass variables in your project's settings file.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDefault ValueDescription
$callout-backgroundColor$white

Default background color.

-
$callout-background-fadeNumber85%

Default fade value for callout backgrounds.

-
$callout-borderList1px solid rgba($black, 0.25)

Default border style for callouts.

-
$callout-marginNumber0 0 1rem 0

Default bottom margin for callouts.

-
$callout-paddingNumber1rem

Default inner padding for callouts.

-
$callout-font-colorColor$body-font-color

Default font color for callouts.

-
$callout-font-color-altColor$body-background

Default font color for callouts, if the callout has a dark background.

-
$callout-radiusColor$global-radius

Default border radius for callouts.

-
$callout-link-tintNumber or Boolean30%

Amount to tint links used within colored panels. Set to false to disable this feature.

-
-
- -
- -
-

Mixins

- -

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.

- - -
-

callout-base

- - - -
- 
@include callout-base;
-
- -

Adds basic styles for a callout, including padding and margin.

- - - - - -
- -
- - - -
-

callout-style

- - - -
- 
@include callout-style($color);
-
- -

Generate quick styles for a callout using a single color as a baseline.

- - - - - - - - - - - - - - - -
ParameterTypeDefault ValueDescription
$colorColor$callout-background

Color to use.

-
-
- -
- - - -
-

callout

- - - -
- 
@include callout($color);
-
- -

Adds styles for a callout.

- - - - - - - - - - - - - - - -
ParameterTypeDefault ValueDescription
$colorColor$callout-background

Color to use.

-
-
- - - - - -
- - -
- - - - - -
- -
- -
- -
- -
- -
-
- - -
-
- - -
-
-
- -
- -
-
- -
-
-
- -
Download ZURB’s 21 Responsive Trends That Will Shape 2017
-

Stay informed with amazing responsive trends each month from ZURB.

- -
- -
-
- -
-
-
-
-

Foundation for Sites

-

Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. -

-
-
- -
-
-
-
-

Want more?

- -
-
-
-
-

Talk to us

-

Tweet us at
@ZURBfoundation

-

Get involved in
our amazing community.

-
-
-
-
-

Stay Updated

-

Keep up with the latest on Foundation. Find us on Github.

- Stay Connected -
-
-
-
-
-
-
- - Studios - Helping more than 200 startups succeed since 1998. - -
-
- - Foundation - The most advanced front-end framework in the world. - -
-
- - Notable Design Apps - Prototype, iterate and collect feedback on your products. - -
-
- - University - Ideas, thoughts and design resources shared with you. - -
-
-
- -
-
-
-
    -
    • -
    • -
    • -
-
-
- - -

© 1998‐2016 ZURB, Inc. All rights reserved.

-
-
-
- -
-
- - - - - - - - - diff --git a/_build/close-button.html b/_build/close-button.html deleted file mode 100644 index fc01c85bd..000000000 --- a/_build/close-button.html +++ /dev/null @@ -1,654 +0,0 @@ - - - - - - - - - - Foundation for Sites 6 Docs | Close Button - - - - - - -
- - - -
- - -
- - -
- - - - - -
-
- - Foundation -
-
- - - - -
-
- -
- -Jump to Nav - -
-

Close Button

- - -

The humble close button can be used anywhere you need something to go away on click.

- - -
- -
- -
- -
- -

A close button is a <button> element with the class .close-button. We use the multiplication symbol (&times;) as the X icon. This icon is wrapped in a <span> with the attribute aria-hidden="true", so screen readers don't read the X icon.

-

The button is also labeled with aria-label to clarify what the button's purpose is.

-
<div class="callout">
-  <button class="close-button" aria-label="Close alert" type="button">
-    <span aria-hidden="true">&times;</span>
-  </button>
-  <p>Look at this close button!</p>
-</div>
- -
- -

Look at this close button!

-
-

Making Closable

-

The close button on its own doesn't close elements, but you can use it with Toggler, Reveal, Off-canvas, and other plugins that have open and close behaviors.

-
- -
-

Any element can be used as a close trigger, not just close button. Adding the attribute data-close to any element within the callout will turn it into a close trigger.

-
- -

The below example pairs the callout with the close button component and data-closable attribute to create a dismissible alert box.

-
<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">&times;</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">&times;</span>
-  </button>
-</div>
- -
-

You can so totally close this!

- -
-
-

You can close me too, and I close using a Motion UI animation.

- -
- -
-
-

Sass Reference

- -
-

Variables

- -

The default styles of this component can be customized using these Sass variables in your project's settings file.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDefault ValueDescription
$closebutton-positionListright top

Default position of the close button. The first value should be right or left, and the second value should be top or bottom.

-
$closebutton-offset-horizontalNumber1rem

Right (or left) offset for a close button.

-
$closebutton-offset-verticalNumber0.5rem

Top (or bottom) offset for a close button.

-
$closebutton-sizeNumber2em

Default font size of the close button.

-
$closebutton-lineheightNumber1

The line-height of the close button. It affects the spacing of the element.

-
$closebutton-colorColor$dark-gray

Default color of the close button.

-
$closebutton-color-hoverColor$black

Default color of the close button when being hovered on.

-
-
- -
- -
-

Mixins

- -

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.

- - -
-

close-button

- - - -
- 
@include close-button;
-
- -

Adds styles for a close button, using the styles in the settings variables.

- - - - - -
- - - - - -
- - -
- - - - - -
- -
- -
- -
- -
- -
-
- - -
-
- - -
-
-
- -
- -
-
- -
-
-
- -
Download ZURB’s 21 Responsive Trends That Will Shape 2017
-

Stay informed with amazing responsive trends each month from ZURB.

- -
- -
-
- -
-
-
-
-

Foundation for Sites

-

Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. -

-
-
- -
-
-
-
-

Want more?

- -
-
-
-
-

Talk to us

-

Tweet us at
@ZURBfoundation

-

Get involved in
our amazing community.

-
-
-
-
-

Stay Updated

-

Keep up with the latest on Foundation. Find us on Github.

- Stay Connected -
-
-
-
-
-
-
- - Studios - Helping more than 200 startups succeed since 1998. - -
-
- - Foundation - The most advanced front-end framework in the world. - -
-
- - Notable Design Apps - Prototype, iterate and collect feedback on your products. - -
-
- - University - Ideas, thoughts and design resources shared with you. - -
-
-
- -
-
-
-
    -
    • -
    • -
    • -
-
-
- - -

© 1998‐2016 ZURB, Inc. All rights reserved.

-
-
-
- -
-
- - - - - - - - - diff --git a/_build/compatibility.html b/_build/compatibility.html index fb0a86e1f..d8ed4b9c0 100644 --- a/_build/compatibility.html +++ b/_build/compatibility.html @@ -1,522 +1,653 @@ - - - - - - - Foundation for Sites 6 Docs | Compatibility - - - - - - -
- -
- - -
- -
- - -
- -
- - - + - + + + + + +
+ +
+
+
+
+
Foundation Documentation
+ + + -
+
+
+
+

Compatibility

+

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.

- +
+
+
Browser/OS
+
The Grid
+
Layout/UI
+
JS
+
+
+
Chrome
+
✓
+
✓
+
✓
+
+
+
Firefox
+
✓
+
✓
+
✓
+
+
+
Safari
+
✓
+
✓
+
✓
+
+
+
IE10
+
✓
+
✓
+
✓
+
+
+
IE11
+
✓
+
✓
+
✓
+
+
+
IE9
+
✓
+
✓
+
✓
+
+
+
IE8
+
✗
+
✗
+
✗
+
+
+
IE7
+
✗
+
✗
+
✗
+
-
-
- - -
-
+
+
iOS (iPhone)
+
✓
+
✓
+
✓
+
+
+
iOS (iPad)
+
✓
+
✓
+
✓
+
+
+
Android 2, 4 (Phone)
+
✓
+
✓
+
✓
+
+
+
Android 2, 4 (Tablet)
+
✓
+
✓
+
✓
+
+
+
Windows Phone 7+
+
✓
+
✓
+
✓
+
+
+
Surface
+
✓
+
✓
+
✓
+
- -
-
-
- -
- -
-
- -
-
-
- -
Download ZURB’s 21 Responsive Trends That Will Shape 2017
-

Stay informed with amazing responsive trends each month from ZURB.

- + +
+
+
+
Stay on top of what’s happening in responsive design.
+

Sign up to receive monthly Responsive Reading highlights. Read Last Month's Edition »

+
+
+
+
+
+
- + +
+
+
+ + +
+
+
+
+

Foundation for Sites

+

Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. +

- -
-
-
-
-

Foundation for Sites

-

Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. -

-
-
- -
-
-
-
-

Want more?

- -
-
-
-
-

Talk to us

-

Tweet us at
@ZURBfoundation

-

Get involved in
our amazing community.

-
-
-
-
-

Stay Updated

-

Keep up with the latest on Foundation. Find us on Github.

- Stay Connected -
-
-
+
+ +
+
+
+
+

Want more?

+
-
-
- - Studios - Helping more than 200 startups succeed since 1998. - -
-
- - Foundation - The most advanced front-end framework in the world. - -
-
- - Notable Design Apps - Prototype, iterate and collect feedback on your products. - -
-
- - University - Ideas, thoughts and design resources shared with you. - +
+
+

Talk to us

+

Tweet us at
@ZURBfoundation

+

Business Support

+

Or check our support page

+
-
-
- -
-
-
-
    -
    • -
    • -
    • -
-
-
- - -

© 1998‐2016 ZURB, Inc. All rights reserved.

+
+
+

Stay Updated

+

Keep up with the latest on Foundation. Find us on Github.

+ Stay Connected
-
+
+
+ + Studios + Helping more than 200 startups succeed since 1998. + +
+
+ + Foundation + The most advanced front-end framework in the world. + +
+
+ + Notable Design Apps + Prototype, iterate and collect feedback on your products. + +
+
+ + University + Ideas, thoughts and design resources shared with you. + +
+
+
+ +
+
+
+
    +
    • +
    • +
    • +
+
+
+ + +

© 1998‐2015 ZURB, Inc. All rights reserved.

+
+
+
+ + + +
+
+ + + + + + + - - - - - - - diff --git a/_build/data/search.json b/_build/data/search.json deleted file mode 100644 index 3218e4052..000000000 --- a/_build/data/search.json +++ /dev/null @@ -1,5398 +0,0 @@ -[ - { - "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 Cooltips. 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 diff --git a/_build/drilldown-menu.html b/_build/drilldown-menu.html deleted file mode 100644 index 775ad4980..000000000 --- a/_build/drilldown-menu.html +++ /dev/null @@ -1,792 +0,0 @@ - - - - - - - - - - Foundation for Sites 6 Docs | Drilldown Menu - - - - - - -
- - - -
- - -
- - -
- - - - - -
-
- - Foundation -
-
- - - - -
-
- -
- -Jump to Nav - -
-

Drilldown Menu

- - JavaScript - -

Drilldown is one of Foundation's three menu patterns, which converts a series of nested lists into a vertical drilldown menu.

- - -
- -
- -
- -
- -

Basics

Drilldowns use the standard Menu syntax, using <ul>, <li>, and <a>. Add data-drilldown to the root menu to set up the drilldown.

-

To create sub-menus, place a <ul> next to an <a>. Clicking that <a> will then open the <ul> that it's next to.

-

Any <a> without a submenu will function like a normal link.

-
<ul class="vertical menu" data-drilldown>
-  <li>
-    <a href="#Item-1">Item 1</a>
-    <ul class="vertical menu">
-      <li><a href="#Item-1A">Item 1A</a></li>
-      <!-- ... -->
-    </ul>
-  </li>
-  <li><a href="#Item-2">Item 2</a></li>
-</ul>
-

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.

-
- - - -
-

Custom Styling

The drilldown plugin automatically adds a back button to the top of each nested menu. To style this control, target the .js-drilldown-back class:

-
.js-drilldown-back {
-  // ...
-}
- - -
-
-

JavaScript Reference

- - -
-

Initializing

- -

The file foundation.drilldown.js must be included in your JavaScript to use this plugin, along with foundation.core.js. This plugin also requires these utility libraries:

- - -
    -
  • foundation.util.keyboard.js
    • -
- -
    -
  • foundation.util.motion.js
    • -
- -
    -
  • foundation.util.nest.js
    • -
- - -
- - -
-

Foundation.Drilldown

- -

Creates a new instance of a drilldown menu.

- - - 
var elem = new Foundation.Drilldown(element, options);
- - - - - - - - - - - - - - - - -
NameTypeDescription
elementjQueryjQuery object to make into an accordion menu.
optionsObjectOverrides to the default plugin settings.
-
- -
- -
-

Plugin Options

- -

Use these options to customize an instance of Drilldown Menu. Plugin options can be set as individual data attributes, one combined data-options attribute, or as an object passed to the plugin's constructor. Learn more about how JavaScript plugins are initialized.

- - - - - - - - - - - - - - - - - - - - - - - - - -
NameDefaultDescription
data-back-button<\li><\a>Back<\/a><\/li>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.
data-wrapper<\div class="is-drilldown"><\/div>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.
data-parent-linkfalseAdds the parent link to the submenu.
data-close-on-clickfalseAllow the menu to return to root list on body click.
-
- -
- -
-

Events

- -

These events will fire from any element with a Drilldown Menu plugin attached.

- - - - - - - - - - - - - - - - - -
NameDescription
closed.zf.drilldownMenuFires when the menu is fully closed.
open.zf.drilldownMenuFires when the submenu has opened.
hide.zf.drilldownMenuFires when the submenu has closed.
-
- -
- -
-

Methods

- -
-

_hideAll

- -
- 
$('#element').foundation('_hideAll');
-
- -

Closes all open elements, and returns to root menu.

- - -

Fires these events: - Drilldown#event:closed -

- - -
-
-
-

_back

- -
- 
$('#element').foundation('_back', $elem);
-
- -

Adds event listener for each back button, and closes open menus.

- - -

Fires these events: - Drilldown#event:back -

- - - - - - - - - - -
NameTypeDescription
$elemjQuerythe current sub-menu to add `back` event.
- -
-
-
-

_show

- -
- 
$('#element').foundation('_show', $elem);
-
- -

Opens a submenu.

- - -

Fires these events: - Drilldown#event:open -

- - - - - - - - - - -
NameTypeDescription
$elemjQuerythe current element with a submenu to open, i.e. the `li` tag.
- -
-
-
-

_hide

- -
- 
$('#element').foundation('_hide', $elem);
-
- -

Hides a submenu

- - -

Fires these events: - Drilldown#event:hide -

- - - - - - - - - - -
NameTypeDescription
$elemjQuerythe current sub-menu to hide, i.e. the `ul` tag.
- -
-
-
-

destroy

- -
- 
$('#element').foundation('destroy');
-
- -

Destroys the Drilldown Menu

- - - - - -
-
-
- - -
- -
- -
- -
- -
- -
-
- - -
-
- - -
-
-
- -
- -
-
- -
-
-
- -
Download ZURB’s 21 Responsive Trends That Will Shape 2017
-

Stay informed with amazing responsive trends each month from ZURB.

- -
- -
-
- -
-
-
-
-

Foundation for Sites

-

Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. -

-
-
- -
-
-
-
-

Want more?

- -
-
-
-
-

Talk to us

-

Tweet us at
@ZURBfoundation

-

Get involved in
our amazing community.

-
-
-
-
-

Stay Updated

-

Keep up with the latest on Foundation. Find us on Github.

- Stay Connected -
-
-
-
-
-
-
- - Studios - Helping more than 200 startups succeed since 1998. - -
-
- - Foundation - The most advanced front-end framework in the world. - -
-
- - Notable Design Apps - Prototype, iterate and collect feedback on your products. - -
-
- - University - Ideas, thoughts and design resources shared with you. - -
-
-
- -
-
-
-
    -
    • -
    • -
    • -
-
-
- - -

© 1998‐2016 ZURB, Inc. All rights reserved.

-
-
-
- -
-
- - - - - - - - - diff --git a/_build/dropdown-menu.html b/_build/dropdown-menu.html deleted file mode 100644 index 83de3b7c0..000000000 --- a/_build/dropdown-menu.html +++ /dev/null @@ -1,850 +0,0 @@ - - - - - - - - - - Foundation for Sites 6 Docs | Dropdown Menu - - - - - - -
- - - -
- - -
- - -
- - - - - -
-
- - Foundation -
-
- - - - -
-
- -
- -Jump to Nav - -
-

Dropdown Menu

- - JavaScript - -

Change a basic Menu into an expandable dropdown menu with the Dropdown Menu plugin.

- - -
- -
- -
- -
- -

Horizontal

Dropdown menus build on the Menu component's syntax. Add the class .dropdown and the attribute data-dropdown-menu to the menu container to set up the dropdown.

-
<ul class="dropdown menu" data-dropdown-menu>
-  <li><a href="#">Item 1</a></li>
-  <li><a href="#">Item 2</a></li>
-  <li><a href="#">Item 3</a></li>
-  <li><a href="#">Item 4</a></li>
-</ul>

To create dropdown menus, nest a new <ul> inside an <li>. You can nest further to create more levels of dropdowns.

-
-

Note that the <ul> goes after the <a>, and not inside of it.

-
- -
<ul class="dropdown menu" data-dropdown-menu>
-  <li>
-    <a href="#">Item 1</a>
-    <ul class="menu">
-      <li><a href="#">Item 1A</a></li>
-      <!-- ... -->
-    </ul>
-  </li>
-  <li><a href="#">Item 2</a></li>
-  <li><a href="#">Item 3</a></li>
-  <li><a href="#">Item 4</a></li>
-</ul>
- -
-

Vertical

Add the .vertical class to the top-level menu to make it vertical. Sub-menus are automatically vertical, regardless of the orientation of the top-level menu.

-
-

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 max-width on the menu.

-
- -
<ul class="vertical dropdown menu" data-dropdown-menu style="max-width: 300px;">
-  <li><a href="#">Item 1</a></li>
-  <!-- ... -->
-</ul>
- -
-

See the documentation for the Sticky plugin to see how to easily make a sticky nav bar.

-
-

Preventing FOUC

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 flash of unstyled content. You can prevent this by adding the is-dropdown-submenu-parent class manually.

-
<ul class="dropdown menu" data-dropdown-menu>
-  <li class="is-dropdown-submenu-parent">
-    <a href="#">Item 1</a>
-    <ul class="menu">
-      <li><a href="#">Item 1A</a></li>
-      <!-- ... -->
-    </ul>
-  </li>
-  <li><a href="#">Item 2</a></li>
-  <li><a href="#">Item 3</a></li>
-  <li><a href="#">Item 4</a></li>
-</ul>
- -
-
-

Sass Reference

- -
-

Variables

- -

The default styles of this component can be customized using these Sass variables in your project's settings file.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDefault ValueDescription
$dropdownmenu-arrowsBooleantrue

Enables arrows for items with dropdown menus.

-
$dropdownmenu-arrow-colorColor$anchor-color

Sets dropdown menu arrow color if arrow is used.

-
$dropdownmenu-min-widthLength200px

Minimum width of dropdown sub-menus.

-
$dropdownmenu-backgroundColor$white

Background color for dropdowns.

-
$dropdownmenu-borderList1px solid $medium-gray

Border for dropdown sub-menus.

-
-
- - - -
- -
-
-

JavaScript Reference

- - -
-

Initializing

- -

The file foundation.dropdownMenu.js must be included in your JavaScript to use this plugin, along with foundation.core.js. This plugin also requires these utility libraries:

- - -
    -
  • foundation.util.keyboard.js
    • -
- -
    -
  • foundation.util.box.js
    • -
- -
    -
  • foundation.util.nest.js
    • -
- - -
- - -
-

Foundation.DropdownMenu

- -

Creates a new instance of DropdownMenu.

- - - 
var elem = new Foundation.DropdownMenu(element, options);
- -

Fires these events: - DropdownMenu#event:init -

- - - - - - - - - - - - - - - -
NameTypeDescription
elementjQueryjQuery object to make into a dropdown menu.
optionsObjectOverrides to the default plugin settings.
-
- -
- -
-

Plugin Options

- -

Use these options to customize an instance of Dropdown Menu. Plugin options can be set as individual data attributes, one combined data-options attribute, or as an object passed to the plugin's constructor. Learn more about how JavaScript plugins are initialized.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameDefaultDescription
data-disable-hoverfalseDisallows hover events from opening submenus
data-autoclosetrueAllow a submenu to automatically close on a mouseleave event, if not clicked open.
data-hover-delay50Amount of time to delay opening a submenu on hover event.
data-click-opentrueAllow a submenu to open/remain open on parent click event. Allows cursor to move away from menu.
data-closing-time500Amount of time to delay closing a submenu on a mouseleave event.
data-alignmentleftPosition of the menu relative to what direction the submenus should open. Handled by JS.
data-close-on-clicktrueAllow clicks on the body to close any open submenus.
data-vertical-classverticalClass applied to vertical oriented menus, Foundation default is `vertical`. Update this if using your own class.
data-right-classalign-rightClass applied to right-side oriented menus, Foundation default is `align-right`. Update this if using your own class.
data-force-followfalseBoolean to force overide the clicking of links to perform default action, on second touch event for mobile.
-
- -
- -
-

Events

- -

These events will fire from any element with a Dropdown Menu plugin attached.

- - - - - - - - - - - - - -
NameDescription
show.zf.dropdownMenuFires when the new dropdown pane is visible.
hide.zf.dropdownMenuFires when the open menus are closed.
-
- -
- -
-

Methods

- -
-

destroy

- -
- 
$('#element').foundation('destroy');
-
- -

Destroys the plugin.

- - - - - -
-
-
- - - - -
- -
- -
- -
- -
- -
-
- - -
-
- - -
-
-
- -
- -
-
- -
-
-
- -
Download ZURB’s 21 Responsive Trends That Will Shape 2017
-

Stay informed with amazing responsive trends each month from ZURB.

- -
- -
-
- -
-
-
-
-

Foundation for Sites

-

Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. -

-
-
- -
-
-
-
-

Want more?

- -
-
-
-
-

Talk to us

-

Tweet us at
@ZURBfoundation

-

Get involved in
our amazing community.

-
-
-
-
-

Stay Updated

-

Keep up with the latest on Foundation. Find us on Github.

- Stay Connected -
-
-
-
-
-
-
- - Studios - Helping more than 200 startups succeed since 1998. - -
-
- - Foundation - The most advanced front-end framework in the world. - -
-
- - Notable Design Apps - Prototype, iterate and collect feedback on your products. - -
-
- - University - Ideas, thoughts and design resources shared with you. - -
-
-
- -
-
-
-
    -
    • -
    • -
    • -
-
-
- - -

© 1998‐2016 ZURB, Inc. All rights reserved.

-
-
-
- -
-
- - - - - - - - - diff --git a/_build/dropdown.html b/_build/dropdown.html deleted file mode 100644 index f0be14cfd..000000000 --- a/_build/dropdown.html +++ /dev/null @@ -1,909 +0,0 @@ - - - - - - - - - - Foundation for Sites 6 Docs | Dropdown - - - - - - -
- - - -
- - -
- - -
- - - - - -
-
- - Foundation -
-
- - - - -
-
- -
- -Jump to Nav - -
-

Dropdown

- - JavaScript - -

Dropdown panes are little happy sprites which can be revealed on click or hover.

- - -
- -
- -
- -
- -
-

You might be looking for dropdown menus, which are a separate plugin.

-
- -

Basics

To create a dropdown pane, add the class .dropdown-pane and the attribute data-dropdown to an element. Give the dropdown a unique ID as well.

-

To create the dropdown trigger, add data-toggle to a <button>. The value of data-toggle is the ID of the dropdown.

-
<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>
- -
- - - - -
-

Positioning

By default, a dropdown anchors below the button that opened it. Add the class .top, .right, or .bottom to the dropdown to change this.

-
<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>
- -
- -

- - -

- - - -

Adding .float-right or .float-left to the anchor will change the direction of the dropdown as well.

-

- - -

- - -
-
-

Sass Reference

- -
-

Variables

- -

The default styles of this component can be customized using these Sass variables in your project's settings file.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDefault ValueDescription
$dropdown-paddingList1rem

Padding for dropdown panes.

-
$dropdown-borderList1px solid $medium-gray

Border for dropdown panes.

-
$dropdown-font-sizeList1rem

Font size for dropdown panes.

-
$dropdown-widthNumber300px

Width for dropdown panes.

-
$dropdown-radiusNumber$global-radius

Border radius dropdown panes.

-
$dropdown-sizesMap - tiny: 100px
- small: 200px
- large: 400px
-

Sizes for dropdown panes. Each size is a CSS class you can apply.

-
-
- -
- -
-

Mixins

- -

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.

- - -
- - - - -
- 
@include dropdown-container;
-
- -

Applies styles for a basic dropdown.

- - - - - -
- - - - - -
- - -
- -
-
-

JavaScript Reference

- - -
-

Initializing

- -

The file foundation.dropdown.js must be included in your JavaScript to use this plugin, along with foundation.core.js. This plugin also requires these utility libraries:

- - -
    -
  • foundation.util.keyboard.js
    • -
- -
    -
  • foundation.util.box.js
    • -
- -
    -
  • foundation.util.triggers.js
    • -
- - -
- - -
-

Foundation.Dropdown

- -

Creates a new instance of a dropdown.

- - - 
var elem = new Foundation.Dropdown(element, options);
- - - - - - - - - - - - - - - - -
NameTypeDescription
elementjQueryjQuery object to make into a dropdown. - Object should be of the dropdown panel, rather than its anchor.
optionsObjectOverrides to the default plugin settings.
-
- -
- -
-

Plugin Options

- -

Use these options to customize an instance of Dropdown. Plugin options can be set as individual data attributes, one combined data-options attribute, or as an object passed to the plugin's constructor. Learn more about how JavaScript plugins are initialized.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameDefaultDescription
data-hover-delay250Amount of time to delay opening a submenu on hover event.
data-hoverfalseAllow submenus to open on hover events
data-hover-panetrueDon't close dropdown when hovering over dropdown pane
data-v-offset1Number of pixels between the dropdown pane and the triggering element on open.
data-h-offset1Number of pixels between the dropdown pane and the triggering element on open.
data-position-classtopClass applied to adjust open position. JS will test and fill this in.
data-trap-focusfalseAllow the plugin to trap focus to the dropdown pane if opened with keyboard commands.
data-auto-focustrueAllow the plugin to set focus to the first focusable element within the pane, regardless of method of opening.
data-close-on-clickfalseAllows a click on the body to close the dropdown.
-
- -
- -
-

Events

- -

These events will fire from any element with a Dropdown plugin attached.

- - - - - - - - - - - - - -
NameDescription
closeme.zf.dropdownFires to close other open dropdowns
show.zf.dropdownFires once the dropdown is visible.
-
- -
- -
-

Methods

- -
-

getPositionClass

- -
- 
$('#element').foundation('getPositionClass');
-
- -

Helper function to determine current orientation of dropdown pane.

- - - - -
-
-
-

open

- -
- 
$('#element').foundation('open');
-
- -

Opens the dropdown pane, and fires a bubbling event to close other dropdowns.

- - -

Fires these events: - Dropdown#event:closeme - Dropdown#event:show -

- - -
-
-
-

close

- -
- 
$('#element').foundation('close');
-
- -

Closes the open dropdown pane.

- - -

Fires these events: - Dropdown#event:hide -

- - -
-
-
-

toggle

- -
- 
$('#element').foundation('toggle');
-
- -

Toggles the dropdown pane's visibility.

- - - - -
-
-
-

destroy

- -
- 
$('#element').foundation('destroy');
-
- -

Destroys the dropdown.

- - - - - -
-
-
- - - - -
- -
- -
- -
- -
- -
-
- - -
-
- - -
-
-
- -
- -
-
- -
-
-
- -
Download ZURB’s 21 Responsive Trends That Will Shape 2017
-

Stay informed with amazing responsive trends each month from ZURB.

- -
- -
-
- -
-
-
-
-

Foundation for Sites

-

Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. -

-
-
- -
-
-
-
-

Want more?

- -
-
-
-
-

Talk to us

-

Tweet us at
@ZURBfoundation

-

Get involved in
our amazing community.

-
-
-
-
-

Stay Updated

-

Keep up with the latest on Foundation. Find us on Github.

- Stay Connected -
-
-
-
-
-
-
- - Studios - Helping more than 200 startups succeed since 1998. - -
-
- - Foundation - The most advanced front-end framework in the world. - -
-
- - Notable Design Apps - Prototype, iterate and collect feedback on your products. - -
-
- - University - Ideas, thoughts and design resources shared with you. - -
-
-
- -
-
-
-
    -
    • -
    • -
    • -
-
-
- - -

© 1998‐2016 ZURB, Inc. All rights reserved.

-
-
-
- -
-
- - - - - - - - - diff --git a/_build/equalizer.html b/_build/equalizer.html deleted file mode 100644 index 1c9e5bb97..000000000 --- a/_build/equalizer.html +++ /dev/null @@ -1,914 +0,0 @@ - - - - - - - - - - Foundation for Sites 6 Docs | Equalizer - - - - - - -
- - - -
- - -
- - -
- - - - - -
-
- - Foundation -
-
- - - - -
-
- -
- -Jump to Nav - -
-

Equalizer

- - JavaScript - -

Equalizer makes it dead simple to give multiple items equal height.

- - -
- -
- -
- -
- -

Basics

To set up an Equalizer group, you need a container, which gets the attribute data-equalizer, and then a series of child elements, which get the attribute data-equalizer-watch. The child elements will all be resized to have the same height.

-
<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>
- -
-
-
- -
-
-
-
-

Pellentesque habitant morbi tristique senectus et netus et, ante.

-
-
-
-
- -
-
-
-

Nesting

To use one Equalizer inside another, each container needs a unique ID, assigned with the data-equalizer attribute. Each data-equalizer-watch element should then have a value that matches its parent.

-

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="row" data-equalizer="foo">
-  <div class="medium-4 columns" data-equalizer-watch="foo">
-    <div class="callout" data-equalizer="bar">
-      <h3>Parent panel</h3>
-      <div class="callout" data-equalizer-watch="bar"></div>
-      <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="callout panel" data-equalizer-watch="foo"></div>
-  </div>
-  <div class="medium-4 columns">
-    <div class="callout" data-equalizer-watch="foo"></div>
-  </div>
-</div>
-
-
-

Parent panel

-
-

The three callouts in this panel will equalize, even when stacked.

-
-
-

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.

-
-
-

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.

-
-
-
-
-
-

Where these panels will not equalize on stack, and instead equalize on medium up.

-
-
-
-
-

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.

-
-
-
- -
-

Equalize By Row

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!

-
-

Under the Hood:

-

Equalizer splits the data-equalizer-watch elements into groups by checking their vertical offsets, and grouping ones with the same offset into a "row".

-

Be aware on what you set data-equalizer-watch, if the top position is different, Equalizer will interpret that as a new "row" and equalize accordingly.

-
- -
<div class="row small-up-1 medium-up-2 large-up-4" data-equalizer data-equalize-by-row="true">
-  <div class="column"></div>
-  <div class="column"></div>
-  <div class="column"></div>
-  <!-- ... -->
-</div>
-
-
- -

Lorem ipsum dolor sit amet

-

-
-
-
-

Lorem ipsum dolor sit amet

-

-
-
-
-

Lorem ipsum dolor sit amet

-

-
-
-
- -
-
-
-
-

Lorem ipsum dolor sit amet

-

-
-
-
-

Lorem ipsum dolor sit amet

-

-
-
-
- -
-
-
-
- -

Lorem ipsum dolor sit amet

-

-
-
-
-

Lorem ipsum dolor sit amet

-

-
-
-
-

Lorem ipsum dolor sit amet

-

-
-
-
- -
-
-
-
-

Lorem ipsum dolor sit amet

-

-
-
-
-

Lorem ipsum dolor sit amet

-

-
-
-
-

Lorem ipsum dolor sit amet

-

-
-
-
-

Lorem ipsum dolor sit amet

-

-
-
-
-

Lorem ipsum dolor sit amet

-

-
-
-
-

Lorem ipsum dolor sit amet

-

-
-
-
- -
-
-
- - - -
-
-

JavaScript Reference

- - -
-

Initializing

- -

The file foundation.equalizer.js must be included in your JavaScript to use this plugin, along with foundation.core.js.

- - - -
- - -
-

Foundation.Equalizer

- -

Creates a new instance of Equalizer.

- - - 
var elem = new Foundation.Equalizer(element, options);
- -

Fires these events: - Equalizer#event:init -

- - - - - - - - - - - - - - - -
NameTypeDescription
elementObjectjQuery object to add the trigger to.
optionsObjectOverrides to the default plugin settings.
-
- -
- -
-

Plugin Options

- -

Use these options to customize an instance of Equalizer. Plugin options can be set as individual data attributes, one combined data-options attribute, or as an object passed to the plugin's constructor. Learn more about how JavaScript plugins are initialized.

- - - - - - - - - - - - - - - - - - - - -
NameDefaultDescription
data-equalize-on-stacktrueEnable height equalization when stacked on smaller screens.
data-equalize-by-rowfalseEnable height equalization row by row.
data-equalize-onmediumString representing the minimum breakpoint size the plugin should equalize heights on.
-
- -
- -
-

Events

- -

These events will fire from any element with a Equalizer plugin attached.

- - - - - - - - - - - - - - - - - - - - - -
NameDescription
preequalized.zf.equalizerFires before the heights are applied
postequalized.zf.equalizerFires when the heights have been applied
preequalizedRow.zf.equalizerFires before the heights per row are applied
postequalizedRow.zf.equalizerFires when the heights per row have been applied
-
- -
- -
-

Methods

- -
-

getHeights

- -
- 
$('#element').foundation('getHeights', cb);
-
- -

Finds the outer heights of children contained within an Equalizer parent and returns them in an array

- - - - - - - - - - - - -
NameTypeDescription
cbfunctionA non-optional callback to return the heights array to.
- -
-
-
-

getHeightsByRow

- -
- 
$('#element').foundation('getHeightsByRow', cb);
-
- -

Finds the outer heights of children contained within an Equalizer parent and returns them in an array

- - - - - - - - - - - - -
NameTypeDescription
cbfunctionA non-optional callback to return the heights array to.
- -
-
-
-

applyHeight

- -
- 
$('#element').foundation('applyHeight', heights);
-
- -

Changes the CSS height property of each child in an Equalizer parent to match the tallest

- - -

Fires these events: - Equalizer#event:preequalized - Equalizer#event:postequalized -

- - - - - - - - - - -
NameTypeDescription
heightsarrayAn array of heights of children within Equalizer container
- -
-
-
-

applyHeightByRow

- -
- 
$('#element').foundation('applyHeightByRow', groups);
-
- -

Changes the CSS height property of each child in an Equalizer parent to match the tallest by row

- - -

Fires these events: - Equalizer#event:preequalized - Equalizer#event:preequalizedRow - Equalizer#event:postequalizedRow - Equalizer#event:postequalized -

- - - - - - - - - - -
NameTypeDescription
groupsarrayAn array of heights of children within Equalizer container grouped by row with element,height and max as last child
- -
-
-
-

destroy

- -
- 
$('#element').foundation('destroy');
-
- -

Destroys an instance of Equalizer.

- - - - - -
-
-
- - -
- -
- -
- -
- -
- -
-
- - -
-
- - -
-
-
- -
- -
-
- -
-
-
- -
Download ZURB’s 21 Responsive Trends That Will Shape 2017
-

Stay informed with amazing responsive trends each month from ZURB.

- -
- -
-
- -
-
-
-
-

Foundation for Sites

-

Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. -

-
-
- -
-
-
-
-

Want more?

- -
-
-
-
-

Talk to us

-

Tweet us at
@ZURBfoundation

-

Get involved in
our amazing community.

-
-
-
-
-

Stay Updated

-

Keep up with the latest on Foundation. Find us on Github.

- Stay Connected -
-
-
-
-
-
-
- - Studios - Helping more than 200 startups succeed since 1998. - -
-
- - Foundation - The most advanced front-end framework in the world. - -
-
- - Notable Design Apps - Prototype, iterate and collect feedback on your products. - -
-
- - University - Ideas, thoughts and design resources shared with you. - -
-
-
- -
-
-
-
    -
    • -
    • -
    • -
-
-
- - -

© 1998‐2016 ZURB, Inc. All rights reserved.

-
-
-
- -
-
- - - - - - - - - diff --git a/_build/flex-grid.html b/_build/flex-grid.html deleted file mode 100644 index 9aad6a668..000000000 --- a/_build/flex-grid.html +++ /dev/null @@ -1,1088 +0,0 @@ - - - - - - - - - - Foundation for Sites 6 Docs | Flex Grid - - - - - - -
- - - -
- - -
- - -
- - - - - -
-
- - Foundation -
-
- - - - -
-
- -
- -Jump to Nav - -
-

Flex Grid

- - -

New in Foundation 6 is a Flexbox-powered grid, which you can use instead of the traditional float grid.

- - -
- -
- -
- -
- -

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.

-
-

Browser support

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. (View flexbox browser support.) We recommend only using the flex grid on projects that can live with purely cutting-edge browser support.

-
-

In Firefox 43+, images in flex columns may overflow their container. To fix this, add a defined width to any images inside a flex column, or use width: 100% for full-bleed images.

-
- -
-

Importing

If you're using the CSS version of Foundation, you can generate a custom download of Foundation with flexbox mode enabled.

-

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. Learn more about enabling flexbox mode.

-
@import 'foundation';
-
-// @include foundation-grid;
-@include foundation-flex-classes;
-@include foundation-flex-grid;
-

The flex grid uses the same settings variables as the float grid to adjust gutter size, column count, and so on. Refer to the Sass variable reference for the default grid to see how the flex grid can be customized.

-
- -
-

The standard grid and flex grid use some of the same classes, namely .row and .column, 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.

-
- -
-

Basics

The structure of the flex grid is identical to that of the float grid. Rows use the class .row, and columns use the class .column (or .columns). Basic percentage-based sizing can also be done using the same grid classes you're used to: .small-6, .medium-12, and so on.

-
<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>
- -
-
6 columns
-
6 columns
-
-
-
12/6/4 columns
-
12/6/8 columns
-
-

Advanced Sizing

If no sizing class is added to the column, it will simply expand to fill the leftover space. We call this an expand behavior.

-
<div class="row">
-  <div class="small-4 columns">4 columns</div>
-  <div class="columns">Whatever's left!</div>
-</div>
- -
-
4 columns
-
Whatever's left!
-
-

Multiple expanding columns will share the leftover space equally.

-
<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>
- -
-
4 columns
-
Whatever's left!
-
Whatever's left!
-
-

A column can also be made to shrink, by adding the .shrink class. This means it will only take up the horizontal space its contents need.

-
<div class="row">
-  <div class="shrink columns">Shrink!</div>
-  <div class="columns">Expand!</div>
-</div>
- -
-
Shrink!
-
Expand!
-
-

Responsive Adjustments

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 .small-12 manually.

-

To switch back to the expand behavior from a percentage or shrink behavior, use the classes .medium-expand or .large-expand. In the below example, the columns stack on small screens, and become even-width on large screens.

-
<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>
- -
-
One
-
Two
-
Three
-
Four
-
Five
-
Six
-
-

Automatic Stacking

We have a few shorthand classes for the above behavior. Use the .[size]-unstack classes to stack all columns in the row by default, and then unstack them on a larger screen size, making each one equal-width.

-
<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>
- -
-
One
-
Two
-
Three
-
Four
-
Five
-
Six
-
-

Column Alignment

Columns in a flex grid can be aligned across the horizontal or vertical axis of their parent row.

-

Horizontal Alignment

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 .align-[dir] class to the flex row.

-
<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>
-
-
-
Aligned to
-
the left
-
-
-
Aligned to
-
the right
-
-
-
Aligned to
-
the middle
-
-
-
Aligned to
-
the edges
-
-
-
Aligned to
-
the space around
-
-
-
- -

You might be wondering what the difference between .align-justify and .align-spaced is. A justified grid (justify-content: space-between) evenly distributes the space between each column. The first and last columns pin to the edge of the grid.

-

A spaced grid (justify-content: space-around) evenly distributes the space around each column. This means there will always be space to the left of the first column, and to the right of the last column.

-

The horizontal alignment classes are shorthands for the justify-content CSS property. Learn more about justify-content.

-
-

Vertical Alignment

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, middle alignment in CSS!

-

Your options for vertical alignment are top, middle, bottom, and stretch. Note that we use the word middle for vertical alignment, and center for horizontal alignment.

-

Applying a vertical alignment class to the flex row will affect every column directly inside it.

-
<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>
- -
-
I'm in the middle!
-
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 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>
- -
-
These columns align to the top.
-
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.
-
-

Similar alignment classes can also be applied to individual columns, which use the format .align-self-* instead of .align-*.

-
-

In Foundation 6.2, we introduced the .align-self-* classes, which replace the old method of using .align-* classes on columns. The old classes will be removed completely in Foundation 6.3.

-
- -
<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>
- -
-
Align bottom
-
Align middle
-
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?
-
-

Collapse/Uncollapse Rows

The .collapse class lets you remove column gutters (padding).

-

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.

-
<div class="row small-collapse medium-uncollapse">
-  <div class="small-6 columns">
-    Removes gutter at small media query and adds at medium.
-  </div>
-  <div class="small-6 columns">
-    Removes gutter at small media query and adds at medium.
-  </div>
-</div>

Scale the browser down to a medium size to see the difference.

- -
-
-
-

On a small screen, I have gutters!

-

On a medium screen, I have gutters!

-

On a large screen, I have no gutters!

-
-
-
-
-

On a small screen, I have gutters!

-

On a medium screen, I have gutters!

-

On a large screen, I have no gutters!

-
-
-
- -
-

Offsets

Offsets work identically to the float grid, by applying margin-left to a column.

-
<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>
- -
-
Offset 2 on large
-
4 columns
-
-

Source Ordering

Flexbox supports source ordering, making it easy to rearrange columns on different screen sizes without weird relative positioning tricks.

-

The CSS property is easy enough to remember.

-
.element {
-  order: 1;
-}

Columns within a row will be sorted by their order property. Lower numbers are placed first. If multiple columns have the same number, they're sorted in the order they appear in the HTML.

-

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.

-
<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>
- -
-
- This column will come second on small, and first on medium and larger. -
-
- This column will come first on small, and second on medium and larger. -
-
-

Block Grids

To define column widths at the row-level, instead of the individual column level, add the class .[size]-up-[n] to a row, where [n] is the number of columns to display per row, and [size] is the breakpoint at which to apply the effect.

-
-

A block grid row has the property align-items: stretch by default, meaning the columns in each row are equal height. To change this, change the align-items property of the row, or use one of the vertical alignment flexbox classes.

-
- -
<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>
- -
-
1 per row on small
-
2 per row on medium
-
3 per row on large
-
- -
-
-

Sass Reference

- - - - -
-

Mixins

- -

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.

- - -
-

flex-grid-row

- - - -
- 
@include flex-grid-row($behavior, $width, $columns, $base, $gutter) { }
-
- -

Creates a container for a flex grid row.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ParameterTypeDefault ValueDescription
$behaviorKeyword or Listnull

Modifications to the default grid styles. nest indicates the row will be placed inside another row. collapse indicates that the columns inside this row will not have padding. nest collapse combines both behaviors.

-
$widthNumber$grid-row-width

Maximum width of the row.

-
$columnsNumbernull

Number of columns to use for this row. If set to null (the default), the global column count will be used.

-
$baseBooleantrue

Set to false 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.

-
$gutterNumber$grid-column-gutter

Gutter to use when inverting margins, in case the row is nested.

-
-
- -
- - - -
-

flex-grid-column

- - - -
- 
@include flex-grid-column($columns, $gutter);
-
- -

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.

- - - - - - - - - - - - - - - - - - - - - -
ParameterTypeDefault ValueDescription
$columnsMixednull

Width of the column. Refer to the flex-grid-column() function to see possible values.

-
$gutterNumber$grid-column-gutter

Space between columns, added as a left and right padding.

-
-
- -
- - - -
-

flex-grid-layout

- - - -
- 
@include flex-grid-layout($n, $selector);
-
- -

Creates a block grid for a flex grid row.

- - - - - - - - - - - - - - - - - - - - - -
ParameterTypeDefault ValueDescription
$nNumberNone

Number of columns to display on each row.

-
$selectorStringNone

Selector to use to target columns within the row.

-
-
- -
- - - -
-

flex-grid-order

- - - -
- 
@include flex-grid-order($order);
-
- -

Changes the source order of a flex grid column. Columns with lower numbers appear first in the layout.

- - - - - - - - - - - - - - - -
ParameterTypeDefault ValueDescription
$orderNumber0

Order number to apply.

-
-
- -
- - - -
-

flex-grid-row-align

- - - -
- 
@include flex-grid-row-align($x, $y);
-
- -

Horizontally or vertically aligns the columns within a flex row. Apply this mixin to a flex row.

- - - - - - - - - - - - - - - - - - - - - -
ParameterTypeDefault ValueDescription
$xKeywordnull

Horizontal alignment to use. Can be left, right, center, justify, or spaced. Or, set it to null (the default) to not set horizontal alignment.

-
$yKeywordnull

Vertical alignment to use. Can be top, bottom, middle, or stretch. Or, set it to null (the default) to not set vertical alignment.

-
-
- -
- - - -
-

flex-grid-column-align

- - - -
- 
@include flex-grid-column-align($y);
-
- -

Vertically align a single column within a flex row. Apply this mixin to a flex column.

- - - - - - - - - - - - - - - -
ParameterTypeDefault ValueDescription
$yKeywordnull

Vertical alignment to use. Can be top, bottom, middle, or stretch. Or, set it to null (the default) to not set vertical alignment.

-
-
- - - - - -
- -
- -
-

Functions

- - -
-

flex-grid-column

- - - -
- 
flex-grid-column($columns)
-
- -

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:

-
    -
  • null (the default) will make the column expand to fill space.
    • -
  • shrink will make the column contract, so it only takes up the horizontal space it needs.
    • -
- - - - - - - - - - - - - - -
ParameterTypeDefault ValueDescription
$columnsMixednull

Width of the column.

-
-
- - - -
- -
- - - - - -
- -
- -
- -
- -
- -
-
- - -
-
- - -
-
-
- -
- -
-
- -
-
-
- -
Download ZURB’s 21 Responsive Trends That Will Shape 2017
-

Stay informed with amazing responsive trends each month from ZURB.

- -
- -
-
- -
-
-
-
-

Foundation for Sites

-

Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. -

-
-
- -
-
-
-
-

Want more?

- -
-
-
-
-

Talk to us

-

Tweet us at
@ZURBfoundation

-

Get involved in
our amazing community.

-
-
-
-
-

Stay Updated

-

Keep up with the latest on Foundation. Find us on Github.

- Stay Connected -
-
-
-
-
-
-
- - Studios - Helping more than 200 startups succeed since 1998. - -
-
- - Foundation - The most advanced front-end framework in the world. - -
-
- - Notable Design Apps - Prototype, iterate and collect feedback on your products. - -
-
- - University - Ideas, thoughts and design resources shared with you. - -
-
-
- -
-
-
-
    -
    • -
    • -
    • -
-
-
- - -

© 1998‐2016 ZURB, Inc. All rights reserved.

-
-
-
- -
-
- - - - - - - - - diff --git a/_build/flex-video.html b/_build/flex-video.html deleted file mode 100644 index 05dd96aff..000000000 --- a/_build/flex-video.html +++ /dev/null @@ -1,650 +0,0 @@ - - - - - - - - - - Foundation for Sites 6 Docs | Flex Video - - - - - - -
- - - -
- - -
- - -
- - - - - -
-
- - Foundation -
-
- - - - -
-
- -
- -Jump to Nav - -
-

Flex Video

- - -

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.

- - -
- -
- -
- -
- -

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 .flex-video.

-
<div class="flex-video">
-  <iframe width="420" height="315" src="https://www.youtube.com/embed/V9gkYw35Vws" frameborder="0" allowfullscreen></iframe>
-</div>
- -
- -
-

The default ratio is 4:3. Add the .widescreen class to change it to 16:9.

-
<div class="flex-video widescreen">
-  <iframe width="420" height="315" src="https://www.youtube.com/embed/aiBt44rrslw" frameborder="0" allowfullscreen></iframe>
-</div>
- -
- -
-

Embedded Vimeo videos are special snowflakes of their own. Add the .vimeo class to a flex video container that wraps a Vimeo embed.

-
<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>
- -
- -
- -
-
-

Sass Reference

- -
-

Variables

- -

The default styles of this component can be customized using these Sass variables in your project's settings file.

- - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDefault ValueDescription
$flexvideo-margin-bottomNumberrem-calc(16)

Margin below a flex video container.

-
$flexvideo-ratioNumber4 by 3

Padding used to create a 4:3 aspect ratio.

-
$flexvideo-ratio-widescreenNumber16 by 9

Padding used to create a 16:9 aspect ratio.

-
-
- -
- -
-

Mixins

- -

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.

- - -
-

flex-video

- - - -
- 
@include flex-video($ratio);
-
- -

Creates a flex video container.

- - - - - - - - - - - - - - - -
ParameterTypeDefault ValueDescription
$ratioList$flexvideo-ratio

Ratio to use for the container, formatted as x by y.

-
-
- - - - - -
- -
- -
-

Functions

- - -
-

flex-video

- - - -
- 
flex-video($ratio)
-
- -

Creates a percentage height that can be used as padding in a flex video container.

- - - - - - - - - - - - - - -
ParameterTypeDefault ValueDescription
$ratioListNone

Ratio to use to calculate the height, formatted as x by y.

-
-
- - - -
- -
- - - - - -
- -
- -
- -
- -
- -
-
- - -
-
- - -
-
-
- -
- -
-
- -
-
-
- -
Download ZURB’s 21 Responsive Trends That Will Shape 2017
-

Stay informed with amazing responsive trends each month from ZURB.

- -
- -
-
- -
-
-
-
-

Foundation for Sites

-

Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. -

-
-
- -
-
-
-
-

Want more?

- -
-
-
-
-

Talk to us

-

Tweet us at
@ZURBfoundation

-

Get involved in
our amazing community.

-
-
-
-
-

Stay Updated

-

Keep up with the latest on Foundation. Find us on Github.

- Stay Connected -
-
-
-
-
-
-
- - Studios - Helping more than 200 startups succeed since 1998. - -
-
- - Foundation - The most advanced front-end framework in the world. - -
-
- - Notable Design Apps - Prototype, iterate and collect feedback on your products. - -
-
- - University - Ideas, thoughts and design resources shared with you. - -
-
-
- -
-
-
-
    -
    • -
    • -
    • -
-
-
- - -

© 1998‐2016 ZURB, Inc. All rights reserved.

-
-
-
- -
-
- - - - - - - - - diff --git a/_build/flexbox.html b/_build/flexbox.html deleted file mode 100644 index a76a673e4..000000000 --- a/_build/flexbox.html +++ /dev/null @@ -1,784 +0,0 @@ - - - - - - - - - - Foundation for Sites 6 Docs | Flexbox - - - - - - -
- - - -
- - -
- - -
- - - - - -
-
- - Foundation -
-
- - - - -
-
- -
- -Jump to Nav - -
-

Flexbox

- - -

For browsers with cutting-edge support, some of Foundation's key components can be converted to flexbox.

- - -
- -
- -
- -
- -

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!

-

Enabling flexbox mode replaces those hacks with flexbox properties, streamlining how layouts are made, and making sizing and alignment of elements much easier.

-

Flexbox mode is only supported these browsers:

-
    -
  • The latest Chrome and Firefox
    • -
  • Safari 6+
    • -
  • IE 10+
    • -
  • iOS 7+
    • -
  • Android 4.4+
    • -
-
-

Enabling Flexbox Mode

If you're using the CSS version of Foundation, you can generate a custom download of Foundation with flexbox mode enabled. If you're using the Sass version of Foundation, you can enable flexbox mode two ways:

-

If you use the foundation-everything() mixin in your main Sass file, pass in the parameter true to enable flexbox mode.

-
@include foundation-everything(true);

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 $global-flexbox to true, and remove the @include 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):

-
$global-flexbox: true;
-
-// @include foundation-grid;
-@include foundation-flex-grid;
-@include foundation-flex-classes;
-

Supported Components

Besides the flex grid, these components have flexbox modes:

- -

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.

-
-

Helper Classes

Flexbox makes horizontal and vertical alignment painless, through the CSS properties align-content, align-self, and justify-content. Foundation includes a handful of classes for these properties, which work with any flexbox-enabled component.

-

To understand how these classes work, you need to understand the parent-child relationship created with flexbox. An element with display: flex is a flex parent, and can horizontally or vertically align its children. All immediate children of the flex parent are flex children. A flex child can vertically align itself.

-

Here's a basic example: when using the grid, a row is a flex parent, and a column is a flex child.

-
<div class="row">
-  <div class="column"></div>
-  <div class="column"></div>
-  <div class="column"></div>
-</div>
-

Horizontal Alignment

Horizontal alignment classes are applied to flex parents. Left alignment is the default, but you can use one of these classes to change this:

-
    -
  • .align-right
    • -
  • .align-center
    • -
  • .align-justify
    • -
  • .align-spaced
    • -
-
-
-
-
Aligned to
-
the left
-
-
-
Aligned to
-
the right
-
-
-
Aligned to
-
the center
-
-
-
Aligned to
-
the edges
-
-
-
Aligned to
-
the space around
-
-
-
- -

You might be wondering what the difference between .align-justify and .align-spaced is. A justified grid (justify-content: space-between) evenly distributes the space between each column. The first and last columns pin to the edge of the grid.

-

A spaced grid (justify-content: space-around) evenly distributes the space around each column. This means there will always be space to the left of the first column, and to the right of the last column.

-

The horizontal alignment classes are shorthands for the justify-content CSS property. Learn more about justify-content.

-
-

Vertical Alignment

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.

-

Stretch alignment is the default. To set parent alignment, use these classes:

-
    -
  • .align-top
    • -
  • .align-middle
    • -
  • .align-bottom
    • -
  • .align-stretch
    • -
-
-

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.

-
- -
<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>
- -
-
I'm in the middle!
-
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 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>
- -
-
These colums have the same height.
-
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.
-
-

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 .align-self- instead of .align-.

-
    -
  • .align-self-top
    • -
  • .align-self-middle
    • -
  • .align-self-bottom
    • -
  • .align-self-stretch
    • -
-
<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>
- -
-
Align bottom
-
Align middle
-
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?
-
-

Helper Mixins

If you're using the Sass version of Foundation, you can access the above helpers as mixins as well.

-

For parent-level alignment, use flex-align(). You can pass in a horizontal alignment ($x), vertical alignment ($y), or both.

-
.container {
-  @include flex-align($x: center, $y: stretch);
-}

For child-level alignment, use flex-align-self(). You can pass in any horizontal alignment.

-
.sidebar {
-  @include flex-align-self(bottom);
-}

Interested in building your own flexbox-ey component? Use the flex() mixin to get started.

-
.flexish-thang {
-  @include flex;
-  @include flex-align(center, middle);
-}
- -
-
-

Sass Reference

- - - - -
-

Mixins

- -

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.

- - -
-

flex

- - - -
- 
@include flex;
-
- -

Enables flexbox by adding display: flex to the element.

- - - - - -
- -
- - - -
-

flex-align

- - - -
- 
@include flex-align($x, $y);
-
- -

Horizontally or vertically aligns the items within a flex container.

- - - - - - - - - - - - - - - - - - - - - -
ParameterTypeDefault ValueDescription
$xKeywordnull

Horizontal alignment to use. Can be left, right, center, justify, or spaced. Or, set it to null (the default) to not set horizontal alignment.

-
$yKeywordnull

Vertical alignment to use. Can be top, bottom, middle, or stretch. Or, set it to null (the default) to not set vertical alignment.

-
-
- -
- - - -
-

flex-align-self

- - - -
- 
@include flex-align-self($y);
-
- -

Vertically align a single column within a flex row. Apply this mixin to a flex column.

- - - - - - - - - - - - - - - -
ParameterTypeDefault ValueDescription
$yKeywordnull

Vertical alignment to use. Can be top, bottom, middle, or stretch. Or, set it to null (the default) to not set vertical alignment.

-
-
- -
- - - -
-

flex-order

- - - -
- 
@include flex-order($order);
-
- -

Changes the source order of a flex child. Children with lower numbers appear first in the layout.

- - - - - - - - - - - - - - - -
ParameterTypeDefault ValueDescription
$orderNumber0

Order number to apply.

-
-
- - - - - -
- - -
- - - - - -
- -
- -
- -
- -
- -
-
- - -
-
- - -
-
-
- -
- -
-
- -
-
-
- -
Download ZURB’s 21 Responsive Trends That Will Shape 2017
-

Stay informed with amazing responsive trends each month from ZURB.

- -
- -
-
- -
-
-
-
-

Foundation for Sites

-

Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. -

-
-
- -
-
-
-
-

Want more?

- -
-
-
-
-

Talk to us

-

Tweet us at
@ZURBfoundation

-

Get involved in
our amazing community.

-
-
-
-
-

Stay Updated

-

Keep up with the latest on Foundation. Find us on Github.

- Stay Connected -
-
-
-
-
-
-
- - Studios - Helping more than 200 startups succeed since 1998. - -
-
- - Foundation - The most advanced front-end framework in the world. - -
-
- - Notable Design Apps - Prototype, iterate and collect feedback on your products. - -
-
- - University - Ideas, thoughts and design resources shared with you. - -
-
-
- -
-
-
-
    -
    • -
    • -
    • -
-
-
- - -

© 1998‐2016 ZURB, Inc. All rights reserved.

-
-
-
- -
-
- - - - - - - - - diff --git a/_build/float-classes.html b/_build/float-classes.html deleted file mode 100644 index 44340399c..000000000 --- a/_build/float-classes.html +++ /dev/null @@ -1,513 +0,0 @@ - - - - - - - - - - Foundation for Sites 6 Docs | Float Classes - - - - - - -
- - - -
- - -
- - -
- - - - - -
-
- - Foundation -
-
- - - - -
-
- -
- -Jump to Nav - -
-

Float Classes

- - -

Foundation includes a handful of helpful float classes to add common positioning behaviors to elements.

- - -
- -
- -
- -
- -

Float Left/Right

You can change the float behavior of an element by adding the .float-left or .float-right classes to an element. To clear floats, add the class .clearfix to the parent element.

-
-

Float classes don't flip direction in a right-to-left environment—left always means left, and right always means right.

-
- -
<div class="callout clearfix">
-  <a class="button float-left">Left</a>
-  <a class="button float-right">Right</a>
-</div>
- -
- Left - Right -
-

Float Center

Okay, it's not really a float, but you can add the .float-center 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 auto width.

-
<img src="assets/img/generic/voyager.jpg" class="float-center">
- -
- - - - -
- -
- -
- -
- -
- -
-
- - -
-
- - -
-
-
- -
- -
-
- -
-
-
- -
Download ZURB’s 21 Responsive Trends That Will Shape 2017
-

Stay informed with amazing responsive trends each month from ZURB.

- -
- -
-
- -
-
-
-
-

Foundation for Sites

-

Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. -

-
-
- -
-
-
-
-

Want more?

- -
-
-
-
-

Talk to us

-

Tweet us at
@ZURBfoundation

-

Get involved in
our amazing community.

-
-
-
-
-

Stay Updated

-

Keep up with the latest on Foundation. Find us on Github.

- Stay Connected -
-
-
-
-
-
-
- - Studios - Helping more than 200 startups succeed since 1998. - -
-
- - Foundation - The most advanced front-end framework in the world. - -
-
- - Notable Design Apps - Prototype, iterate and collect feedback on your products. - -
-
- - University - Ideas, thoughts and design resources shared with you. - -
-
-
- -
-
-
-
    -
    • -
    • -
    • -
-
-
- - -

© 1998‐2016 ZURB, Inc. All rights reserved.

-
-
-
- -
-
- - - - - - - - - diff --git a/_build/forms.html b/_build/forms.html deleted file mode 100644 index 0fcda6f82..000000000 --- a/_build/forms.html +++ /dev/null @@ -1,1127 +0,0 @@ - - - - - - - - - - Foundation for Sites 6 Docs | Forms - - - - - - -
- - - -
- - -
- - -
- - - - - -
-
- - Foundation -
-
- - - - -
-
- -
- -Jump to Nav - -
-

Forms

- - -

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.

- - -
- -
- -
- -
- -

Form Basics

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.

-
-

Text Inputs

These input types create a text field: text, date, datetime, datetime-local, email, month, number, password, search, tel, time, url, and week.

-
<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>
- -
-
-
- -
-
- -
-
-
-

Number Inputs

In most desktop browsers, <input type="number"> elements will have up/down controls inside them, which increment and decrement the number inside the field. These are called spin buttons. You can disable them by setting the $input-number-spinners Sass variable to false.

-
<label>
-  How many puppies?
-  <input type="number" value="100">
-</label>
- -
-

Text Areas

The <textarea> element creates a multi-line text input.

-
<label>
-  What books did you read over summer break?
-  <textarea placeholder="None"></textarea>
-</label>
- -
-

Select Menus

Use select menus to combine many choices into one menu.

-
<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>
- -

Add the multiple attribute to allow more than one option to be selected. Hold down the Ctrl (windows) / Command (Mac) button to select multiple options.

-
<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>
- -
-

Checkboxes and Radio Buttons

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.

-

Wrap a group of checkboxes or radio buttons in a <fieldset> element, and give them a common label using the <legend> element. Each individual control should also have its own label, created using a typical <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>
- -
-
- Choose Your Favorite - - - -
-
- Check these out - - - -
-
-

Fieldset Styles

To encourage their use as an accessibility tool, the <fieldset> element is no longer styled by default. Those styles are now contained in the .fieldset class.

-
<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>
- -
- Check these out - - - -
-

Help Text

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 aria-describedby to the input.

-
<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>
- -
-

Your password must have at least 10 characters, a number, and an Emoji.

-

Label Positioning

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 .text-right or .float-right (or add text-align: right yourself) to realign the label.

-
-

In a right-to-left environment, use .float-left instead.

-
- -
<form>
-  <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>
-</form>
-
-
- -
-
- -
-
-
- -
-

Add the .middle class to vertically align the label with its input.

-
<form>
-  <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>
-</form>
-
-
- -
-
- -
-
-
- -
-

Inline Labels and Buttons

To attach extra text or controls to the left or right of an input field, wrap the elements in an .input-group container, then add these classes to the elements inside:

-
    -
  • .input-group-field on the text field.
    • -
  • .input-group-label on a text label.
    • -
  • .input-group-button on a button. Place the button inside this wrapper.
    • -
-
-

This component supports flexbox mode. Learn how to enable flexbox mode.

-
- -
<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>
- -
- $ - -
- -
-
-

File Upload Button

Use <input type="file"> 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 <input>. To properly mask the input, the .show-for-sr class is added.

-
<label for="exampleFileUpload" class="button">Upload File</label>
-<input type="file" id="exampleFileUpload" class="show-for-sr">
- -
-
-

Custom Controls

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.

-

Custom inputs with labels or help text need the attributes aria-labelledby and aria-describedby added to them, so screen readers know how to describe the control.

-
<label id="ageLabel">Age</label>
-<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">
-</div>
-<p id="ageHelpText">How old are you?</p>
- -
-
-

Sass Reference

- -
-

Variables

- -

The default styles of this component can be customized using these Sass variables in your project's settings file.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDefault ValueDescription
$fieldset-borderBorder1px solid $medium-gray

Default border around custom fieldsets.

-
$fieldset-paddingNumberrem-calc(20)

Default padding inside custom fieldsets.

-
$fieldset-marginNumberrem-calc(18 0)

Default margin around custom fieldsets.

-
$legend-paddingNumberrem-calc(0 3)

Default padding between the legend text and fieldset border.

-
$form-spacingNumberrem-calc(16)

Global spacing for form elements.

-
$helptext-colorColor$black

Default color for help text.

-
$helptext-font-sizeNumberrem-calc(13)

Default font size for help text.

-
$helptext-font-styleKeyworditalic

Default font style for help text.

-
$input-prefix-colorColor$black

Color of labels prefixed to an input.

-
$input-prefix-backgroundColor$light-gray

Background color of labels prefixed to an input.

-
$input-prefix-borderBorder1px solid $medium-gray

Border around labels prefixed to an input.

-
$input-prefix-padding1rem

Left/right padding of an pre/postfixed input label

-
$form-label-colorColor$black

Color for form labels.

-
$form-label-font-sizeNumberrem-calc(14)

Font size for form labels.

-
$form-label-font-weightKeyword$global-weight-normal

Font weight for form labels.

-
$form-label-line-heightNumber1.8

Line height for form labels. The higher the number, the more space between the label and its input field.

-
$select-backgroundColor$white

Background color for select menus.

-
$select-triangle-colorColor$dark-gray

Color of the dropdown triangle inside select menus. Set to transparent to remove it entirely.

-
$select-radiusColor$global-radius

Default radius for select menus.

-
$input-colorColor$black

Font color of text inputs.

-
$input-placeholder-colorColor$medium-gray

Font color of placeholder text within text inputs.

-
$input-font-familyFontinherit

Font family of text inputs.

-
$input-font-sizeNumberrem-calc(16)

Font size of text inputs.

-
$input-backgroundColor$white

Background color of text inputs.

-
$input-background-focusColor$white

Background color of focused of text inputs.

-
$input-background-disabledColor$light-gray

Background color of disabled text inputs.

-
$input-borderBorder1px solid $medium-gray

Border around text inputs.

-
$input-border-focusColor1px solid $dark-gray

Border around focused text inputs.

-
$input-shadowShadowinset 0 1px 2px rgba($black, 0.1)

Box shadow inside text inputs when not focused.

-
$input-shadow-focusShadow0 0 5px $medium-gray

Box shadow outside text inputs when focused.

-
$input-cursor-disabledCursornot-allowed

Cursor to use when hovering over a disabled text input.

-
$input-transitionTransitionbox-shadow 0.5s, border-color 0.25s ease-in-out

Properties to transition on text inputs.

-
$input-number-spinnersBooleantrue

Enables the up/down buttons that Chrome and Firefox add to <input type='number'> elements.

-
$input-radiusBorder$global-radius

Radius for text inputs.

-
$meter-heightLength1rem

Height of a <meter> element.

-
$meter-radiusLength$global-radius

Border radius of a <meter> element.

-
$meter-backgroundColor$medium-gray

Background color of a <meter> element.

-
$meter-fill-goodColor$success-color

Meter fill for an optimal value in a <meter> element.

-
$meter-fill-mediumColor$warning-color

Meter fill for an average value in a <meter> element.

-
$meter-fill-badColor$alert-color

Meter fill for a suboptimal value in a <meter> element.

-
$progress-heightNumber1rem

Height of a progress bar.

-
$progress-backgroundColor$medium-gray

Background color of a progress bar.

-
$progress-margin-bottomNumber$global-margin

Bottom margin of a progress bar.

-
$progress-meter-backgroundColor$primary-color

Default color of a progress bar's meter.

-
$progress-radiusNumber$global-radius

Default radius of a progress bar.

-
$slider-heightNumber0.5rem

Default height of the slider.

-
$slider-backgroundColor$light-gray

Default background color of the slider's track.

-
$slider-fill-backgroundColor$medium-gray

Default color of the active fill color of the slider.

-
$slider-handle-heightNumber1.4rem

Default height of the handle of the slider.

-
$slider-handle-widthNumber1.4rem

Default width of the handle of the slider.

-
$slider-handle-backgroundColor$primary-color

Default color of the handle for the slider.

-
$slider-opacity-disabledNumber0.25

Default fade amount of a disabled slider.

-
$slider-radiusNumber$global-radius

Default radius for slider.

-
-
- - - -
- - - - - -
- -
- -
- -
- -
- -
-
- - -
-
- - -
-
-
- -
- -
-
- -
-
-
- -
Download ZURB’s 21 Responsive Trends That Will Shape 2017
-

Stay informed with amazing responsive trends each month from ZURB.

- -
- -
-
- -
-
-
-
-

Foundation for Sites

-

Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. -

-
-
- -
-
-
-
-

Want more?

- -
-
-
-
-

Talk to us

-

Tweet us at
@ZURBfoundation

-

Get involved in
our amazing community.

-
-
-
-
-

Stay Updated

-

Keep up with the latest on Foundation. Find us on Github.

- Stay Connected -
-
-
-
-
-
-
- - Studios - Helping more than 200 startups succeed since 1998. - -
-
- - Foundation - The most advanced front-end framework in the world. - -
-
- - Notable Design Apps - Prototype, iterate and collect feedback on your products. - -
-
- - University - Ideas, thoughts and design resources shared with you. - -
-
-
- -
-
-
-
    -
    • -
    • -
    • -
-
-
- - -

© 1998‐2016 ZURB, Inc. All rights reserved.

-
-
-
- -
-
- - - - - - - - - diff --git a/_build/global.html b/_build/global.html deleted file mode 100644 index 43cc34e71..000000000 --- a/_build/global.html +++ /dev/null @@ -1,785 +0,0 @@ - - - - - - - - - - Foundation for Sites 6 Docs | Global Styles - - - - - - -
- - - -
- - -
- - -
- - - - - -
-
- - Foundation -
-
- - - - -
-
- -
- -Jump to Nav - -
-

Global Styles

- - -

Our global CSS includes helpful resets to ensure consistent styling across browsers.

- - -
- -
- -
- -
- -

Font Sizing

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 $global-font-size variable to change the base font size. This can be a percentage value, or a pixel value.

-
-

$rem-base was deprecated in version 6.1, in favor of using $global-font-size to define rem calculation.

-
- -
-

Colors

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 $primary-color Sass variable.

-

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.

-
-
-
-
-

Primary

-
-
-
-
-
-

Secondary

-
-
-
-
-
-

Success

-
-
-
-
-
-

Warning

-
-
-
-
-
-

Alert

-
-
-
-
-
-

White

-
-
-
-
-
-

Light Gray

-
-
-
-
-
-

Medium Gray

-
-
-
-
-
-

Dark Gray

-
-
-
-
-
-

Black

-
-
-
- -

If you're using the Sass version of Foundation, it's possible to edit the default color palette, by changing the $foundation-palette 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.

-
$foundation-palette: (
-  primary: #E44347,
-  mars: #D7525C,
-  saturn: #E4B884,
-  neptune: #5147D7,
-)

Using the above palette, we can add the .mars, .saturn, or .neptune classes to buttons, labels, badges, and more.

-

To access the colors in your code, use Sass's map-get() function:

-
.mars {
-  color: map-get($foundation-palette, mars);
-}
-

If you're upgrading an older version of Foundation 6 to 6.2, add the line @include add-foundation-colors; below the Global section of your settings file. This will allow legacy color variables, such as $primary-color and $secondary-color, to continue working. -

- -
-

Color Classes

Some components, such as buttons, callouts, and labels, have coloring classes, which let you change the color of the element by adding the name of the color as a CSS class.

-
<button class="button">Primary Action</button>
-<button class="secondary button">Secondary Action</button>
- -
-
<div class="success callout">
-  <p>Created a new folder.</p>
-</div>
-<div class="alert callout">
-  <p>Error fetching stick.</p>
-</div>
- -
-

Created a new folder.

-
-
-

Error fetching stick.

-
- -
-
-

Sass Reference

- -
-

Variables

- -

The default styles of this component can be customized using these Sass variables in your project's settings file.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDefault ValueDescription
$global-font-sizeNumber100%

Font size attribute applied to <html> and <body>. We use 100% by default so the value is inherited from the user's browser settings.

-
$global-widthNumberrem-calc(1200)

Global width of your site. Used by the grid to determine row width.

-
$global-lineheightNumber1.5

Default line height for all type. $global-lineheight is 24px while $global-font-size is 16px

-
$foundation-paletteMap - primary: #2199e8
- secondary: #777
- success: #3adb76
- warning: #ffae00
- alert: #ec5840
-

Colors used for buttons, callouts, links, etc. There must always be a color called primary.

-
$light-grayColor#e6e6e6

Color used for light gray UI items.

-
$medium-grayColor#cacaca

Color used for medium gray UI items.

-
$dark-grayColor#8a8a8a

Color used for dark gray UI items.

-
$blackColor#0a0a0a

Color used for black ui items.

-
$whiteColor#fefefe

Color used for white ui items.

-
$body-backgroundColor$white

Background color of the body.

-
$body-font-colorColor$black

Text color of the body.

-
$body-font-familyList'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif

Font stack of the body.

-
$body-antialiasedBooleantrue

Set to true to enable antialiased type, using the -webkit-font-smoothing and -moz-osx-font-smoothing CSS properties.

-
$global-marginNumber1rem

Global value used for margin on components.

-
$global-paddingNumber1rem

Global value used for padding on components.

-
$global-weight-normalKeyword or Numbernormal

Global font weight used for normal type.

-
$global-weight-boldKeyword or Numberbold

Global font weight used for bold type.

-
$global-radiusNumber0

Global value used for all elements that have a border radius.

-
$global-text-directionKeywordltr

Sets the text direction of the CSS. Can be either ltr or rtl.

-
$global-flexboxBooleanfalse

Enables flexbox for components that support it.

-
-
- -
- -
-

Mixins

- -

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.

- - -
- - -
- - - - - -
- -
- -
- -
- -
- -
-
- - -
-
- - -
-
-
- -
- -
-
- -
-
-
- -
Download ZURB’s 21 Responsive Trends That Will Shape 2017
-

Stay informed with amazing responsive trends each month from ZURB.

- -
- -
-
- -
-
-
-
-

Foundation for Sites

-

Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. -

-
-
- -
-
-
-
-

Want more?

- -
-
-
-
-

Talk to us

-

Tweet us at
@ZURBfoundation

-

Get involved in
our amazing community.

-
-
-
-
-

Stay Updated

-

Keep up with the latest on Foundation. Find us on Github.

- Stay Connected -
-
-
-
-
-
-
- - Studios - Helping more than 200 startups succeed since 1998. - -
-
- - Foundation - The most advanced front-end framework in the world. - -
-
- - Notable Design Apps - Prototype, iterate and collect feedback on your products. - -
-
- - University - Ideas, thoughts and design resources shared with you. - -
-
-
- -
-
-
-
    -
    • -
    • -
    • -
-
-
- - -

© 1998‐2016 ZURB, Inc. All rights reserved.

-
-
-
- -
-
- - - - - - - - - diff --git a/_build/grid.html b/_build/grid.html deleted file mode 100644 index afcdcbaea..000000000 --- a/_build/grid.html +++ /dev/null @@ -1,1528 +0,0 @@ - - - - - - - - - - Foundation for Sites 6 Docs | The Grid - - - - - - -
- - - -
- - -
- - -
- - - - - -
-
- - Foundation -
-
- - - - -
-
- -
- -Jump to Nav - -
-

The Grid

- - -

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.

- - -
- -
- -
- -
- -

Basics

Start by adding an element with a class of .row. This will create a horizontal block to contain vertical columns. Then add elements with a .column class within that row. You can use .column or .columns—the only difference is grammar. Specify the widths of each column with the .small-#, .medium-#, and .large-# classes.

-

Foundation is mobile-first. Code for small screens first, and larger devices will inherit those styles. Customize for larger screens as necessary.

-
<div class="row">
-  <div class="small-2 large-4 columns"><!-- ... --></div>
-  <div class="small-4 large-4 columns"><!-- ... --></div>
-  <div class="small-6 large-4 columns"><!-- ... --></div>
-</div>
-<div class="row">
-  <div class="large-3 columns"><!-- ... --></div>
-  <div class="large-6 columns"><!-- ... --></div>
-  <div class="large-3 columns"><!-- ... --></div>
-</div>
-<div class="row">
-  <div class="small-6 large-2 columns"><!-- ... --></div>
-  <div class="small-6 large-8 columns"><!-- ... --></div>
-  <div class="small-12 large-2 columns"><!-- ... --></div>
-</div>
-<div class="row">
-  <div class="small-3 columns"><!-- ... --></div>
-  <div class="small-9 columns"><!-- ... --></div>
-</div>
-<div class="row">
-  <div class="large-4 columns"><!-- ... --></div>
-  <div class="large-8 columns"><!-- ... --></div>
-</div>
-<div class="row">
-  <div class="small-6 large-5 columns"><!-- ... --></div>
-  <div class="small-6 large-7 columns"><!-- ... --></div>
-</div>
-<div class="row">
-  <div class="large-6 columns"><!-- ... --></div>
-  <div class="large-6 columns"><!-- ... --></div>
-</div>
-
24
-
4
-
64
-
-
-
full3
-
full6
-
full3
-
-
-
62
-
68
-
full2
-
-
-
3
-
9
-
-
-
full4
-
full8
-
-
-
65
-
67
-
-
-
full6
-
full6
-
- -
-

Small Grids

Small grids expand to large screens easier than large grids cram into small screens.

-
<div class="row">
-  <div class="small-2 columns">2 <span class="hide-for-small-only">columns</span></div>
-  <div class="small-10 columns">10 columns</div>
-</div>
-<div class="row">
-  <div class="small-3 columns">3 columns</div>
-  <div class="small-9 columns">9 columns</div>
-</div>
-
2 columns
-
10 columns
-
-
-
3 columns
-
9 columns
-
- -
-

Medium Grid

Medium sized screens will inherit styles from small, unless you specify a different layout using the medium grid classes.

-
<div class="row">
-  <div class="medium-2 columns">2 columns</div>
-  <div class="medium-10 columns">10 columns</div>
-</div>
-<div class="row">
-  <div class="medium-3 columns">3 columns</div>
-  <div class="medium-9 columns">9 columns</div>
-</div>
-
2 columns
-
10 columns
-
-
-
3 columns
-
9 columns
-
- -
-

Advanced

Combined Column/Row

If you need a full-width column to use as a container, put the .column and .row classes on the same element. You can still nest more grids inside this container like usual.

-
-

Column rows can use sizing classes like .small-8, but only when used as a top-level container—not when nested inside another row.

-
- -
<div class="column row">
-  Row column
-</div>
- Row column -
- -
-

Fluid Row

Normally, a row is always 1200 pixels wide. Make a row completely fluid by adding the .expanded class.

-
<div class="expanded row">
-</div>
-

Nesting

You can nest the grids indefinitely, though at a certain point it will get absurd.

-
<div class="row">
-  <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>
-
8 -
-
8 Nested -
-
8 Nested Again
-
4
-
-
-
4
-
-
-
4
-
- -
-

Offsets

Move blocks up to 11 columns to the right by using classes like .large-offset-1 and .small-offset-3.

-
<div class="row">
-  <div class="large-1 columns">1</div>
-  <div class="large-11 columns">11</div>
-</div>
-<div class="row">
-  <div class="large-1 columns">1</div>
-  <div class="large-10 large-offset-1 columns">10, offset 1</div>
-</div>
-<div class="row">
-  <div class="large-1 columns">1</div>
-  <div class="large-9 large-offset-2 columns">9, offset 2</div>
-</div>
-<div class="row">
-  <div class="large-1 columns">1</div>
-  <div class="large-8 large-offset-3 columns">8, offset 3</div>
-</div>
-
1
-
11
-
-
-
1
-
10, offset 1
-
-
-
1
-
9, offset 2
-
-
-
1
-
8, offset 3
-
- -
-

Incomplete Rows

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 .end in order to override that behavior.

-
<div class="row">
-  <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">
-  <div class="medium-3 columns">3</div>
-  <div class="medium-3 columns">3</div>
-  <div class="medium-3 columns end">3 end</div>
-</div>
-
3
-
3
-
3
-
-
-
3
-
3
-
3 end
-
- -
-

Gutters

-

Responsive gutters were added in Foundation 6.1.

-
- -

The grid gutter—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.

- - - - - - - - - - - - - - - - - -
BreakpointGutter Size
small20px
medium30px
-

If you're using the Sass version of Foundation, you can change these defaults by editing the $grid-column-gutter variable:

-
$grid-column-gutter: (
-  small: 20px,
-  medium: 30px,
-);

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 $breakpoints map.

-

Or, if you prefer using one gutter size on every breakpoint, just use a single number.

-
$grid-column-gutter: 30px;
-

Collapse/Uncollapse Rows

The .collapse class lets you remove column gutters (padding).

-

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.

-
<div class="row medium-uncollapse large-collapse">
-  <div class="small-6 columns">
-    Removes gutter at large media query
-  </div>
-  <div class="small-6 columns">
-    Removes gutter at large media query
-  </div>
-</div>

Scale the browser down to a medium size to see the difference.

- -
-
-
-

On a small screen, I have gutters!

-

On a medium screen, I have gutters!

-

On a large screen, I have no gutters!

-
-
-
-
-

On a small screen, I have gutters!

-

On a medium screen, I have gutters!

-

On a large screen, I have no gutters!

-
-
-
- -
-

Centered Columns

Center your columns by adding a class of .small-centered to your column. Large will inherit small centering by default, but you can also center solely on large by applying a .large-centered class. To uncenter on large screens, use .large-uncentered.

-
<div class="row">
-  <div class="small-3 small-centered columns">3 centered</div>
-</div>
-<div class="row">
-  <div class="small-6 large-centered columns">6 centered</div>
-</div>
-<div class="row">
-  <div class="small-9 small-centered large-uncentered columns">9 centered</div>
-</div>
-<div class="row">
-  <div class="small-11 small-centered columns">11 centered</div>
-</div>
-
3 centered
-
-
-
6 centered, large
-
-
-
9 centered small
-
-
-
11 centered
-
- -
-

Source Ordering

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. .medium-push-#, .large-push-# is the syntax you'll use. Use the number 0 instead to reset a push/pull, such as .medium-push-0 or .large-pull-0.

-
<div class="row">
-  <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">
-  <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">
-  <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">
-  <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">
-  <div class="medium-6 medium-push-6 columns">6</div>
-  <div class="medium-6 medium-pull-6 columns">6, last</div>
-</div>
-
10
-
2, last
-
-
-
9
-
3, last
-
-
-
8
-
4, last
-
-
-
7
-
5, last
-
-
-
6
-
6, last
-
- -
-

Block Grids

The block grid from Foundation 5 has been merged into the main grid. Add a class of the format [size]-up-[n] 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.

-
<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>
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
-

Building Semantically

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.

-

Rows

Use the grid-row() mixin to create a row.

-
.container {
-  @include grid-row;
-}
-

Columns

Use the grid-column() mixin to create a column. There are a number of ways to define the width of the column.

-
.main-content {
-  // Use the full column count (100%)
-  @include grid-column;
-
-  // Use a column count (33%);
-  @include grid-column(4);
-
-  // Use a percentage (15%)
-  @include grid-column(15%);
-
-  // Use a custom fraction (20%)
-  @include grid-column(1 of 5);
-}

The grid column calculator can also be accessed as a function. This gives you the percentage value, without any of the grid column CSS.

-
.main-content {
-  width: grid-column(1 of 7);
-}

To center a column semantically. Use ´grid-column-position(center);´.

-
.centered-column {
-  @include grid-column-position(center);
-}
-

Multiple Grids

By default, all grids use the number of columns set by the $grid-column-count variable. However, this can be selectively overridden within an instance of a row.

-

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.

-
.container {
-  @include grid-row(16) {
-    .main-content {
-      // 5/16 = 31.25%
-      @include grid-column(5);
-    }
-
-    .sidebar {
-      // 11/16 = 68.75%
-      @include grid-column(11);
-    }
-  }
-}

You can also temporarily change the grid context without outputting any row CSS, by using the grid-context() mixin.

-
@include grid-context(7) {
-  .sidebar {
-    @include grid-column(4);
-  }
-}

Every other grid feature, from sizing to offsets to source ordering, can also be accessed with a mixin. Pair them with the breakpoint() mixin to make your grid responsive.

-

Refer to the Sass documentation below to learn how each mixin works.

-
.main-content {
-  // The mixins have shorthands, too!
-  @include grid-col;
-
-  @include breakpoint(medium) {
-    // Changes size only
-    @include grid-col-size(8);
-
-    // Changes position only
-    @include grid-col-pos(4);
-  }
-}
- -
-
-

Sass Reference

- -
-

Variables

- -

The default styles of this component can be customized using these Sass variables in your project's settings file.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDefault ValueDescription
$grid-row-widthNumber$global-width

The maximum width of a row.

-
$grid-column-countNumber12

The default column count of a grid. Changing this value affects the logic of the grid mixins, and the number of CSS classes output.

-
$grid-column-gutterMap or Length - small: 20px
- medium: 30px
-

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.

-
$grid-column-align-edgeBooleantrue

If true, the last column in a row will align to the opposite edge of the row.

-
$block-grid-maxNumber8

The highest number of .x-up classes available when using the block grid CSS.

-
-
- -
- -
-

Mixins

- -

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.

- - -
-

grid-column

- - - -
- 
@include grid-column($columns, $gutter);
-
- -

Creates a grid column.

- - - - - - - - - - - - - - - - - - - - - -
ParameterTypeDefault ValueDescription
$columnsMixed$grid-column-count

Width of the column. Refer to the grid-column() function to see possible values.

-
$gutterNumber$grid-column-gutter

Spacing between columns.

-
-
- -
- - - -
-

grid-column-row

- - - -
- 
@include grid-column-row($gutter);
-
- -

Creates a grid column row. This is the equivalent of adding .row and .column to the same element.

- - -

Aliases: grid-col-row()

- - - - - - - - - - - - - -
ParameterTypeDefault ValueDescription
$gutterNumber$grid-column-gutter

Width of the gutters on either side of the column row.

-
-
- -
- - - -
-

grid-column-collapse

- - - -
- 
@include grid-column-collapse;
-
- -

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.

- - -

Aliases: grid-col-collapse()

- - - -
- -
- - - -
-

grid-column-uncollapse

- - - -
- 
@include grid-column-uncollapse($gutter);
-
- -

Un-collapse the gutters on a column by re-adding the padding.

- - -

Aliases: grid-col-uncollapse()

- - - - - - - - - - - - - -
ParameterTypeDefault ValueDescription
$gutterNumber$grid-column-gutter

Spacing between columns.

-
-
- -
- - - -
-

grid-layout

- - - -
- 
@include grid-layout($n, $selector);
-
- -

Sizes child elements so that $n number of items appear on each row.

- - - - - - - - - - - - - - - - - - - - - -
ParameterTypeDefault ValueDescription
$nNumberNone

Number of elements to display per row.

-
$selectorString'.column'

Selector(s) to use for child elements.

-
-
- -
- - - -
-

grid-layout-center-last

- - - -
- 
@include grid-layout-center-last($n);
-
- -

Adds extra CSS to block grid children so the last items in the row center automatically. Apply this to the columns, not the row.

- - - - - - - - - - - - - - - -
ParameterTypeDefault ValueDescription
$nNumberNone

Number of items that appear in each row.

-
-
- -
- - - -
-

grid-column-position

- - - -
- 
@include grid-column-position($position);
-
- -

Reposition a column.

- - -

Aliases: grid-col-pos()

- - - - - - - - - - - - - -
ParameterTypeDefault ValueDescription
$positionNumber or KeywordNone

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.

-
-
- -
- - - -
-

grid-column-unposition

- - - -
- 
@include grid-column-unposition;
-
- -

Reset a position definition.

- - -

Aliases: grid-col-unpos()

- - - -
- -
- - - -
-

grid-column-offset

- - - -
- 
@include grid-column-offset($n);
-
- -

Offsets a column to the right by $n columns.

- - -

Aliases: grid-col-off()

- - - - - - - - - - - - - -
ParameterTypeDefault ValueDescription
$nNumber or ListNone

Width to offset by. You can pass in any value accepted by the grid-column() mixin, such as 6, 50%, or 1 of 2.

-
-
- -
- - - -
-

grid-column-end

- - - -
- 
@include grid-column-end;
-
- -

Disable the default behavior of the last column in a row aligning to the opposite edge.

- - -

Aliases: grid-col-end()

- - - -
- -
- - - -
-

grid-context

- - - -
- 
@include grid-context($columns, $root) { }
-
- -

Change the behavior of columns defined inside this mixin to use a different column count.

- - - - - - - - - - - - - - - - - - - - - -
ParameterTypeDefault ValueDescription
$columnsNumberNone

Number of columns to use.

-
$rootBooleanfalse

If false, selectors inside this mixin will nest inside the parent selector. - If true, selectors will not nest.

-
-
- -
- - - -
-

grid-row

- - - -
- 
@include grid-row($columns, $behavior, $width, $cf, $gutter) { }
-
- -

Creates a grid row.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ParameterTypeDefault ValueDescription
$columnsNumbernull

Column count for this row. null will use the default column count.

-
$behaviorKeywordsnull

Modifications to the default grid styles. nest indicates the row will be placed inside another row. collapse indicates that the columns inside this row will not have padding. nest collapse combines both behaviors.

-
$widthNumber$grid-row-width

Maximum width of the row.

-
$cfBooleantrue

Whether or not to include a clearfix.

-
$gutterNumber$grid-column-gutter

Gutter to use when inverting margins, in case the row is nested.

-
-
- -
- - - -
-

grid-row-nest

- - - -
- 
@include grid-row-nest($gutter);
-
- -

Inverts the margins of a row to nest it inside of a column.

- - - - - - - - - - - - - - - -
ParameterTypeDefault ValueDescription
$gutterMap or nullnull

Gutter value to use when inverting the margins. Set to null to refer to the responsive gutter settings.

-
-
- -
- - - -
-

grid-column-size

- - - -
- 
@include grid-column-size($width);
-
- -

Set the width of a grid column.

- - -

Aliases: grid-col-size()

- - - - - - - - - - - - - -
ParameterTypeDefault ValueDescription
$widthNumber or List$grid-column-count

Width to make the column. You can pass in any value accepted by the grid-column() function, such as 6, 50%, or 1 of 2.

-
-
- -
- - - -
- -
- -
-

Functions

- - -
-

grid-column

- - - -
- 
grid-column($columns)
-
- -

Calculates the width of a column based on a number of factors.

- - - - - - - - - - - - - - -
ParameterTypeDefault ValueDescription
$columnsNumber or ListNone

Width of the column. Accepts multiple values:

-
    -
  • A percentage value will make the column that exact size.
    • -
  • A single digit will make the column span that number of columns wide, taking into account the column count of the parent row.
    • -
  • A string of the format "x of y" will make a column that is x columns wide, assuming y total columns for the parent.
    • -
-
-
- -
- -
- -
- - - - - -
- -
- -
- -
- -
- -
-
- - -
-
- - -
-
-
- -
- -
-
- -
-
-
- -
Download ZURB’s 21 Responsive Trends That Will Shape 2017
-

Stay informed with amazing responsive trends each month from ZURB.

- -
- -
-
- -
-
-
-
-

Foundation for Sites

-

Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. -

-
-
- -
-
-
-
-

Want more?

- -
-
-
-
-

Talk to us

-

Tweet us at
@ZURBfoundation

-

Get involved in
our amazing community.

-
-
-
-
-

Stay Updated

-

Keep up with the latest on Foundation. Find us on Github.

- Stay Connected -
-
-
-
-
-
-
- - Studios - Helping more than 200 startups succeed since 1998. - -
-
- - Foundation - The most advanced front-end framework in the world. - -
-
- - Notable Design Apps - Prototype, iterate and collect feedback on your products. - -
-
- - University - Ideas, thoughts and design resources shared with you. - -
-
-
- -
-
-
-
    -
    • -
    • -
    • -
-
-
- - -

© 1998‐2016 ZURB, Inc. All rights reserved.

-
-
-
- -
-
- - - - - - - - - diff --git a/_build/index.html b/_build/index.html index fca284340..38cab0f9f 100644 --- a/_build/index.html +++ b/_build/index.html @@ -1,653 +1,1078 @@ - - - - - - - Foundation for Sites 6 Docs - - - - - - -
- -
- - -
- -
- - -
- -
- - - + - + + + + + +
+ +
+
+
+
+
Foundation Documentation
+ + + + +
+
+
+
+

Getting Started With Foundation 5

+

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.

+
+

What is Foundation?

+

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.

+
+
+ +
+
+

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.

+

Why choose foundation? →

+

Foundation compatibility →

+
+
+
+
-
+
-

Installing

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.

-

It's also possible to manually install Foundation for Sites into your project through npm, Bower, Meteor, or Composer.

-

Install Foundation for Sites

-

Looking for Foundation 5?

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.

-
- Download - Docs - GitHub +
+
+

What Are You Building?

+

We have three different packages to get you started:

+
-
-

What's in the Box?

Get to know the pieces of Foundation.

-

General

-
- Global Styles -

Global styles applied by the Foundation framework.

-
-
- Accessibility -

An overview of Foundation's accessibility hooks.

-
-
- Right-to-Left Support -

Getting Foundation working with RTL languages.

-
-
- Sass -

Installing and using the Sass version of Foundation.

-
-
- JavaScript -

Initializing and using Foundation's JavaScript plugins.

-
-
- Media Queries -

Working with Foundation's breakpoints.

-
-
- Flexbox Mode -

Supercharge your CSS with flexbox.

-
-
- Compatibility -

What browsers does Foundation work with?

-
-
- Kitchen Sink -

Every component on one page.

-
+
+
+ +

Hack on CSS

+

Skill level 

+

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.

+

CSS Install →

+
+ +
+ +
+ +

Customize with Sass

+

Skill level  

+

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.

+

Sass Install →

+
+ +
+ +
+ +

Build an App

+

Skill level   

+

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.

+

App Install →

+
-

Components

-
-
-

Layout

- -
+
-
-

Typography

- -
+
+
+

What Comes With Foundation?

+

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.

+

You can see all of Foundation's components on one page called the Kitchen Sink or check out a small snapshot of what Foundation includes:

+
+
+
+ +
+
+
+

The Grid

+

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.

+

Need a head start on some of your designs or some extra inspiration to see the full potential of a responsive front-end framework? Check out a list of our Foundation resources!

+
+
+
+
+
+

12

+
+
+
+
+

6

+
+
+

6

+
+
+

6

+
+
+

6

+
+
+
+
+
+
+

4

+
+
+

4

+
+
+

8

+
+
+
+
+

4

+
+
+

3

+
+
+

9

+
+
+
+
+

4

+
+
+

3

+
+
+

3

+
+
+

6

+
+
+
+
+
+
+
+
-
-

Controls

- -
+
-
-

Libraries

- -
+ + +
+
+

Buttons

+

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.

+
+
+
+
+ Default Color +
+
+ Secondary Color +
+
+ Success Color
-
-
-

Navigation

-
+
+
+ Default +
+
+ Radius +
+
+ Round +
+
+
+
+
+ -
+
+
+
+
+
+ Split Button
+ +
+
+ Hover & Click Button
+ +
+
+
+
+ +
+ + + +
+
+

Navigation

+

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.

+
+
+
+
+ +
+
+
+ + + + + + + + + + + + + + +
-
-
-

Media

- -
+
-
-

Plugins

-
+ -
-

Sass

-
    -
  • Mixins
    • -
  • Functions
    • + + +
    +
    +
    +
    +

    The Psychohistorians

    +

    Set in the year 0 F.E. ("Foundation Era"), The Psychohistorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire.

    +
    +
    +
+
+ +
+
+
+
+
+
+

Plugins

+

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.

+
+
+
+ Click me to Reveal a Modal +
+

This is a modal.

+

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 close-reveal-modal. Clicking anywhere outside the modal will also dismiss it.

+

Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.

+

Second Modal...

+ × +
+
+

This is a second modal.

+

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.

+ × +
+
+
+
+ + If you didn't put in a date in the format 'mm/dd/yyyy,'' this error should appear. +
+
+
+ +
+
+

First panel content goes here...

+
+
+

Second panel content goes here...

+
+
+

Third panel content goes here...

+
+
+
+
+ This is a round warning alert. + × +
+
+
+ +
+
+
+

Test Drive Foundation

+

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.

+
- -
- +

See the full list of resources our community have put together. →

+
+
+ +
+
+

Our Community

+

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.

+
- +
+
+ +

Foundation Community

+

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.

+

Foundation Forum →

+
+ +
+ +
+ +

Foundation on Github

+

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.

+

Contribute on Github →

+
+ +
+ +
+ +

Business Support

+

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.

+

Foundation Business Support →

+
+
+ +
+ +

Trending Forum Topics

+ +
+
+ +
+
+ + +
+
See all topics → +
+
+ + + -
-
- - -
-
- -
-
-
- -
- -
-
- -
-
-
- -
Download ZURB’s 21 Responsive Trends That Will Shape 2017
-

Stay informed with amazing responsive trends each month from ZURB.

- + +
+
+
+
Stay on top of what’s happening in responsive design.
+

Sign up to receive monthly Responsive Reading highlights. Read Last Month's Edition »

+
+
+
+
+
+
- + +
+
+
+ + +
+
+
+
+

Foundation for Sites

+

Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. +

- -
-
-
-
-

Foundation for Sites

-

Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. -

-
-
- -
-
-
-
-

Want more?

- -
-
-
-
-

Talk to us

-

Tweet us at
@ZURBfoundation

-

Get involved in
our amazing community.

-
-
-
-
-

Stay Updated

-

Keep up with the latest on Foundation. Find us on Github.

- Stay Connected -
-
-
+
+ +
+
+
+
+

Want more?

+
-
-
- - Studios - Helping more than 200 startups succeed since 1998. - -
-
- - Foundation - The most advanced front-end framework in the world. - -
-
- - Notable Design Apps - Prototype, iterate and collect feedback on your products. - +
+
+

Talk to us

+

Tweet us at
@ZURBfoundation

+

Business Support

+

Or check our support page

+
-
- - University - Ideas, thoughts and design resources shared with you. - +
+
+

Stay Updated

+

Keep up with the latest on Foundation. Find us on Github.

+ Stay Connected
- -
-
-
-
    -
    • -
    • -
    • -
-
-
- - -

© 1998‐2016 ZURB, Inc. All rights reserved.

-
-
+
+
+
+
+ + Studios + Helping more than 200 startups succeed since 1998. + +
+
+ + Foundation + The most advanced front-end framework in the world. + +
+
+ + Notable Design Apps + Prototype, iterate and collect feedback on your products. + +
+
+ + University + Ideas, thoughts and design resources shared with you. + +
+
+
+ +
+
+
+
    +
    • +
    • +
    • +
+
+
+ + +

© 1998‐2015 ZURB, Inc. All rights reserved.

+
+
+
+ + +
- -
-
- - - - - - - - +
+ + + + + + + + diff --git a/_build/installation.html b/_build/installation.html deleted file mode 100644 index 5ad89da98..000000000 --- a/_build/installation.html +++ /dev/null @@ -1,575 +0,0 @@ - - - - - - - - - - Foundation for Sites 6 Docs | Installation - - - - - - -
- - - -
- - -
- - -
- - - - - -
-
- - Foundation -
-
- - - - -
-
- -
- -Jump to Nav - -
-

Installation

- - -

There are many ways to install Foundation, but if you're just getting started, we have a few suggestions.

- - -
- -
- -
- -
- - - - -

Command-Line Tool

Not a fan of GUIs? The Node-powered Foundation CLI can install the same template projects for you. Install it with npm:

-
npm install --global foundation-cli

Depending on how your machine is configured, the command may fail with an EACCESS error. To get around this, run the command with sudo at the beginning:

-
sudo npm install --global foundation-cli
-

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.

- -

If you want to remove the old CLI, run gem uninstall foundation. After testing this new CLI, if you want to go back to the old CLI, run npm uninstall foundation-cli --global.

-
- -

Once you've installed the CLI, use the new command to start making a new project:

-
foundation new
-

Manual Setup

Basic Template

To manually set up the basic template, first download it with Git:

-
git clone https://github.com/zurb/foundation-sites-template projectname

Then open the folder in your command line, and install the needed dependencies:

-
cd projectname
-npm install
-bower install

Finally, run npm start to run the Sass compiler. It will re-run every time you save a Sass file.

-

ZURB Template

To manually set up the ZURB template, first download it with Git:

-
git clone https://github.com/zurb/foundation-zurb-template projectname

Then open the folder in your command line, and install the needed dependencies:

-
cd projectname
-npm install
-bower install

Finally, run npm start to run Gulp. Your finished site will be created in a folder called dist, viewable at this URL:

-
http://localhost:8000

To create compressed, production-ready assets, run npm run build.

-
-

CSS Download

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!

-

Download CSS Version

-
-

HTML Starter Template

Start with this HTML template and adapt it to your needs.

-
<!doctype html>
-<html class="no-js" lang="en">
-  <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" />
-    <title>Foundation Starter Template</title>
-    <link rel="stylesheet" href="css/foundation.css" />
-  </head>
-  <body>
-    <h1>Hello, world!</h1>
-
-    <script src="js/vendor/jquery.min.js"></script>
-    <script src="js/vendor/what-input.min.js"></script>
-    <script src="js/foundation.min.js"></script>
-    <script>
-      $(document).foundation();
-    </script>
-
-  </body>
-</html>
-

The folks at jsDelivr host the compressed Foundation CSS and JavaScript for us. Just drop one of these <script> tags into your HTML and you're set:

-
<!-- Compressed CSS -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.3/foundation.min.css">
-
-<!-- Compressed JavaScript -->
-<script src="https://cdn.jsdelivr.net/foundation/6.2.3/foundation.min.js"></script>
-

Package Managers

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.

-
    -
  • npm: npm install foundation-sites
    • -
  • Bower: bower install foundation-sites
    • -
  • Meteor: meteor add zurb:foundation-sites
    • -
  • Composer: php composer.phar require zurb/foundation
    • -
  • NuGet: Install-Package foundation-sites
    • -
-

Package Contents

Here's what comes in the package.

-
    -
  • scss/: Source Sass files. Use this folder as a load path in Sass.
    • -
  • js/: Source JavaScript files. If you're using a build system, make sure foundation.core.js is loaded first.
    • -
  • dist/: Compiled files.
      -
    • css/: Compiled CSS files. Includes minified and unminified files.
      • -
    • js/: Concatenated JavaScript files. Includes minified and unminified files.
        -
      • plugins/: Standalone JavaScript plugins.
        • -
      -
      • -
    -
    • -
-
-

Other Integrations

The Foundation community has helped us integrate the framework into Rails, WordPress, Django, and more. Head to our resources page to find even more ways to use Foundation.

- - - - - -
- -
- -
- -
- -
- -
-
- - -
-
- - -
-
-
- -
- -
-
- -
-
-
- -
Download ZURB’s 21 Responsive Trends That Will Shape 2017
-

Stay informed with amazing responsive trends each month from ZURB.

- -
- -
-
- -
-
-
-
-

Foundation for Sites

-

Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. -

-
-
- -
-
-
-
-

Want more?

- -
-
-
-
-

Talk to us

-

Tweet us at
@ZURBfoundation

-

Get involved in
our amazing community.

-
-
-
-
-

Stay Updated

-

Keep up with the latest on Foundation. Find us on Github.

- Stay Connected -
-
-
-
-
-
-
- - Studios - Helping more than 200 startups succeed since 1998. - -
-
- - Foundation - The most advanced front-end framework in the world. - -
-
- - Notable Design Apps - Prototype, iterate and collect feedback on your products. - -
-
- - University - Ideas, thoughts and design resources shared with you. - -
-
-
- -
-
-
-
    -
    • -
    • -
    • -
-
-
- - -

© 1998‐2016 ZURB, Inc. All rights reserved.

-
-
-
- -
-
- - - - - - - - - diff --git a/_build/interchange.html b/_build/interchange.html deleted file mode 100644 index 5bb7389d2..000000000 --- a/_build/interchange.html +++ /dev/null @@ -1,699 +0,0 @@ - - - - - - - - - - Foundation for Sites 6 Docs | Interchange - - - - - - -
- - - -
- - -
- - -
- - - - - -
-
- - Foundation -
-
- - - - -
-
- -
- -Jump to Nav - -
-

Interchange

- - JavaScript - -

Interchange uses media queries to dynamically load responsive content that is appropriate for the user's device.

- - -
- -
- -
- -
- -

-
-

Use with Images

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.

-

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.

-
<img data-interchange="[assets/img/interchange/small.jpg, small], [assets/img/interchange/medium.jpg, medium], [assets/img/interchange/large.jpg, large]">

The image set is a comma-separated list of items with this format:

-
[image_path, media_query]

image_path can be a relative or absolute path. media_query can be any CSS media query, or a Foundation breakpoint—see Named Media Queries below.

-
-

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.

-
- -
-

Use with HTML

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.

-

In the below example, we've applied data-interchange to a <div> instead of an <img> element, and the paths are to HTML files instead of images.

-
<div data-interchange="[assets/partials/interchange-default.html, small], [assets/partials/interchange-medium.html, medium], [assets/partials/interchange-large.html, large]"></div>
- -
-

Use with Background Images

When using Interchange on a non-<img> element, you can pass in an image path instead of an HTML path, and the element's background-image property will be set to the path of the matching rule.

-
<div data-interchange="[assets/img/interchange/small.jpg, small], [assets/img/interchange/medium.jpg, medium], [assets/img/interchange/large.jpg, large]"></div>
-

Named Media Queries

Interchange supports named queries as shorthands for full CSS media queries. Any breakpoint defined in the $breakpoints variable in your Sass will work, along with a few other keywords. Learn more about changing the default breakpoints.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Query NameMedia Query
smallscreen and (min-width: 0em)
mediumonly screen and (min-width: 40em)
largeonly screen and (min-width: 64em)
xlargeonly screen and (min-width: 75em)
xxlargeonly screen and (min-width: 90em)
portraitscreen and (orientation: portrait)
landscapescreen and (orientation: landscape)
retinaonly 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)
-

To add your own named media queries, add them as properties to Foundation.Interchange.SPECIAL_QUERIES.

-
Foundation.Interchange.SPECIAL_QUERIES['square'] = 'screen and (aspect-ratio: 1/1)';
-

Programmatic Use

When using Interchange programmatically, you need to pass in your ruleset in the options object, as well as the container element, not the content elements, like so:

-
var $photoFrame = $('#some-container');
-var interchange = new Foundation.Interchange($photoFrame, {rules: "[path/to/default.jpg, small], [path/to/medium.jpg, medium], [path/to/large.jpg, large]"});
- - -
-
-

JavaScript Reference

- - -
-

Initializing

- -

The file foundation.interchange.js must be included in your JavaScript to use this plugin, along with foundation.core.js. This plugin also requires these utility libraries:

- - -
    -
  • foundation.util.mediaQuery.js
    • -
- -
    -
  • foundation.util.timerAndImageLoader.js
    • -
- - -
- - -
-

Foundation.Interchange

- -

Creates a new instance of Interchange.

- - - 
var elem = new Foundation.Interchange(element, options);
- -

Fires these events: - Interchange#event:init -

- - - - - - - - - - - - - - - -
NameTypeDescription
elementObjectjQuery object to add the trigger to.
optionsObjectOverrides to the default plugin settings.
-
- -
- -
-

Plugin Options

- -

Use these options to customize an instance of Interchange. Plugin options can be set as individual data attributes, one combined data-options attribute, or as an object passed to the plugin's constructor. Learn more about how JavaScript plugins are initialized.

- - - - - - - - - - -
NameDefaultDescription
data-rulesRules to be applied to Interchange elements. Set with the `data-interchange` array notation.
-
- -
- -
-

Events

- -

These events will fire from any element with a Interchange plugin attached.

- - - - - - - - - -
NameDescription
replaced.zf.interchangeFires when content in an Interchange element is done being loaded.
-
- -
- -
-

Methods

- -
-

replace

- -
- 
$('#element').foundation('replace', path);
-
- -

Update the src property of an image, or change the HTML of a container, to the specified path.

- - -

Fires these events: - Interchange#event:replaced -

- - - - - - - - - - -
NameTypeDescription
pathStringPath to the image or HTML partial.
- -
-
-
-

destroy

- -
- 
$('#element').foundation('destroy');
-
- -

Destroys an instance of interchange.

- - - - - -
-
-
- - -
- -
- -
- -
- -
- -
-
- - -
-
- - -
-
-
- -
- -
-
- -
-
-
- -
Download ZURB’s 21 Responsive Trends That Will Shape 2017
-

Stay informed with amazing responsive trends each month from ZURB.

- -
- -
-
- -
-
-
-
-

Foundation for Sites

-

Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. -

-
-
- -
-
-
-
-

Want more?

- -
-
-
-
-

Talk to us

-

Tweet us at
@ZURBfoundation

-

Get involved in
our amazing community.

-
-
-
-
-

Stay Updated

-

Keep up with the latest on Foundation. Find us on Github.

- Stay Connected -
-
-
-
-
-
-
- - Studios - Helping more than 200 startups succeed since 1998. - -
-
- - Foundation - The most advanced front-end framework in the world. - -
-
- - Notable Design Apps - Prototype, iterate and collect feedback on your products. - -
-
- - University - Ideas, thoughts and design resources shared with you. - -
-
-
- -
-
-
-
    -
    • -
    • -
    • -
-
-
- - -

© 1998‐2016 ZURB, Inc. All rights reserved.

-
-
-
- -
-
- - - - - - - - - diff --git a/_build/javascript-utilities.html b/_build/javascript-utilities.html index f596211b1..13adec072 100644 --- a/_build/javascript-utilities.html +++ b/_build/javascript-utilities.html @@ -1,580 +1,852 @@ - - - - - - - Foundation for Sites 6 Docs | JavaScript Utilities - - - - - - -
- -
- - -
- -
- - -
- -
- - - + - + + + + + +
+ +
+
+
+
+
Foundation Documentation
+ + + + +
+
+
+
+

JavaScript Utilities

+

Foundation includes a handful of helpful JavaScript utilities to help you add common functionalities to your apps and plugins.

+

Using the JavaScript Utilities

-
+

There are two ways to use the Foundation utilities: by calling them within the Foundation.utils namespace and by inheriting them into an object.

+

Foundation.utils

-
- -

Installing

See our JavaScript and Installation pages on how to install our files in your project.

-

Box

js/foundation.util.box.js

-

One of the useful libraries is Foundation.Box, and it has a couple methods designed to make your life easier. You can pass either jQuery objects or plain JavaScript elements to both.

-

-var dims = Foundation.Box.GetDimensions(element);

Will return an object that contains the dimensions of the element passed. The object return looks like:

-

-{
-  height: 54,
-  width: 521,
-  offset: {
-    left: 198,
-    top: 1047
-  },
-  parentDims: {
-    height: ... // parentDims and windowDims share the same format as the element dimensions.
-  },
-  windowDims: {
-    height: ...
-  }
-}

Also included is the ImNotTouchingYou 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.

-

-var clear = Foundation.Box.ImNotTouchingYou(element [, parent, leftAndRightOnly, topAndBottomOnly]);

Keyboard

js/foundation.util.keyboard.js

-

Another quite useful library, Foundation.Keyboard has several methods to make keyboard event interaction easier for all. Shout out to Marius Olbertz of Germany who conceived and coded this library.

-

Ever wanted a handy list of common keycodes and the keys they represent? Use Foundation.Keyboard.keys. This is an object containing key/value pairs of the most frequently used keys in our framework.

-

Want to manage your own keyboard inputs? No problem! Within your .on('key**') callback, call Foundation.Keyboard.parseKey(event) to get a string of what key was pressed, e.g. 'TAB' or 'ALT_X'. -You can also use this function outside of the Foundation components in your own JavaScript code.

-

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:

-
var focusable = Foundation.Keyboard.findFocusable($('#content'));

The real gem of this library, however, is the handleKey function. Any plugin that is registered with the utility can call on this method to manage keyboard inputs.

-
Foundation.Keyboard.register('pluginName', {
-  'TAB': 'next'
-});
-...//in event callback
-Foundation.Keyboard.handleKey(event, 'pluginName', {
-  next: function(){
-    //do stuff
+
As long as foundation.js has been loaded into the page, you can access any of the Foundation utilities by calling Foundation.utils.{function_name}.

+
For example, if you type the following into the JavaScript console it will return a 6-digit alphanumeric string.

+
// Generates a random string of length n
+Foundation.utils.random_str(6);

+
+
+
Method Inheritance

+
+
If you have any plain ole’ JavaScript object (a POJO), then you can inherit any of the Foundation JavaScript utilities by calling the Foundation.inherit 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.

+
// Simple example
+var user = {};
+Foundation.inherit(user, 'random_str data_options');
+
+// Advanced Example
+Person = function() {
+  this.init = function() {
+    Foundation.inherit(this, 'random_str data_options');
   }
-});

There are also the functions handled and unhandled where you can place any code that shall always be executed after the key event has been handled or not.

-

If you want to use your own key bindings, you can simply call the Foundation.Keyboard.register function even after Foundation has been initialized.

-

MediaQuery

js/foundation.util.mediaQuery.js

-

The media query library used by Foundation has two publicly accessible functions and two properties:

-

-Foundation.MediaQuery.get('medium');
-// returns the minimum pixel value for the `medium` breakpoint.
-Foundation.MediaQuery.atLeast('large');
-// returns a boolean if the current screen size is, you guessed it, at least `large`.
-Foundation.MediaQuery.queries;
-// an array of media queries Foundation uses for breakpoints.
-Foundation.MediaQuery.current;
-// a string of the current breakpoint size.

Also included is an event emitter for breakpoint changes. You can hook into this event with

-

-$(window).on('changed.zf.mediaquery', function(event, newSize, oldSize){});

Motion & Move

js/foundation.util.motion.js

-

Two handy utilities, one little file.

-

Foundation.Motion is the same JavaScript used by the Motion-UI library, and is included in Foundation 6. See the GitHub page for more details.

-

Foundation.Move is a simple helper function for utilizing browsers' requestAnimationFrame method for hardware acceleration. Invoke like so:

-
Foundation.Move(durationInMS, $element, function(){
-  //animation logic
-});

Your jQuery element will fire finished.zf.animate when the animation is complete.

-

Timer & Images Loaded

js/foundation.util.timerAndImageLoader.js

-

Both functions are used by Orbit and can be useful elsewhere as well.

-

-var timer = new Foundation.Timer($element, {duration: ms, infinite: bool}, callback);
-// includes: timer.start(), timer.pause(), timer.restart()

Similar to setInterval, except you can pause and pick back up where you left off.

-
Foundation.onImagesLoaded($images, callback);

This will execute your callback function after all the images in your jQuery collection have loaded.

-

Touch

js/foundation.util.touch.js

-

Gives you the ability to add swipe and psuedo-drag events to elements.

-
$('selector').addTouch().on('mousemove', handleDrag);
-// Binds elements to touch events. Used in the Slider plugin for mobile devices.
-$('selector').spotSwipe().on('swipeleft', handleLeftSwipe);
-// Binds elements to swipe events. Used in the Orbit plugin for mobile devices.

Triggers

js/foundation.util.triggers.js

-

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.

-
<button data-open='someId'>I open something!</button>
-<button data-close='someId'>I close something!</button>
-<button data-toggle='someId'>I toggle something!</button>
// 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);
-$('selector').on('close.zf.trigger', handleClose);
-$('selector').on('toggle.zf.trigger', handleToggle);

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!

-
<div data-scroll='someId'>...</div>
-<div data-resize='someId'>...</div>
$('#someId').on('scrollme.zf.trigger', handleScroll);
-$('#someId').on('resizeme.zf.trigger', handleResize);

Miscellaneous

Foundation includes a couple useful features in the core library that are used in many places, that you can tap into.

-

Foundation.GetYoDigits([number, namespace]) 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.

-

Foundation.getFnName(fn) returns a string representation of a named function. Seems small, but believe us, it's useful.

-

Foundation.transitionend() is a function that returns the string of the properly vendor-prefixed version of transitionend 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 transitionend event manually on the element you passed. It still gives the desired results, and allows Motion-UI to work in IE 9.

+}; + +var user = new Person(); +user.init();
+
+

Selector Engine

+ +

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 querySelectorAll(), making it up to 20% faster.

+

“Big S” can be used as a drop-in replacement for the jQuery $ selector in most cases.

+
+
+

jQuery Selector

+
// A simple selector
+$('.class #id');
+
+// A bracket selector
+$('label[for="input1"]');
+
+// A scoped selector
+$('dd > .content', '#accordion');
+ +
+
+

“Big S” Selector

+
// A simple selector
+Foundation.utils.S('.class #id');
 
+// A bracket selector
+Foundation.utils.S('label[for="input1"]');
 
+// A scoped selector
+Foundation.utils.S('dd > .content', '#accordion');
+ +
-
- +

Method Signature

+
// Arguments:
+//    Selector (String): CSS selector describing the element(s) to be
+//    returned as a jQuery object.
+//
+//    Scope (String): CSS selector describing the area to be searched. Default
+//    is document.
+//
+// Returns:
+//    Element (jQuery Object): jQuery object containing elements matching the
+//    selector within the scope.
+
+S(selector, scope) { ... }
+ + +
+

Throttle & Debounce

+ +

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: throttle and debounce.

+

Throttle 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.

+

Debounce 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.

+
+
+

Without Delay

+
// Button click handler
+$('.button').on('click', function(e){
+  // Handle Click
+});
+
+// Resize function
+$(window).on('resize', function(e){
+  // Do responsive stuff
+});
+ +
+
+

With Delay

+
// Debounced button click handler
+$('.button').on('click', Foundation.utils.debounce(function(e){
+  // Handle Click
+}, 300, true));
+
+// Throttled resize function
+$(window).on('resize', Foundation.utils.throttle(function(e){
+  // Do responsive stuff
+}, 300));
+ +
+

Method Signature

+
// Arguments:
+//    Func (Function): Function to be throttled.
+//
+//    Delay (Integer): Function execution threshold in milliseconds.
+//
+// Returns:
+//    Lazy_function (Function): Function with throttling applied.
+
+throttle(func, delay) { ... }
+
+// Arguments:
+//    Func (Function): Function to be debounced.
+//
+//    Delay (Integer): Function execution threshold in milliseconds.
+//
+//    Immediate (Bool): Whether the function should be called at the beginning
+//    of the delay instead of the end. Default is false.
+//
+// Returns:
+//    Lazy_function (Function): Function with debouncing applied.
+
+debounce(func, delay, immediate) { ... }
+ + +
+

Data Options

+ +

The data_options method parses a semicolon delimited set of values in the selected element’s data-options HTML attribute. It’s useful for allowing settings to be passed into a script or plugin from the markup.

+
+
+

HTML

+
<div id="target" data-options="delay:4;color:red;animal:unicorn"></div>
+ +
+
+

Javascript

+
var settings = Foundation.utils.data_options($('#target'));
+ +
- +

Method Signature

+
// Arguments:
+//    el (jQuery Object): Element to be parsed.
+//    data_attr_name (string): Optional name of the data attribute containing the options string (defaults to 'options').
+//
+// Returns:
+//    Options (Javascript Object): Contents of the element's data-options
+//    attribute.
+
+data_options(el, data_attr_name) { ... }
+ + +
+

Media Queries

+ +

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 (register_media and add_custom_rule), as well as polyfilled the native function matchMedia to work with all the browsers Foundation supports.

+

Register Media is used to add a new media query to Foundation’s list of JavaScript-accessible media queries. These can be found by calling Foundation.media_queries. The method works by appending a meta tag to the head of the document and checking the font-family of the element’s computed styles for the media query string.

+

Add Custom Rules 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.

+

Match Media can be used to check if the browser currently matches the media query passed in as a string. To use the function, call matchMedia() with the media query as an argument, and check the matches property (see example below).

+

In addition to this, you can also check the default Foundation media queries. The available methods are:

+ +
// Small queries
+Foundation.utils.is_small_only();
+Foundation.utils.is_small_up();
+
+// Medium queries
+Foundation.utils.is_medium_only();
+Foundation.utils.is_medium_up();
+
+// Large queries
+Foundation.utils.is_large_only();
+Foundation.utils.is_large_up();
+
+// XLarge queries
+Foundation.utils.is_xlarge_only();
+Foundation.utils.is_xlarge_up();
+
+// XXLarge queries
+Foundation.utils.is_xxlarge_only();
+Foundation.utils.is_xxlarge_up();
+ + +
+
+

CSS

+
/
+ Note: The media query string in the font-family property has to be surrounded
+ by slashes to be recognized by Phantom.js
+
+ Note: Instead of being defined in the CSS, the following style rule could also
+ be added to the document using Foundation.utils.add_custom_rule().
+*/
+meta.my-mq-custom {
+  font-family: "/only screen and (min-width: 40em)/";
+  width: 40em;
+}
+ +
+
+

Javascript

+
// Register custom media query
+Foundation.utils.register_media('custom', 'my-mq-custom');
+
+// Check if the media query is activated
+if (matchMedia(Foundation.media_queries['custom']).matches){
+  ...
+};
+
+// Apply a custom CSS rule to the media query
+Foundation.utils.add_custom_rule('.js-generated-element { padding-top: ' + element.data('height') + 'px }', 'custom');
+ +
+
+ +

Method Signature

+
// Arguments:
+//    Media (String): Key string for the media query to be stored as in
+//    Foundation.media_queries
+//
+//    Class (String): Class name for the generated <meta> tag
+
+register_media(media, class) { ... }
+
+// Arguments:
+//    Rule (String): CSS rule to be appended to the document.
+//
+//    Media (String): Optional media query string for the CSS rule to be
+//    nested under.
+
+add_custom_rule(rule, media) { ... }
+ + +
+

Image Loaded

+ +

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.

+

This can be avoided by using the image_loaded 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.

+

Example

+
Foundation.utils.image_loaded($('img.wait-for-me'), function(){
+  console.log('Image Loaded! :)');
+});
+ + +

Method Signature

+
// Arguments:
+//    Image (jQuery Object): Image(s) to check if loaded.
+//
+//    Callback (Function): Foundation to execute when image is fully loaded.
+
+image_loaded(image, callback) { ... }
+ + +
+

Random String

+ +

The random_str 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 random_str should not be considered cryptographically secure.

+

Example

+
>> Foundation.utils.random_str(6);
+"P47PGD"
+>> Foundation.utils.random_str(6);
+"JvuXFc"
+>> Foundation.utils.random_str(6);
+"XOxB7j"
+ + +

Method Signature

+
// Arguments:
+//    Length (Integer): Length of string to be generated. Defaults to random
+//    integer.
+//
+// Returns:
+//    Rand (String): Pseudo-random, alphanumeric string.
+
+random_str(length) { ... }
+ -
-
- - -
-
- -
-
-
- -
- -
-
- -
-
-
- -
Download ZURB’s 21 Responsive Trends That Will Shape 2017
-

Stay informed with amazing responsive trends each month from ZURB.

- + +
+
+
+
Stay on top of what’s happening in responsive design.
+

Sign up to receive monthly Responsive Reading highlights. Read Last Month's Edition »

+
+
+
+
+
+
- + +
+
+
+ + +
+
+
+
+

Foundation for Sites

+

Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. +

- -
-
-
-
-

Foundation for Sites

-

Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. -

-
-
- -
-
-
-
-

Want more?

- -
-
-
-
-

Talk to us

-

Tweet us at
@ZURBfoundation

-

Get involved in
our amazing community.

-
-
-
-
-

Stay Updated

-

Keep up with the latest on Foundation. Find us on Github.

- Stay Connected -
-
-
+
+ +
+
+
+
+

Want more?

+
-
-
- - Studios - Helping more than 200 startups succeed since 1998. - -
-
- - Foundation - The most advanced front-end framework in the world. - -
-
- - Notable Design Apps - Prototype, iterate and collect feedback on your products. - -
-
- - University - Ideas, thoughts and design resources shared with you. - +
+
+

Talk to us

+

Tweet us at
@ZURBfoundation

+

Business Support

+

Or check our support page

+
-
-
- -
-
-
-
    -
    • -
    • -
    • -
-
-
- - -

© 1998‐2016 ZURB, Inc. All rights reserved.

+
+
+

Stay Updated

+

Keep up with the latest on Foundation. Find us on Github.

+ Stay Connected
-
+
+
+ + Studios + Helping more than 200 startups succeed since 1998. + +
+
+ + Foundation + The most advanced front-end framework in the world. + +
+
+ + Notable Design Apps + Prototype, iterate and collect feedback on your products. + +
+
+ + University + Ideas, thoughts and design resources shared with you. + +
+
+
+ +
+
+
+
    +
    • +
    • +
    • +
+
+
+ + +

© 1998‐2015 ZURB, Inc. All rights reserved.

+
+
+
+ +
+ +
+
+ + + + + + + - - - - - - - diff --git a/_build/javascript.html b/_build/javascript.html index 7c347da1c..94d398244 100644 --- a/_build/javascript.html +++ b/_build/javascript.html @@ -1,583 +1,1122 @@ - - - - - - - Foundation for Sites 6 Docs | JavaScript - - - - - - -
- -
- - -
- -
- - -
- -
- - - + - + + + + + +
+ +
+
+
+
+
Foundation Documentation
+ + + +
+
+
+
+

JavaScript Setup

+

We streamlined how you implement Foundation plugins by combining them into a single plugin under the $.fn.foundation() jQuery namespace.

-
<div data-accordion data-slide-speed="500" data-multi-expand="true"></div>

Data options can also be set in bulk on one attribute, data-options. Options are written with the format key: value;, with a semicolon separating each option. The above example can be written using data-options like so:

-
<div data-accordion data-options="slideSpeed: 500; multiExpand: true;"></div>

There is one exception to this rule above, in the Sticky plugin. Because of the way you pass top and bottom anchors to that plugin, you can't include them in your data-options attribute. If you are using a single anchor or no declared anchor at all, you can still use data-options, and you can use it for all other options available.

-

-Setting options with JavaScript involves passing an object into the constructor function, like this:

-
var options = {multiExpand: true, allowAllClosed: false};
-var accordion = new Foundation.Accordion($('#some-accordion'), options);

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 data-some-option tag. This is also how the data-options="someOption:true; someOtherOption:false" options are passed into constructor functions. So, if you were to say:

-
<div data-accordion data-slide-speed="500" data-options="slideSpeed:250;">...</div>

your accordion element would have a slide speed of 250 milliseconds.

-

Adding Plugins After Page Load

If you add new HTML to the DOM, any plugins on those elements won't be initialized by default. Re-call the .foundation() function to check for new plugins.

-
$.ajax('assets/partials/kitten-carousel.html', function(data) {
-  $('#kitten-carousel').html(data).foundation();
-});
-

Adding Content to Plugins

In previous versions of Foundation, there was a method for plugins called reflow, though it's inclusion on plugins wasn't universal. For Foundation 6 we've added a global reInit 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.

-

This method can be called on a plugin class:

-
Foundation.reInit('tooltip');

an array of plugin classes:

-
Foundation.reInit(['tooltip', 'accordion', 'reveal']);

or an individual element or collection of elements selected with jQuery:

-
Foundation.reInit($('#some-plugin'));
-Foundation.reInit($('.some-plugin-class'));

If passing strings, it is required to pass proper camelCased or kebab-cased plugin names. Passing DropdownMenu or dropdown-menu are equivalent.

+

Installation

+

Foundation JavaScript was designed to work with jQuery right out of the gate. In the <head> 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:

+
<script src="/js/vendor/modernizr.js"></script>
+

Before the closing body tag, insert JQuery and FastClick.

+

HTML

+ +
<script src="/js/vendor/jquery.js"></script>
+<script src="/js/vendor/fastclick.js"></script>
+

Then either load each plugin individually, or include foundation.min.js, which automatically loads the Foundation Core and all JavaScript plugins.

+

HTML

+ +
<script src="/js/foundation.min.js"></script>
+
+<!-- or individually -->
+
+<script src="/js/foundation.js"></script>
+<script src="/js/foundation.alert.js"></script>
+<!-- ... -->
+<script src="/js/foundation.dropdown.js"></script>
+<script src="/js/foundation.tab.js"></script>
-

Programmatic Use

Plugins can be created programmatically in JavaScript. Every plugin is a class on the global Foundation object, with a constructor that accepts two parameters: an element to attach to, and an object of options.

-
var $accordion = new Foundation.Accordion($('#accordion'), {
-  slideSpeed: 500,
-  multiExpand: true
-});

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:

-
$('#reveal').foundation('open'); //will open a Reveal modal with id `reveal`.
-
-$('[data-tabs]').eq(0).foundation('selectTab', $('#example')); //will change the first Tabs on the page to whatever panel you choose.
-
-$('.tooltip').foundation('destroy'); //will destroy all Tooltips on the page.

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 function(comma, delimited, so, easy). 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.

-

If you are creating your plugins programmatically, you can, of course, invoke methods directly:

-
var $modal = new Foundation.Reveal($('#some-modal'), options);
-$modal.open();
-

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.

-
+

Initialize Foundation

+

After you have included the Foundation JavaScript, just add a simple call to initialize all plugins on your page.

+

We recommend that you initialize Foundation at the end of the page <body>.

+

HTML

+
<script>
+  $(document).foundation();
+</script>
+

Note: We include a tested version of jQuery in the Foundation repo to get you started quickly.

-

Events

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.

-
$('[data-tabs]').on('change.zf.tabs', function() {
-  console.log('Those tabs sure did change!');
-});

Refer to each plugin's documentation to see a list of events it fires, and when they fire.

-
-

Starting with Foundation 6, we removed callbacks as plugin settings. All use of callbacks with plugins should be done as event listeners.

-
+

Adding New Content After Page Load

+

If you add new content after the page has been loaded, you will need to reinitialize the Foundation JavaScript by running the following:

+
$(document).foundation();
+

Reflow will make Foundation check the DOM for any elements and re-apply any listeners to them.

+
$(document).foundation('reflow');
+

To be efficient, target the actual Foundation plugin you need to reflow:

+
$(document).foundation('orbit', 'reflow');
+or
+$(document).foundation('tab', 'reflow');
+or
+$(document).foundation('interchange', 'reflow');
+etc...
-
-
- -
+
+

Configuration

+

Foundation offers you options to customize plugin initialization. By default, calling $('#scope').foundation(); 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:

+
$(document).foundation({tab: {toggleable: false}});
+

The call will initialize all the plugins on the page and will configure tabs with toggleable enabled.

+

You can configure multiple libraries within the same call as well. Here are a few ways to make it happen:

+

JS

+
$(document).foundation({
+  reveal : {
+    animation_speed: 500
+  },
+  tooltip : {
+    disable_for_touch: true
+  },
+  topbar : {
+    custom_back_text: false,
+    is_hover: false,
+    mobile_show_parent_link: true
+  }
+});
+

The above will initialize all of the plugins with default settings as well as customized settings for reveal, tooltip, and topbar.

+

Data Options

+ +

Instead of passing the settings to the plugins using JavaScript, you can pass them through the markup using data-options. To pass in an option, just place it in the data-options HTML attribute of the element the plugin is being called on. To pass in multiple options, format them as a semicolon-delimited list:

+
<span data-tooltip data-options="disable_for_touch:true;touch_close_text:'close me'" class="has-tip" title="Tooltips are awesome!">Has Tooltip</span>
+

A chart of of all the available data-options is below.

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Abidelive_validatetrue
validate_on_blurtrue
focus_on_invalidtrue
error_labelstrue
timeout1000
Accordioncontent_class'content'
active_class'active'
multi_expandfalse
toggleabletrue
Clearingclose_selectors'.clearing-close'
open_selectors''
skip_selector''
touch_label'← Swipe to Advance →'
Dropdownactive_class'open'
is_hoverfalse
Interchangeload_attr'interchange'
Joyrideexposefalse
modaltrue
keyboardtrue
tip_location'bottom'
nub_position'auto'
scroll_speed1500
scroll_animation'linear'
timer0
start_timer_on_clicktrue
start_offset0
next_buttontrue
prev_buttontrue
tip_animation'fade'
pause_after[]
exposed[]
tip_animation_fade_speed300
cookie_monsterfalse
cookie_name'joyride'
cookie_domainfalse
cookie_expires365
tip_container'body'
expose_add_class''
Magellanactive_class'active'
threshold0
destination_threshold20
throttle_delay50
fixed_top0
offset_by_heighttrue
OffCanvasopen_method'move'
close_on_clickfalse
Orbitanimation'slide'
timer_speed10000
pause_on_hovertrue
resume_on_mouseoutfalse
next_on_clicktrue
animation_speed500
stack_on_smallfalse
navigation_arrowstrue
slide_numbertrue
slide_number_text'of'
container_class'orbit-container'
stack_on_small_class'orbit-stack-on-small'
next_class'orbit-next'
prev_class'orbit-prev'
timer_container_class'orbit-timer'
timer_paused_class'paused'
timer_progress_class'orbit-progress'
slides_container_class'orbit-slides-container'
preloader_class'preloader'
slide_selector'*'
bullets_container_class'orbit-bullets'
bullets_active_class'active'
slide_number_class'orbit-slide-number'
caption_class'orbit-caption'
active_slide_class'active'
orbit_transition_class'orbit-transitioning'
bulletstrue
circulartrue
timertrue
variable_heightfalse
swipetrue
Revealanimation'fadeAndPop'
animation_speed250
close_on_background_clicktrue
close_on_esctrue
dismiss_modal_class'close-reveal-modal'
multiple_openedfalse
bg_class'reveal-modal-bg'
root_element'body'
bg$('.reveal-modal-bg')
Slidersstart0
end100
step1
initial1
verticaltrue
display_selector'#sliderOutput'
Tabactive_class'active'
is_hoverfalse
Tooltipselector'.has-tip'
additional_inheritable_classes[]
tooltip_class'.tooltip'
append_to'body'
touch_close_text'Tap To Close'
disable_for_touchfalse
hover_delay50
Topbarindex0
sticky_class'sticky'
custom_back_texttrue
back_text'Back'
is_hovertrue
mobile_show_parent_linkfalse
scrolltoptrue
Plugin NameSettingDefault Value
+ +
- -
-
- - -
-
+
+

Configure on the fly

+

New to Foundation 5, you can now reconfigure instances of your plugin after the page has loaded and Foundation has already been initialized.

+

Let's pretend that we have an alert that was on our page when Foundation was first initialized:

+

HTML

+ +
<div data-alert class="alert-box" id="myAlert">
+  This is a standard alert.
+  <a href="#" class="close">&times;</a>
+</div>
+

The default fade out speed is 300 milliseconds, if we wanted to change this to 3 seconds we could do the following:

+

JS

+ +
$('#myAlert').foundation({alert: {speed: 3000}});
+

You can set any configuration option or callback this way.

+
+

Calling Internal Methods

+

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.

+

This will fire the start method on Joyride:

+

JS

+ +
$(document).foundation('joyride', 'start');
- -
-
-
- -
- -
-
- -
-
-
- -
Download ZURB’s 21 Responsive Trends That Will Shape 2017
-

Stay informed with amazing responsive trends each month from ZURB.

- + +
+
+
+
Stay on top of what’s happening in responsive design.
+

Sign up to receive monthly Responsive Reading highlights. Read Last Month's Edition »

+
+
+
+
+
+
- + +
+
+
+ + +
+
+
+
+

Foundation for Sites

+

Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. +

- -
-
-
-
-

Foundation for Sites

-

Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. -

-
-
- -
-
-
-
-

Want more?

- -
-
-
-
-

Talk to us

-

Tweet us at
@ZURBfoundation

-

Get involved in
our amazing community.

-
-
-
-
-

Stay Updated

-

Keep up with the latest on Foundation. Find us on Github.

- Stay Connected -
-
-
+
+ +
+
+
+
+

Want more?

+
-
-
- - Studios - Helping more than 200 startups succeed since 1998. - -
-
- - Foundation - The most advanced front-end framework in the world. - -
-
- - Notable Design Apps - Prototype, iterate and collect feedback on your products. - -
-
- - University - Ideas, thoughts and design resources shared with you. - +
+
+

Talk to us

+

Tweet us at
@ZURBfoundation

+

Business Support

+

Or check our support page

+
-
-
- -
-
-
-
    -
    • -
    • -
    • -
-
-
- - -

© 1998‐2016 ZURB, Inc. All rights reserved.

+
+
+

Stay Updated

+

Keep up with the latest on Foundation. Find us on Github.

+ Stay Connected
-
+
+
+ + Studios + Helping more than 200 startups succeed since 1998. + +
+
+ + Foundation + The most advanced front-end framework in the world. + +
+
+ + Notable Design Apps + Prototype, iterate and collect feedback on your products. + +
+
+ + University + Ideas, thoughts and design resources shared with you. + +
+
+
+ +
+
+
+
    +
    • +
    • +
    • +
+
+
+ + +

© 1998‐2015 ZURB, Inc. All rights reserved.

+
+
+
+ + + +
+
+ + + + + + + - - - - - - - diff --git a/_build/kitchen-sink.html b/_build/kitchen-sink.html deleted file mode 100644 index b1e44cde7..000000000 --- a/_build/kitchen-sink.html +++ /dev/null @@ -1,2051 +0,0 @@ - - - - - - - - - - Foundation for Sites 6 Docs | Kitchen Sink - - - - - - -
- - - -
- - -
- - -
- - - - - -
-
- - Foundation -
-
- - - - -
-
- -
- -Jump to Nav - -
-

Kitchen Sink

- - -

Everything but.

- - -
- -
- -
- -
- -

Abide

<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>
- -
- -
-
- -

Here's how you use this input field!

-
-
- -

This input is ignored by Abide using `data-abide-ignore`

-
-
- -

Enter a password please.

-
-
- -

This field is using the `data-equalto="password"` attribute, causing it to match the password field above.

-
-
-
-
- -
-
- -
-
-
-
- Choose Your Favorite, and this is required, so you have to pick one. - - - -
-
- Choose Your Favorite - not required, you can leave this one blank. - - - -
-
- Check these out - - - -
-
-
-
- -
-
- -
-
-
-

Accordion

<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>
- -
    -
  • - - Accordion 1 - -
    - Panel 1. Lorem ipsum dolor -
    -
    • -
  • - - Accordion 1 - -
    - Panel 2. Lorem ipsum dolor -
    -
    • -
  • - - Accordion 1 - -
    - Panel 3. Lorem ipsum dolor -
    -
    • -
-

Accordion Menu

<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>
- -
-

Badge

<span class="secondary badge">2</span>
-<span class="success badge">3</span>
-<span class="alert badge">A</span>
-<span class="warning badge">B</span>
- -
2 -3 -A -B
-
<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>
- -
-

Button

<!-- 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>
- -
-Learn More -View All Features - - - - - -So Tiny -So Small -So Large -Such Expand - -
- One - Two - Three -
-

Callout

<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>
- -
-
This is a callout.
-

It has an easy to override visual style, and is appropriately subdued.

- It's dangerous to go alone, take this. -
- -
-
This is a secondary callout
-

It has an easy to override visual style, and is appropriately subdued.

- It's dangerous to go alone, take this. -
- -
-
This is a success callout
-

It has an easy to override visual style, and is appropriately subdued.

- It's dangerous to go alone, take this. -
- -
-
This is a warning callout
-

It has an easy to override visual style, and is appropriately subdued.

- It's dangerous to go alone, take this. -
- -
-
This is an alert callout
-

It has an easy to override visual style, and is appropriately subdued.

- It's dangerous to go alone, take this. -
-

Close Button

<div class="callout">
-  <button class="close-button" aria-label="Close alert" type="button">
-    <span aria-hidden="true">&times;</span>
-  </button>
-  <p>This is a static close button example.</p>
-</div>
- -
- -

This is a static close button example.

-
-

Drilldown Menu

<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>
- -
-
<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>
- -
-
<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>
- -
-
-

Equalizer

<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>
- -
-
-
- -
-
-
-
-

Pellentesque habitant morbi tristique senectus et netus et, ante.

-
-
-
-
- -
-
-
-

Flex Grid

<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>
-
6 columns
-
6 columns
-
-
-
12/6/4 columns
-
12/6/8 columns
-
- -
-

Flex Video

<div class="flex-video">
-  <iframe width="420" height="315" src="https://www.youtube.com/embed/V9gkYw35Vws" frameborder="0" allowfullscreen></iframe>
-</div>
- -
- -
-

Float Classes

<div class="callout clearfix">
-  <a class="button float-left">Left</a>
-  <a class="button float-right">Right</a>
-</div>
- -
- Left - Right -
-

Forms

<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>
- -
- -

Here's how you use this input field!

- - - -
-
- Choose Your Favorite - - - -
-
- Check these out - - - -
-
-
-
- -
-
- -
-
-
- $ - - Submit -
-
-

Grid

<div class="row">
-  <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">
-  <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">
-  <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">
-  <div class="small-3 columns">3 columns</div>
-  <div class="small-9 columns">9 columns</div>
-</div>
-<div class="row">
-  <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>
-
2/3/4 columns
-
4/3/4 columns
-
6/6/4 columns
-
-
-
12/12/3 columns
-
12/12/6 columns
-
12/12/3 columns
-
-
-
6/6/2 columns
-
6/6/8 columns
-
12/12/2 columns
-
-
-
3 columns
-
9 columns
-
-
-
12/8/4 columns
-
12/4/8 columns
-
- -
-

Interchange

<img data-interchange="[assets/img/interchange/small.jpg, small], [assets/img/interchange/medium.jpg, medium], [assets/img/interchange/large.jpg, large]">
- -
-

Label

<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>
- -
Secondary Label -Success Label -Alert Label -Warning Label
-

Magellan

<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>
-<div class="sections">
-  <section id="first" data-magellan-target="first">
-    <h4>First section</h4>
-    <p>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.</p>
-  </section>
-  <section id="second" data-magellan-target="second">
-    <h4>Second section</h4>
-    <p>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.</p>
-  </section>
-  <section id="third" data-magellan-target="third">
-    <h4>Second section</h4>
-    <p>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.</p>
-  </section>
-</div>
- -
-

Media Object

<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>
- -
-
- -
-
-

Dreams feel real while we're in them.

-

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.

-
-
-
<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>
- -
- -
-

Off-canvas

<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>
-        <!-- left off-canvas markup -->
-      </div>
-      <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
-        <!-- right off-canvas markup -->
-      </div>
-      <div class="off-canvas-content" data-off-canvas-content>
-        <!-- page content -->
-      </div>
-    </div>
-  </div>
-</body>
<button type="button" class="button" data-toggle="offCanvasLeft">Open Menu</button>
- -
-

Orbit

<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>&#9664;</button>
-    <button class="orbit-next" aria-label="next"><span class="show-for-sr">Next Slide</span>&#9654;</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>
- -
-
    - - -
  • -
    -

    You can also throw some text in here!

    -

    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.

    -

    This Orbit slide has chill

    -
    -
    • -
  • -
    -

    You can also throw some text in here!

    -

    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.

    -

    This Orbit slide has chill

    -
    -
    • -
  • -
    -

    You can also throw some text in here!

    -

    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.

    -

    This Orbit slide has chill

    -
    -
    • -
  • -
    -

    You can also throw some text in here!

    -

    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.

    -

    This Orbit slide has chill

    -
    -
    • -
- -
-

Pagination

<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>
- -
-

Progress Bar

<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>
- -
-
-

25%

-
-
- -
-
-

50%

-
-
- -
-
-

75%

-
-
-

Responsive Menu

<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>
- -
-

Responsive Toggle

<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>
- -
- -
Menu
-
- -
-
- -
-
-
    -
    • -
    • -
-
-
-

Reveal

<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">&times;</span>
-  </button>
-</div>
- -

Click me for a modal

- -
-

Awesome. I Have It.

-

Your couch. It is mine.

-

I'm a cool paragraph that lives inside of an even cooler modal. Wins!

- -
-

Slider

<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>
- -
- - - -
- -
- - - -
- -
- - - - - -
-

Sticky

<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>
- -
-
-
-

- 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. -

-

- 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. -

-

- 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. -

-

- 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. -

-
-
-
- -
-
-
-
-

Switch

<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>
- -
- - -
- -
- - -
- -
- - -
-

Table

<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>
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Table HeaderTable HeaderTable HeaderTable Header
Content Goes HereThis is longer content Donec id elit non mi porta gravida at eget metus.Content Goes HereContent Goes Here
Content Goes HereThis is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.Content Goes HereContent Goes Here
Content Goes HereThis is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.Content Goes HereContent Goes Here
-

Tabs

<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>
- -
- -
-
-

one

-

Check me out! I'm a super cool Tab panel with text content!

-
-
-

two

- -
-
-

three

-

Check me out! I'm a super cool Tab panel with text content!

-
-
-

four

- -
-
-

five

-

Check me out! I'm a super cool Tab panel with text content!

-
-
-

six

- -
-
-

Thumbnail

<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>
- -
-
- Photo of Uranus. -
-
- Photo of Neptune. -
-
- Photo of Pluto. -
-
-

Title Bar

<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>
- -
-
- - Foundation -
-
- -
-
-

Toggler

<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>
- -

Expand!

- -
-

Tooltip

<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>
- -

The scarabaeus 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.

-

Top Bar

<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>
- -
-
- -
-
-
    -
    • -
    • -
-
-
-

Visibility Classes

<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>
- -

You are on a small screen or larger.

-

You are on a medium screen or larger.

-

You are on a large screen or larger.

-

You are definitely on a small screen.

-

You are definitely on a medium screen.

-

You are definitely on a large screen.

- -

You are not on a medium screen or larger.

-

You are not on a large screen or larger.

-

You are definitely not on a small screen.

-

You are definitely not on a medium screen.

-

You are definitely not on a large screen.

-

Can't touch this.

- - - -

You are in landscape orientation.

-

You are in portrait orientation.

- -

This text can only be read by a screen reader.

-

There's a line of text above this one, you just can't see it.

- - - -

Skip to Content

- -
-
- - - - -
- -
- -
- -
- -
- -
-
- - -
-
- - -
-
-
- -
- -
-
- -
-
-
- -
Download ZURB’s 21 Responsive Trends That Will Shape 2017
-

Stay informed with amazing responsive trends each month from ZURB.

- -
- -
-
- -
-
-
-
-

Foundation for Sites

-

Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. -

-
-
- -
-
-
-
-

Want more?

- -
-
-
-
-

Talk to us

-

Tweet us at
@ZURBfoundation

-

Get involved in
our amazing community.

-
-
-
-
-

Stay Updated

-

Keep up with the latest on Foundation. Find us on Github.

- Stay Connected -
-
-
-
-
-
-
- - Studios - Helping more than 200 startups succeed since 1998. - -
-
- - Foundation - The most advanced front-end framework in the world. - -
-
- - Notable Design Apps - Prototype, iterate and collect feedback on your products. - -
-
- - University - Ideas, thoughts and design resources shared with you. - -
-
-
- -
-
-
-
    -
    • -
    • -
    • -
-
-
- - -

© 1998‐2016 ZURB, Inc. All rights reserved.

-
-
-
- -
-
- - - - - - - - - diff --git a/_build/label.html b/_build/label.html deleted file mode 100644 index 9b2fe5b44..000000000 --- a/_build/label.html +++ /dev/null @@ -1,619 +0,0 @@ - - - - - - - - - - Foundation for Sites 6 Docs | Label - - - - - - -
- - - -
- - -
- - -
- - - - - -
-
- - Foundation -
-
- - - - -
-
- -
- -Jump to Nav - -
-

Label

- - -

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.

- - -
- -
- -
- -
- -

Basics

Add the .label class to an element to create a label. In the below example, we're using <span>, but any tag will work fine.

-
<span class="label">Default Label</span>
- -
Default Label


-

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 aria-describedby attribute on the main element.

-
<p aria-describedby="emailLabel">Re: re: re: you won't believe what's in this email!</p>
-<span class="label" id="emailLabel">High Priority<span>

If an element is described by multiple labels, place multiple IDs inside of aria-describedby.

-
<p aria-describedby="emailLabel1 emailLabel2">Re: re: re: you won't believe what's in this email!</p>
-<span class="label" id="emailLabel1">High Priority<span>
-<span class="label" id="emailLabel2">Unread<span>
-

Coloring

Labels can be colored with the same classes used for buttons and other components.

-
<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>
- -
Secondary Label -Success Label -Alert Label -Warning Label
-

With Icons

An icon can be dropped into a label just fine. We're using the Foundation icon font here, but any icon fonts or image-based icons will work fine.

-
<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>
- -
Alert Label - Warning Label - Info Label
- -
-
-

Sass Reference

- -
-

Variables

- -

The default styles of this component can be customized using these Sass variables in your project's settings file.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDefault ValueDescription
$label-backgroundColor$primary-color

Default background color for labels.

-
$label-colorColorforeground($label-background)

Default text color for labels.

-
$label-font-sizeNumber0.8rem

Default font size for labels.

-
$label-paddingNumber0.33333rem 0.5rem

Default padding inside labels.

-
$label-radiusNumber$global-radius

Default radius of labels.

-
-
- -
- -
-

Mixins

- -

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.

- - -
-

label

- - - -
- 
@include label;
-
- -

Generates base styles for a label.

- - - - - -
- - - - - -
- - -
- - - - - -
- -
- -
- -
- -
- -
-
- - -
-
- - -
-
-
- -
- -
-
- -
-
-
- -
Download ZURB’s 21 Responsive Trends That Will Shape 2017
-

Stay informed with amazing responsive trends each month from ZURB.

- -
- -
-
- -
-
-
-
-

Foundation for Sites

-

Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. -

-
-
- -
-
-
-
-

Want more?

- -
-
-
-
-

Talk to us

-

Tweet us at
@ZURBfoundation

-

Get involved in
our amazing community.

-
-
-
-
-

Stay Updated

-

Keep up with the latest on Foundation. Find us on Github.

- Stay Connected -
-
-
-
-
-
-
- - Studios - Helping more than 200 startups succeed since 1998. - -
-
- - Foundation - The most advanced front-end framework in the world. - -
-
- - Notable Design Apps - Prototype, iterate and collect feedback on your products. - -
-
- - University - Ideas, thoughts and design resources shared with you. - -
-
-
- -
-
-
-
    -
    • -
    • -
    • -
-
-
- - -

© 1998‐2016 ZURB, Inc. All rights reserved.

-
-
-
- -
-
- - - - - - - - - diff --git a/_build/magellan.html b/_build/magellan.html deleted file mode 100644 index 1fd449145..000000000 --- a/_build/magellan.html +++ /dev/null @@ -1,722 +0,0 @@ - - - - - - - - - - Foundation for Sites 6 Docs | Magellan - - - - - - -
- - - -
- - -
- - -
- - - - - -
-
- - Foundation -
-
- - - - -
-
- -
- -Jump to Nav - -
-

Magellan

- - JavaScript - -

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.

- - -
- -
- -
- -
- - - -


-

Setup

You can use Magellan with any navigation element, like our Menu or your own custom component. Just add the attribute data-magellan to the container, and links to specific sections of your page. Each section needs a unique ID.

-
<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>
-<div class="sections">
-  <section id="first" data-magellan-target="first">First Section</section>
-  <section id="second" data-magellan-target="second">Second Section</section>
-  <section id="third" data-magellan-target="third">Third Section</section>
-</div>
-

You can use Magellan with our Sticky plugin to create a persistent navigation header or sidebar.

-

This first example is a simplified version of the table of contents on the right side of this page:

-
<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>
-  </nav>
-</div>

This example is the menu bar floating at the top of the page.

-
<div data-sticky-container>
-  <div class="sticky" id="example" data-sticky data-margin-top="0" style="width:100%;" data-margin-bottom="0" data-top-anchor="topAnchorExample" data-btm-anchor="bottomOfContentId:bottom">
-    <nav data-magellan>
-      <ul class="horizontal menu expanded">
-      <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>
-    </nav>
-  </div>
-</div>
- - -
-
-

JavaScript Reference

- - -
-

Initializing

- -

The file foundation.magellan.js must be included in your JavaScript to use this plugin, along with foundation.core.js.

- - - -
- - -
-

Foundation.Magellan

- -

Creates a new instance of Magellan.

- - - 
var elem = new Foundation.Magellan(element, options);
- -

Fires these events: - Magellan#event:init -

- - - - - - - - - - - - - - - -
NameTypeDescription
elementObjectjQuery object to add the trigger to.
optionsObjectOverrides to the default plugin settings.
-
- -
- -
-

Plugin Options

- -

Use these options to customize an instance of Magellan. Plugin options can be set as individual data attributes, one combined data-options attribute, or as an object passed to the plugin's constructor. Learn more about how JavaScript plugins are initialized.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameDefaultDescription
data-animation-duration500Amount of time, in ms, the animated scrolling should take between locations.
data-animation-easingease-in-outAnimation style to use when scrolling between locations.
data-threshold50Number of pixels to use as a marker for location changes.
data-active-classactiveClass applied to the active locations link on the magellan container.
data-deep-linkingtrueAllows the script to manipulate the url of the current page, and if supported, alter the history.
data-bar-offset25Number of pixels to offset the scroll of the page on item click if using a sticky nav bar.
-
- -
- -
-

Events

- -

These events will fire from any element with a Magellan plugin attached.

- - - - - - - - - -
NameDescription
update.zf.magellanFires when magellan is finished updating to the new active element.
-
- -
- -
-

Methods

- -
-

calcPoints

- -
- 
$('#element').foundation('calcPoints');
-
- -

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.

- - - - -
-
-
-

scrollToLoc

- -
- 
$('#element').foundation('scrollToLoc', loc);
-
- -

Function to scroll to a given location on the page.

- - - - - - - - - - - - -
NameTypeDescription
locStringa properly formatted jQuery id selector. Example: '#foo'
- -
-
-
-

reflow

- -
- 
$('#element').foundation('reflow');
-
- -

Calls necessary functions to update Magellan upon DOM change

- - - - -
-
-
-

destroy

- -
- 
$('#element').foundation('destroy');
-
- -

Destroys an instance of Magellan and resets the url of the window.

- - - - - -
-
-
- - -
- -
- -
- -
- -
- -
-
- - -
-
- - -
-
-
- -
- -
-
- -
-
-
- -
Download ZURB’s 21 Responsive Trends That Will Shape 2017
-

Stay informed with amazing responsive trends each month from ZURB.

- -
- -
-
- -
-
-
-
-

Foundation for Sites

-

Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. -

-
-
- -
-
-
-
-

Want more?

- -
-
-
-
-

Talk to us

-

Tweet us at
@ZURBfoundation

-

Get involved in
our amazing community.

-
-
-
-
-

Stay Updated

-

Keep up with the latest on Foundation. Find us on Github.

- Stay Connected -
-
-
-
-
-
-
- - Studios - Helping more than 200 startups succeed since 1998. - -
-
- - Foundation - The most advanced front-end framework in the world. - -
-
- - Notable Design Apps - Prototype, iterate and collect feedback on your products. - -
-
- - University - Ideas, thoughts and design resources shared with you. - -
-
-
- -
-
-
-
    -
    • -
    • -
    • -
-
-
- - -

© 1998‐2016 ZURB, Inc. All rights reserved.

-
-
-
- -
-
- - - - - - - - - diff --git a/_build/media-object.html b/_build/media-object.html deleted file mode 100644 index 5cd40faf8..000000000 --- a/_build/media-object.html +++ /dev/null @@ -1,796 +0,0 @@ - - - - - - - - - - Foundation for Sites 6 Docs | Media Object - - - - - - -
- - - -
- - -
- - -
- - - - - -
-
- - Foundation -
-
- - - - -
-
- -
- -Jump to Nav - -
-

Media Object

- - -

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.

- - -
- -
- -
- -
- -

Basics

A media object is a container with the class .media-object, and two or three sections with the class .media-object-section.

-
<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>
- -
-
-
- -
-
-
-

Dreams feel real while we're in them.

-

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.

-
-
-

In flexbox mode, the class .main-section must be added to your center section in order to properly size it.

-
- -
<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 main-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>
-

Section Alignment

Each section aligns to the top by default, but individual sections can also be middle- or bottom-aligned with the .middle and .bottom classes.

-
<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>
- -
-
-
- -
-
-
-

Why is it so important to dream?

-

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.

-

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.

-
-
-
- -
-
-

In flexbox mode, you can use the flexbox helper classes instead to get the same result. The .align-* classes can be used on the container to align every child section at once, or individual child sections can be aligned with .align-self-* classes.

-
<div class="media-object">
-  <div class="media-object-section align-self-center">
-    <div class="thumbnail">
-      <img src= "assets/img/media-object/avatar-2.jpg">
-    </div>
-  </div>
-  <div class="media-object-section main-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 align-self-bottom">
-    <div class="thumbnail">
-      <img src= "assets/img/media-object/avatar-3.jpg">
-    </div>
-  </div>
-</div>
-

Stack on Small

By adding the .stack-for-small class, you can make your media object responsive. Images will get a width of 100%, but this can be changed.

-
<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>
- -
-
-
- -
-
-
-

I Can Stack.

-

Shrink the browser width to see me stack. I do tricks for dog treats, but I'm not a dog.

-
-
-

Nesting Media Objects

By nesting a media object into the media-object-section section, you can easily indent it. This is great for comment strings.

-
<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>
- -
-
-
- -
-
-
-

I'm First!

-

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.

- -
-
-
- -
-
-
-

I'm Second!

-

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.

-
-
- -
-
- -
-
-

Sass Reference

- -
-

Variables

- -

The default styles of this component can be customized using these Sass variables in your project's settings file.

- - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDefault ValueDescription
$mediaobject-margin-bottomNumber$global-margin

Bottom margin of a media object.

-
$mediaobject-section-paddingNumber$global-padding

Left and right padding on sections within a media object.

-
$mediaobject-image-width-stackedNumber100%

Width of images within a media object, when the object is stacked vertically. Set to 'auto' to use the image's natural width.

-
-
- -
- -
-

Mixins

- -

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.

- - -
-

media-object-container

- - - -
- 
@include media-object-container;
-
- -

Adds styles for a media object container.

- - - - - -
- -
- - - -
-

media-object-section

- - - -
- 
@include media-object-section($padding);
-
- -

Adds styles for sections within a media object.

- - - - - - - - - - - - - - - -
ParameterTypeDefault ValueDescription
$paddingNumber$mediaobject-section-padding

Padding between sections.

-
-
- -
- - - -
-

media-object-stack

- - - -
- 
@include media-object-stack;
-
- -

Adds styles to stack sections of a media object. Apply this to the section elements, not the container.

- - - - - -
- - - - - -
- - -
- - - - - -
- -
- -
- -
- -
- -
-
- - -
-
- - -
-
-
- -
- -
-
- -
-
-
- -
Download ZURB’s 21 Responsive Trends That Will Shape 2017
-

Stay informed with amazing responsive trends each month from ZURB.

- -
- -
-
- -
-
-
-
-

Foundation for Sites

-

Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. -

-
-
- -
-
-
-
-

Want more?

- -
-
-
-
-

Talk to us

-

Tweet us at
@ZURBfoundation

-

Get involved in
our amazing community.

-
-
-
-
-

Stay Updated

-

Keep up with the latest on Foundation. Find us on Github.

- Stay Connected -
-
-
-
-
-
-
- - Studios - Helping more than 200 startups succeed since 1998. - -
-
- - Foundation - The most advanced front-end framework in the world. - -
-
- - Notable Design Apps - Prototype, iterate and collect feedback on your products. - -
-
- - University - Ideas, thoughts and design resources shared with you. - -
-
-
- -
-
-
-
    -
    • -
    • -
    • -
-
-
- - -

© 1998‐2016 ZURB, Inc. All rights reserved.

-
-
-
- -
-
- - - - - - - - - diff --git a/_build/media-queries.html b/_build/media-queries.html index 6b2ab3816..f678edfb2 100644 --- a/_build/media-queries.html +++ b/_build/media-queries.html @@ -1,795 +1,656 @@ - - - - - - - Foundation for Sites 6 Docs | Media Queries - - - - - - -
- - - -
- - -
- - -
- - - - - -
-
- - Foundation -
+ + + + + Media Queries | Foundation Docs + + + + + + + + + + + + + + + + + + + + + + - -
-
+
+
-
- -Jump to Nav + -
-

Media Queries

- JavaScript + -

CSS media queries allow us to adjust the display and orientation of content at different screen sizes.

-
- -
- -
- -
- -

Default Media Queries

Foundation for Sites has three core breakpoints:

-
    -
  • Small: any screen.
    • -
  • Medium: any screen 640 pixels or wider.
    • -
  • Large: any screen 1024 pixels or wider.
    • -
-

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.

-
<div class="row">
-  <div class="small-6 medium-4 columns"></div>
-  <div class="small-6 medium-8 columns"></div>
-</div>

If you're using the CSS version of Foundation, use these media queries to imitate the three core breakpoints:

-
/* Small only */
-@media screen and (max-width: 39.9375em) {}
-
-/* Medium and up */
-@media screen and (min-width: 40em) {}
-
-/* Medium only */
-@media screen and (min-width: 40em) and (max-width: 63.9375em) {}
-
-/* Large and up */
-@media screen and (min-width: 64em) {}
-
-/* Large only */
-@media screen and (min-width: 64em) and (max-width: 74.9375em) {}
-

Upgrading from Foundation 5

In Foundation 5, breakpoints were accessed using a series of Sass variables named $small-up, $small-only, $medium-only, and so on. In Foundation 6, this method of writing media queries has been replaced with a dedicated breakpoint mixin, described below. The legacy variables will be removed in Foundation 6.3.

-

To upgrade your existing media queries, replace rulesets like this:

-
@media #{$medium-only} {
-}

With this:

-
@include breakpoint(medium only) {
-}
-

Changing the Breakpoints

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 $breakpoints variable in the settings file.

-
$breakpoints: (
-  small: 0px,
-  medium: 640px,
-  large: 1024px,
-  xlarge: 1200px,
-  xxlarge: 1440px,
-);
-

Even though the above values are in pixels, they're converted to ems at the end for use in media queries.

-
-

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: xlarge and xxlarge. We don't use these for any components, and also don't output any CSS classes that use them by default.

-

You can change that by modifying the $breakpoint-classes 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:

-
$breakpoint-classes: (small medium large);

For example, to get .xlarge classes in your CSS, for use in the grid, Menu, and more, just add it to the end of the list:

-
$breakpoint-classes: (small medium large xlarge);
-

Sass

The Breakpoint Mixin

Our breakpoint() mixin makes it easy to write media queries. You can use the named breakpoints, or a custom pixel, rem, or em value.

-

To use the mixin, call it with @include, and then include the CSS content you want inside the curly braces.

-
.element {
-  // Only affects medium screens and larger
-  @include breakpoint(medium) {
-    // All CSS in here goes inside the media query
-  }
-}

The behavior of the media query can be changed by adding the keyword down or only after the breakpoint value, separated by a space.

-
.element {
-  // Only affects medium screens and smaller
-  @include breakpoint(medium down) { }
-  // Only affects medium screens, not small or large
-  @include breakpoint(medium only) { }
-}

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.

-
.element {
-  // Converted to 20em
-  @include breakpoint(320px) { }
-  // Unitless values are assumed to be pixels
-  @include breakpoint(320) { }
-  // Converted to 40em
-  @include breakpoint(40rem) { }
-}

Lastly, there are three special media queries that are not width-based: portrait, landscape, and retina. Using these keywords with the breakpoint() mixin will output a media query for device orientation or pixel density, rather than screen width.

-
.element {
-  @include breakpoint(landscape) {
-    // CSS for landscape-oriented devices only
-  }
-  @include breakpoint(retina) {
-    // CSS for high-resolution displays only
-  }
-}
-

Breakpoint Function

The functionality of the breakpoint() mixin comes from an internal function, also called breakpoint(). If you want to write your own media queries, you can use the breakpoint() function to access the logic of the mixin directly.

-
@media screen and #{breakpoint(medium)} {
-  // Medium and up styles
-}

This can be used to combine multiple media queries together.

-
@media screen and #{breakpoint(medium)} and #{breakpoint(xlarge down)} {
-  // Medium to extra large styles
-}
-

JavaScript

Working with Media Queries

The Foundation JavaScript includes a set of helper functions for working with media queries. They're all on the Foundation.MediaQuery object.

-

Get the name of the current breakpoint with MediaQuery.current.

-
Foundation.MediaQuery.current // => 'small', 'medium', etc.

To see if the screen is currently a certain breakpoint or larger, use MediaQuery.atLeast.

-
if (Foundation.MediaQuery.atLeast('medium')) {
-  // True if medium or large
-  // False if small
-}

To get the media query of a breakpoint, use MediaQuery.get.

-
Foundation.MediaQuery.get('medium') // => only screen and (min-width: 640px)
-

Watching for Breakpoint Changes

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.

-
$(window).on('changed.zf.mediaquery', function(event, newSize, oldSize) {
-  // newSize is the name of the now-current breakpoint, oldSize is the previous breakpoint
-});
- -
-
-

Sass Reference

- -
-

Variables

- -

The default styles of this component can be customized using these Sass variables in your project's settings file.

- - - - - - - - - - - - - - - - - -
NameTypeDefault ValueDescription
$breakpointsMap - small: 0
- medium: 640px
- large: 1024px
- xlarge: 1200px
- xxlarge: 1440px
-

A list of named breakpoints. You can use these with the breakpoint() mixin to quickly create media queries.

-
$breakpoint-classesListsmall medium large

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.

-
+
+
+ + + + + + + + +
+ +
+
+
+
+
Foundation Documentation
+ + + -
-

Functions

+
+
+
+
+

Media Queries

+

We keep media queries fairly simple in Foundation and let the percentage-based grid do the heavy lifting across various screen sizes.

- -
-

breakpoint

+
+

Basic

+

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.

+

CSS

+
// Small screens
+@media only screen { } /* Define mobile styles */
 
-      

-        
breakpoint($val)

-      

+@media only screen and (max-width: 40em) { } /* max-width 640px, mobile-only styles, use when QAing mobile issues */
 
-      
Generates a media query string matching the input value. Refer to the documentation for the breakpoint() mixin to see what the possible inputs are.

+// Medium screens
+@media only screen and (min-width: 40.063em) { } /* min-width 641px, medium screens */
 
+@media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */
 
-      
+// Large screens
+@media only screen and (min-width: 64.063em) { } /* min-width 1025px, large screens */
 
-      
-        
-          
-        
-        
-          
-          
-          
-          
-        
-      
ParameterTypeDefault ValueDescription
$valKeyword or Numbersmall
Breakpoint name, or px, rem, or em value to process.

-

-
+@media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */ -
- -
+// XLarge screens +@media only screen and (min-width: 90.063em) { } /* min-width 1441px, xlarge screens */ -
+@media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */ +// XXLarge screens +@media only screen and (min-width: 120.063em) { } /* min-width 1921px, xxlarge screens */
-
-

JavaScript Reference

- - - - -
- +

Customize With Sass

+

Media queries can be easily customized by changing the variable values in _settings.scss.

+

SCSS

-
- - -
+
// Here we define the breakpoints which will become the upper border for each media size.
+// The function em-calc() calculates the em-value from a px-value.
+$small-breakpoint:  em-calc(640)  !default;
+$medium-breakpoint: em-calc(1024) !default;
+$large-breakpoint:  em-calc(1440) !default;
+$xlarge-breakpoint: em-calc(1920) !default;
 
-  

-    
Methods

+// Here we define the lower and upper bounds for each media size
+$small-range:   (0, $small-breakpoint) !default; /* 0, 640px */
+$medium-range:  ($small-breakpoint  + em-calc(1), $medium-breakpoint) !default; /* 641px, 1024px */
+$large-range:   ($medium-breakpoint + em-calc(1), $large-breakpoint)  !default; /* 1025px, 1440px */
+$xlarge-range:  ($large-breakpoint  + em-calc(1), $xlarge-breakpoint) !default; /* 1441px, 1920px */
+$xxlarge-range: ($xlarge-breakpoint + em-calc(1), em-calc(99999999)) !default; /* 1921px, ... */
 
-    

-      
atLeast

+// Media Queries
+$screen: "only screen" !default;
 
-      

-        
$('#element').foundation('atLeast', size);

-      

-
-      
Checks if the screen is at least as wide as a breakpoint.

+$landscape: "#{$screen} and (orientation: landscape)" !default;
+$portrait: "#{$screen} and (orientation: portrait)" !default;
 
+$small-up: $screen !default;
+$small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})" !default;
 
+$medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})" !default;
+$medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})" !default;
 
-      
-        
-          
-        
-        
-          
-          
-          
-        
-      
NameTypeDescription
sizeStringName of the breakpoint to check.

+$large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})" !default;
+$large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})" !default;
 
-      

-    

-    

-      
get

+$xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})" !default;
+$xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})" !default;
 
-      

-        
$('#element').foundation('get', size);

-      

+$xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})" !default;
+$xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})" !default;
 
-      
Gets the media query of a breakpoint.

+$retina: (
+  "#{$screen} and (-webkit-min-device-pixel-ratio: 2)",
+  "#{$screen} and (min--moz-device-pixel-ratio: 2)",
+  "#{$screen} and (-o-min-device-pixel-ratio: 2/1)",
+  "#{$screen} and (min-device-pixel-ratio: 2)",
+  "#{$screen} and (min-resolution: 192dpi)",
+  "#{$screen} and (min-resolution: 2dppx)"
+);
+

Style With Sass

+

Use these media queries with the variables specified above.

+

SCSS

+
@media #{$small-up} { }
+@media #{$small-only} { }
 
-      
-        
-          
-        
-        
-          
-          
-          
-        
-      
NameTypeDescription
sizeStringName of the breakpoint to get.

+@media #{$medium-up} { }
+@media #{$medium-only} { }
 
-      
-
- - +@media #{$large-up} { } +@media #{$large-only} { } - - - -
- -
- -
- +
- -
-
- - -
+
+
+
+
+

Foundation for Sites

+

Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. +

+
- -
-
-
- -
- -
-
- -
-
-
- -
Download ZURB’s 21 Responsive Trends That Will Shape 2017
-

Stay informed with amazing responsive trends each month from ZURB.

- -
- + + + + + + + - - - - - - - diff --git a/_build/menu.html b/_build/menu.html deleted file mode 100644 index df7aa5dfd..000000000 --- a/_build/menu.html +++ /dev/null @@ -1,939 +0,0 @@ - - - - - - - - - - Foundation for Sites 6 Docs | Menu - - - - - - -
- - - -
- - -
- - -
- - - - - -
-
- - Foundation -
-
- - - - -
-
- -
- -Jump to Nav - -
-

Menu

- - -

Our flexible menu component makes it easy to build many common navigation patterns, all with the same markup.

- - -
- -
- -
- -
- -

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.

-
-

Basic Menu

All versions of the menu are a <ul> filled with <li> elements containing links. By default, a Menu is horizontally oriented.

-
<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>
- -
-

Item Alignment

By default, each item in the menu aligns to the left. They can also be aligned to the right with the .align-right class.

-
-

In a right-to-left environment, items align to the right by default, and the class .align-left can be used to reverse direction.

-
- -
<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>
- -


-

To align items in the middle, add a wrapping element with the class .menu-centered.

-
-

If you're using Flexbox mode, you don't need the wrapper class. Instead, you can just add the class .align-center to the menu.

-
- -
<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>
- -
- -


-

Items can also be set to expand out and take up an even amount of space, with the .expanded class. Thanks to the magic of CSS, the items will automatically size themselves equally depending on how many are inside the menu.

-
<ul class="menu expanded">
-  <li><a href="#">One</a></li>
-  <li><a href="#">Two</a></li>
-</ul>
- -
- - - -
-

Vertical Menu

Add the .vertical class to a Menu to switch its orientation.

-
<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>
- -
-

Simple Style

Add the .simple class to a Menu to remove the padding and color change. This style imitates the inline list from Foundation 5.

-
<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>
- -
-

Nested Style

Add a new menu inside the <li> of a Menu and add the class .nested to create a nested menu. The nested Menu has extra padding on the inside.

-
<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>
- -
-

Active State

Add the class .active to any <li> to create an active state. You could apply this server-side to mark the active page, or dynamically with JavaScript.

-
<ul class="menu">
-  <li class="active"><a>Home</a></li>
-  <li><a>About</a></li>
-  <li><a>Nachos</a></li>
-</ul>
- -
-

Text

Because the padding of the menu item is applied to the <a>, if you try to add an item that's text only, it will be misaligned. To get around this, add the class .menu-text to any <li> that doesn't have a link inside of it.

-
<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>
- -
-

Icons

Menu items can have icons. Wrap the text of the item in a <span>, and then add an <img> element before the <span>. If you're using the Foundation icon font, the <img> will be an <i> instead.

-
<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>
- -
-

Add the class .icon-top to the Menu to orient icons above the text.

-
<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>
- -
-

See the documentation for the Sticky plugin to see how to easily make a sticky nav bar.

- - -
-
-

Sass Reference

- -
-

Variables

- -

The default styles of this component can be customized using these Sass variables in your project's settings file.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDefault ValueDescription
$menu-marginNumber0

Margin of a menu.

-
$menu-margin-nestedNumber1rem

Left-hand margin of a nested menu.

-
$menu-item-paddingNumber0.7rem 1rem

Padding for items in a menu.

-
$menu-item-color-activeColor$white

Text color of an active menu item.

-
$menu-item-background-activeColormap-get($foundation-palette, primary)

Background color of an active menu item.

-
$menu-icon-spacingNumber0.25rem

Spacing between an icon and text in a menu item.

-
-
- -
- -
-

Mixins

- -

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.

- - -
- - - - -
- 
@include menu-base;
-
- -

Creates the base styles for a Menu.

- - - - - -
- -
- - - -
- - - - -
- 
@include menu-expand;
-
- -

Expands the items of a Menu, so each item is the same width.

- - - - - -
- -
- - - -
- - - - -
- 
@include menu-direction($dir);
-
- -

Sets the direction of a Menu.

- - - - - - - - - - - - - - - -
ParameterTypeDefault ValueDescription
$dirKeywordhorizontal

Direction of the Menu. Can be horizontal or vertical.

-
-
- -
- - - -
- - - - -
- 
@include menu-simple;
-
- -

Creates a simple Menu, which has no padding or hover state.

- - - - - -
- -
- - - -
- - - - -
- 
@include menu-nested($padding);
-
- -

Adds styles for a nested Menu, by adding margin-left to the menu.

- - - - - - - - - - - - - - - -
ParameterTypeDefault ValueDescription
$paddingKeyword or Numberauto

Length of the margin.

-
-
- -
- - - -
- - - - -
- 
@include menu-icons($position, $base);
-
- -

Adds support for icons to Menu items.

- - - - - - - - - - - - - - - - - - - - - -
ParameterTypeDefault ValueDescription
$positionKeywordside

Positioning for icons. Can be side (left, or right on RTL) or top.

-
$baseBooleantrue

Set to false to prevent the shared CSS between side- and top-aligned icons from being printed. Set this to false if you're calling the mixin multiple times on the same element.

-
-
- - - - - -
- - -
- - - - - -
- -
- -
- -
- -
- -
-
- - -
-
- - -
-
-
- -
- -
-
- -
-
-
- -
Download ZURB’s 21 Responsive Trends That Will Shape 2017
-

Stay informed with amazing responsive trends each month from ZURB.

- -
- -
-
- -
-
-
-
-

Foundation for Sites

-

Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. -

-
-
- -
-
-
-
-

Want more?

- -
-
-
-
-

Talk to us

-

Tweet us at
@ZURBfoundation

-

Get involved in
our amazing community.

-
-
-
-
-

Stay Updated

-

Keep up with the latest on Foundation. Find us on Github.

- Stay Connected -
-
-
-
-
-
-
- - Studios - Helping more than 200 startups succeed since 1998. - -
-
- - Foundation - The most advanced front-end framework in the world. - -
-
- - Notable Design Apps - Prototype, iterate and collect feedback on your products. - -
-
- - University - Ideas, thoughts and design resources shared with you. - -
-
-
- -
-
-
-
    -
    • -
    • -
    • -
-
-
- - -

© 1998‐2016 ZURB, Inc. All rights reserved.

-
-
-
- -
-
- - - - - - - - - diff --git a/_build/motion-ui.html b/_build/motion-ui.html deleted file mode 100644 index 74e5ca339..000000000 --- a/_build/motion-ui.html +++ /dev/null @@ -1,613 +0,0 @@ - - - - - - - - - - Foundation for Sites 6 Docs | Motion UI - - - - - - -
- - - -
- - -
- - -
- - - - - -
-
- - Foundation -
-
- - - - -
-
- -
- -Jump to Nav - -
-

Motion UI

- - Library - -

A Sass library for creating flexible UI transitions and animations.

- - -
- -
- -
- -
- -

Motion UI is a standalone library that powers the transition effects used in a number of Foundation components, including Toggler, Reveal, and Orbit. 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 (.fade-in and .fade-out), and one using slide classes (.slide-in-down and .slide-out-up).

-
<div data-toggler data-animate="fade-in fade-out" class="callout secondary">
-  <p>This panel fades.</p>
-</div>
-
-<div data-toggler data-animate="slide-in-down slide-out-up" class="callout secondary">
-  <p>This panel slides.</p>
-</div>

-
-
-
-

This panel fades.

-
-
-
-
-

This panel slides.

-
-
-
- -
-

Installing

Motion UI is already included in both starter projects. If you want to add it to an existing project, follow these steps.

-

First, install the library with npm or Bower.

-
npm install motion-ui --save-dev
-  bower install motion-ui --save-dev

Next, add the path [modules_folder]/motion-ui/src to your Sass compiler's import path list. Here's what you would add in Compass, via config.rb:

-
add_import_path 'node_modules/motion-ui/src'

Here's how it works using gulp-sass:

-
gulp.src('./src/scss/app.scss')
-  .pipe(sass({
-    includePaths: ['node_modules/motion-ui/src']
-  }));

Finally, import the library into your Sass file.

-
@import 'motion-ui'

Or, another way to start using Motion UI is through a CDN.

-
<!-- Insert this within your head tag and after foundation.css -->
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.1.1/motion-ui.min.css" />
-

Built-in Transitions

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:

-
@include motion-ui-transitions;
- - -
- -
-

Custom Transitions

Custom transition classes can be made using Motion UI's mixin library. Here's an example of a custom hinge. Refer to Motion UI's transition documentation to learn more.

-
@include mui-hinge(
-  $state: in,
-  $from: top,
-  $turn-origin: from-back,
-  $duration: 0.5s,
-  $timing: easeInOut
-);
-

Animation

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 to learn more.

-

-
-
- -
-
- -
-
- -
-
- -
-

JavaScript Reference

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 js/foundation.util.motion.js. If you are using the Foundation version of this utility, and you wish to animate your own elements, trigger it this way:

-
var elem = $('#elem-to-animate');
-
-Foundation.Motion.animateIn(elem, animationClass [, callback]);
-Foundation.Motion.animateOut(elem, animationClass [, callback]);

The callback is optional in this case, and will fire when the animation is complete.

-
-

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. -
- If you are individually including your <script> tags, make sure you are including the js/foundation.util.motion.js path. -

-
- - - - - -
- -
- -
- -
- -
- -
-
- - -
-
- - -
-
-
- -
- -
-
- -
-
-
- -
Download ZURB’s 21 Responsive Trends That Will Shape 2017
-

Stay informed with amazing responsive trends each month from ZURB.

- -
- -
-
- -
-
-
-
-

Foundation for Sites

-

Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. -

-
-
- -
-
-
-
-

Want more?

- -
-
-
-
-

Talk to us

-

Tweet us at
@ZURBfoundation

-

Get involved in
our amazing community.

-
-
-
-
-

Stay Updated

-

Keep up with the latest on Foundation. Find us on Github.

- Stay Connected -
-
-
-
-
-
-
- - Studios - Helping more than 200 startups succeed since 1998. - -
-
- - Foundation - The most advanced front-end framework in the world. - -
-
- - Notable Design Apps - Prototype, iterate and collect feedback on your products. - -
-
- - University - Ideas, thoughts and design resources shared with you. - -
-
-
- -
-
-
-
    -
    • -
    • -
    • -
-
-
- - -

© 1998‐2016 ZURB, Inc. All rights reserved.

-
-
-
- -
-
- - - - - - - - - diff --git a/_build/navigation.html b/_build/navigation.html deleted file mode 100644 index 1f11cb36c..000000000 --- a/_build/navigation.html +++ /dev/null @@ -1,732 +0,0 @@ - - - - - - - - - - Foundation for Sites 6 Docs | Navigation - - - - - - -
- - - -
- - -
- - -
- - - - - -
-
- - Foundation -
-
- - - - -
-
- -
- -Jump to Nav - -
-

Navigation

- - -

Foundation is bundled with many simple navigation patterns, which can be combined to form more complex, robust responsive navigation solutions.

- - -
- -
- -
- -
- -

Basics: Menu

The Menu is an all-purpose navigation component. It can be aligned horizontally or vertically, can be nested, and supports icons. Learn more about the Menu.

-

All menus use the ul > li > a 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.

-

Here's a basic Menu.

-
<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>
- -
-

To nest menus, add a new <ul> inside of an <li>, after the <a> inside.

-
<ul class="menu">
-  <li>
-    <a href="#">Item One</a>
-    <ul class="menu">
-      <li><a href="#">Item One-one</a></li>
-    </ul>
-  </li>
-  <li><a href="#">Item Two</a></li>
-  <li><a href="#">Item Three</a></li>
-</ul>
-

Top Bar

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. Learn more about the top bar.

-
-
- -
-
-
    -
    • -
    • -
-
-
- -
-

The basic Menu can be enhanced with one of three Menu plugins. All three use the exact same markup to create a different style of multi-tier navigation.

-

The dropdown menu plugin (data-dropdown-menu) converts a nested menu into a series of dropdown menus. The nested menus can be opened through hover, click, or keyboard. Learn more about the dropdown menu.

- - -
-

Drilldown Menu

The drilldown menu plugin (data-drilldown) converts a nested menu into a series of sliding menus. Clicking an item slides the next level menu into view. Learn more about the drilldown menu.

- - -
-

Accordion Menu

The accordion menu plugin (data-accordion-menu) converts a nested menu into a series of collapsed accordions. Clicking an item slides down the nested menu. Learn more about the accordion menu.

-
-
  • - Item 1 - -
    • -
  • - Item 2 - -
    • -
  • Item 3
    • -
    - -
    -

    Responsive Navigation

    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.

    -

    Our responsive menu plugin (data-responsive-menu) 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. Learn more about the responsive Menu plugin.

    - - -
    -

    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 (data-responsive-toggle). This plugin works with any container, not just a menu. Learn more about the responsive toggle plugin.

    -

    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.

    -
    - -
    Menu
    -
    - -
    -
    - -
    -
    -
      -
      • -
      • -
    -
    -
    - -
    -

    See the documentation for the Sticky plugin to see how to easily make a sticky nav bar.

    - - - - - -
    - -
    - -
    - -
    - -
    - -
    -
    - - -
    -
    - - -
    -
    -
    - -
    - -
    -
    - -
    -
    -
    - -
    Download ZURB’s 21 Responsive Trends That Will Shape 2017
    -

    Stay informed with amazing responsive trends each month from ZURB.

    -     -
    - -
    -
    - -
    -
    -
    -
    -

    Foundation for Sites

    -

    Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. -

    -
    -
    - -
    -
    -
    -
    -

    Want more?

    - -
    -
    -
    -
    -

    Talk to us

    -

    Tweet us at
    @ZURBfoundation

    -

    Get involved in
    our amazing community.

    -
    -
    -
    -
    -

    Stay Updated

    -

    Keep up with the latest on Foundation. Find us on Github.

    - Stay Connected -
    -
    -
    -
    -
    -
    -
    - - Studios - Helping more than 200 startups succeed since 1998. - -
    -
    - - Foundation - The most advanced front-end framework in the world. - -
    -
    - - Notable Design Apps - Prototype, iterate and collect feedback on your products. - -
    -
    - - University - Ideas, thoughts and design resources shared with you. - -
    -
    -
    - -
    -
    -
    -
      -
      • -
      • -
      • -
    -
    -
    - - -

    © 1998‐2016 ZURB, Inc. All rights reserved.

    -
    -
    -
    - -
    -
    - - - - - - - - - diff --git a/_build/off-canvas.html b/_build/off-canvas.html deleted file mode 100644 index e877ffac1..000000000 --- a/_build/off-canvas.html +++ /dev/null @@ -1,1096 +0,0 @@ - - - - - - - - - - Foundation for Sites 6 Docs | Off-canvas - - - - - - -
    - - - -
    - - -
    - - -
    - - - - - -
    -
    - - Foundation -
    -
    - - - - -
    -
    - -
    - -Jump to Nav - -
    -

    Off-canvas

    - - JavaScript - -

    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.

    - - -
    - -
    - -
    - -
    - - - -

    Setup

    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.

    -
      -
    • The outer wrapper has the class .off-canvas-wrapper.
      • -
    • The inner wrapper has the class .off-canvas-wrapper-inner and the attribute data-off-canvas-wrapper.
      • -
    -
    <body>
-  <div class="off-canvas-wrapper">
-    <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper></div>
-  </div>
-</body>

    Inside these wrappers, create an off-canvas menu with the class .off-canvas and the attribute data-off-canvas. The menu also needs a positioning class, which can be .position-left or .position-right, and an attribute set for the position, data-position="left" or data-position="right". Last, make sure the off-canvas has a unique ID so it can be targeted.

    -

    Along with the menu, the main content of your page will be housed in its own container with the class .off-canvas-content and attribute data-off-canvas-content. You will be putting your actual page content inside a class of .off-canvas-content.)

    -
    <body>
-  <div class="off-canvas-wrapper">
-    <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
-      <div class="off-canvas position-left" id="offCanvas" data-off-canvas></div>
-      <div class="off-canvas-content" data-off-canvas-content></div>
-    </div>
-  </div>
-</body>

    Here's a complete example that can be pasted into the <body> tag of your page. It includes a close button and basic menu styles.

    -
    <body>
-  <div class="off-canvas-wrapper">
-    <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
-      <div class="off-canvas position-left" id="offCanvas" data-off-canvas>
-
-        <!-- Close button -->
-        <button class="close-button" aria-label="Close menu" type="button" data-close>
-          <span aria-hidden="true">&times;</span>
-        </button>
-
-        <!-- Menu -->
-        <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>
-        <!-- Page content -->
-      </div>
-    </div>
-  </div>
-</body>

    Click Triggers

    To create a click trigger that opens the menu, add the attribute data-open or data-toggle 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.

    -
    <button type="button" class="button" data-toggle="offCanvas">Open Menu</button>
    -

    Multiple Menus

    A design can have two menus: one on the left, and one on the right. Be sure that both menus come before the .off-canvas-content wrapper—this is required for the CSS to apply correctly.

    -
    -

    When using Foundation in right-to-left mode, "right" still means right, and "left" still means left.

    -
    - -
    <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></div>
-      <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right"></div>
-      <div class="off-canvas-content" data-off-canvas-content></div>
-    </div>
-  </div>
-</body>
    - - -
    -

    Title Bar

    If you need a simple title bar to toggle the off-canvas, .title-bar is here to help. It supports left- and right-aligned sections.

    -
    <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>
    - -
    -
    - - Foundation -
    -
    - -
    -


    -

    Responsive Off-Canvas (Putting it all together)

    For an example of off-canvas on small screens and Top Bar Menu with Dropdowns, check out this Building Block: http://zurb.com/building-blocks/top-bar-with-off-canvas

    -
    -

    Reveal on Larger Screens

    The left- and right-hand off-canvas panes can be set to be persistent on larger screens. Add the class .reveal-for-medium or .reveal-for-large to the off-canvas menu.

    -

    The main content area (.off-canvas-content) will be padded to the left or right equal to the width of the container.

    -
    -

    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 $offcanvas-fixed-reveal variable to false.

    -
    - -
    -

    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 visibility classes can help you with that.

    -
    - -
    <div class="off-canvas position-left reveal-for-large" data-off-canvas>
-  <!-- ... -->
-</div>
    - - -
    -
    -

    Sass Reference

    - -
    -

    Variables

    - -

    The default styles of this component can be customized using these Sass variables in your project's settings file.

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameTypeDefault ValueDescription
    $offcanvas-sizeNumber250px

    Width of an off-canvas menu.

    -
    $offcanvas-backgroundColor$light-gray

    Background color of an off-canvas menu.

    -
    $offcanvas-zindexNumber-1

    Z-index of an off-canvas menu.

    -
    $offcanvas-transition-lengthNumber0.5s

    Length of the animation on an off-canvas menu.

    -
    $offcanvas-transition-timingKeywordease

    Timing function of the animation on an off-canvas menu.

    -
    $offcanvas-fixed-revealtrue

    If true, a revealed off-canvas will be fixed-position, and scroll with the screen.

    -
    $offcanvas-exit-backgroundColorrgba($white, 0.25)

    Background color for the overlay that appears when an off-canvas menu is open.

    -
    $maincontent-class'off-canvas-content'

    CSS class used for the main content area. The off-canvas mixins use this to target the page body.

    -
    $maincontent-shadowShadow0 0 10px rgba($black, 0.5)

    Box shadow to place under the main content area. This shadow overlaps the off-canvas menus.

    -
    $titlebar-backgroundColor$black

    Background color of a title bar.

    -
    $titlebar-colorColor$white

    Color of text inside a title bar.

    -
    $titlebar-paddingLength0.5rem

    Padding inside a title bar.

    -
    $titlebar-text-font-weightWeightbold

    Font weight of text inside a title bar.

    -
    $titlebar-icon-colorColor$white

    Color of menu icons inside a title bar.

    -
    $titlebar-icon-color-hoverColor$medium-gray

    Color of menu icons inside a title bar on hover.

    -
    $titlebar-icon-spacingLength0.25rem

    Spacing between the menu icon and text inside a title bar.

    -
    -
    - -
    - -
    -

    Mixins

    - -

    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.

    - - -
    -

    off-canvas-basics

    - - - -
    - 
    @include off-canvas-basics;
    -
    - -

    Adds baseline styles for off-canvas. This CSS is required to make the other pieces work.

    - - - - - -
    - -
    - - - -
    -

    off-canvas-base

    - - - -
    - 
    @include off-canvas-base;
    -
    - -

    Adds basic styles for an off-canvas menu.

    - - - - - -
    - -
    - - - -
    -

    off-canvas-reveal

    - - - -
    - 
    @include off-canvas-reveal($position);
    -
    - -

    Adds styles that reveal an off-canvas menu.

    - - - - - - - - - - - - - - - -
    ParameterTypeDefault ValueDescription
    $positionKeywordleft

    Position of the off-canvas menu being revealed.

    -
    -
    - - - - - -
    - - -
    - -
    -
    -

    JavaScript Reference

    - - -
    -

    Initializing

    - -

    The file foundation.offcanvas.js must be included in your JavaScript to use this plugin, along with foundation.core.js. This plugin also requires these utility libraries:

    - - -
      -
    • foundation.util.mediaQuery.js
      • -
    - -
      -
    • foundation.util.triggers.js
      • -
    - -
      -
    • foundation.util.motion.js
      • -
    - - -
    - - -
    -

    Foundation.OffCanvas

    - -

    Creates a new instance of an off-canvas wrapper.

    - - - 
    var elem = new Foundation.OffCanvas(element, options);
    - -

    Fires these events: - OffCanvas#event:init -

    - - - - - - - - - - - - - - - -
    NameTypeDescription
    elementObjectjQuery object to initialize.
    optionsObjectOverrides to the default plugin settings.
    -
    - -
    - -
    -

    Plugin Options

    - -

    Use these options to customize an instance of Off-canvas. Plugin options can be set as individual data attributes, one combined data-options attribute, or as an object passed to the plugin's constructor. Learn more about how JavaScript plugins are initialized.

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameDefaultDescription
    data-close-on-clicktrueAllow the user to click outside of the menu to close it.
    data-transition-time500Amount of time in ms the open and close transition requires. If none selected, pulls from body style.
    data-positionleftDirection the offcanvas opens from. Determines class applied to body.
    data-force-toptrueForce the page to scroll to top on open.
    data-is-revealedfalseAllow the offcanvas to remain open for certain breakpoints.
    data-reveal-onreveal-for-largeBreakpoint at which to reveal. JS will use a RegExp to target standard classes, if changing classnames, pass your class with the `revealClass` option.
    data-auto-focustrueForce focus to the offcanvas on open. If true, will focus the opening trigger on close.
    data-reveal-classreveal-for-largeClass used to force an offcanvas to remain open. Foundation defaults for this are `reveal-for-large` & `reveal-for-medium`.
    data-trap-focustrueTriggers optional focus trapping when opening an offcanvas. Sets tabindex of [data-off-canvas-content] to -1 for accessibility purposes.
    -
    - -
    - -
    -

    Events

    - -

    These events will fire from any element with a Off-canvas plugin attached.

    - - - - - - - - - - - - - -
    NameDescription
    opened.zf.offcanvasFires when the off-canvas menu opens.
    closed.zf.offcanvasFires when the off-canvas menu opens.
    -
    - -
    - -
    -

    Methods

    - -
    -

    reveal

    - -
    - 
    $('#element').foundation('reveal', isRevealed);
    -
    - -

    Handles the revealing/hiding the off-canvas at breakpoints, not the same as open.

    - - - - - - - - - - - - -
    NameTypeDescription
    isRevealedBooleantrue if element should be revealed.
    - -
    -
    -
    -

    open

    - -
    - 
    $('#element').foundation('open', event, trigger);
    -
    - -

    Opens the off-canvas menu.

    - - -

    Fires these events: - OffCanvas#event:opened -

    - - - - - - - - - - - - - - - -
    NameTypeDescription
    eventObjectEvent object passed from listener.
    triggerjQueryelement that triggered the off-canvas to open.
    - -
    -
    -
    -

    close

    - -
    - 
    $('#element').foundation('close', cb);
    -
    - -

    Closes the off-canvas menu.

    - - -

    Fires these events: - OffCanvas#event:closed -

    - - - - - - - - - - -
    NameTypeDescription
    cbfunctionoptional cb to fire after closure.
    - -
    -
    -
    -

    toggle

    - -
    - 
    $('#element').foundation('toggle', event, trigger);
    -
    - -

    Toggles the off-canvas menu open or closed.

    - - - - - - - - - - - - - - - - - -
    NameTypeDescription
    eventObjectEvent object passed from listener.
    triggerjQueryelement that triggered the off-canvas to open.
    - -
    -
    -
    -

    destroy

    - -
    - 
    $('#element').foundation('destroy');
    -
    - -

    Destroys the offcanvas plugin.

    - - - - - -
    -
    -
    - - - - -
    - -
    - -
    - -
    - -
    - -
    -
    - - -
    -
    - - -
    -
    -
    - -
    - -
    -
    - -
    -
    -
    - -
    Download ZURB’s 21 Responsive Trends That Will Shape 2017
    -

    Stay informed with amazing responsive trends each month from ZURB.

    -     -
    - -
    -
    - -
    -
    -
    -
    -

    Foundation for Sites

    -

    Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. -

    -
    -
    - -
    -
    -
    -
    -

    Want more?

    - -
    -
    -
    -
    -

    Talk to us

    -

    Tweet us at
    @ZURBfoundation

    -

    Get involved in
    our amazing community.

    -
    -
    -
    -
    -

    Stay Updated

    -

    Keep up with the latest on Foundation. Find us on Github.

    - Stay Connected -
    -
    -
    -
    -
    -
    -
    - - Studios - Helping more than 200 startups succeed since 1998. - -
    -
    - - Foundation - The most advanced front-end framework in the world. - -
    -
    - - Notable Design Apps - Prototype, iterate and collect feedback on your products. - -
    -
    - - University - Ideas, thoughts and design resources shared with you. - -
    -
    -
    - -
    -
    -
    -
      -
      • -
      • -
      • -
    -
    -
    - - -

    © 1998‐2016 ZURB, Inc. All rights reserved.

    -
    -
    -
    - -
    -
    - - - - - - - - - diff --git a/_build/orbit.html b/_build/orbit.html deleted file mode 100644 index 396f7633e..000000000 --- a/_build/orbit.html +++ /dev/null @@ -1,1256 +0,0 @@ - - - - - - - - - - Foundation for Sites 6 Docs | Orbit - - - - - - -
    - - - -
    - - -
    - - -
    - - - - - -
    -
    - - Foundation -
    -
    - - - - -
    -
    - -
    - -Jump to Nav - -
    -

    Orbit

    - - JavaScript - Motion UI - -

    An image and content carousel with animation support and many customizable options.

    - - -
    - -
    - -
    - -
    - -

    Basics

    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.

    -
    <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>&#9664;&#xFE0E;</button>
-    <button class="orbit-next"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</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>
    - -
    -
      - - -
    • - Space -
      Space, the final frontier.
      -
      • -
    • - Space -
      Lets Rocket!
      -
      • -
    • - Space -
      Encapsulating
      -
      • -
    • - Space -
      Outta This World
      -
      • -
    - -
    -

    Wrapper

    The wrapper houses the entire carousel. We use the aria-label attribute to label what the carousel is, for assistive technology.

    -
    <div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
-</div>

    Slide Container

    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 data-orbit wrapper.

    -

    Each slide is an <li> with the class .orbit-slide. The first slide is marked with the .is-active 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.

    -
    <ul class="orbit-container">
-  <li class="orbit-slide is-active">
-    <img class="orbit-image" src="assets/img/orbit/01.jpg" alt="Space">
-    <figcaption class="orbit-caption">Space, the final frontier.</figcaption>
-  </li>
-  <!-- More slides... -->
-</ul>

    Next/Previous Arrows

    Orbit controls use the class .orbit-previous and .orbit-next. 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 .show-for-sr) that explain what the controls do.

    -
    <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span> &#9664;&#xFE0E;</button>
-<button class="orbit-next"><span class="show-for-sr">Next Slide</span> &#9654;&#xFE0E;</button>

    Bullets

    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.

    -
    <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>
    -
    -

    Slide Contents

    A carousel slide can contain images or HTML—you can even mix between slides in one carousel!

    -
    <li class="orbit-slide">
-  <div>
-    <h3 class="text-center">2: 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 slider does not use animations.</h3>
-  </div>
-</li>
    -
      - - -
    • -
      -

      This is dodgerblue. 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.

      -
      -
      • -
    • -
      -

      This is rebeccapurple. 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.

      -
      -
      • -
    • -
      -

      This is darkgoldenrod. 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.

      -
      -
      • -
    • -
      -

      This is lightseagreen. 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.

      -
      -
      • -
    - -
    - -
    -

    Using Animation

    Orbit uses Motion UI CSS classes to animate slides around.

    -
    -

    Without the inclusion of the motion-ui Motion UI CSS file in your template, Orbit slider fails to work properly.

    -
    - -

    There are four plugin options you can set to change the default effects:

    -
      -
    • data-anim-in-from-left: transition to play when a slide comes in from the left.
      • -
    • data-anim-in-from-right: transition to play when a slide comes in from the right.
      • -
    • data-anim-out-from-left: transition to play when a slide comes out from the left.
      • -
    • data-anim-out-from-right: transition to play when a slide comes out from the right.
      • -
    -

    Since those option names are pretty long, you can also set them all in one HTML attribute, using data-options:

    -
    <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;">
-</div>
    -
      - - -
    • - Space -
      Space, the final frontier.
      -
      • -
    • - Space -
      Lets Rocket!
      -
      • -
    • - Space -
      Encapsulating
      -
      • -
    • - Space -
      Outta This World
      -
      • -
    - -
    - -
    -

    Disabling Animation

    To disable Motion UI, set the plugin option useMUI to false. Written as an HTML attribute, that's data-use-m-u-i="false".

    -
    <div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit data-use-m-u-i="false">
-</div>
    -
      - - -
    • - Space -
      Space, the final frontier.
      -
      • -
    • - Space -
      Lets Rocket!
      -
      • -
    • - Space -
      Encapsulating
      -
      • -
    • - Space -
      Outta This World
      -
      • -
    - -
    - - -
    -
    -

    Sass Reference

    - -
    -

    Variables

    - -

    The default styles of this component can be customized using these Sass variables in your project's settings file.

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameTypeDefault ValueDescription
    $orbit-bullet-backgroundColor$medium-gray

    Default color for Orbit's bullets.

    -
    $orbit-bullet-background-activeColor$dark-gray

    Default active color for Orbit's bullets.

    -
    $orbit-bullet-diameterNumber1.2rem

    Default diameter for Orbit's bullets.

    -
    $orbit-bullet-marginNumber0.1rem

    Default margin between Orbit's bullets.

    -
    $orbit-bullet-margin-topNumber0.8rem

    Default distance from slide region for Orbit's bullets.

    -
    $orbit-bullet-margin-bottomNumber0.8rem

    Default bottom margin from Orbit's bullets to whatever content may lurk below it.

    -
    $orbit-caption-backgroundColorrgba($black, 0.5)

    Default background color for Orbit's caption.

    -
    $orbit-caption-paddingNumber1rem

    Default padding for Orbit's caption.

    -
    $orbit-control-background-hoverColorrgba($black, 0.5)

    Default background color for Orbit's controls when hovered.

    -
    $orbit-control-paddingNumber1rem

    Default padding for Orbit's controls.

    -
    $orbit-control-zindexNumber10

    Default z-index for Orbit's controls.

    -
    -
    - -
    - -
    -

    Mixins

    - -

    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.

    - - -
    -

    orbit-wrapper

    - - - -
    - 
    @include orbit-wrapper;
    -
    - -

    Adds styles for the outer Orbit wrapper. These styles are used on the .orbit class.

    - - - - - -
    - -
    - - - -
    -

    orbit-container

    - - - -
    - 
    @include orbit-container;
    -
    - -

    Adds styles for the inner Orbit slide container. These styles are used on the .orbit-container class.

    - - - - - -
    - -
    - - - -
    -

    orbit-slide

    - - - -
    - 
    @include orbit-slide;
    -
    - -

    Adds styles for the individual slides of an Orbit slider. These styles are used on the .orbit-slide class.

    - - - - - -
    - -
    - - - -
    -

    orbit-image

    - - - -
    - 
    @include orbit-image;
    -
    - -

    Adds styles for a slide containing an image. These styles are used on the .orbit-image class.

    - - - - - -
    - -
    - - - -
    -

    orbit-caption

    - - - -
    - 
    @include orbit-caption;
    -
    - -

    Adds styles for an orbit slide caption. These styles are used on the .orbit-caption class.

    - - - - - -
    - -
    - - - -
    -

    orbit-control

    - - - -
    - 
    @include orbit-control;
    -
    - -

    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.

    - - - - - -
    - -
    - - - -
    -

    orbit-previous

    - - - -
    - 
    @include orbit-previous;
    -
    - -

    Adds styles for the Orbit previous button. These styles are used on the .orbit-previous class.

    - - - - - -
    - -
    - - - -
    -

    orbit-next

    - - - -
    - 
    @include orbit-next;
    -
    - -

    Adds styles for the Orbit next button. These styles are used on the .orbit-next class.

    - - - - - -
    - -
    - - - -
    -

    orbit-bullets

    - - - -
    - 
    @include orbit-bullets;
    -
    - -

    Adds styles for a container of Orbit bullets. Adds styles for the Orbit previous button. These styles are used on the .orbit-bullets class.

    - - - - - -
    - - - - - -
    - - -
    - -
    -
    -

    JavaScript Reference

    - - -
    -

    Initializing

    - -

    The file foundation.orbit.js must be included in your JavaScript to use this plugin, along with foundation.core.js. This plugin also requires these utility libraries:

    - - -
      -
    • foundation.util.keyboard.js
      • -
    - -
      -
    • foundation.util.motion.js
      • -
    - -
      -
    • foundation.util.timerAndImageLoader.js
      • -
    - -
      -
    • foundation.util.touch.js
      • -
    - - -
    - - -
    -

    Foundation.Orbit

    - -

    Creates a new instance of an orbit carousel.

    - - - 
    var elem = new Foundation.Orbit(element, options);
    - - - - - - - - - - - - - - - - -
    NameTypeDescription
    elementjQueryjQuery object to make into an Orbit Carousel.
    optionsObjectOverrides to the default plugin settings.
    -
    - -
    - -
    -

    Plugin Options

    - -

    Use these options to customize an instance of Orbit. Plugin options can be set as individual data attributes, one combined data-options attribute, or as an object passed to the plugin's constructor. Learn more about how JavaScript plugins are initialized.

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameDefaultDescription
    data-bulletstrueTells the JS to look for and loadBullets.
    data-nav-buttonstrueTells the JS to apply event listeners to nav buttons
    data-anim-in-from-rightslide-in-rightmotion-ui animation class to apply
    data-anim-out-to-rightslide-out-rightmotion-ui animation class to apply
    data-anim-in-from-leftslide-in-leftmotion-ui animation class to apply
    data-anim-out-to-leftslide-out-leftmotion-ui animation class to apply
    data-auto-playtrueAllows Orbit to automatically animate on page load.
    data-timer-delay5000Amount of time, in ms, between slide transitions
    data-infinite-wraptrueAllows Orbit to infinitely loop through the slides
    data-swipetrueAllows the Orbit slides to bind to swipe events for mobile, requires an additional util library
    data-pause-on-hovertrueAllows the timing function to pause animation on hover.
    data-accessibletrueAllows Orbit to bind keyboard events to the slider, to animate frames with arrow keys
    data-container-classorbit-containerClass applied to the container of Orbit
    data-slide-classorbit-slideClass applied to individual slides.
    data-box-of-bulletsorbit-bulletsClass applied to the bullet container. You're welcome.
    data-next-classorbit-nextClass applied to the `next` navigation button.
    data-prev-classorbit-previousClass applied to the `previous` navigation button.
    data-use-m-u-itrueBoolean to flag the js to use motion ui classes or not. Default to true for backwards compatability.
    -
    - -
    - -
    -

    Events

    - -

    These events will fire from any element with a Orbit plugin attached.

    - - - - - - - - - -
    NameDescription
    slidechange.zf.orbitTriggers when the slide has finished animating in.
    -
    - -
    - -
    -

    Methods

    - -
    -

    geoSync

    - -
    - 
    $('#element').foundation('geoSync');
    -
    - -

    Sets a timer object on the orbit, and starts the counter for the next slide.

    - - - - -
    -
    -
    -

    changeSlide

    - -
    - 
    $('#element').foundation('changeSlide', isLTR, chosenSlide, idx);
    -
    - -

    Changes the current slide to a new one.

    - - -

    Fires these events: - Orbit#event:slidechange -

    - - - - - - - - - - - - - - - - - - - - -
    NameTypeDescription
    isLTRBooleanflag if the slide should move left to right.
    chosenSlidejQuerythe jQuery element of the slide to show next, if one is selected.
    idxNumberthe index of the new slide in its collection, if one chosen.
    - -
    -
    -
    -

    destroy

    - -
    - 
    $('#element').foundation('destroy');
    -
    - -

    Destroys the carousel and hides the element.

    - - - - - -
    -
    -
    - - - - -
    - -
    - -
    - -
    - -
    - -
    -
    - - -
    -
    - - -
    -
    -
    - -
    - -
    -
    - -
    -
    -
    - -
    Download ZURB’s 21 Responsive Trends That Will Shape 2017
    -

    Stay informed with amazing responsive trends each month from ZURB.

    -     -
    - -
    -
    - -
    -
    -
    -
    -

    Foundation for Sites

    -

    Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. -

    -
    -
    - -
    -
    -
    -
    -

    Want more?

    - -
    -
    -
    -
    -

    Talk to us

    -

    Tweet us at
    @ZURBfoundation

    -

    Get involved in
    our amazing community.

    -
    -
    -
    -
    -

    Stay Updated

    -

    Keep up with the latest on Foundation. Find us on Github.

    - Stay Connected -
    -
    -
    -
    -
    -
    -
    - - Studios - Helping more than 200 startups succeed since 1998. - -
    -
    - - Foundation - The most advanced front-end framework in the world. - -
    -
    - - Notable Design Apps - Prototype, iterate and collect feedback on your products. - -
    -
    - - University - Ideas, thoughts and design resources shared with you. - -
    -
    -
    - -
    -
    -
    -
      -
      • -
      • -
      • -
    -
    -
    - - -

    © 1998‐2016 ZURB, Inc. All rights reserved.

    -
    -
    -
    - -
    -
    - - - - - - - - - diff --git a/_build/pagination.html b/_build/pagination.html deleted file mode 100644 index 8333fcd4e..000000000 --- a/_build/pagination.html +++ /dev/null @@ -1,760 +0,0 @@ - - - - - - - - - - Foundation for Sites 6 Docs | Pagination - - - - - - -
    - - - -
    - - -
    - - -
    - - - - - -
    -
    - - Foundation -
    -
    - - - - -
    -
    - -
    - -Jump to Nav - -
    -

    Pagination

    - - -

    Pagination is a type of navigation that lets users click through pages of search results, products, or other related items.

    - - -
    - -
    - -
    - -
    - -

    Basics

    A pagination list is just a <ul> with the class .pagination, and a series of <li>/<a> pairs. Add the class .current to an <li> to mark the current page, or .disabled to add disabled styles to a link.

    -

    Note that the container has the attributes role="navigation" and aria-label="Pagination". These explain the purpose of the component to assistive technologies.

    -

    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".

    -
    <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>
    - -
    -

    Centered

    The items in a pagination list are display: inline-block, which makes centering them easy. Use our built-in .text-center class, or add text-align: center in your CSS.

    -
    <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>
    - -
    - -
    -
    -

    Sass Reference

    - -
    -

    Variables

    - -

    The default styles of this component can be customized using these Sass variables in your project's settings file.

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameTypeDefault ValueDescription
    $pagination-font-sizeNumberrem-calc(14)

    Font size of pagination items.

    -
    $pagination-margin-bottomNumber$global-margin

    Default bottom margin of the pagination object.

    -
    $pagination-item-colorColor$black

    Text color of pagination items.

    -
    $pagination-item-paddingNumberrem-calc(3 10)

    Padding inside of pagination items.

    -
    $pagination-item-spacingNumberrem-calc(1)

    Right margin to separate pagination items.

    -
    $pagination-radiusNumber$global-radius

    Default radius for pagination items.

    -
    $pagination-item-background-hoverColor$light-gray

    Background color of pagination items on hover.

    -
    $pagination-item-background-currentColor$primary-color

    Background color of pagination item for the current page.

    -
    $pagination-item-color-currentColorforeground($pagination-item-background-current)

    Text color of the pagination item for the current page.

    -
    $pagination-item-color-disabledColor$medium-gray

    Text color of a disabled pagination item.

    -
    $pagination-ellipsis-colorColor$black

    Color of the ellipsis in a pagination menu.

    -
    $pagination-mobile-itemsBooleanfalse

    If false, don't display page number links on mobile, only next/previous links.

    -
    $pagination-arrowsBooleantrue

    If true, arrows are added to the next and previous links of pagination.

    -
    -
    - -
    - -
    -

    Mixins

    - -

    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.

    - - -
    -

    pagination-container

    - - - -
    - 
    @include pagination-container;
    -
    - -

    Adds styles for a pagination container. Apply this to a <ul>.

    - - - - - -
    - -
    - - - -
    -

    pagination-item-current

    - - - -
    - 
    @include pagination-item-current;
    -
    - -

    Adds styles for the current pagination item. Apply this to an <a>.

    - - - - - -
    - -
    - - - -
    -

    pagination-item-disabled

    - - - -
    - 
    @include pagination-item-disabled;
    -
    - -

    Adds styles for a disabled pagination item. Apply this to an <a>.

    - - - - - -
    - -
    - - - -
    -

    pagination-ellipsis

    - - - -
    - 
    @include pagination-ellipsis;
    -
    - -

    Adds styles for an ellipsis for use in a pagination list.

    - - - - - -
    - - - - - -
    - - -
    - - - - - -
    - -
    - -
    - -
    - -
    - -
    -
    - - -
    -
    - - -
    -
    -
    - -
    - -
    -
    - -
    -
    -
    - -
    Download ZURB’s 21 Responsive Trends That Will Shape 2017
    -

    Stay informed with amazing responsive trends each month from ZURB.

    -     -
    - -
    -
    - -
    -
    -
    -
    -

    Foundation for Sites

    -

    Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. -

    -
    -
    - -
    -
    -
    -
    -

    Want more?

    - -
    -
    -
    -
    -

    Talk to us

    -

    Tweet us at
    @ZURBfoundation

    -

    Get involved in
    our amazing community.

    -
    -
    -
    -
    -

    Stay Updated

    -

    Keep up with the latest on Foundation. Find us on Github.

    - Stay Connected -
    -
    -
    -
    -
    -
    -
    - - Studios - Helping more than 200 startups succeed since 1998. - -
    -
    - - Foundation - The most advanced front-end framework in the world. - -
    -
    - - Notable Design Apps - Prototype, iterate and collect feedback on your products. - -
    -
    - - University - Ideas, thoughts and design resources shared with you. - -
    -
    -
    - -
    -
    -
    -
      -
      • -
      • -
      • -
    -
    -
    - - -

    © 1998‐2016 ZURB, Inc. All rights reserved.

    -
    -
    -
    - -
    -
    - - - - - - - - - diff --git a/_build/panini.html b/_build/panini.html deleted file mode 100644 index c4d1755f9..000000000 --- a/_build/panini.html +++ /dev/null @@ -1,602 +0,0 @@ - - - - - - - - - - Foundation for Sites 6 Docs | Panini - - - - - - -
    - - - -
    - - -
    - - -
    - - - - - -
    -
    - - Foundation -
    -
    - - - - -
    -
    - -
    - -Jump to Nav - -
    -

    Panini

    - - Library - -

    A flat file compiler that powers our prototyping template. Create pages with consistent layouts and reusable partials with ease.

    - - -
    - -
    - -
    - -
    - -

    -

    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.

    -

    Panini is a flat file compiler that uses the concepts of templates, pages, and partials—powered by the Handlebars templating language—to streamline the process of creating static prototypes.

    -

    Our prototyping template 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 Panini GitHub page.

    -
    -

    Basics: Templates & Pages

    A template 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 src/layouts/default.html.

    -

    Here's what a basic template might look like:

    -
    <html>
-  <head>
-    <title>Definitely a Website!</title>
-  </head>
-  <body>
-    <header class="header"><!-- ... --></header>
-    {{> body}}
-    <footer class="footer"><!-- ... --></footer>
-  </body>
-</html>

    In the middle of the HTML is a bit of Handlebars code: {{> body}}. This is where the pages you write are injected when Panini runs, giving you a series of complete HTML files at the end.

    -

    The pages 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 src/pages/index.html.

    -

    A basic page might look like this:

    -
    <h1>Page Title</h1>
-<p>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.</p>

    Note that there's no <html> or <body> tags, and no header or footer. This code will be injected into the {{> body}} declaration when Panini assembles your pages.

    -

    In the prototyping template, these finished files are compiled into a standalone folder called dist (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 Hosted Prototypes service.

    -
    -

    Partials

    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.

    -

    Here's an example of a layout file that divides its key sections into partials:

    -
    <html>
-  <head>
-    <title>Definitely STILL a Website!</title>
-  </head>
-  <body>
-    {{> header}}
-    {{> navigation}}
-    {{> body}}
-    {{> footer}}
-  </body>
-</html>

    The {{> }} 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 header.html, navigation.html, and footer.html. In the prototyping template, these files all exist within src/partials.

    -
    -

    Page Variables

    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.

    -

    page

    Prints the name of the current page, without its original file extension. In the below example, if the page is index.html, {{page}} will become index.

    -
    <p>You are here: {{page}}</p>

    root

    Use {{root}} before a file path to make sure it works no matter what folder the current page is in.

    -

    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.

    -

    Here's how you'd use it with a <link> tag:

    -
    <link rel="stylesheet" href="{{root}}assets/css/app.css">

    If the page is index.html, the path will look like this:

    -
    <link rel="stylesheet" href="assets/css/app.css">

    If the page is folder/page.html, the path will look like this:

    -
    <link rel="stylesheet" href="../assets/css/app.css">

    The ../ is added only on pages in a sub-folder, so the CSS can still be properly loaded.

    -
    -

    Helpers

    Helpers are special functions that manipulate content on the page. In addition to Handlebars's built-in helpers, Panini includes a few custom helpers and you can add your own.

    -

    ifequal

    Displays the HTML inside the helper if the two values are equal.

    -
    {{#ifequal foo bar}}
-  <p>foo and bar are equal</p>
-{{/ifequal}}

    ifpage

    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 index.html page.

    -
    {{#ifpage 'index'}}
-  <p>This is definitely the Index page.</p>
-{{/ifpage}}

    You can also check for multiple pages. If any name in the list matches the current page, the HTML will appear.

    -
    {{#ifpage 'index' 'about'}}
-  <p>This is definitely either the Index or About page.</p>
-{{/ifpage}}

    unlesspage

    The opposite of #ifpage, #unlesspage will only display the HTML inside of it if the current page is not in the parameters.

    -
    {{#unlesspage 'index'}}
-  <p>This is definitely <em>not</em> the Index page.</p>
-{{/unlesspage}}

    repeat

    Repeats the content inside of it n number of times. Use this to easily print lots of duplicate HTML in a prototype.

    -
    <ul>
-  {{#repeat 5}}
-  <li>Five hundred ninety-nine US dollars</li>
-  {{/repeat}}
-</ul>

    markdown

    Converts Markdown into HTML.

    -
    {{#markdown}}
-# 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.
-{{/markdown}}

    Custom Helpers

    If you don't see the right helper, you can write your own. Add a javascript file to 'src/helpers', add helpers: 'src/helpers' to the Panini process in your gulpfile.babel.js, restart npm, then call it in your templates.

    -
    // Example file src/helpers/bold.js
-module.exports = function(options) {
-  // options.fn(this) = Handelbars content between {{#bold}} HERE {{/bold}}
-  var bolder = '<strong>' + options.fn(this) + '</strong>';
-  return bolder;
-}
    // 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'));
-}

    Then in your projects call your custom {{#bold}} helper

    -
    {{#bold}}ideas{{/bold}}
    -

    Custom Data

    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.

    -

    To add variables to a specific page only, add it at the top of the page's HTML as a Front Matter block. Let's say the below content is inside src/pages/index.html.

    -
    ---
-title: Page Title
-description: Lorem ipsum.
----
-
-<!-- The rest of your HTML is down here. -->

    Now, you can insert the values of these variables into the index.html page, or the default.html layout. To insert a variable, wrap the name of the variable in double curly braces, like so:

    -
    <h1>{{ title }}</h1>

    Variables can also be added globally by creating an external JSON or YML file, and adding it to the src/data folder in your project. Let's create a file called breakfast.yml:

    -
    - eggs
-- bacon
-- toast

    Panini will load in the contents of this YML file as a variable called {{ breakfast }}. Because it's an array, we can loop through it using Handlebars's {{#each}} helper:

    -
    <ul class="breakfast-items">
-  {{#each breakfast}}
-    <li>{{ this }}</li>
-  {{/each}}
-</ul>

    This code will print three <li>s, one for each item in the file.

    -

    - - - - - -
    - -
    - -
    - -
    - -
    - -
    -
    - - -
    -
    - - -
    -
    -
    - -
    - -
    -
    - -
    -
    -
    - -
    Download ZURB’s 21 Responsive Trends That Will Shape 2017
    -

    Stay informed with amazing responsive trends each month from ZURB.

    -     -
    - -
    -
    - -
    -
    -
    -
    -

    Foundation for Sites

    -

    Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. -

    -
    -
    - -
    -
    -
    -
    -

    Want more?

    - -
    -
    -
    -
    -

    Talk to us

    -

    Tweet us at
    @ZURBfoundation

    -

    Get involved in
    our amazing community.

    -
    -
    -
    -
    -

    Stay Updated

    -

    Keep up with the latest on Foundation. Find us on Github.

    - Stay Connected -
    -
    -
    -
    -
    -
    -
    - - Studios - Helping more than 200 startups succeed since 1998. - -
    -
    - - Foundation - The most advanced front-end framework in the world. - -
    -
    - - Notable Design Apps - Prototype, iterate and collect feedback on your products. - -
    -
    - - University - Ideas, thoughts and design resources shared with you. - -
    -
    -
    - -
    -
    -
    -
      -
      • -
      • -
      • -
    -
    -
    - - -

    © 1998‐2016 ZURB, Inc. All rights reserved.

    -
    -
    -
    - -
    -
    - - - - - - - - - diff --git a/_build/progress-bar.html b/_build/progress-bar.html deleted file mode 100644 index 0c3c4d058..000000000 --- a/_build/progress-bar.html +++ /dev/null @@ -1,764 +0,0 @@ - - - - - - - - - - Foundation for Sites 6 Docs | Progress Bar - - - - - - -
    - - - -
    - - -
    - - -
    - - - - - -
    -
    - - Foundation -
    -
    - - - - -
    -
    - -
    - -Jump to Nav - -
    -

    Progress Bar

    - - -

    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.

    - - -
    - -
    - -
    - -
    - -

    Basics

    A progress bar has two elements: the container .progress, and the meter .progress-meter. The role and aria- attributes in the code example clarify the status of the bar:

    -
      -
    • aria-valuemin: Minimum value.
      • -
    • aria-valuemax: Maximum value.
      • -
    • aria-valuenow: Current value.
      • -
    -

    If the value of the progress bar is not numeric, also add the attribute aria-valuetext, which should include a human-readable version of the bar's value.

    -
    <div class="progress" role="progressbar" tabindex="0" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
-  <div class="progress-meter"></div>
-</div>
    - -
    -
    -

    Add a width CSS property to the inner meter to fill the progress bar.

    -
    <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>
    - -
    -
    -
    -

    Colors

    A progress bar can be styled with the .secondary, .success, .warning, and .alert colors.

    -
    <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>
    - -
    -
    -
    - -
    -
    -
    - -
    -
    -
    - -
    -
    -
    -

    With Text

    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 aria-valuetext attribute.

    -
    <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>
    - -
    - -

    25%

    -     -
    -

    Native Progress

    As an alternative to our custom progress bar style, you can also opt to use the native <progress> element. It provides a more succinct way to create progress bars, but it's not supported in IE9, and some other older browsers. View <progress> element support.

    -
    <progress max="100" value="75"></progress>
    - -

    If you're using the Sass version of Foundation, add this line to your main Sass file to export the <progress> CSS:

    -
    @import foundation-progress-element;

    The <progress> element can be styled with the same coloring classes: .secondary, .success, .warning, and .alert.

    -
    <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>
    - -
    - - -
    -

    Native Meter

    For the extra adventurous developers out there, we also provide styles for the <meter> element. What's the difference? <progress> represents a value that changes over time, like storage capacity. <meter> represents a value that fluctuates around some optimum value. It also has no support in Internet Explorer, Mobile Safari, or Android 2. View <meter> element support.

    -

    If you're using the Sass version of Foundation, add this line to your main Sass file to export the <meter> CSS:

    -
    @import foundation-meter-element;

    The meter automatically colors itself based on the current values, and the defined low, medium, and high ranges. Learn more about the mechanics of <meter> values.

    -
    <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>
    - -
    - -
    - -
    -
    -

    Sass Reference

    - -
    -

    Variables

    - -

    The default styles of this component can be customized using these Sass variables in your project's settings file.

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameTypeDefault ValueDescription
    $meter-heightLength1rem

    Height of a <meter> element.

    -
    $meter-radiusLength$global-radius

    Border radius of a <meter> element.

    -
    $meter-backgroundColor$medium-gray

    Background color of a <meter> element.

    -
    $meter-fill-goodColor$success-color

    Meter fill for an optimal value in a <meter> element.

    -
    $meter-fill-mediumColor$warning-color

    Meter fill for an average value in a <meter> element.

    -
    $meter-fill-badColor$alert-color

    Meter fill for a suboptimal value in a <meter> element.

    -
    $progress-heightNumber1rem

    Height of a progress bar.

    -
    $progress-backgroundColor$medium-gray

    Background color of a progress bar.

    -
    $progress-margin-bottomNumber$global-margin

    Bottom margin of a progress bar.

    -
    $progress-meter-backgroundColor$primary-color

    Default color of a progress bar's meter.

    -
    $progress-radiusNumber$global-radius

    Default radius of a progress bar.

    -
    -
    - -
    - -
    -

    Mixins

    - -

    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.

    - - -
    -

    progress-container

    - - - -
    - 
    @include progress-container;
    -
    - -

    Adds styles for a progress bar container.

    - - - - - -
    - -
    - - - -
    -

    progress-meter

    - - - -
    - 
    @include progress-meter;
    -
    - -

    Adds styles for the inner meter of a progress bar.

    - - - - - -
    - -
    - - - -
    -

    progress-meter-text

    - - - -
    - 
    @include progress-meter-text;
    -
    - -

    Adds styles for text in the progress meter.

    - - - - - -
    - - - - - -
    - - -
    - - - - - -
    - -
    - -
    - -
    - -
    - -
    -
    - - -
    -
    - - -
    -
    -
    - -
    - -
    -
    - -
    -
    -
    - -
    Download ZURB’s 21 Responsive Trends That Will Shape 2017
    -

    Stay informed with amazing responsive trends each month from ZURB.

    -     -
    - -
    -
    - -
    -
    -
    -
    -

    Foundation for Sites

    -

    Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. -

    -
    -
    - -
    -
    -
    -
    -

    Want more?

    - -
    -
    -
    -
    -

    Talk to us

    -

    Tweet us at
    @ZURBfoundation

    -

    Get involved in
    our amazing community.

    -
    -
    -
    -
    -

    Stay Updated

    -

    Keep up with the latest on Foundation. Find us on Github.

    - Stay Connected -
    -
    -
    -
    -
    -
    -
    - - Studios - Helping more than 200 startups succeed since 1998. - -
    -
    - - Foundation - The most advanced front-end framework in the world. - -
    -
    - - Notable Design Apps - Prototype, iterate and collect feedback on your products. - -
    -
    - - University - Ideas, thoughts and design resources shared with you. - -
    -
    -
    - -
    -
    -
    -
      -
      • -
      • -
      • -
    -
    -
    - - -

    © 1998‐2016 ZURB, Inc. All rights reserved.

    -
    -
    -
    - -
    -
    - - - - - - - - - diff --git a/_build/responsive-navigation.html b/_build/responsive-navigation.html deleted file mode 100644 index 01e6acc23..000000000 --- a/_build/responsive-navigation.html +++ /dev/null @@ -1,777 +0,0 @@ - - - - - - - - - - Foundation for Sites 6 Docs | Responsive Navigation - - - - - - -
    - - - -
    - - -
    - - -
    - - - - - -
    -
    - - Foundation -
    -
    - - - - -
    -
    - -
    - -Jump to Nav - -
    -

    Responsive Navigation

    - - JavaScript - -

    Our three Menu patterns form like Voltron into one responsive Menu plugin, which allows you to switch between patterns at different screen sizes.

    - - -
    - -
    - -
    - -
    - -

    Responsive Menu

    The Menu has some responsive CSS classes built in, which allow you to re-orient a menu on different screen sizes.

    -
    <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>
    - -
    -

    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.

    -

    With our responsive Menu plugin, you can apply a default pattern to a Menu, and then change that pattern on other screen sizes.

    -

    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:

    -
    <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>
    - -
    -

    Responsive Toggle

    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.

    -

    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 .title-bar and the attribute data-responsive-toggle. The value of data-responsive-toggle should be the ID of the menu you're toggling.

    -

    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 data-hide-for attribute in HTML, or the hideFor setting in JavaScript.

    -
    -

    Scale your browser down to see the toggle happen.

    -
    - -
    <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>
    - -
    - -
    Menu
    -
    - -
    -
    - -
    -
    -
      -
      • -
      • -
    -
    -
    -

    Preventing FOUC

    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 flash of unstyled content. 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.

    -

    If we reference the above example, .title-bar is our mobile element and .top-bar is our desktop element. So before the JavaScript loads, we want only the right element for that screen size to be visible.

    -
    .no-js .top-bar {
-  display: none;
-}
-
-@media screen and (min-width: 40em) {
-  .no-js .top-bar {
-    display: block;
-  }
-
-  .no-js .title-bar {
-    display: none;
-  }
-}

    If you're using Sass, you can write it like this:

    -
    .no-js {
-  @include breakpoint(small only) {
-    .top-bar {
-      display: none;
-    }
-  }
-
-  @include breakpoint(medium) {
-    .title-bar {
-      display: none;
-    }
-  }
-}
    - - -
    -
    -

    JavaScript Reference

    - - -
    -

    Initializing

    - -

    The file foundation.responsiveToggle.js must be included in your JavaScript to use this plugin, along with foundation.core.js. This plugin also requires these utility libraries:

    - - -
      -
    • foundation.util.mediaQuery.js
      • -
    - - -
    - - -
    -

    Foundation.ResponsiveToggle

    - -

    Creates a new instance of Tab Bar.

    - - - 
    var elem = new Foundation.ResponsiveToggle(element, options);
    - -

    Fires these events: - ResponsiveToggle#event:init -

    - - - - - - - - - - - - - - - -
    NameTypeDescription
    elementjQueryjQuery object to attach tab bar functionality to.
    optionsObjectOverrides to the default plugin settings.
    -
    - -
    - -
    -

    Plugin Options

    - -

    Use these options to customize an instance of Responsive Navigation. Plugin options can be set as individual data attributes, one combined data-options attribute, or as an object passed to the plugin's constructor. Learn more about how JavaScript plugins are initialized.

    - - - - - - - - - - -
    NameDefaultDescription
    data-hide-formediumThe breakpoint after which the menu is always shown, and the tab bar is hidden.
    -
    - -
    - -
    -

    Events

    - -

    These events will fire from any element with a Responsive Navigation plugin attached.

    - - - - - - - - - -
    NameDescription
    toggled.zf.responsiveNavigationFires when the element attached to the tab bar toggles.
    -
    - -
    - -
    -

    Methods

    - -
    -

    toggleMenu

    - -
    - 
    $('#element').foundation('toggleMenu');
    -
    - -

    Toggles the element attached to the tab bar. The toggle only happens if the screen is small enough to allow it.

    - - -

    Fires these events: - ResponsiveToggle#event:toggled -

    - - - -
    -
    -
    - - -
    - -
    - -
    - -
    - -
    - -
    -
    - - -
    -
    - - -
    -
    -
    - -
    - -
    -
    - -
    -
    -
    - -
    Download ZURB’s 21 Responsive Trends That Will Shape 2017
    -

    Stay informed with amazing responsive trends each month from ZURB.

    -     -
    - -
    -
    - -
    -
    -
    -
    -

    Foundation for Sites

    -

    Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. -

    -
    -
    - -
    -
    -
    -
    -

    Want more?

    - -
    -
    -
    -
    -

    Talk to us

    -

    Tweet us at
    @ZURBfoundation

    -

    Get involved in
    our amazing community.

    -
    -
    -
    -
    -

    Stay Updated

    -

    Keep up with the latest on Foundation. Find us on Github.

    - Stay Connected -
    -
    -
    -
    -
    -
    -
    - - Studios - Helping more than 200 startups succeed since 1998. - -
    -
    - - Foundation - The most advanced front-end framework in the world. - -
    -
    - - Notable Design Apps - Prototype, iterate and collect feedback on your products. - -
    -
    - - University - Ideas, thoughts and design resources shared with you. - -
    -
    -
    - -
    -
    -
    -
      -
      • -
      • -
      • -
    -
    -
    - - -

    © 1998‐2016 ZURB, Inc. All rights reserved.

    -
    -
    -
    - -
    -
    - - - - - - - - - diff --git a/_build/reveal.html b/_build/reveal.html deleted file mode 100644 index bdfef734c..000000000 --- a/_build/reveal.html +++ /dev/null @@ -1,1142 +0,0 @@ - - - - - - - - - - Foundation for Sites 6 Docs | Reveal - - - - - - -
    - - - -
    - - -
    - - -
    - - - - - -
    -
    - - Foundation -
    -
    - - - - -
    -
    - -
    - -Jump to Nav - -
    -

    Reveal

    - - JavaScript - Motion UI - -

    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.

    - - -
    - -
    - -
    - -
    - -

    Basics

    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.

    -
    -

    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 Advanced section.

    -
    - -

    To create a modal, add the class .reveal, the attribute data-reveal, and a unique ID to a container.

    -
    <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">&times;</span>
-  </button>
-</div>
    - -
    -

    Awesome. I Have It.

    -

    Your couch. It is mine.

    -

    I'm a cool paragraph that lives inside of an even cooler modal. Wins!

    - -

    You'll also need a way to open the modal. Add the attribute data-open to any element. The value of data-open should be the ID of the modal.

    -
    <p><a data-open="exampleModal1">Click me for a modal</a></p>
    - -

    Click me for a modal

    You'll also need a way to close the modal from inside. By default, modals will close if clicked outside of, or if the esc key is pressed. However, you'll generally also want to add your own click trigger. Add the attribute data-close to any element within the modal to add one.

    -

    You can use our handy close button styles to do this:

    -
    <button class="close-button" data-close aria-label="Close modal" type="button">
-  <span aria-hidden="true">&times;</span>
-</button>
    -

    Sizing

    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%.

    -

    The size of a modal can be changed with these sizing classes, which are added to the modal container:

    -
      -
    • .tiny: 30% wide
      • -
    • .small: 50% wide
      • -
    • .large: 90% wide
      • -
    • .full: 100% width and height, defaults the escClose option to true, as well as creates a close button.
      • -
    -
    <div class="tiny reveal" id="exampleModal" data-reveal>
-  <!-- ... -->
-</div>

    Click me for a tiny modal

    - -
    -

    OH I'M SO TIIINY

    - -
    - -

    Click me for a small modal

    - -
    -

    I may be small, but I've got a big heart!

    - -
    - -

    Click me for a large modal

    - -
    -

    I'm big, like bear!

    - -
    - -
    -

    Nested Modal

    It's possible for modals to open other modals. Create a second modal with a unique ID, and then add a click trigger with data-open inside the first modal.

    -
    <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">&times;</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">&times;</span>
-  </button>
-</div>
    - -

    Click me for a modal

    - - -
    -

    Awesome!

    -

    I have another modal inside of me!

    - Click me for another modal! - -
    - - -
    -

    ANOTHER MODAL!!!

    - -
    -

    Full-screen

    A full-screen modal is 100% of the width and height of the window. Add the .full class to make it go.

    -
    <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">&times;</span>
-  </button>
-</div>
    - -

    Click me for a full-screen modal

    - -
    -

    OH I'M SO FUUUUL

    - Intropsective Cage - -

    Advanced Options

    No Overlay

    To remove the overlay, add the attribute data-overlay="false" to the modal.

    -
    <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">&times;</span>
-  </button>
-</div>
    - -

    Click me for an overlay-lacking modal

    - -
    -

    I feel so free!

    - -
    -

    Animations

    To use animations from the Motion UI library, include the data-animation-in="someAnimationIn" and data-animation-out="someAnimationOut" attributes.

    -
    <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">&times;</span>
-  </button>
-</div>
    - -

    Click me for a modal

    - -
    -

    Whoa, I'm dizzy!

    -

    There are many options for animating modals, check out the Motion UI library to see them all

    - -
    -

    AJAX

    To use AJAX to load your modal content, use the code snippet below.

    -
    var $modal = $('#modal');
-
-$.ajax('/url')
-  .done(function(resp){
-    $modal.html(resp.html).foundation('open');
-});
    -

    Accessibility

    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 aria-labelledby="exampleModalHeader11" to the container and id="exampleModalHeader11" to the elment you want to designate as the label.

    -
    <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">&times;</span>
-  </button>
-</div>
    - -

    Click me for a modal

    - -
    -

    Label for the Modal!

    -

    I am even more accessible than the other modals.

    - -
    - -
    -
    -

    Sass Reference

    - -
    -

    Variables

    - -

    The default styles of this component can be customized using these Sass variables in your project's settings file.

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameTypeDefault ValueDescription
    $reveal-backgroundColor$white

    Default background color of a modal.

    -
    $reveal-widthNumber600px

    Default width of a modal, with no class applied.

    -
    $reveal-max-widthNumber$global-width

    Default maximum width of a modal.

    -
    $reveal-paddingNumber$global-padding

    Default padding inside a modal.

    -
    $reveal-borderNumber1px solid $medium-gray

    Default border around a modal.

    -
    $reveal-radiusNumber$global-radius

    Default radius for modal.

    -
    $reveal-zindexNumber1005

    z-index for modals. The overlay uses this value, while the modal itself uses this value plus one.

    -
    $reveal-overlay-backgroundColorrgba($black, 0.45)

    Background color of modal overlays.

    -
    -
    - -
    - -
    -

    Mixins

    - -

    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.

    - - -
    -

    reveal-overlay

    - - - -
    - 
    @include reveal-overlay($background);
    -
    - -

    Adds styles for a modal overlay.

    - - - - - - - - - - - - - - - -
    ParameterTypeDefault ValueDescription
    $backgroundColor$reveal-overlay-background

    Background color of the overlay.

    -
    -
    - -
    - - - -
    -

    reveal-modal-base

    - - - -
    - 
    @include reveal-modal-base;
    -
    - -

    Adds base styles for a modal.

    - - - - - -
    - -
    - - - -
    -

    reveal-modal-width

    - - - -
    - 
    @include reveal-modal-width($width, $max-width);
    -
    - -

    Adjusts the width of a modal.

    - - - - - - - - - - - - - - - - - - - - - -
    ParameterTypeDefault ValueDescription
    $widthNumberNone

    Width of the modal. Generally a percentage.

    -
    $max-widthNumber$reveal-max-width

    Maximum width of the modal.

    -
    -
    - -
    - - - -
    -

    reveal-modal-fullscreen

    - - - -
    - 
    @include reveal-modal-fullscreen;
    -
    - -

    Creates a full-screen modal, which stretches the full width and height of the window.

    - - - - - -
    - - - - - -
    - - -
    - -
    -
    -

    JavaScript Reference

    - - -
    -

    Initializing

    - -

    The file foundation.reveal.js must be included in your JavaScript to use this plugin, along with foundation.core.js. This plugin also requires these utility libraries:

    - - -
      -
    • foundation.util.keyboard.js
      • -
    - -
      -
    • foundation.util.box.js
      • -
    - -
      -
    • foundation.util.triggers.js
      • -
    - -
      -
    • foundation.util.mediaQuery.js
      • -
    - -
      -
    • foundation.util.motion.js
      • -
    - - -
    - - -
    -

    Foundation.Reveal

    - -

    Creates a new instance of Reveal.

    - - - 
    var elem = new Foundation.Reveal(element, options);
    - - - - - - - - - - - - - - - - -
    NameTypeDescription
    elementjQueryjQuery object to use for the modal.
    optionsObjectoptional parameters.
    -
    - -
    - -
    -

    Plugin Options

    - -

    Use these options to customize an instance of Reveal. Plugin options can be set as individual data attributes, one combined data-options attribute, or as an object passed to the plugin's constructor. Learn more about how JavaScript plugins are initialized.

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameDefaultDescription
    data-animation-inslide-in-leftMotion-UI class to use for animated elements. If none used, defaults to simple show/hide.
    data-animation-outslide-out-rightMotion-UI class to use for animated elements. If none used, defaults to simple show/hide.
    data-show-delay10Time, in ms, to delay the opening of a modal after a click if no animation used.
    data-hide-delay10Time, in ms, to delay the closing of a modal after a click if no animation used.
    data-close-on-clicktrueAllows a click on the body/overlay to close the modal.
    data-close-on-esctrueAllows the modal to close if the user presses the `ESCAPE` key.
    data-multiple-openedfalseIf true, allows multiple modals to be displayed at once.
    data-v-offsetautoDistance, in pixels, the modal should push down from the top of the screen.
    data-h-offsetautoDistance, in pixels, the modal should push in from the side of the screen.
    data-full-screenfalseAllows the modal to be fullscreen, completely blocking out the rest of the view. JS checks for this as well.
    data-btm-offset-pct10Percentage of screen height the modal should push up from the bottom of the view.
    data-overlaytrueAllows the modal to generate an overlay div, which will cover the view when modal opens.
    data-reset-on-closefalseAllows 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.
    data-deep-linkfalseAllows 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.
    -
    - -
    - -
    -

    Events

    - -

    These events will fire from any element with a Reveal plugin attached.

    - - - - - - - - - - - - - - - - - -
    NameDescription
    closeme.zf.revealFires immediately before the modal opens. -Closes any other modals that are currently open
    open.zf.revealFires when the modal has successfully opened.
    closed.zf.revealFires when the modal is done closing.
    -
    - -
    - -
    -

    Methods

    - -
    -

    open

    - -
    - 
    $('#element').foundation('open');
    -
    - -

    Opens the modal controlled by this.$anchor, and closes all others by default.

    - - -

    Fires these events: - Reveal#event:closeme - Reveal#event:open -

    - - -
    -
    -
    -

    close

    - -
    - 
    $('#element').foundation('close');
    -
    - -

    Closes the modal.

    - - -

    Fires these events: - Reveal#event:closed -

    - - -
    -
    -
    -

    toggle

    - -
    - 
    $('#element').foundation('toggle');
    -
    - -

    Toggles the open/closed state of a modal.

    - - - - -
    -
    -
    -

    destroy

    - -
    - 
    $('#element').foundation('destroy');
    -
    - -

    Destroys an instance of a modal.

    - - - - - -
    -
    -
    - - - - -
    - -
    - -
    - -
    - -
    - -
    -
    - - -
    -
    - - -
    -
    -
    - -
    - -
    -
    - -
    -
    -
    - -
    Download ZURB’s 21 Responsive Trends That Will Shape 2017
    -

    Stay informed with amazing responsive trends each month from ZURB.

    -     -
    - -
    -
    - -
    -
    -
    -
    -

    Foundation for Sites

    -

    Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. -

    -
    -
    - -
    -
    -
    -
    -

    Want more?

    - -
    -
    -
    -
    -

    Talk to us

    -

    Tweet us at
    @ZURBfoundation

    -

    Get involved in
    our amazing community.

    -
    -
    -
    -
    -

    Stay Updated

    -

    Keep up with the latest on Foundation. Find us on Github.

    - Stay Connected -
    -
    -
    -
    -
    -
    -
    - - Studios - Helping more than 200 startups succeed since 1998. - -
    -
    - - Foundation - The most advanced front-end framework in the world. - -
    -
    - - Notable Design Apps - Prototype, iterate and collect feedback on your products. - -
    -
    - - University - Ideas, thoughts and design resources shared with you. - -
    -
    -
    - -
    -
    -
    -
      -
      • -
      • -
      • -
    -
    -
    - - -

    © 1998‐2016 ZURB, Inc. All rights reserved.

    -
    -
    -
    - -
    -
    - - - - - - - - - diff --git a/_build/rtl.html b/_build/rtl.html deleted file mode 100644 index 916de0cc4..000000000 --- a/_build/rtl.html +++ /dev/null @@ -1,514 +0,0 @@ - - - - - - - - - - Foundation for Sites 6 Docs | Right-to-Left Support - - - - - - -
    - - - -
    - - -
    - - -
    - - - - - -
    -
    - - Foundation -
    -
    - - - - -
    -
    - -
    - -Jump to Nav - -
    -

    Right-to-Left Support

    - - -

    Foundation can easily adapt its components to work with languages that read from right to left.

    - - -
    - -
    - -
    - -
    - -

    HTML

    You'll need to make a few changes to your markup to get the Javascript components working nice and smooth. In the <html> tag, you'll need to add a dir attribute with a value of rtl. Here's what your <html> tag should look like:

    -
    <!-- This example is for a right-to-left Arabic layout -->
-<html class="no-js" lang="ar" dir="rtl">

    Language Code

    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.

    -
      -
    • Arabic: ar
      • -
    • Chinese: zh
      • -
    • Farsi: fa
      • -
    • Hebrew: he, iw
      • -
    • Japanese: ja
      • -
    • Urdu: ur
      • -
    • Yiddish: yi, ji
      • -
    -

    View of a full list of language codes on the website of the Library of Congress.

    -
    -

    CSS Download

    If you use a CSS version of Foundation (the ones you can find on the download page), 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.

    -
    -

    Sass Configuration

    If you're using the Sass version of Foundation, open your project's settings file (settings.scss) and change this variable in the Global section:

    -
    $global-text-direction: rtl;

    This will convert the framework's components to RTL format.

    - - - - - -
    - -
    - -
    - -
    - -
    - -
    -
    - - -
    -
    - - -
    -
    -
    - -
    - -
    -
    - -
    -
    -
    - -
    Download ZURB’s 21 Responsive Trends That Will Shape 2017
    -

    Stay informed with amazing responsive trends each month from ZURB.

    -     -
    - -
    -
    - -
    -
    -
    -
    -

    Foundation for Sites

    -

    Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. -

    -
    -
    - -
    -
    -
    -
    -

    Want more?

    - -
    -
    -
    -
    -

    Talk to us

    -

    Tweet us at
    @ZURBfoundation

    -

    Get involved in
    our amazing community.

    -
    -
    -
    -
    -

    Stay Updated

    -

    Keep up with the latest on Foundation. Find us on Github.

    - Stay Connected -
    -
    -
    -
    -
    -
    -
    - - Studios - Helping more than 200 startups succeed since 1998. - -
    -
    - - Foundation - The most advanced front-end framework in the world. - -
    -
    - - Notable Design Apps - Prototype, iterate and collect feedback on your products. - -
    -
    - - University - Ideas, thoughts and design resources shared with you. - -
    -
    -
    - -
    -
    -
    -
      -
      • -
      • -
      • -
    -
    -
    - - -

    © 1998‐2016 ZURB, Inc. All rights reserved.

    -
    -
    -
    - -
    -
    - - - - - - - - - diff --git a/_build/sass-functions.html b/_build/sass-functions.html deleted file mode 100644 index 3ab5e331d..000000000 --- a/_build/sass-functions.html +++ /dev/null @@ -1,1028 +0,0 @@ - - - - - - - - - - Foundation for Sites 6 Docs | Sass Functions - - - - - - -
    - - - -
    - - -
    - - -
    - - - - - -
    -
    - - Foundation -
    -
    - - - - -
    -
    - -
    - -Jump to Nav - -
    -

    Sass Functions

    - - -

    Behind the scenes, Foundation is powered by a set of utility Sass functions that help us work with colors, units, selectors, and more.

    - - -
    - -
    - -
    - -
    - -

    Importing

    All of Foundation's Sass utilities are in the folder scss/util, and broken up into multiple files by category. You can import every utility file at once using this line of code:

    -
    @import 'util/util';

    Or, utilities can be imported individually.

    -
    // Color manipulation
-@import 'util/color';
-
-// Selector generation
-@import 'util/selector';
-
-// Unit manipulation and conversion
-@import 'util/unit';
-
-// Value checking and extraction
-@import 'util/value';
    -

    Variables, functions, or mixins prefixed with -zf- 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.

    -
    - - -
    -
    -

    Sass Reference

    - - - - -
    -

    Mixins

    - -

    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.

    - - -
    -

    add-foundation-colors

    - - - -
    - 
    @include add-foundation-colors;
    -
    - -

    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.

    - - - - - -
    - -
    - - - -
    -

    flex

    - - - -
    - 
    @include flex;
    -
    - -

    Enables flexbox by adding display: flex to the element.

    - - - - - -
    - -
    - - - -
    -

    flex-align

    - - - -
    - 
    @include flex-align($x, $y);
    -
    - -

    Horizontally or vertically aligns the items within a flex container.

    - - - - - - - - - - - - - - - - - - - - - -
    ParameterTypeDefault ValueDescription
    $xKeywordnull

    Horizontal alignment to use. Can be left, right, center, justify, or spaced. Or, set it to null (the default) to not set horizontal alignment.

    -
    $yKeywordnull

    Vertical alignment to use. Can be top, bottom, middle, or stretch. Or, set it to null (the default) to not set vertical alignment.

    -
    -
    - -
    - - - -
    -

    flex-align-self

    - - - -
    - 
    @include flex-align-self($y);
    -
    - -

    Vertically align a single column within a flex row. Apply this mixin to a flex column.

    - - - - - - - - - - - - - - - -
    ParameterTypeDefault ValueDescription
    $yKeywordnull

    Vertical alignment to use. Can be top, bottom, middle, or stretch. Or, set it to null (the default) to not set vertical alignment.

    -
    -
    - -
    - - - -
    -

    flex-order

    - - - -
    - 
    @include flex-order($order);
    -
    - -

    Changes the source order of a flex child. Children with lower numbers appear first in the layout.

    - - - - - - - - - - - - - - - -
    ParameterTypeDefault ValueDescription
    $orderNumber0

    Order number to apply.

    -
    -
    - - - - - -
    - -
    - -
    -

    Functions

    - - -
    -

    foreground

    - - - -
    - 
    foreground($color, $yes, $no, $threshold)
    -
    - -

    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.

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    ParameterTypeDefault ValueDescription
    $colorColorNone

    Color to check the lightness of.

    -
    $yesColor$black

    Color to return if $color is light.

    -
    $noColor$white

    Color to return if $color is dark.

    -
    $thresholdPercentage60%

    Threshold of lightness to check against.

    -
    -
    - -
    - -
    -

    smart-scale

    - - - -
    - 
    smart-scale($color, $scale, $threshold)
    -
    - -

    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.

    - - - - - - - - - - - - - - - - - - - - - - - - - - -
    ParameterTypeDefault ValueDescription
    $colorColorNone

    Color to scale.

    -
    $scalePercentage5%

    Amount to scale up or down.

    -
    $thresholdPercentage40%

    Threshold of lightness to check against.

    -
    -
    - -
    - -
    -

    text-inputs

    - - - -
    - 
    text-inputs($types)
    -
    - -

    Generates a selector with every text input type. You can also filter the list to only output a subset of those selectors.

    - - - - - - - - - - - - - - -
    ParameterTypeDefault ValueDescription
    $typesList or Keyword

    A list of text input types to use. Leave blank to use all of them.

    -
    -
    - -
    - -
    -

    strip-unit

    - - - -
    - 
    strip-unit($num)
    -
    - -

    Removes the unit (e.g. px, em, rem) from a value, returning the number only.

    - - - - - - - - - - - - - - -
    ParameterTypeDefault ValueDescription
    $numNumberNone

    Number to strip unit from.

    -
    -
    - -
    - -
    -

    rem-calc

    - - - -
    - 
    rem-calc($values, $base)
    -
    - -

    Converts one or more pixel values into matching rem values.

    - - - - - - - - - - - - - - - - - - - - -
    ParameterTypeDefault ValueDescription
    $valuesNumber or ListNone

    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.

    -
    $baseNumbernull

    The base value to use when calculating the rem. If you're using Foundation out of the box, this is 16px. If this parameter is null, the function will reference the $base-font-size variable as the base.

    -
    -
    - -
    - -
    -

    has-value

    - - - -
    - 
    has-value($val)
    -
    - -

    Determine if a value is not falsey, in CSS terms. Falsey values are null, none, 0 with any unit, or an empty list.

    - - - - - - - - - - - - - - -
    ParameterTypeDefault ValueDescription
    $valMixedNone

    Value to check.

    -
    -
    - -
    - -
    -

    get-side

    - - - -
    - 
    get-side($val, $side)
    -
    - -

    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.

    - - - - - - - - - - - - - - - - - - - - -
    ParameterTypeDefault ValueDescription
    $valList or NumberNone

    Value to analyze. Should be a shorthand sizing property, e.g. "1em 2em 1em"

    -
    $sideKeywordNone

    Side to return. Should be top, right, bottom, or left.

    -
    -
    - -
    - -
    -

    get-border-value

    - - - -
    - 
    get-border-value($val, $elem)
    -
    - -

    Given border $val, find a specific element of the border, which is $elem. The possible values for $elem are width, style, and color.

    - - - - - - - - - - - - - - - - - - - - -
    ParameterTypeDefault ValueDescription
    $valListNone

    Border value to find a value in.

    -
    $elemKeywordNone

    Border component to extract.

    -
    -
    - -
    - -
    -

    map-deep-get

    - - - -
    - 
    map-deep-get($map, $keys...)
    -
    - -

    Finds a value in a nested map.

    - - -

    Learn more: Deep Get/Set in Maps

    - - - - - - - - - - - - - - - - - -
    ParameterTypeDefault ValueDescription
    $mapMapNone

    Map to pull a value from.

    -
    $keys...StringNone

    Keys to use when looking for a value.

    -
    -
    - - - -
    - -
    - - - - - -
    - -
    - -
    - -
    - -
    - -
    -
    - - -
    -
    - - -
    -
    -
    - -
    - -
    -
    - -
    -
    -
    - -
    Download ZURB’s 21 Responsive Trends That Will Shape 2017
    -

    Stay informed with amazing responsive trends each month from ZURB.

    -     -
    - -
    -
    - -
    -
    -
    -
    -

    Foundation for Sites

    -

    Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. -

    -
    -
    - -
    -
    -
    -
    -

    Want more?

    - -
    -
    -
    -
    -

    Talk to us

    -

    Tweet us at
    @ZURBfoundation

    -

    Get involved in
    our amazing community.

    -
    -
    -
    -
    -

    Stay Updated

    -

    Keep up with the latest on Foundation. Find us on Github.

    - Stay Connected -
    -
    -
    -
    -
    -
    -
    - - Studios - Helping more than 200 startups succeed since 1998. - -
    -
    - - Foundation - The most advanced front-end framework in the world. - -
    -
    - - Notable Design Apps - Prototype, iterate and collect feedback on your products. - -
    -
    - - University - Ideas, thoughts and design resources shared with you. - -
    -
    -
    - -
    -
    -
    -
      -
      • -
      • -
      • -
    -
    -
    - - -

    © 1998‐2016 ZURB, Inc. All rights reserved.

    -
    -
    -
    - -
    -
    - - - - - - - - - diff --git a/_build/sass-mixins.html b/_build/sass-mixins.html deleted file mode 100644 index a7eda1eaa..000000000 --- a/_build/sass-mixins.html +++ /dev/null @@ -1,863 +0,0 @@ - - - - - - - - - - Foundation for Sites 6 Docs | Sass Mixins - - - - - - -
    - - - -
    - - -
    - - -
    - - - - - -
    -
    - - Foundation -
    -
    - - - - -
    -
    - -
    - -Jump to Nav - -
    -

    Sass Mixins

    - - -

    - - -
    - -
    - -
    - -
    - -

    Importing

    Foundation's Sass mixins are all kept in one file: scss/util/_mixins.scss. To import it in Sass, use this line of code:

    -
    @import 'util/mixins';
    - -
    -
    -

    Sass Reference

    - - - - -
    -

    Mixins

    - -

    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.

    - - -
    -

    css-triangle

    - - - -
    - 
    @include css-triangle($triangle-size, $triangle-color, $triangle-direction);
    -
    - -

    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.

    - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    ParameterTypeDefault ValueDescription
    $triangle-sizeNumberNone

    Width of the triangle.

    -
    $triangle-colorColorNone

    Color of the triangle.

    -
    $triangle-directionKeywordNone

    Direction the triangle points. Can be up, right, down, or left.

    -
    -
    - -
    - - - -
    -

    hamburger

    - - - -
    - 
    @include hamburger($color, $color-hover, $width, $height, $weight, $bars);
    -
    - -

    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.

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    ParameterTypeDefault ValueDescription
    $colorColor$black

    Color to use for the icon.

    -
    $color-hoverColor$dark-gray

    Color to use when the icon is hovered over.

    -
    $widthNumber20px

    Width of the icon.

    -
    $heightNumber16px

    Height of the icon.

    -
    $weightNumber2px

    Height of individual bars in the icon.

    -
    $barsNumber3

    Number of bars in the icon.

    -
    -
    - -
    - - - -
    -

    background-triangle

    - - - -
    - 
    @include background-triangle($color);
    -
    - -

    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.

    - - - - - - - - - - - - - - - -
    ParameterTypeDefault ValueDescription
    $colorColor$black

    Color to use for the triangle.

    -
    -
    - -
    - - - -
    -

    clearfix

    - - - -
    - 
    @include clearfix;
    -
    - -

    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

    - - - -

    Learn more: Micro Clearfix Hack

    - -
    - -
    - - - -
    -

    auto-width

    - - - -
    - 
    @include auto-width($max, $elem);
    -
    - -

    Adds CSS for a "quantity query" selector that automatically sizes elements based on how many there are inside a container.

    - - - -

    Learn more: Quantity Queries for CSS

    - - - - - - - - - - - - - - - - - -
    ParameterTypeDefault ValueDescription
    $maxNumberNone

    Maximum number of items to detect. The higher this number is, the more CSS that's required to cover each number of items.

    -
    $elemKeywordli

    Tag to use for sibling selectors.

    -
    -
    - -
    - - - -
    -

    disable-mouse-outline

    - - - -
    - 
    @include disable-mouse-outline;
    -
    - -

    Removes the focus ring around an element when a mouse input is detected.

    - - - - - -
    - -
    - - - -
    -

    element-invisible

    - - - -
    - 
    @include element-invisible;
    -
    - -

    Makes an element visually hidden, but still accessible to keyboards and assistive devices.

    - - - -

    Learn more: Hiding Content for Accessibility

    - -
    - -
    - - - -
    -

    element-invisible-off

    - - - -
    - 
    @include element-invisible-off;
    -
    - -

    Reverses the CSS output created by the element-invisible() mixin.

    - - - - - -
    - -
    - - - -
    -

    vertical-center

    - - - -
    - 
    @include vertical-center;
    -
    - -

    Vertically centers the element inside of its first non-static parent,

    - - - -

    Learn more: Centering With Sass

    - -
    - -
    - - - -
    -

    horizontal-center

    - - - -
    - 
    @include horizontal-center;
    -
    - -

    Horizontally centers the element inside of its first non-static parent,

    - - - -

    Learn more: Centering With Sass

    - -
    - -
    - - - -
    -

    absolute-center

    - - - -
    - 
    @include absolute-center;
    -
    - -

    Absolutely centers the element inside of its first non-static parent,

    - - - -

    Learn more: Centering With Sass

    - -
    - -
    - - - -
    - - -
    - - - - - -
    - -
    - -
    - -
    - -
    - -
    -
    - - -
    -
    - - -
    -
    -
    - -
    - -
    -
    - -
    -
    -
    - -
    Download ZURB’s 21 Responsive Trends That Will Shape 2017
    -

    Stay informed with amazing responsive trends each month from ZURB.

    -     -
    - -
    -
    - -
    -
    -
    -
    -

    Foundation for Sites

    -

    Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. -

    -
    -
    - -
    -
    -
    -
    -

    Want more?

    - -
    -
    -
    -
    -

    Talk to us

    -

    Tweet us at
    @ZURBfoundation

    -

    Get involved in
    our amazing community.

    -
    -
    -
    -
    -

    Stay Updated

    -

    Keep up with the latest on Foundation. Find us on Github.

    - Stay Connected -
    -
    -
    -
    -
    -
    -
    - - Studios - Helping more than 200 startups succeed since 1998. - -
    -
    - - Foundation - The most advanced front-end framework in the world. - -
    -
    - - Notable Design Apps - Prototype, iterate and collect feedback on your products. - -
    -
    - - University - Ideas, thoughts and design resources shared with you. - -
    -
    -
    - -
    -
    -
    -
      -
      • -
      • -
      • -
    -
    -
    - - -

    © 1998‐2016 ZURB, Inc. All rights reserved.

    -
    -
    -
    - -
    -
    - - - - - - - - - diff --git a/_build/sass.html b/_build/sass.html index 800a05b41..b5a624363 100644 --- a/_build/sass.html +++ b/_build/sass.html @@ -1,586 +1,981 @@ - - - - - - - Foundation for Sites 6 Docs | Sass - - - - - - -
    - -
    - - -
    - -
    - - -
    - -
    - - - + + + + + + + +
    + +
    +
    +
    +
    +
    Foundation Documentation
    + + + -
    -
    +
    +
    +
    +
    +

    Getting Started With Sass

    +

    Sass is the easiest way to customize Foundation!

    -
    +
    -Jump to Nav + +
    +
    +

    Three Easy Ways to Get Started

    +

    Setting up Foundation 5 Sass is quick and easy!

    +

    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.

    +
    +
    +
    Recommend Install
    +
    Manual Download
    +
    Third Party Application
    +
    +
    +
    +
    -
    -

    Sass

    +
    +
    +
    +

    Recommended Install for Foundation

    +
    +
    -

    Foundation is written in Sass, which allows us to make the codebase customizable and flexible.

    +
    +
    +
    +
    +

    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.

    +
    +
    - -
    +
    -
    +
    +
    +

    What You'll Need

    +

    You'll want to install the following on your system before proceeding:

    +
    +
    + +
    +
    + +

    Git

    +

    Git is GitHub's version control system, this install basically commands the tools you'll use in the command line to work within GitHub.

    +

    Download Git →

    +
    + +
    -
    -
    -

    Not familiar with Sass? The official tutorial on sass-lang.com is a great place to start.

    +
    + +

    NodeJS

    +

    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.

    +

    Download NodeJS →

    +
    + +
    + +
    + +

    Ruby 1.9+

    +

    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.

    +

    Download Ruby →

    +
    -

    Compatibility

    Sass logo

    -

    Foundation for Sites can be compiled with Ruby Sass and libsass. We tend to stick to the latest versions of both compilers when possible. Our documentation and starter project are compiled with node-sass, a Node port of libsass. We recommend these versions of either compiler:

    -
      -
    • Ruby Sass 3.4+
      • -
    • node-sass 3.4.2+ (libsass 3.3.2)
      • -
    -

    Autoprefixer Required

    We don't include vendor prefixes in our Sass files—instead, we let Autoprefixer handle it for us. Our build process uses gulp-autoprefixer, but there are other versions that work with Grunt, Rails, Brunch, and more.

    -

    To get the proper browser support, use these Autoprefixer settings:

    -
    autoprefixer({
-  browsers: ['last 2 versions', 'ie >= 9', 'and_chr >= 2.3']
-});
    -

    Loading the Framework

    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.

    -

    To get started, first install the framework files using Bower or npm.

    -
    npm install foundation-sites --save
-bower install foundation-sites --save

    Compiling Manually

    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: packages_folder/foundation-sites/scss

    -

    Here's an example using grunt-contrib-sass:

    -
    grunt.initConfig({
-  sass: {
-    dist: {
-      options: {
-        loadPath: ['node_modules/foundation-sites/scss']
-      }
-    }
-  }
-});

    If you're using Compass, open your project's config.rb and add the import path there:

    -
    add_import_path "node_modules/foundation-sites/scss"

    Finally, add an @import statement to the top of your primary Sass file. Refer to Adjusting CSS Output below to learn how to control the CSS output of the framework.

    -
    @import 'foundation';

    You're also going to want a settings file for your project, which will allow you to modify the default styles of Foundation. Download the latest settings file here, add it to your project as _settings.scss, then import it before Foundation itself.

    -
    @import 'settings';
-@import 'foundation';

    Using Compiled CSS

    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.

    -
    <link rel="stylesheet" href="node_modules/foundation-sites/dist/css/foundation-sites.css">
-
-<link rel="stylesheet" href="node_modules/foundation-sites/dist/css/foundation-sites.min.css">
    -

    Adjusting CSS Output

    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.

    -

    Each component has an export mixin which prints out the CSS for that component. If you're cool with having everything, you just need one line of code:

    -
    @include foundation-everything;

    Our starter projects include the full list of imports, making it easy to comment out the components you don't need.

    -
    @import 'foundation';
-
-@include foundation-global-styles;
-@include foundation-grid;
-@include foundation-typography;
-@include foundation-button;
-@include foundation-forms;
-// And so on...
    -

    The Settings File

    All Foundation projects include a settings file, named _settings.scss. 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.

    -

    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.

    -
    -

    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 Foundation releases so you know when things change.

    +
    + + + +
    +
    +

    How to Install the CLI

    +

    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? Check out this video we made to help you out.

    +
    +

    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.

    +

    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 installation docs for Foundation 6 and the new CLI.

    +
    +
    +
    +

    1

    +
    +

    We use Bower to manage updates to Foundation and the third-party libraries that Foundation is built on.

    +

    npm install -g bower grunt-cli

    +
    +
    +
    +

    2

    +
    +

    Installing the Foundation CLI on your computer only takes one command function.

    +

    gem install foundation


    Note: If you run into permission errors running these commands in the CLI, you can add the word 'sudo' before the line inside the interface:

    +

    sudo npm install -g bower grunt-cli
    sudo gem install foundation


    If you use rbenv, rehash your shims after installing:

    +

    rbenv rehash

    +
    +
    -

    Here's an example set of settings variables. These change the default styling of buttons:

    -
    // Default padding for button.
-$button-padding: 0.85em 1em !default;
+
    
 
-// Default margin for button.
-$button-margin: 0 $global-padding $global-padding 0 !default;
+
 
-// Default fill for button. Is either solid or hollow.
-$button-fill: solid !default;
+
    
+  
    
+    
    Compiling Sass into CSS & Creating a Project
    
+    
    Sass is a great way to speed up front-end development. 
    
+    
    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.
    
+    
      
    
+
    
 
-// Default background color for button.
-$button-background: $primary-color !default;
+
    
+  
    
+    
    Creating a Compass Project
    
+    
    
+      
    
+        
    1
    
+      
    If it's not installed already, you can install Compass using the following command:
    
+      
    gem install compass
    
+    
    
+    
    
+      
    
+       
    2
    
+      
    
+      
    Next we'll use the Foundation CLI to create a new project:
    
+      
    foundation new MY_PROJECT
    
+    
    
+    
    
+      
    
+        
    3
    
+      
    
+      
    Boom, your project is created! Now Foundation will be easy.
    
+      
    cd MY_PROJECT
    
+    
    
+    
    
+      
    
+        
    4
    
+      
    
+      
    Bundler is used to ensure all the correct libraries are used. If you don't have it, run gem install bundler
    
+      
    Then run bundle (only once per project)
    
+      
    Be sure to run compass watch in order to make changes.
    
+      
    bundle exec compass watch
    
+    
    
+  
    
 
-// Default hover background color for button.
-$button-background-hover: scale-color($button-background, $lightness: -15%) !default;
+  
    
+    
    
+    
    Creating a Libsass Project
    
+    
    
+      
    
+        
    1
    
+      
    
+      
    First, navigate into the directory where you want to create your project:
    
+      
    cd path/to/sites
    
+    
    
+    
    
+      
    
+        
    2
    
+      
    
+      
    Next we'll use the Foundation CLI to create a new project:
    
+      
    foundation new project_name --libsass
    
+    
    
+    
    
+      
    
+        
    3
    
+      
    
+      
    Boom, your project is created! Now you need to use Grunt to compile everything before you start working:
    
+      
     cd project_name
    grunt build
    
+    
    
+    
    
+      
    
+        
    4
    
+      
    
+      
    Be sure to run grunt in order to make changes.
    
+      
    grunt
    
+    
    
+  
    
+
    
 
-// Default font color for button.
-$button-font-color: #fff !default;
+
    
+  
    
+    
    Check out what you get with the Sass download package. →
    
+  
    
+
    
 
-// Default alternative font color for button.
-$button-font-color-alt: #000 !default;
 
-// Default radius for button.
-$button-radius: 0 !default;
+
    
 
-// Default sizes for button.
-$button-sizes: (
-  tiny: 0.7,
-  small: 0.8,
-  medium: 1,
-  large: 1.3,
-) !default;
 
-// Default font size for button.
-$button-font-size: 0.9rem !default;
+
 
-// Default opacity for a disabled button.
-$button-opacity-disabled: 0.25 !default;
    +
    +
    +

    How to Update

    +

    Once you have Foundation installed updating your file is easy.

    +
    +
    +

    1

    +
    +

    Specify the version you want to update to in your bower.json file.

    +

    See an example →

    +
    +
    +
    +

    2

    +
    +

    To update, 'cd' into the project folder in the CLI and the run 'bower update.'

    +

    bower update

    +

    Note: 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.

    +

    See an example →

    +
    +
    +
    +
    + + +
    +
    +

    Install Foundation Manually

    +

    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:

    +
      +
    • First you will need to clone or download the master zip of the Foundation Compass Template from Github. This will be the root of your project.
      • +
    • Then you will create a directory called bower_components.
      • +
    • The next step is to clone or download the master zip of the bower-foundation repo in that directory.
      • +
    • Then rename this directory to "foundation"
      • +
    +

    Note: Alternatively you can place this somewhere else or move the files around.

    +
      +
    • Just update your config.rb so that the add_import_path reflects the change i.e. add_import_path "bower_components/foundation/scss"
      • +
    • Then add jQuery and update the link in index.html to a local copy that you can download from the jQuery site.
      • +
    +
    -
    - +

    Check out what you get with the Sass download package. →

    +
    +
    + +
    +
    +

    Build Using a Task Runner

    +

    Using Bower and a task runner like Grunt or Gulp, you can add our Sass files to your build process.

    +
    +
    +

    1

    +
    +

    In a project with an existing bower.json, add Foundation to your bower components:

    +

    bower install foundation --save

    +
    +
    +
    +

    2

    +
    +

    Next, add bower_components/foundation/scss 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 grunt-contrib-sass:

    +

    + sass: {
    +   dist: {
    +     options: {
    +       style: 'expanded'
    +       loadPath: ['bower_components/foundation/scss']
    +     },
    +     files: {
    +       'main.css': 'main.scss',
    +       'widgets.css': 'widgets.scss'
    +     }
    +   }
    + } +

    +

    This configuration will work for gulp-sass:

    +

    + gulp.src('./scss/*.scss')
    +   .pipe(sass({
    +     includePaths: ['bower_components/foundation/scss']
    +   }))
    +   .pipe(gulp.dest('./css')); +

    +
    +
    -
    +
    + + + +
    +
    +

    Third Party Applications

    +

    If you want a more hands-off and simple build of Foundation you can use these platforms to code with Foundation.

    +
    +
    +
    +
    +
    + +
    +
    +

    Mixture

    +

    Get started quickly and build faster with Foundation using Mixture.io.

    +

    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.

    + Learn More +
    +
    + +
    + +
    +
    + +
    +
    +

    CodeKit

    +

    A Mac app that allows you to build websites faster with Foundation.

    +

    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.

    + Learn More +
    +
    + +
    + +
    +
    + +
    +
    +

    Cactus

    +

    Build your websites locally with the ease and flexibility of Foundation.

    +

    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.

    + Learn More +
    +
    + +
    + +
    +
    +

    What's Next?

    +

    Now that you have Foundation Sass installed, check out the awesome stuff you get and how to use it.

    +
    +
    +
    +
    + +

    What You Get

    +

    The complete package! We'll cover the important files that are included when you download Sass and where to make customizations.

    +

    See What's Inside →

    +
    + +
    + +
    + +

    How to Use

    +

    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.

    +

    Find Out How →

    +
    + +
    + +
    + +

    Global Styles

    +

    Every Foundation project needs to include these styles in order to work properly. These include things like basic formatting and global utility classes.

    +

    Take a Look →

    +
    +
    -
    -
    - - -
    -
    - -
    -
    -
    - -
    - -
    -
    - -
    -
    -
    - -
    Download ZURB’s 21 Responsive Trends That Will Shape 2017
    -

    Stay informed with amazing responsive trends each month from ZURB.

    -     + +
    +
    +
    +
    Stay on top of what’s happening in responsive design.
    +

    Sign up to receive monthly Responsive Reading highlights. Read Last Month's Edition »

    +
    +
    +
    +
    +
    +
    - + +
    +
    +
    + + +
    +
    +
    +
    +

    Foundation for Sites

    +

    Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. +

    - -
    -
    -
    -
    -

    Foundation for Sites

    -

    Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. -

    -
    -
    - -
    -
    -
    -
    -

    Want more?

    - -
    -
    -
    -
    -

    Talk to us

    -

    Tweet us at
    @ZURBfoundation

    -

    Get involved in
    our amazing community.

    -
    -
    -
    -
    -

    Stay Updated

    -

    Keep up with the latest on Foundation. Find us on Github.

    - Stay Connected -
    -
    -
    +
    + +
    +
    +
    +
    +

    Want more?

    +
    -
    -
    - - Studios - Helping more than 200 startups succeed since 1998. - -
    -
    - - Foundation - The most advanced front-end framework in the world. - -
    -
    - - Notable Design Apps - Prototype, iterate and collect feedback on your products. - -
    -
    - - University - Ideas, thoughts and design resources shared with you. - +
    +
    +

    Talk to us

    +

    Tweet us at
    @ZURBfoundation

    +

    Business Support

    +

    Or check our support page

    +
    -
    -
    - -
    -
    -
    -
      -
      • -
      • -
      • -
    -
    -
    - - -

    © 1998‐2016 ZURB, Inc. All rights reserved.

    +
    +
    +

    Stay Updated

    +

    Keep up with the latest on Foundation. Find us on Github.

    + Stay Connected
    -
    +
    +
    + + Studios + Helping more than 200 startups succeed since 1998. + +
    +
    + + Foundation + The most advanced front-end framework in the world. + +
    +
    + + Notable Design Apps + Prototype, iterate and collect feedback on your products. + +
    +
    + + University + Ideas, thoughts and design resources shared with you. + +
    +
    +
    + +
    +
    +
    +
      +
      • +
      • +
      • +
    +
    +
    + + +

    © 1998‐2015 ZURB, Inc. All rights reserved.

    +
    +
    +
    + +
    + +
    +
    + + + + + + + - - - - - - - diff --git a/_build/slider.html b/_build/slider.html deleted file mode 100644 index cc1a27d12..000000000 --- a/_build/slider.html +++ /dev/null @@ -1,921 +0,0 @@ - - - - - - - - - - Foundation for Sites 6 Docs | Slider - - - - - - -
    - - - -
    - - -
    - - -
    - - - - - -
    -
    - - Foundation -
    -
    - - - - -
    -
    - -
    - -Jump to Nav - -
    -

    Slider

    - - JavaScript - -

    This handy lil slider is perfect for setting specific values within a range.

    - - -
    - -
    - -
    - -
    - -

    Basics

    Create a slider by adding the class .slider and the attribute data-slider to a container element. You should also define both a starting and maximum value for the slider.

    -

    Inside the container are three elements:

    -
      -
    • The handle (.slider-handle), which the user drags.
      • -
    • The fill (.slider-fill), which resizes dynamically based on where the handle is.
      • -
    • A hidden <input>, which is where the value of the slider is stored.
      • -
    -
    <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>
    - -
    - - - -
    -

    Vertical

    To get vertical, just add a .vertical class and data-vertical="true" the slider.

    -
    <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>
    - -
    - - - -
    -

    Disabled

    Add the class .disabled to disable interaction with the slider.

    -
    <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>
    - -
    - - - -
    -

    Two Handles

    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 <input>. This works with horizontal and vertical sliders.

    -

    You can add IDs to the <input>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.

    -

    Note that the first handle manipulates the first <input>, while the second handle manipulates the second <input>.

    -
    <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>
    - -
    - - - - - -
    -

    Data Binding

    Data binding allows you to connect the slider to an external <input> 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.

    -

    To set it all up, create an <input> with an ID and add aria-controls="id" to the slider handle, where id is the ID of the <input>.

    -
    <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>
    - -
    -
    - - -
    -
    -
    - -
    -

    Or with a step size:

    -
    <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>
    - -
    -
    - - -
    -
    -
    - -
    -

    Native Range Slider

    In Foundation 6.2, we introduced styles for <input type="range">, the native HTML element for range sliders. It's not supported in every browser, namely IE9 and some older mobile browsers. View browser support for the range input type.

    -
    <input type="range" min="1" max="100" step="1">
    - -

    If you're using the Sass version of Foundation, add this line to your main Sass file:

    -
    @include foundation-range-input;

    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:

    -
      -
    • Less markup: just write <input type="range"> and you're good.
      • -
    • No JavaScript is needed, which guarantees it runs faster in most browsers.
      • -
    • To disable the slider, add disabled as an attribute, instead of a class.
      • -
    • No support for vertical orientation.
      • -
    • No support for two handles.
      • -
    - - -
    -
    -

    Sass Reference

    - -
    -

    Variables

    - -

    The default styles of this component can be customized using these Sass variables in your project's settings file.

    - - - - - - - - - - - - - - - - - -
    NameTypeDefault ValueDescription
    $slider-width-verticalNumber0.5rem

    Default slider width of a vertical slider. (Doesn't apply to the native slider.)

    -
    $slider-transitionTransitionall 0.2s ease-in-out

    Transition properties to apply to the slider handle and fill. (Doesn't apply to the native slider.)

    -
    -
    - -
    - -
    -

    Mixins

    - -

    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.

    - - -
    -

    slider-container

    - - - -
    - 
    @include slider-container;
    -
    - -

    Adds the general styles for sliders.

    - - - - - -
    - -
    - - - -
    -

    slider-fill

    - - - -
    - 
    @include slider-fill;
    -
    - -

    Adds the general styles for active fill for sliders.

    - - - - - -
    - -
    - - - -
    -

    slider-handle

    - - - -
    - 
    @include slider-handle;
    -
    - -

    Adds the general styles for the slider handles.

    - - - - - -
    - - - - - -
    - - -
    - -
    -
    -

    JavaScript Reference

    - - -
    -

    Initializing

    - -

    The file foundation.slider.js must be included in your JavaScript to use this plugin, along with foundation.core.js. This plugin also requires these utility libraries:

    - - -
      -
    • foundation.util.motion.js
      • -
    - -
      -
    • foundation.util.triggers.js
      • -
    - -
      -
    • foundation.util.keyboard.js
      • -
    - -
      -
    • foundation.util.touch.js
      • -
    - - -
    - - -
    -

    Foundation.Slider

    - -

    Creates a new instance of a drilldown menu.

    - - - 
    var elem = new Foundation.Slider(element, options);
    - - - - - - - - - - - - - - - - -
    NameTypeDescription
    elementjQueryjQuery object to make into an accordion menu.
    optionsObjectOverrides to the default plugin settings.
    -
    - -
    - -
    -

    Plugin Options

    - -

    Use these options to customize an instance of Slider. Plugin options can be set as individual data attributes, one combined data-options attribute, or as an object passed to the plugin's constructor. Learn more about how JavaScript plugins are initialized.

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameDefaultDescription
    data-start0Minimum value for the slider scale.
    data-end100Maximum value for the slider scale.
    data-step1Minimum value change per change event.
    data-initial-start0Value at which the handle/input *(left handle/first input)* should be set to on initialization.
    data-initial-end100Value at which the right handle/second input should be set to on initialization.
    data-bindingfalseAllows the input to be located outside the container and visible. Set to by the JS
    data-click-selecttrueAllows the user to click/tap on the slider bar to select a value.
    data-verticalfalseSet to true and use the `vertical` class to change alignment to vertical.
    data-draggabletrueAllows the user to drag the slider handle(s) to select a value.
    data-disabledfalseDisables the slider and prevents event listeners from being applied. Double checked by JS with `disabledClass`.
    data-double-sidedfalseAllows the use of two handles. Double checked by the JS. Changes some logic handling.
    data-decimal2Number of decimal places the plugin should go to for floating point precision.
    data-move-time200Time, 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.
    data-disabled-classdisabledClass applied to disabled sliders.
    data-invert-verticalfalseWill invert the default layout for a vertical slider.
    data-changed-delay500Milliseconds before the `changed.zf-slider` event is triggered after value change.
    -
    - -
    - -
    -

    Events

    - -

    These events will fire from any element with a Slider plugin attached.

    - - - - - - - - - - - - - -
    NameDescription
    moved.zf.sliderFires when the handle is done moving.
    changed.zf.sliderFires when the value has not been change for a given time.
    -
    - -
    - -
    -

    Methods

    - -
    -

    destroy

    - -
    - 
    $('#element').foundation('destroy');
    -
    - -

    Destroys the slider plugin.

    - - - - - -
    -
    -
    - - - - -
    - -
    - -
    - -
    - -
    - -
    -
    - - -
    -
    - - -
    -
    -
    - -
    - -
    -
    - -
    -
    -
    - -
    Download ZURB’s 21 Responsive Trends That Will Shape 2017
    -

    Stay informed with amazing responsive trends each month from ZURB.

    -     -
    - -
    -
    - -
    -
    -
    -
    -

    Foundation for Sites

    -

    Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. -

    -
    -
    - -
    -
    -
    -
    -

    Want more?

    - -
    -
    -
    -
    -

    Talk to us

    -

    Tweet us at
    @ZURBfoundation

    -

    Get involved in
    our amazing community.

    -
    -
    -
    -
    -

    Stay Updated

    -

    Keep up with the latest on Foundation. Find us on Github.

    - Stay Connected -
    -
    -
    -
    -
    -
    -
    - - Studios - Helping more than 200 startups succeed since 1998. - -
    -
    - - Foundation - The most advanced front-end framework in the world. - -
    -
    - - Notable Design Apps - Prototype, iterate and collect feedback on your products. - -
    -
    - - University - Ideas, thoughts and design resources shared with you. - -
    -
    -
    - -
    -
    -
    -
      -
      • -
      • -
      • -
    -
    -
    - - -

    © 1998‐2016 ZURB, Inc. All rights reserved.

    -
    -
    -
    - -
    -
    - - - - - - - - - diff --git a/_build/starter-projects.html b/_build/starter-projects.html deleted file mode 100644 index 5d966bf66..000000000 --- a/_build/starter-projects.html +++ /dev/null @@ -1,528 +0,0 @@ - - - - - - - - - - Foundation for Sites 6 Docs | Starter Projects - - - - - - -
    - - - -
    - - -
    - - -
    - - - - - -
    -
    - - Foundation -
    -
    - - - - -
    -
    - -
    - -Jump to Nav - -
    -

    Starter Projects

    - - -

    We have a few starter project templates that can be installed with the Foundation CLI. You can also download them manually!

    - - -
    - -
    - -
    - -
    - -

    Our project templates give you a solid... Foundation on which to start a new project. Both templates use the Gulp build system to automate the process of compiling Sass, processing JavaScript, copying files, and more.

    -

    Basic Template

    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.

    -

    You can set up a basic project through the Foundation CLI with this command:

    -
    foundation new --framework sites --template basic

    It's also possible to download the template files directly from GitHub. Run npm install and bower install first to set it up, then npm start to run it. Download basic template.

    -
    -

    ZURB Template

    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!

    -

    You can set up an advanced project through the Foundation CLI with this command:

    -
    foundation new --framework sites --template zurb

    It's also possible to download the template files directly from GitHub. Run npm install and bower install first to set it up, then npm start to run it. Download advanced template.

    -

    The biggest difference between this and the basic template is the folder structure. In the ZURB Template, your project has a src/ folder which contains your source files, and a separate dist/ folder with your finished website. As you work on your project, Gulp continuously updates your dist/ folder with new versions of files. To compile a production build, run npm run build.

    -

    To override or add to the default styles of the ZURB Template, in your project's src/assets/scss/ folder

    -
      -
    • Change Sass variables in _settings.scss
      • -
    • Add custom SCSS and css to new files in the components folder then import those files at the bottom of app.scss
      • -
    -

    The _settings.scss and app.scss files are not changed when upgrading an existing project. As a result, you must manually edit your _settings.scss file to incorporate any Sass changes found in the release notes.

    -

    Here's an overview of what the ZURB Template can do:

    -

    Asset Copying

    Gulp will copy anything out of the src/assets folder as-is to the assets folder of your final project. Note that Sass files, JavaScript files, and images are not part of this copying process, as they have their own steps.

    -

    Page Compilation

    The src/ directory includes three folders used to create HTML pages: pages/, layouts/, and partials/. A flat file compiler called Panini 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 Handlebars.

    -

    Panini has a dedicated page here in the docs that explains its various features. Learn more about Panini.

    -

    Sass Compilation

    Sass is compiled to CSS using Libsass (via node-sass). The main Sass file is under src/assets/scss/app.scss, and imports Foundation and Motion UI. Any new Sass partials you create should be in this folder as well.

    -

    The CSS is output in the nested 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 clean-css, and pruned with UnCSS. UnCSS scans the HTML of your pages and removes any CSS classes you didn't use.

    -

    JavaScript Compilation

    All JavaScript files in the src/assets/js folder, along with Foundation and its dependencies, are bundled into one file called app.js. The files are bundled in this order:

    -
      -
    • Foundation's dependencies (including jQuery)
      • -
    • All files in src/assets/js
      • -
    • app.js
      • -
    -

    A source map is created that maps back to the original files. By default, the bundled app.js is uncompressed. When building for production, the file is run through UglifyJS for compression.

    -

    Image Compression

    By default, all images are copied as-is from assets/img to your dist folder. When building for production, images are run through gulp-imagemin for compression. The plugin supports JPEG, PNG, SVG, and GIF files.

    -

    BrowserSync

    The template creates a BrowserSync server, which is at http://localhost:8000. 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.

    -

    Style Guide Creation

    Under src/styleguide 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.

    -

    Style Sherpa has a dedicated page here in the docs that explains its various features. Learn more about Style Sherpa.

    - - - - - -
    - -
    - -
    - -
    - -
    - -
    -
    - - -
    -
    - - -
    -
    -
    - -
    - -
    -
    - -
    -
    -
    - -
    Download ZURB’s 21 Responsive Trends That Will Shape 2017
    -

    Stay informed with amazing responsive trends each month from ZURB.

    -     -
    - -
    -
    - -
    -
    -
    -
    -

    Foundation for Sites

    -

    Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. -

    -
    -
    - -
    -
    -
    -
    -

    Want more?

    - -
    -
    -
    -
    -

    Talk to us

    -

    Tweet us at
    @ZURBfoundation

    -

    Get involved in
    our amazing community.

    -
    -
    -
    -
    -

    Stay Updated

    -

    Keep up with the latest on Foundation. Find us on Github.

    - Stay Connected -
    -
    -
    -
    -
    -
    -
    - - Studios - Helping more than 200 startups succeed since 1998. - -
    -
    - - Foundation - The most advanced front-end framework in the world. - -
    -
    - - Notable Design Apps - Prototype, iterate and collect feedback on your products. - -
    -
    - - University - Ideas, thoughts and design resources shared with you. - -
    -
    -
    - -
    -
    -
    -
      -
      • -
      • -
      • -
    -
    -
    - - -

    © 1998‐2016 ZURB, Inc. All rights reserved.

    -
    -
    -
    - -
    -
    - - - - - - - - - diff --git a/_build/sticky.html b/_build/sticky.html deleted file mode 100644 index c330d2c9a..000000000 --- a/_build/sticky.html +++ /dev/null @@ -1,864 +0,0 @@ - - - - - - - - - - Foundation for Sites 6 Docs | Sticky - - - - - - -
    - - - -
    - - -
    - - -
    - - - - - -
    -
    - - Foundation -
    -
    - - - - -
    -
    - -
    - -Jump to Nav - -
    -

    Sticky

    - - JavaScript - -

    Stick nearly anything, anywhere you like!

    - - -
    - -
    - -
    - -
    - -

    Basics

    Add the .sticky class and [data-sticky] 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 [data-sticky-container].

    -
    <div class="columns 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="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 -->
-  </div>
-</div>
    -
    -
    -
    -

    - 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. -

    -

    - 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. -

    -

    - 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. -

    -

    - 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. -

    -
    -
    -
    - -
    -
    -
    -
    - -

    Advanced

    You can also use two anchors, if you please. Using data-top-anchor="idOfSomething", data-btm-anchor="idOfSomething:[top/bottom]", or a set pixel number data-top-anchor="150". If you use an element id with no top/bottom specified, it defaults to the top.

    -
    <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>
    -
    -

    - 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. -

    -

    - The image to the right will be sticky when it hits the top of this paragraph element. - 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. -

    -

    - 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. -

    -

    - The image to the right will lose stickiness when it hits the bottom of this paragraph element. - 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. -

    -

    - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. -

    -
    -
    -
    - -
    -
    -
    -
    - -

    Stick to bottom

    You can also stick to bottom. -Using data-stick-to="bottom". -Here is an example using two anchors (like above) with a stick to bottom.

    -
    <div class="columns 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>
    -
    -
    - -

    - 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. -

    -

    The image to the right will be sticky when it hits the top of this paragraph element. - 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. -

    -

    - 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. -

    -

    - The image to the right will lose stickiness when it hits the top of this paragraph element. - - 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. -

    - -
    -
    -
    - -
    -
    -
    -
    - -

    Sometimes you want a sticky nav bar or side nav, this is pretty simple, but does involve an extra step from Foundation 5's sticky class addition to Top Bar. The minimum to make a stick nav bar is below, and you can swap out .title-bar for another menu component. Please note the style width:100%, you can do it inline, or in your style sheets.

    -
    <div data-sticky-container>
-  <div class="title-bar" data-sticky data-options="marginTop:0;" style="width:100%">
-    <div class="title-bar-left"><!-- Content --></div>
-    <div class="title-bar-right"><!-- Content --></div>
-  </div>
-</div>

    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 content:bottom will make it break at the bottom of your #content element. This is useful if you want a sticky nav element, but not for the full length of the page.

    -
    <div data-sticky-container>
-  <div class="title-bar" data-sticky data-options="marginTop:0;" style="width:100%" data-top-anchor="1" data-btm-anchor="content:bottom">
-    <div class="title-bar-left"><!-- Content --></div>
-    <div class="title-bar-right"><!-- Content --></div>
-  </div>
-</div>

    -

    - - - -
    -
    -

    JavaScript Reference

    - - -
    -

    Initializing

    - -

    The file foundation.sticky.js must be included in your JavaScript to use this plugin, along with foundation.core.js. This plugin also requires these utility libraries:

    - - -
      -
    • foundation.util.triggers.js
      • -
    - -
      -
    • foundation.util.mediaQuery.js
      • -
    - - -
    - - -
    -

    Foundation.Sticky

    - -

    Creates a new instance of a sticky thing.

    - - - 
    var elem = new Foundation.Sticky(element, options);
    - - - - - - - - - - - - - - - - -
    NameTypeDescription
    elementjQueryjQuery object to make sticky.
    optionsObjectoptions object passed when creating the element programmatically.
    -
    - -
    - -
    -

    Plugin Options

    - -

    Use these options to customize an instance of Sticky. Plugin options can be set as individual data attributes, one combined data-options attribute, or as an object passed to the plugin's constructor. Learn more about how JavaScript plugins are initialized.

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameDefaultDescription
    data-container<div data-sticky-container class="small-6 columns"></div>Customizable container template. Add your own classes for styling and sizing.
    data-stick-totopLocation in the view the element sticks to.
    data-anchorexampleIdIf anchored to a single element, the id of that element.
    data-top-anchorexampleId:topIf using more than one element as anchor points, the id of the top anchor.
    data-btm-anchorexampleId:bottomIf using more than one element as anchor points, the id of the bottom anchor.
    data-margin-top1Margin, in `em`'s to apply to the top of the element when it becomes sticky.
    data-margin-bottom1Margin, in `em`'s to apply to the bottom of the element when it becomes sticky.
    data-sticky-onmediumBreakpoint string that is the minimum screen size an element should become sticky.
    data-sticky-classstickyClass applied to sticky element, and removed on destruction. Foundation defaults to `sticky`.
    data-container-classsticky-containerClass applied to sticky container. Foundation defaults to `sticky-container`.
    data-check-every50Number 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.
    -
    - -
    - -
    -

    Events

    - -

    These events will fire from any element with a Sticky plugin attached.

    - - - - - - - - - - - - - -
    NameDescription
    stuckto.zf.stickyFires when the $element has become `position: fixed;` -Namespaced to `top` or `bottom`, e.g. `sticky.zf.stuckto:top`
    unstuckfrom.zf.stickyFires when the $element has become anchored. -Namespaced to `top` or `bottom`, e.g. `sticky.zf.unstuckfrom:bottom`
    -
    - -
    - -
    -

    Methods

    - -
    -

    _pauseListeners

    - -
    - 
    $('#element').foundation('_pauseListeners', scrollListener);
    -
    - -

    Removes event handlers for scroll and change events on anchor.

    - - -

    Fires these events: - Sticky#event:pause -

    - - - - - - - - - - -
    NameTypeDescription
    scrollListenerStringunique, namespaced scroll listener attached to `window`
    - -
    -
    -
    -

    _calc

    - -
    - 
    $('#element').foundation('_calc', checkSizes, scroll);
    -
    - -

    Called on every scroll event and on _init -fires functions based on booleans and cached values

    - - - - - - - - - - - - - - - - - -
    NameTypeDescription
    checkSizesBooleantrue if plugin should recalculate sizes and breakpoints.
    scrollNumbercurrent scroll position passed from scroll event cb function. If not passed, defaults to `window.pageYOffset`.
    - -
    -
    -
    -

    destroy

    - -
    - 
    $('#element').foundation('destroy');
    -
    - -

    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.

    - - - - -
    -
    -
    -

    emCalc

    - -
    - 
    $('#element').foundation('emCalc', Number);
    -
    - -

    Helper function to calculate em values

    - - - - - - - - - - - - -
    NameTypeDescription
    Numberemnumber of em's to calculate into pixels
    - - -
    -
    -
    - - -
    - -
    - -
    - -
    - -
    - -
    -
    - - -
    -
    - - -
    -
    -
    - -
    - -
    -
    - -
    -
    -
    - -
    Download ZURB’s 21 Responsive Trends That Will Shape 2017
    -

    Stay informed with amazing responsive trends each month from ZURB.

    -     -
    - -
    -
    - -
    -
    -
    -
    -

    Foundation for Sites

    -

    Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. -

    -
    -
    - -
    -
    -
    -
    -

    Want more?

    - -
    -
    -
    -
    -

    Talk to us

    -

    Tweet us at
    @ZURBfoundation

    -

    Get involved in
    our amazing community.

    -
    -
    -
    -
    -

    Stay Updated

    -

    Keep up with the latest on Foundation. Find us on Github.

    - Stay Connected -
    -
    -
    -
    -
    -
    -
    - - Studios - Helping more than 200 startups succeed since 1998. - -
    -
    - - Foundation - The most advanced front-end framework in the world. - -
    -
    - - Notable Design Apps - Prototype, iterate and collect feedback on your products. - -
    -
    - - University - Ideas, thoughts and design resources shared with you. - -
    -
    -
    - -
    -
    -
    -
      -
      • -
      • -
      • -
    -
    -
    - - -

    © 1998‐2016 ZURB, Inc. All rights reserved.

    -
    -
    -
    - -
    -
    - - - - - - - - - diff --git a/_build/style-sherpa.html b/_build/style-sherpa.html deleted file mode 100644 index a4540c809..000000000 --- a/_build/style-sherpa.html +++ /dev/null @@ -1,554 +0,0 @@ - - - - - - - - - - Foundation for Sites 6 Docs | Style Sherpa - - - - - - -
    - - - -
    - - -
    - - -
    - - - - - -
    -
    - - Foundation -
    -
    - - - - -
    -
    - -
    - -Jump to Nav - -
    -

    Style Sherpa

    - - Library - -

    Bundled with the ZURB Template, Style Sherpa makes it easy to create a style guide for your codebase, with just two files.

    - - -
    - -
    - -
    - -
    - -

    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.

    -

    Style Sherpa is a small tool bundled with the ZURB Template 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.

    -
    -

    Usage

    The ZURB Template includes the folder src/styleguide/, 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

    -

    One is a Markdown file, index.md. This file contains the contents of your style guide.

    -

    The other is a Handlebars template, template.html. The contents of your style guide are inserted into this template as HTML. The final file is included in the dist/ folder of your project as styleguide.html.

    -
    -

    Writing Content

    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.

    -

    Sections are titled with a Markdown heading, which is a single hash mark:

    -
    # Buttons
-
-Lorem ipsum dolor sit amet, **consectetur adipisicing** elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    To create a new section, add four line breaks and a new heading:

    -
    # Buttons
-
-Lorem ipsum dolor sit amet, **consectetur adipisicing** elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
-
-
-# Forms
-
-Lorem ipsum dolor sit amet, `<form>` elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    Code Samples

    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.

    -
    ```html
-<button class="button" type="button">This is a button.</button>
-```

    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 html as the language in Markdown, set it to html_example. This will print a code sample and a live demo with the same code all in one go.

    -
    ```html_example
-<button class="button" type="button">This is a button.</button>
-```

    The output looks something like this:

    -
    <button class="button" type="button">This is a button.</button>
    - -
    -

    Changing the Template

    The ZURB Template includes a minimal boilerplate for your style guide, but you're free to customize it however you want.

    -

    The boilerplate uses Foundation's Vertical Menu—one item is made for each section. Here's what the Handlebars code looks like:

    -

    -
    <div class="column row"><div class="row collapse">
-  <div class="large-3 medium-4 columns" data-sticky-container>
-    <ul class="vertical menu">
-      {{#each pages}}
-        <li><a href="#{{ anchor }}">{{ title }}</a></li>
-      {{/each}}
-    </ul>
-  </div>
-
-  <div class="large-9 medium-8 columns">
-    {{#each pages}}
-      <section class="ss-section" id="{{ anchor }}">
-        {{ body }}
-      </section>
-    {{/each}}
-  </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:

    -
      -
    • title: The name of the section.
      • -
    • anchor: The name of the section, formatted as a URL anchor.
      • -
    • body: The content of the section.
      • -
    -

    - - - - - -
    - -
    - -
    - -
    - -
    - -
    -
    - - -
    -
    - - -
    -
    -
    - -
    - -
    -
    - -
    -
    -
    - -
    Download ZURB’s 21 Responsive Trends That Will Shape 2017
    -

    Stay informed with amazing responsive trends each month from ZURB.

    -     -
    - -
    -
    - -
    -
    -
    -
    -

    Foundation for Sites

    -

    Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. -

    -
    -
    - -
    -
    -
    -
    -

    Want more?

    - -
    -
    -
    -
    -

    Talk to us

    -

    Tweet us at
    @ZURBfoundation

    -

    Get involved in
    our amazing community.

    -
    -
    -
    -
    -

    Stay Updated

    -

    Keep up with the latest on Foundation. Find us on Github.

    - Stay Connected -
    -
    -
    -
    -
    -
    -
    - - Studios - Helping more than 200 startups succeed since 1998. - -
    -
    - - Foundation - The most advanced front-end framework in the world. - -
    -
    - - Notable Design Apps - Prototype, iterate and collect feedback on your products. - -
    -
    - - University - Ideas, thoughts and design resources shared with you. - -
    -
    -
    - -
    -
    -
    -
      -
      • -
      • -
      • -
    -
    -
    - - -

    © 1998‐2016 ZURB, Inc. All rights reserved.

    -
    -
    -
    - -
    -
    - - - - - - - - - diff --git a/_build/switch.html b/_build/switch.html deleted file mode 100644 index 2c1abdec6..000000000 --- a/_build/switch.html +++ /dev/null @@ -1,928 +0,0 @@ - - - - - - - - - - Foundation for Sites 6 Docs | Switch - - - - - - -
    - - - -
    - - -
    - - -
    - - - - - -
    -
    - - Foundation -
    -
    - - - - -
    -
    - -
    - -Jump to Nav - -
    -

    Switch

    - - -

    Now you can tell your users to flip the switch or switch off.

    - - -
    - -
    - -
    - -
    - -

    Basics

    Add the .switch class to an element to create a switch. Inside the switch, add an <input type="checkbox"> with the class .switch-input. Next to that, create a <label> with the class .switch-paddle.

    -

    Give the <input> a unique ID and point the <label> to it with the for attribute. This makes the switch clickable.

    -
    -

    Inside the switch label is screen reader-only text, which uses the .show-for-sr class to visually mask the text.

    -
    - -
    -

    Make sure the HTML of the switch goes in the order you see above—<input>, then <label>

    -
    - -
    <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>
    - -
    - - -
    -

    Radio Switch

    You can also use <input type="radio"> instead of checkbox to create a series of options.

    -
    <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>
    - -
    - - -
    - - -
    - -
    - - -
    - -
    -

    Sizing Classes

    Use the classes .tiny, .small, or .large to change the switch size.

    -
    <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>
    - -
    - - -
    - -
    - - -
    - -
    - - -
    -

    Inner Labels

    You can place active and inactive text inside of a switch. The active text (.switch-active) only displays when the switch is on, and the inactive text (.switch-inactive) only displays when the switch is off.

    -

    Active/inactive text goes inside of the switch's <label>.

    -
    -

    Depending on the length of the words you place inside the switch, you may need to fine-tune the left or right CSS properties of the text to get it positioned right.

    -
    - -
    -

    Add aria-hidden="true" to these labels to prevent AT from reading them.

    -
    - -
    <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>
    - -

    Do you like me?

    -
    - - -
    - -
    -
    -

    Sass Reference

    - -
    -

    Variables

    - -

    The default styles of this component can be customized using these Sass variables in your project's settings file.

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameTypeDefault ValueDescription
    $switch-backgroundColor$medium-gray

    Background color of a switch.

    -
    $switch-background-activeColor$primary-color

    Background active color of a switch.

    -
    $switch-heightNumber2rem

    Height of a switch, with no class applied.

    -
    $switch-height-tinyNumber1.5rem

    Height of a switch with .tiny class.

    -
    $switch-height-smallNumber1.75rem

    Height of a switch with .small class.

    -
    $switch-height-largeNumber2.5rem

    Height of a switch with .large class.

    -
    $switch-radiusNumber$global-radius

    Border radius of the switch

    -
    $switch-marginNumber$global-margin

    border around a modal.

    -
    $switch-paddle-backgroundColor$white

    Background color for the switch container and paddle.

    -
    $switch-paddle-offsetNumber0.25rem

    Spacing between a switch paddle and the edge of the body.

    -
    $switch-paddle-radiusNumber$global-radius

    border radius of the switch paddle

    -
    $switch-paddle-transitionNumberall 0.25s ease-out

    switch transition.

    -
    -
    - -
    - -
    -

    Mixins

    - -

    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.

    - - -
    -

    switch-container

    - - - -
    - 
    @include switch-container;
    -
    - -

    Adds styles for a switch container. Apply this to a container class.

    - - - - - -
    - -
    - - - -
    -

    switch-input

    - - - -
    - 
    @include switch-input;
    -
    - -

    Adds styles for a switch input. Apply this to an <input> within a switch.

    - - - - - -
    - -
    - - - -
    -

    switch-paddle

    - - - -
    - 
    @include switch-paddle;
    -
    - -

    Adds styles for the background and paddle of a switch. Apply this to a <label> within a switch.

    - - - - - -
    - -
    - - - -
    -

    switch-text

    - - - -
    - 
    @include switch-text;
    -
    - -

    Adds base styles for active/inactive text inside a switch. Apply this to text elements inside the switch <label>.

    - - - - - -
    - -
    - - - -
    -

    switch-text-active

    - - - -
    - 
    @include switch-text-active;
    -
    - -

    Adds styles for the active state text within a switch.

    - - - - - -
    - -
    - - - -
    -

    switch-text-inactive

    - - - -
    - 
    @include switch-text-inactive;
    -
    - -

    Adds styles for the inactive state text within a switch.

    - - - - - -
    - -
    - - - -
    -

    switch-size

    - - - -
    - 
    @include switch-size($font-size, $width, $height, $paddle-width, $paddle-offset);
    -
    - -

    Changes the size of a switch by modifying the size of the body and paddle. Apply this to a switch container.

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    ParameterTypeDefault ValueDescription
    $font-sizeNumber1rem

    Font size of label text within the switch.

    -
    $widthNumber4rem

    Width of the switch body.

    -
    $heightNumber2rem

    Height of the switch body.

    -
    $paddle-widthNumber1.5rem

    Width of the switch paddle.

    -
    $paddle-offsetNumber0.25rem

    Spacing between the switch paddle and the edge of the switch body.

    -
    -
    - - - - - -
    - - -
    - - - - - -
    - -
    - -
    - -
    - -
    - -
    -
    - - -
    -
    - - -
    -
    -
    - -
    - -
    -
    - -
    -
    -
    - -
    Download ZURB’s 21 Responsive Trends That Will Shape 2017
    -

    Stay informed with amazing responsive trends each month from ZURB.

    -     -
    - -
    -
    - -
    -
    -
    -
    -

    Foundation for Sites

    -

    Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. -

    -
    -
    - -
    -
    -
    -
    -

    Want more?

    - -
    -
    -
    -
    -

    Talk to us

    -

    Tweet us at
    @ZURBfoundation

    -

    Get involved in
    our amazing community.

    -
    -
    -
    -
    -

    Stay Updated

    -

    Keep up with the latest on Foundation. Find us on Github.

    - Stay Connected -
    -
    -
    -
    -
    -
    -
    - - Studios - Helping more than 200 startups succeed since 1998. - -
    -
    - - Foundation - The most advanced front-end framework in the world. - -
    -
    - - Notable Design Apps - Prototype, iterate and collect feedback on your products. - -
    -
    - - University - Ideas, thoughts and design resources shared with you. - -
    -
    -
    - -
    -
    -
    -
      -
      • -
      • -
      • -
    -
    -
    - - -

    © 1998‐2016 ZURB, Inc. All rights reserved.

    -
    -
    -
    - -
    -
    - - - - - - - - - diff --git a/_build/table.html b/_build/table.html deleted file mode 100644 index 32bddcc1d..000000000 --- a/_build/table.html +++ /dev/null @@ -1,957 +0,0 @@ - - - - - - - - - - Foundation for Sites 6 Docs | Tables - - - - - - -
    - - - -
    - - -
    - - -
    - - - - - -
    -
    - - Foundation -
    -
    - - - - -
    -
    - -
    - -Jump to Nav - -
    -

    Tables

    - - -

    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.

    - - -
    - -
    - -
    - -
    - -

    Basics

    No bells or whistles here, just a straight up table for all of your basic table needs.

    -
    <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>
    - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Table HeaderTable HeaderTable HeaderTable Header
    Content Goes HereThis is longer content Donec id elit non mi porta gravida at eget metus.Content Goes HereContent Goes Here
    Content Goes HereThis is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.Content Goes HereContent Goes Here
    Content Goes HereThis is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.Content Goes HereContent Goes Here
    -

    Hover State

    Need to spiff up the table just a tad? Just add the class .hover to lightly darken the table rows on hover.

    -
    <table class="hover">
-</table>
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Table HeaderTable HeaderTable HeaderTable Header
    Content Goes HereThis is longer content Donec id elit non mi porta gravida at eget metus.Content Goes HereContent Goes Here
    Content Goes HereThis is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.Content Goes HereContent Goes Here
    Content Goes HereThis is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.Content Goes HereContent Goes Here
    - -
    -

    Stacked Table

    To stack a table on small screens, add the class .stack.

    -
    <table class="stack">
-</table>
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    CookiesTasteCaloriesOverall
    Chocolate ChipTastey120cal7.5/10
    SnickerdoodleDelicious95cal8/10
    Oatmeal RaisinSuperb10cal11/10
    - -
    -

    Scrolling Table

    Got a lot of tubular tabular data? Add a wrapper element with the class .table-scroll around your table to enable horizontal scrolling.

    -
    -

    The wrapping element was added in Foundation 6.2—prior to that, you just added the class .scroll to the table itself. However, this method doesn't work great with Internet Explorer 9. If you don't need IE9 support, you can just add .scroll to your table, and the wrapping element isn't necessary. -

    - -
    <div class="table-scroll">
-  <table></table>
-</div>
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    This is the description!OneTwoThreeFourFiveSixSevenEightNineTenElevenTwelve
    These are all the words that people use to describe Foundation 6!CoolSwagChillKillerRadBallerOMGSweetAwesomeBeastDopeTubular
    These are some words that people use to describe other web frameworks.WhatevsUgh.LOLKAightEh.Grrr...Meh.TTYLBleh.Really?Why?
    Here are some great super heros.BatmanSupermanSpidermanWonder WomanHulkNicolas CageAntmanAquamanCaptain AmericaWolverineThorIron Man
    Here's a footer, just in case
    -
    - - -
    -
    -

    Sass Reference

    - -
    -

    Variables

    - -

    The default styles of this component can be customized using these Sass variables in your project's settings file.

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameTypeDefault ValueDescription
    $table-backgroundColor$white

    Default color for table background.

    -
    $table-color-scaleNumber5%

    Default scale for darkening the striped table rows and the table border.

    -
    $table-borderList1px solid smart-scale($table-background, $table-color-scale)

    Default style for table border.

    -
    $table-paddingNumberrem-calc(8 10 10)

    Default padding for table.

    -
    $table-hover-scaleNumber2%

    Default scale for darkening the table rows on hover.

    -
    $table-row-hoverListdarken($table-background, $table-hover-scale)

    Default color of standard rows on hover.

    -
    $table-row-stripe-hoverListdarken($table-background, $table-color-scale + $table-hover-scale)

    Default color of striped rows on hover.

    -
    $table-striped-backgroundColorsmart-scale($table-background, $table-color-scale)

    Default background color for striped rows.

    -
    $table-stripeKeywordeven

    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.

    -
    $table-head-backgroundColorsmart-scale($table-background, $table-color-scale / 2)

    Default color for header background.

    -
    $table-foot-backgroundColorsmart-scale($table-background, $table-color-scale)

    Default color for footer background.

    -
    $table-head-font-colorColor$body-font-color

    Default font color for header.

    -
    $show-header-for-stackedBooleanfalse

    Default value for showing the header when using stacked tables.

    -
    -
    - -
    - -
    -

    Mixins

    - -

    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.

    - - -
    -

    table

    - - - -
    - 
    @include table($stripe);
    -
    - -

    Adds the general styles for tables.

    - - - - - - - - - - - - - - - -
    ParameterTypeDefault ValueDescription
    $stripeKeyword$table-stripe

    Uses keywords even, odd, or none to darken rows of the table. The default value is even.

    -
    -
    - -
    - - - -
    -

    table-scroll

    - - - -
    - 
    @include table-scroll;
    -
    - -

    Adds the ability to horizontally scroll the table when the content overflows horizontally.

    - - - - - -
    - -
    - - - -
    -

    table-hover

    - - - -
    - 
    @include table-hover;
    -
    - -

    Slightly darkens the table rows on hover.

    - - - - - -
    - -
    - - - -
    -

    table-stack

    - - - -
    - 
    @include table-stack($header);
    -
    - -

    Adds styles for a stacked table. Useful for small-screen layouts.

    - - - - - - - - - - - - - - - -
    ParameterTypeDefault ValueDescription
    $headerBoolean$show-header-for-stacked

    Show the first th of header when stacked.

    -
    -
    - - - - - -
    - - -
    - - - - - -
    - -
    - -
    - -
    - -
    - -
    -
    - - -
    -
    - - -
    -
    -
    - -
    - -
    -
    - -
    -
    -
    - -
    Download ZURB’s 21 Responsive Trends That Will Shape 2017
    -

    Stay informed with amazing responsive trends each month from ZURB.

    -     -
    - -
    -
    - -
    -
    -
    -
    -

    Foundation for Sites

    -

    Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. -

    -
    -
    - -
    -
    -
    -
    -

    Want more?

    - -
    -
    -
    -
    -

    Talk to us

    -

    Tweet us at
    @ZURBfoundation

    -

    Get involved in
    our amazing community.

    -
    -
    -
    -
    -

    Stay Updated

    -

    Keep up with the latest on Foundation. Find us on Github.

    - Stay Connected -
    -
    -
    -
    -
    -
    -
    - - Studios - Helping more than 200 startups succeed since 1998. - -
    -
    - - Foundation - The most advanced front-end framework in the world. - -
    -
    - - Notable Design Apps - Prototype, iterate and collect feedback on your products. - -
    -
    - - University - Ideas, thoughts and design resources shared with you. - -
    -
    -
    - -
    -
    -
    -
      -
      • -
      • -
      • -
    -
    -
    - - -

    © 1998‐2016 ZURB, Inc. All rights reserved.

    -
    -
    -
    - -
    -
    - - - - - - - - - diff --git a/_build/tabs.html b/_build/tabs.html deleted file mode 100644 index 6f4da9db5..000000000 --- a/_build/tabs.html +++ /dev/null @@ -1,1043 +0,0 @@ - - - - - - - - - - Foundation for Sites 6 Docs | Tabs - - - - - - -
    - - - -
    - - -
    - - -
    - - - - - -
    -
    - - Foundation -
    -
    - - - - -
    -
    - -
    - -Jump to Nav - -
    -

    Tabs

    - - JavaScript - -

    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.

    - - -
    - -
    - -
    - -
    - -

    Basics

    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 .tabs, and each item has the class .tabs-title. Each tab contains a link to a tab. The href of each link should match the ID of a tab.

    -
    <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>
-</ul>

    The tab content container has the class .tabs-content, while each section has the class .tabs-panel. Each content pane also has a unique ID, which is targeted by a link in the tabstrip.

    -
    <div class="tabs-content" data-tabs-content="example-tabs">
-  <div class="tabs-panel is-active" id="panel1">
-    <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="panel2">
-    <p>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.</p>
-  </div>
-</div>

    Put it all together, and we get this:

    - - -
    -
    -

    one

    -

    Check me out! I'm a super cool Tab panel with text content!

    -
    -
    -

    two

    - -
    -
    -

    three

    -

    Check me out! I'm a super cool Tab panel with text content!

    -
    -
    -

    four

    - -
    -
    -

    five

    -

    Check me out! I'm a super cool Tab panel with text content!

    -
    -
    -

    six

    - -
    -
    - -
    -

    Vertical Tabs

    Add the .vertical 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.

    -
    <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>
    - -
    -
    - -
    -
    -
    -
    -

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    -
    -
    -

    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.

    -
    -
    - -
    -
    -

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    -
    -
    -

    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.

    -
    -
    - -
    -
    -
    -
    - -
    -
    -

    Sass Reference

    - -
    -

    Variables

    - -

    The default styles of this component can be customized using these Sass variables in your project's settings file.

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameTypeDefault ValueDescription
    $tab-marginNumber0

    Default margin of the tab bar.

    -
    $tab-backgroundColor$white

    Default background color of a tab bar.

    -
    $tab-background-activeColor$light-gray

    active background color of a tab bar.

    -
    $tab-item-font-sizeNumberrem-calc(12)

    Font size of tab items.

    -
    $tab-item-background-hover$white

    Default background color on hover for items in a Menu.

    -
    $tab-item-paddingNumber1.25rem 1.5rem

    Default padding of a tab item.

    -
    $tab-expand-maxNumber6

    Maximum number of expand-n classes to include in the CSS.

    -
    $tab-content-backgroundColor$white

    Default background color of tab content.

    -
    $tab-content-borderColor$light-gray

    Default border color of tab content.

    -
    $tab-content-colorColorforeground($tab-background, $primary-color)

    Default text color of tab content.

    -
    $tab-content-paddingNumber or List1rem

    Default padding for tab content.

    -
    -
    - -
    - -
    -

    Mixins

    - -

    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.

    - - -
    -

    tabs-container

    - - - -
    - 
    @include tabs-container;
    -
    - -

    Adds styles for a tab container. Apply this to a <ul>.

    - - - - - -
    - -
    - - - -
    -

    tabs-container-vertical

    - - - -
    - 
    @include tabs-container-vertical;
    -
    - -

    Augments a tab container to have vertical tabs. Use this in conjunction with tabs-container().

    - - - - - -
    - -
    - - - -
    -

    tabs-title

    - - - -
    - 
    @include tabs-title;
    -
    - -

    Adds styles for the links within a tab container. Apply this to the <li> elements inside a tab container.

    - - - - - -
    - -
    - - - -
    -

    tabs-content

    - - - -
    - 
    @include tabs-content;
    -
    - -

    Adds styles for the wrapper that surrounds a tab group's content panes.

    - - - - - -
    - -
    - - - -
    -

    tabs-content-vertical

    - - - -
    - 
    @include tabs-content-vertical;
    -
    - -

    Augments a tab content container to have a vertical style, by shifting the border around. Use this in conjunction with tabs-content().

    - - - - - -
    - -
    - - - -
    -

    tabs-panel

    - - - -
    - 
    @include tabs-panel;
    -
    - -

    Adds styles for an individual tab content panel within the tab content container.

    - - - - - -
    - - - - - -
    - - -
    - -
    -
    -

    JavaScript Reference

    - - -
    -

    Initializing

    - -

    The file foundation.tabs.js must be included in your JavaScript to use this plugin, along with foundation.core.js. This plugin also requires these utility libraries:

    - - -
      -
    • foundation.util.keyboard.js
      • -
    - -
      -
    • foundation.util.timerAndImageLoader.js
      • -
    - - -
    - - -
    -

    Foundation.Tabs

    - -

    Creates a new instance of tabs.

    - - - 
    var elem = new Foundation.Tabs(element, options);
    - -

    Fires these events: - Tabs#event:init -

    - - - - - - - - - - - - - - - -
    NameTypeDescription
    elementjQueryjQuery object to make into tabs.
    optionsObjectOverrides to the default plugin settings.
    -
    - -
    - -
    -

    Plugin Options

    - -

    Use these options to customize an instance of Tabs. Plugin options can be set as individual data attributes, one combined data-options attribute, or as an object passed to the plugin's constructor. Learn more about how JavaScript plugins are initialized.

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameDefaultDescription
    data-auto-focusfalseAllows the window to scroll to content of active pane on load if set to true.
    data-wrap-on-keystrueAllows keyboard input to 'wrap' around the tab links.
    data-match-heightfalseAllows the tab content panes to match heights if set to true.
    data-link-classtabs-titleClass applied to `li`'s in tab link list.
    data-panel-classtabs-panelClass applied to the content containers.
    -
    - -
    - -
    -

    Events

    - -

    These events will fire from any element with a Tabs plugin attached.

    - - - - - - - - - -
    NameDescription
    change.zf.tabsFires when the plugin has successfully changed tabs.
    -
    - -
    - -
    -

    Methods

    - -
    -

    _handleTabChange

    - -
    - 
    $('#element').foundation('_handleTabChange', $target);
    -
    - -

    Opens the tab $targetContent defined by $target.

    - - -

    Fires these events: - Tabs#event:change -

    - - - - - - - - - - -
    NameTypeDescription
    $targetjQueryTab to open.
    - -
    -
    -
    -

    selectTab

    - -
    - 
    $('#element').foundation('selectTab', elem);
    -
    - -

    Public method for selecting a content pane to display.

    - - - - - - - - - - - - -
    NameTypeDescription
    elemjQueryjQuery object or string of the id of the pane to display.
    - -
    -
    -
    -

    destroy

    - -
    - 
    $('#element').foundation('destroy');
    -
    - -

    Destroys an instance of an tabs.

    - - -

    Fires these events: - Tabs#event:destroyed -

    - - - -
    -
    -
    - - - - -
    - -
    - -
    - -
    - -
    - -
    -
    - - -
    -
    - - -
    -
    -
    - -
    - -
    -
    - -
    -
    -
    - -
    Download ZURB’s 21 Responsive Trends That Will Shape 2017
    -

    Stay informed with amazing responsive trends each month from ZURB.

    -     -
    - -
    -
    - -
    -
    -
    -
    -

    Foundation for Sites

    -

    Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. -

    -
    -
    - -
    -
    -
    -
    -

    Want more?

    - -
    -
    -
    -
    -

    Talk to us

    -

    Tweet us at
    @ZURBfoundation

    -

    Get involved in
    our amazing community.

    -
    -
    -
    -
    -

    Stay Updated

    -

    Keep up with the latest on Foundation. Find us on Github.

    - Stay Connected -
    -
    -
    -
    -
    -
    -
    - - Studios - Helping more than 200 startups succeed since 1998. - -
    -
    - - Foundation - The most advanced front-end framework in the world. - -
    -
    - - Notable Design Apps - Prototype, iterate and collect feedback on your products. - -
    -
    - - University - Ideas, thoughts and design resources shared with you. - -
    -
    -
    - -
    -
    -
    -
      -
      • -
      • -
      • -
    -
    -
    - - -

    © 1998‐2016 ZURB, Inc. All rights reserved.

    -
    -
    -
    - -
    -
    - - - - - - - - - diff --git a/_build/thumbnail.html b/_build/thumbnail.html deleted file mode 100644 index 7f1648d9f..000000000 --- a/_build/thumbnail.html +++ /dev/null @@ -1,611 +0,0 @@ - - - - - - - - - - Foundation for Sites 6 Docs | Thumbnail - - - - - - -
    - - - -
    - - -
    - - -
    - - - - - -
    -
    - - Foundation -
    -
    - - - - -
    -
    - -
    - -Jump to Nav - -
    -

    Thumbnail

    - - -

    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à!

    - - -
    - -
    - -
    - -
    - -

    The .thumbnail class can be applied directly to an <img> element, or an <a> that wraps it. Make sure the <img> has an alt attribute that describes the contents of the image.

    -
    <img class="thumbnail" src="assets/img/thumbnail/01.jpg" alt="Photo of Uranus.">
    -
    - Photo of Uranus. -
    -
    - Photo of Neptune. -
    -
    - Photo of Pluto. -
    -
    - - -
    -
    -

    Sass Reference

    - -
    -

    Variables

    - -

    The default styles of this component can be customized using these Sass variables in your project's settings file.

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameTypeDefault ValueDescription
    $thumbnail-borderBordersolid 4px $white

    Border around thumbnail images.

    -
    $thumbnail-margin-bottomLength$global-margin

    Bottom margin for thumbnail images.

    -
    $thumbnail-shadowShadow0 0 0 1px rgba($black, 0.2)

    Box shadow under thumbnail images.

    -
    $thumbnail-shadow-hoverShadow0 0 6px 1px rgba($primary-color, 0.5)

    Box shadow under thumbnail images.

    -
    $thumbnail-transitionTransitionbox-shadow 200ms ease-out

    Transition proprties for thumbnail images.

    -
    $thumbnail-radiusNumber$global-radius

    Default radius for thumbnail images.

    -
    -
    - -
    - -
    -

    Mixins

    - -

    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.

    - - -
    -

    thumbnail

    - - - -
    - 
    @include thumbnail;
    -
    - -

    Adds thumbnail styles to an element.

    - - - - - -
    - - - - - -
    - - -
    - - - - - -
    - -
    - -
    - -
    - -
    - -
    -
    - - -
    -
    - - -
    -
    -
    - -
    - -
    -
    - -
    -
    -
    - -
    Download ZURB’s 21 Responsive Trends That Will Shape 2017
    -

    Stay informed with amazing responsive trends each month from ZURB.

    -     -
    - -
    -
    - -
    -
    -
    -
    -

    Foundation for Sites

    -

    Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. -

    -
    -
    - -
    -
    -
    -
    -

    Want more?

    - -
    -
    -
    -
    -

    Talk to us

    -

    Tweet us at
    @ZURBfoundation

    -

    Get involved in
    our amazing community.

    -
    -
    -
    -
    -

    Stay Updated

    -

    Keep up with the latest on Foundation. Find us on Github.

    - Stay Connected -
    -
    -
    -
    -
    -
    -
    - - Studios - Helping more than 200 startups succeed since 1998. - -
    -
    - - Foundation - The most advanced front-end framework in the world. - -
    -
    - - Notable Design Apps - Prototype, iterate and collect feedback on your products. - -
    -
    - - University - Ideas, thoughts and design resources shared with you. - -
    -
    -
    - -
    -
    -
    -
      -
      • -
      • -
      • -
    -
    -
    - - -

    © 1998‐2016 ZURB, Inc. All rights reserved.

    -
    -
    -
    - -
    -
    - - - - - - - - - diff --git a/_build/toggler.html b/_build/toggler.html deleted file mode 100644 index 3b8657932..000000000 --- a/_build/toggler.html +++ /dev/null @@ -1,708 +0,0 @@ - - - - - - - - - - Foundation for Sites 6 Docs | Toggler - - - - - - -
    - - - -
    - - -
    - - -
    - - - - - -
    -
    - - Foundation -
    -
    - - - - -
    -
    - -
    - -Jump to Nav - -
    -

    Toggler

    - - JavaScript - Motion UI - -

    Toggler makes it easy to toggle CSS or animate any element with a click.

    - - -
    - -
    - -
    - -
    - -

    Toggle a CSS class

    To setup a class toggle, start by adding the attribute data-toggler to an element. The value of data-toggler is the class you want to toggle. Also give the element a unique ID so it can be targeted.

    -
    <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>

    Then, add data-toggle 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><a data-toggle="menuBar">Expand!</a></p>

    Expand!

    - - - -
    -

    Toggle with Animation

    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.

    -

    Instead of data-toggler, add the attribute data-animate. The value of the attribute is the in animation you want, followed by the out animation.

    -
    <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>
    - -

    Toggle Panel

    - -
    -

    Hello!

    -

    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?

    -
    -

    Mark as Closable

    To create an element that can be closed once, add the attribute data-closable. Then add a click trigger inside the element using data-close.

    -
    <div class="callout" data-closable>
-  <button class="close-button" data-close>&times;</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>
    - -
    - -

    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.

    -
    -

    With Alternate Animation

    data-closable can be configured with a custom exit animation.

    -
    <div class="callout" data-closable="slide-out-right">
-  <button class="close-button" data-close>&times;</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>
    - -
    - -

    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.

    -
    -

    Toggle on focus

    The data-toggle attribute only toggles classes/visibility on click. You can also have the toggle fire when an element is focused or unfocused using data-toggle-focus.

    -
    <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>
    - -
    - -
    -

    Multiple Targets

    The data-toggle, data-close, and data-open attributes can now target multiple elements! The syntax is simple; just pass a space separated list to the data-x attribute like so:

    -
    <button class="button" data-toggle="foo bar baz">Toggle things</button>

    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.

    -

    -
    -
    - Photo of Uranus. -
    -
    - Photo of Uranus. -
    -
    - Photo of Uranus. -
    -
    - - - -
    -
    -

    JavaScript Reference

    - - -
    -

    Initializing

    - -

    The file foundation.toggler.js must be included in your JavaScript to use this plugin, along with foundation.core.js. This plugin also requires these utility libraries:

    - - -
      -
    • foundation.util.motion.js
      • -
    - -
      -
    • foundation.util.triggers.js
      • -
    - - -
    - - -
    -

    Foundation.Toggler

    - -

    Creates a new instance of Toggler.

    - - - 
    var elem = new Foundation.Toggler(element, options);
    - -

    Fires these events: - Toggler#event:init -

    - - - - - - - - - - - - - - - -
    NameTypeDescription
    elementObjectjQuery object to add the trigger to.
    optionsObjectOverrides to the default plugin settings.
    -
    - -
    - -
    -

    Plugin Options

    - -

    Use these options to customize an instance of Toggler. Plugin options can be set as individual data attributes, one combined data-options attribute, or as an object passed to the plugin's constructor. Learn more about how JavaScript plugins are initialized.

    - - - - - - - - - - -
    NameDefaultDescription
    data-animatefalseTells the plugin if the element should animated when toggled.
    -
    - -
    - -
    -

    Events

    - -

    These events will fire from any element with a Toggler plugin attached.

    - - - - - - - - - - - - - -
    NameDescription
    on.zf.togglerFires if the target element has the class after a toggle.
    off.zf.togglerFires if the target element does not have the class after a toggle.
    -
    - -
    - -
    -

    Methods

    - -
    -

    toggle

    - -
    - 
    $('#element').foundation('toggle');
    -
    - -

    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".

    - - -

    Fires these events: - Toggler#event:on - Toggler#event:off -

    - - -
    -
    -
    -

    destroy

    - -
    - 
    $('#element').foundation('destroy');
    -
    - -

    Destroys the instance of Toggler on the element.

    - - - - - -
    -
    -
    - - -
    - -
    - -
    - -
    - -
    - -
    -
    - - -
    -
    - - -
    -
    -
    - -
    - -
    -
    - -
    -
    -
    - -
    Download ZURB’s 21 Responsive Trends That Will Shape 2017
    -

    Stay informed with amazing responsive trends each month from ZURB.

    -     -
    - -
    -
    - -
    -
    -
    -
    -

    Foundation for Sites

    -

    Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. -

    -
    -
    - -
    -
    -
    -
    -

    Want more?

    - -
    -
    -
    -
    -

    Talk to us

    -

    Tweet us at
    @ZURBfoundation

    -

    Get involved in
    our amazing community.

    -
    -
    -
    -
    -

    Stay Updated

    -

    Keep up with the latest on Foundation. Find us on Github.

    - Stay Connected -
    -
    -
    -
    -
    -
    -
    - - Studios - Helping more than 200 startups succeed since 1998. - -
    -
    - - Foundation - The most advanced front-end framework in the world. - -
    -
    - - Notable Design Apps - Prototype, iterate and collect feedback on your products. - -
    -
    - - University - Ideas, thoughts and design resources shared with you. - -
    -
    -
    - -
    -
    -
    -
      -
      • -
      • -
      • -
    -
    -
    - - -

    © 1998‐2016 ZURB, Inc. All rights reserved.

    -
    -
    -
    - -
    -
    - - - - - - - - - diff --git a/_build/tooltip.html b/_build/tooltip.html deleted file mode 100644 index c252490f1..000000000 --- a/_build/tooltip.html +++ /dev/null @@ -1,876 +0,0 @@ - - - - - - - - - - Foundation for Sites 6 Docs | Tooltip - - - - - - -
    - - - -
    - - -
    - - -
    - - - - - -
    -
    - - Foundation -
    -
    - - - - -
    -
    - -
    - -Jump to Nav - -
    -

    Tooltip

    - - JavaScript - -

    Tooltips? More like Cooltips. But really though, tooltips are nifty for displaying extended information for a term or action on a page.

    - - -
    - -
    - -
    - -
    - -

    Basic Tooltip

    By default, a tooltip appears below the defined term on hover.

    -
    <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>
    - -

    -The scarabaeus 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. -

    -

    Tooltip Top

    To get a tip-top top tooltip (lol), just add the class .top to the <span> element.

    -
    <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>
    - -

    -...clearing away the brambles with the -scythe. -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. -

    -

    Tooltip clicking

    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>
-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>
    - -

    -this -tooltip will stay open - -while -this one will only be open when hovered -

    -

    Tooltip Right and Left

    You can also position the tooltips to the right and left of the word by adding the classes .right or .left to the <span> element.

    -
    -

    When using Foundation in right-to-left mode, "right" still means right, and "left" still means left.

    -
    - -
    <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>
    - -

    -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 -lunatic -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 -index -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.

    - -
    -
    -

    Sass Reference

    - -
    -

    Variables

    - -

    The default styles of this component can be customized using these Sass variables in your project's settings file.

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameTypeDefault ValueDescription
    $has-tip-font-weightKeyword or Number$global-weight-bold

    Default font weight of the defined term.

    -
    $has-tip-border-bottomListdotted 1px $dark-gray

    Default border bottom of the defined term.

    -
    $tooltip-background-colorColor$black

    Default color of the tooltip background.

    -
    $tooltip-colorColor$white

    Default color of the tooltip font.

    -
    $tooltip-paddingNumber0.75rem

    Default padding of the tooltip background.

    -
    $tooltip-font-sizeNumber$small-font-size

    Default font size of the tooltip text. By default, we recommend a smaller font size than the body copy.

    -
    $tooltip-pip-widthNumber0.75rem

    Default pip width for tooltips.

    -
    $tooltip-pip-heightNumber$tooltip-pip-width * 0.866

    Default pip height for tooltips. This is helpful for calculating the distance of the tooltip from the tooltip word.

    -
    $tooltip-radiusNumber$global-radius

    Default radius for tooltips.

    -
    -
    - - - -
    - -
    -
    -

    JavaScript Reference

    - - -
    -

    Initializing

    - -

    The file foundation.tooltip.js must be included in your JavaScript to use this plugin, along with foundation.core.js. This plugin also requires these utility libraries:

    - - -
      -
    • foundation.util.box.js
      • -
    - -
      -
    • foundation.util.triggers.js
      • -
    - - -
    - - -
    -

    Foundation.Tooltip

    - -

    Creates a new instance of a Tooltip.

    - - - 
    var elem = new Foundation.Tooltip(element, options);
    - -

    Fires these events: - Tooltip#event:init -

    - - - - - - - - - - - - - - - -
    NameTypeDescription
    elementjQueryjQuery object to attach a tooltip to.
    optionsObjectobject to extend the default configuration.
    -
    - -
    - -
    -

    Plugin Options

    - -

    Use these options to customize an instance of Tooltip. Plugin options can be set as individual data attributes, one combined data-options attribute, or as an object passed to the plugin's constructor. Learn more about how JavaScript plugins are initialized.

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameDefaultDescription
    data-hover-delay200Time, in ms, before a tooltip should open on hover.
    data-fade-in-duration150Time, in ms, a tooltip should take to fade into view.
    data-fade-out-duration150Time, in ms, a tooltip should take to fade out of view.
    data-disable-hoverfalseDisables hover events from opening the tooltip if set to true
    data-template-classesmy-cool-tip-classOptional addtional classes to apply to the tooltip template on init.
    data-tooltip-classtooltipNon-optional class added to tooltip templates. Foundation default is 'tooltip'.
    data-trigger-classhas-tipClass applied to the tooltip anchor element.
    data-show-onsmallMinimum breakpoint size at which to open the tooltip.
    data-template<div class="tooltip"></div>Custom template to be used to generate markup for tooltip.
    data-tip-textSome cool space fact here.Text displayed in the tooltip template on open.
    data-click-opentrueAllows the tooltip to remain open if triggered with a click or touch event.
    data-position-classtopAdditional positioning classes, set by the JS
    data-v-offset10Distance, in pixels, the template should push away from the anchor on the Y axis.
    data-h-offset12Distance, in pixels, the template should push away from the anchor on the X axis, if aligned to a side.
    -
    - -
    - -
    -

    Events

    - -

    These events will fire from any element with a Tooltip plugin attached.

    - - - - - - - - - - - - - - - - - -
    NameDescription
    tooltip.zf.tooltipFires to close all other open tooltips on the page
    show.zf.tooltipFires when the tooltip is shown
    hide.zf.tooltipfires when the tooltip is hidden
    -
    - -
    - -
    -

    Methods

    - -
    -

    show

    - -
    - 
    $('#element').foundation('show');
    -
    - -

    reveals the tooltip, and fires an event to close any other open tooltips on the page

    - - -

    Fires these events: - Tooltip#event:closeme - Tooltip#event:show -

    - - -
    -
    -
    -

    hide

    - -
    - 
    $('#element').foundation('hide');
    -
    - -

    Hides the current tooltip, and resets the positioning class if it was changed due to collision

    - - -

    Fires these events: - Tooltip#event:hide -

    - - -
    -
    -
    -

    toggle

    - -
    - 
    $('#element').foundation('toggle');
    -
    - -

    adds a toggle method, in addition to the static show() & hide() functions

    - - - - -
    -
    -
    -

    destroy

    - -
    - 
    $('#element').foundation('destroy');
    -
    - -

    Destroys an instance of tooltip, removes template element from the view.

    - - - - - -
    -
    -
    - - - - -
    - -
    - -
    - -
    - -
    - -
    -
    - - -
    -
    - - -
    -
    -
    - -
    - -
    -
    - -
    -
    -
    - -
    Download ZURB’s 21 Responsive Trends That Will Shape 2017
    -

    Stay informed with amazing responsive trends each month from ZURB.

    -     -
    - -
    -
    - -
    -
    -
    -
    -

    Foundation for Sites

    -

    Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. -

    -
    -
    - -
    -
    -
    -
    -

    Want more?

    - -
    -
    -
    -
    -

    Talk to us

    -

    Tweet us at
    @ZURBfoundation

    -

    Get involved in
    our amazing community.

    -
    -
    -
    -
    -

    Stay Updated

    -

    Keep up with the latest on Foundation. Find us on Github.

    - Stay Connected -
    -
    -
    -
    -
    -
    -
    - - Studios - Helping more than 200 startups succeed since 1998. - -
    -
    - - Foundation - The most advanced front-end framework in the world. - -
    -
    - - Notable Design Apps - Prototype, iterate and collect feedback on your products. - -
    -
    - - University - Ideas, thoughts and design resources shared with you. - -
    -
    -
    - -
    -
    -
    -
      -
      • -
      • -
      • -
    -
    -
    - - -

    © 1998‐2016 ZURB, Inc. All rights reserved.

    -
    -
    -
    - -
    -
    - - - - - - - - - diff --git a/_build/top-bar.html b/_build/top-bar.html deleted file mode 100644 index 46f674863..000000000 --- a/_build/top-bar.html +++ /dev/null @@ -1,792 +0,0 @@ - - - - - - - - - - Foundation for Sites 6 Docs | Top Bar - - - - - - -
    - - - -
    - - -
    - - -
    - - - - - -
    -
    - - Foundation -
    -
    - - - - -
    -
    - -
    - -Jump to Nav - -
    -

    Top Bar

    - - -

    The new top bar is a simpler wrapper around our flexible menu components.

    - - -
    - -
    - -
    - -
    - -
    -

    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 responsive navigation to learn more.

    -
    - -

    Basics

    A top bar (.top-bar) can have two sections: a left-hand section (.top-bar-left) and a right-hand section (.top-bar-right). On small screens, these sections stack on top of each other.

    -

    In the below example, our top bar includes a dropdown menu, 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 $topbar-submenu-background variable.

    -
    <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>
    - -
    -
    - -
    -
    -
      -
      • -
      • -
    -
    -
    -

    Advanced Layout

    You can further divide a top bar into a title area and content area. Use the .top-bar-title class to create a title/branding area. Next to that can be any element, which is used for the rest of the content.

    -
    <div class="top-bar">
-  <div class="top-bar-title"></div>
-  <div>
-    <div class="top-bar-left"></div>
-    <div class="top-bar-right"></div>
-  </div>
-</div>

    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.

    -
    <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>
    - -
    -
    - - - - Site Title -
    -
    -
    - -
    -
    -
      -
      • -
      • -
    -
    -
    -
    -

    Stacking

    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 .stacked-for-medium or .stacked-for-large.

    -
    <div class="top-bar stacked-for-medium">
-  <!-- ... -->
-</div>
    -
    - -
    -
    -
      -
      • -
      • -
    -
    -
    - -
    -

    See the documentation for the Sticky plugin to see how to easily make a sticky nav bar.

    - - -
    -
    -

    Sass Reference

    - -
    -

    Variables

    - -

    The default styles of this component can be customized using these Sass variables in your project's settings file.

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameTypeDefault ValueDescription
    $topbar-paddingNumber0.5rem

    Padding for the top bar.

    -
    $topbar-backgroundColor$light-gray

    Background color for the top bar. This color also cascades to menus within the top bar.

    -
    $topbar-submenu-backgroundColor$topbar-background

    Background color submenus within the top bar. Usefull if $topbar-background is transparent.

    -
    $topbar-title-spacingNumber1rem

    Spacing for the top bar title.

    -
    $topbar-input-widthNumber200px

    Maximum width of <input> elements inside the top bar.

    -
    $topbar-unstack-breakpointBreakpointmedium

    Breakpoint at which top bar switches from mobile to desktop view.

    -
    -
    - -
    - -
    -

    Mixins

    - -

    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.

    - - -
    -

    top-bar-container

    - - - -
    - 
    @include top-bar-container;
    -
    - -

    Adds styles for a top bar container.

    - - - - - -
    - -
    - - - -
    -

    top-bar-stacked

    - - - -
    - 
    @include top-bar-stacked;
    -
    - -

    Makes sections of a top bar stack on top of each other.

    - - - - - -
    - -
    - - - -
    -

    top-bar-unstack

    - - - -
    - 
    @include top-bar-unstack;
    -
    - -

    Undoes the CSS applied by the top-bar-stacked() mixin.

    - - - - - -
    - - - - - -
    - - -
    - - - - - -
    - -
    - -
    - -
    - -
    - -
    -
    - - -
    -
    - - -
    -
    -
    - -
    - -
    -
    - -
    -
    -
    - -
    Download ZURB’s 21 Responsive Trends That Will Shape 2017
    -

    Stay informed with amazing responsive trends each month from ZURB.

    -     -
    - -
    -
    - -
    -
    -
    -
    -

    Foundation for Sites

    -

    Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. -

    -
    -
    - -
    -
    -
    -
    -

    Want more?

    - -
    -
    -
    -
    -

    Talk to us

    -

    Tweet us at
    @ZURBfoundation

    -

    Get involved in
    our amazing community.

    -
    -
    -
    -
    -

    Stay Updated

    -

    Keep up with the latest on Foundation. Find us on Github.

    - Stay Connected -
    -
    -
    -
    -
    -
    -
    - - Studios - Helping more than 200 startups succeed since 1998. - -
    -
    - - Foundation - The most advanced front-end framework in the world. - -
    -
    - - Notable Design Apps - Prototype, iterate and collect feedback on your products. - -
    -
    - - University - Ideas, thoughts and design resources shared with you. - -
    -
    -
    - -
    -
    -
    -
      -
      • -
      • -
      • -
    -
    -
    - - -

    © 1998‐2016 ZURB, Inc. All rights reserved.

    -
    -
    -
    - -
    -
    - - - - - - - - - diff --git a/_build/typography-base.html b/_build/typography-base.html deleted file mode 100644 index 29cd456e3..000000000 --- a/_build/typography-base.html +++ /dev/null @@ -1,1083 +0,0 @@ - - - - - - - - - - Foundation for Sites 6 Docs | Base Typography - - - - - - -
    - - - -
    - - -
    - - -
    - - - - - -
    -
    - - Foundation -
    -
    - - - - -
    -
    - -
    - -Jump to Nav - -
    -

    Base Typography

    - - -

    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.

    - - -
    - -
    - -
    - -
    - -

    Paragraphs

    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 <strong> and <em> tags to denote text that should be displayed or read with emphasis. Browsers will bold and italicize the words, while screen readers will read them with emphasis.

    -
    -

    If the emphasis of a phrase is important, don't make the emphasis purely visual—use the <em> or <strong> 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>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 <strong>make it bold!</strong>. You can also use em to <em>italicize your words</em>.</p>
    -

    Foundation includes styles for all headings—they're balanced and sized along a modular scale.

    -
    -

    Avoid skipping heading levels when structuring your document, as it confuses screen readers. For example, after using an <h2> in your code, the next heading used should be either <h2> or <h3>. If you need a heading to look bigger or smaller to match a specific style, use CSS to override the default size.

    -
    - -
    <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>
    - -

    h1. This is a very large header.

    -

    h2. This is a large header.

    -

    h3. This is a medium header.

    -

    h4. This is a moderate header.

    -
    h5. This is a small header.
    -
    h6. This is a tiny header.
    -

    Header Sizes

    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 $header-sizes map in your project's Settings File.

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    HeaderDefaultLarge and up
    <h1>24px48px
    <h2>20px40px
    <h3>19px31px
    <h4>18px25px
    <h5>17px20px
    <h6>16px16px
    -
    -

    Small Header Segments

    By inserting a <small> 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.

    -
    <h3>Foundation for Sites <small>Version 6.0.4</small></h3>
    - -

    Foundation for Sites Version 6.0.4

    -

    Links are very standard, and the color is preset to the Foundation primary color. Learn more about Foundation's global colors.

    -
    -

    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>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>
    -

    Dividers

    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 <section> tag.

    -
    <hr>
    -

    Unordered Lists

    Use an unordered list to... list things, if the order of the items doesn't matter.

    -
    <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>
    - -
      -
    • List item with a much longer description or more content.
      • -
    • List item
      • -
    • List item -
        -
      • Nested list item
        • -
      • Nested list item
        • -
      • Nested list item
        • -
      -
      • -
    • List item
      • -
    • List item
      • -
    • List item
      • -
    -

    Ordered Lists

    Use an <ol> when creating a list where the order of the items is important, like ranking pizza toppings from best to worst.

    -
    <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>
    - -
      -
    1. Cheese (essential)
      2. -
    2. Pepperoni
      3. -
    3. Bacon -
        -
      1. Normal bacon
        2. -
      2. Canadian bacon
        3. -
      -
      4. -
    4. Sausage
      5. -
    5. Onions
      6. -
    6. Mushrooms
      7. -
    -

    Definition Lists

    A definition list (<dl>) is used to display name-value pairs, like metadata or a dictionary definition. Each term (<dt>) is paired with one or more definitions (<dd>).

    -
    <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>
    - -
    -
    Time
    -
    The indefinite continued progress of existence and events in the past, present, and future regarded as a whole.
    -
    Space
    -
    A continuous area or expanse that is free, available, or unoccupied.
    -
    The dimensions of height, depth, and width within which all things exist and move.
    -
    -

    Blockquotes

    Sometimes other people say smart things, and you may want to mention those things with a quote. We've got you covered.

    -
    <blockquote>
-  Those people who think they know everything are a great annoyance to those of us who do.
-  <cite>Isaac Asimov</cite>
-</blockquote>
    - -
    - Those people who think they know everything are a great annoyance to those of us who do. - Isaac Asimov -
    -

    Abbreviations

    Use the <abbr> tag to annotate a shortened term. Abbreviations must always have a title attribute which clarifies the full term.

    -
    <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>
    - -

    In my dream last night, I saw J. R. R. Tolkien and George R. R. Martin hanging out on Sunset Blvd.

    -

    Code

    Format references to code with the <code> tag.

    -
    Remember to escape angle brackets when printing HTML: <code>&lt;div&gt;</code>
    - -
    Remember to escape angle brackets when printing HTML: <div>
    -

    Keystrokes

    Use the <kbd> element to annotate a key stroke or combination.

    -
    <p>Press <kbd>Cmd+Q</kbd> (or <kbd>Ctrl+Q</kbd> on Windows) to play Half-Life 3.</p>
    - -

    Press Cmd+Q (or Ctrl+Q on Windows) to play Half-Life 3.

    -

    Accessibility

    Text is core to the content of your page, so making it accessible to everyone is important. Here are some general guidelines to follow.

    -

    Text vs. Images

    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 alt attribute of the image.

    -
    <img src="assets/img/buy-now.jpg" alt="Buy now">
    -

    Contrast

    The contrast between the color of an element's text and its background should be high enough that low-vision users can read it. The minimum recommended contrast ratio is 4.5:1. 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 WebAIM's color contrast checker.

    -

    Google Chrome's Accessibility Developer Tools also includes a contrast checker. By selecting an element in the inspector, you can see if the contrast meets the minimum standards.

    -

    Screenshot of Google Chrome's Accessibility Tools

    -
    -

    Type Size

    When possible, use the rem and em 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.

    -

    We use the rem unit nearly everywhere in Foundation, and even wrote a Sass function to make it a little easier. The rem-calc() function can take one or more pixel values and convert them to proper rem values.

    -
    .element {
-  width: rem-calc(300);
-  padding: rem-calc(10 16);
-}
    -

    More Resources

    -
    -

    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:

    -
      -
    • Clearing out backgrounds, box shadows and text shadows
      • -
    • Appending link URLs after the anchor text
      • -
    • Adding borders to <blockquote> and <pre> elements
      • -
    • Page cleanup and window minimization
      • -
    -

    On top of that, Foundation includes a couple of simple classes you can use to control elements printing, or not printing. Simply attach .show-for-print to an element to only show when printing, and .hide-for-print to hide something when printing.

    - - -
    -
    -

    Sass Reference

    - -
    -

    Variables

    - -

    The default styles of this component can be customized using these Sass variables in your project's settings file.

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameTypeDefault ValueDescription
    $print-transparent-backgroundsBooleantrue

    If true, all elements will have transparent backgrounds when printed, to save on ink.

    -
    $header-font-familyString or List$body-font-family

    Font family for header elements.

    -
    $header-font-weightString$global-weight-normal

    Font weight of headers.

    -
    $header-font-styleStringnormal

    Font style (e.g. italicized) of headers.

    -
    $font-family-monospaceString or ListConsolas, 'Liberation Mono', Courier, monospace

    Font stack used for elements that use monospaced type, such as code samples

    -
    $header-sizesMap - small: ( - 'h1': 24
    - 'h2': 20
    - 'h3': 19
    - 'h4': 18
    - 'h5': 17
    - 'h6': 16
    - )
    - medium: ( - 'h1': 48
    - 'h2': 40
    - 'h3': 31
    - 'h4': 25
    - 'h5': 20
    - 'h6': 16
    - )
    -

    Sizes of headings at various screen sizes. Each key is a breakpoint, and each value is a map of heading sizes.

    -
    $header-colorColorinherit

    Color of headers.

    -
    $header-lineheightNumber1.4

    Line height of headers.

    -
    $header-margin-bottomNumber0.5rem

    Bottom margin of headers.

    -
    $header-text-renderingStringoptimizeLegibility

    Text rendering method of headers.

    -
    $small-font-sizeNumber80%

    Font size of <small> elements.

    -
    $header-small-font-colorColor$medium-gray

    Color of <small> elements when placed inside headers.

    -
    $paragraph-lineheightNumber1.6

    Line height of text inside <p> elements.

    -
    $paragraph-margin-bottomNumber1rem

    Bottom margin of paragraphs.

    -
    $paragraph-text-renderingStringoptimizeLegibility

    Text rendering method for paragraph text.

    -
    $code-colorColor$black

    Text color of code samples.

    -
    $code-font-familyString or List$font-family-monospace

    Font family of code samples.

    -
    $code-font-weightString$global-weight-normal

    Font weight of text in code samples.

    -
    $code-backgroundColor$light-gray

    Background color of code samples.

    -
    $code-borderList1px solid $medium-gray

    Border around code samples.

    -
    $code-paddingNumber or Listrem-calc(2 5 1)

    Padding around text of code samples.

    -
    $anchor-colorColor$primary-color

    Default color for links.

    -
    $anchor-color-hoverColorscale-color($anchor-color, $lightness: -14%)

    Default color for links on hover.

    -
    $anchor-text-decorationStringnone

    Default text deocration for links.

    -
    $anchor-text-decoration-hoverStringnone

    Default text decoration for links on hover.

    -
    $hr-widthNumber$global-width

    Maximum width of a divider.

    -
    $hr-borderList1px solid $medium-gray

    Default border for a divider.

    -
    $hr-marginNumber or Listrem-calc(20) auto

    Default margin for a divider.

    -
    $list-lineheightNumber$paragraph-lineheight

    Line height for items in a list.

    -
    $list-margin-bottomNumber$paragraph-margin-bottom

    Bottom margin for items in a list.

    -
    $list-style-typeStringdisc

    Bullet type to use for unordered lists (e.g., square, circle, disc).

    -
    $list-style-positionStringoutside

    Positioning for bullets on unordered list items.

    -
    $list-side-marginNumber1.25rem

    Left (or right) margin for lists.

    -
    $list-nested-side-marginNumber1.25rem

    Left (or right) margin for a list inside a list.

    -
    $defnlist-margin-bottomNumber1rem

    Bottom margin for <dl> elements.

    -
    $defnlist-term-weightString$global-weight-bold

    Font weight for <dt> elements.

    -
    $defnlist-term-margin-bottomNumber0.3rem

    Spacing between <dt> and <dd> elements.

    -
    $blockquote-colorColor$dark-gray

    Text color of <blockquote> elements.

    -
    $blockquote-paddingNumber or Listrem-calc(9 20 0 19)

    Padding inside a <blockquote> element.

    -
    $blockquote-borderList1px solid $medium-gray

    Side border for <blockquote> elements.

    -
    $cite-font-sizeNumberrem-calc(13)

    Font size for <cite> elements.

    -
    $cite-colorColor$dark-gray

    Text color for <cite> elements.

    -
    $keystroke-fontString or List$font-family-monospace

    Font family for <kbd> elements.

    -
    $keystroke-colorColor$black

    Text color for <kbd> elements.

    -
    $keystroke-backgroundColor$light-gray

    Background color for <kbd> elements.

    -
    $keystroke-paddingNumber or Listrem-calc(2 4 0)

    Padding for <kbd> elements.

    -
    $keystroke-radiusNumber or List$global-radius

    Border radius for <kbd> elements.

    -
    $abbr-underlineList1px dotted $black

    Bottom border style for <abbr> elements.

    -
    -
    - - - -
    - - - - - -
    - -
    - -
    - -
    - -
    - -
    -
    - - -
    -
    - - -
    -
    -
    - -
    - -
    -
    - -
    -
    -
    - -
    Download ZURB’s 21 Responsive Trends That Will Shape 2017
    -

    Stay informed with amazing responsive trends each month from ZURB.

    -     -
    - -
    -
    - -
    -
    -
    -
    -

    Foundation for Sites

    -

    Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. -

    -
    -
    - -
    -
    -
    -
    -

    Want more?

    - -
    -
    -
    -
    -

    Talk to us

    -

    Tweet us at
    @ZURBfoundation

    -

    Get involved in
    our amazing community.

    -
    -
    -
    -
    -

    Stay Updated

    -

    Keep up with the latest on Foundation. Find us on Github.

    - Stay Connected -
    -
    -
    -
    -
    -
    -
    - - Studios - Helping more than 200 startups succeed since 1998. - -
    -
    - - Foundation - The most advanced front-end framework in the world. - -
    -
    - - Notable Design Apps - Prototype, iterate and collect feedback on your products. - -
    -
    - - University - Ideas, thoughts and design resources shared with you. - -
    -
    -
    - -
    -
    -
    -
      -
      • -
      • -
      • -
    -
    -
    - - -

    © 1998‐2016 ZURB, Inc. All rights reserved.

    -
    -
    -
    - -
    -
    - - - - - - - - - diff --git a/_build/typography-helpers.html b/_build/typography-helpers.html deleted file mode 100644 index c4b0932ef..000000000 --- a/_build/typography-helpers.html +++ /dev/null @@ -1,650 +0,0 @@ - - - - - - - - - - Foundation for Sites 6 Docs | Typography Helpers - - - - - - -
    - - - -
    - - -
    - - -
    - - - - - -
    -
    - - Foundation -
    -
    - - - - -
    -
    - -
    - -Jump to Nav - -
    -

    Typography Helpers

    - - -

    Our helper classes allow you to scaffold certain typographic styles faster.

    - - -
    - -
    - -
    - -
    - -

    Text Alignment

    You can change the text alignment of an element by adding .text-left, .text-right, .text-center or .text-justify to an element.

    -

    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, .medium-text-center will keep text left-aligned on the smallest screens, but switch to center-aligned on medium screens and larger.

    -
    <p class="text-left"><!-- ... --></p>
-<p class="text-right"><!-- ... --></p>
-<p class="text-center"><!-- ... --></p>
-<p class="text-justify"><!-- ... --></p>

    This text is left-aligned. 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.

    - -

    This text is right-aligned. 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.

    - -

    This text is center-aligned. 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.

    - -

    This text is justified. 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.

    - -
    -

    Subheader

    Lighten up your headers by adding a class of .subheader to any header element.

    -
    <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>
    - -

    h1.subheader

    -

    h2.subheader

    -

    h3.subheader

    -

    h4.subheader

    -
    h5.subheader
    -
    h6.subheader
    -

    Lead Paragraph

    A slightly-larger-than-normal block of text, useful for decks, blurbs, or other descriptive text.

    -
    <p class="lead">What are your cats <em>really</em> dreaming about while they sleep?</p>
    - -

    What are your cats really dreaming about while they sleep?

    -

    Un-bulleted List

    In Foundation, the <ul> is a bulleted list by default, but you can add the class .no-bullet to remove the bullets.

    -
    <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>
    - -
      -
    • List item with a much longer description or more content.
      • -
    • List item
      • -
    • List item -
        -
      • Nested list item
        • -
      • Nested list item
        • -
      • Nested list item
        • -
      -
      • -
    • List item
      • -
    • List item
      • -
    • List item
      • -
    -

    Statistics

    If you're building a dashboard, you might need to display some important numbers real big. Just add the .stat class to any element to amp up the font size.

    -
    <p>Days without merge conflict</p>
-<div class="stat">128</div>
    - -

    Days without merge conflict

    -
    128
    - -
    -
    -

    Sass Reference

    - -
    -

    Variables

    - -

    The default styles of this component can be customized using these Sass variables in your project's settings file.

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameTypeDefault ValueDescription
    $lead-font-sizeNumber$global-font-size * 1.25

    Default font size for lead paragraphs.

    -
    $lead-lineheightString1.6

    Default line height for lead paragraphs.

    -
    $subheader-lineheightNumber1.4

    Default line height for subheaders.

    -
    $subheader-colorColor$dark-gray

    Default font color for subheaders.

    -
    $subheader-font-weightString$global-weight-normal

    Default font weight for subheaders.

    -
    $subheader-margin-topNumber0.2rem

    Default top margin for subhheaders.

    -
    $subheader-margin-bottomNumber0.5rem

    Default bottom margin for subheaders.

    -
    $stat-font-sizeNumber2.5rem

    Default font size for statistic numbers.

    -
    -
    - - - -
    - - - - - -
    - -
    - -
    - -
    - -
    - -
    -
    - - -
    -
    - - -
    -
    -
    - -
    - -
    -
    - -
    -
    -
    - -
    Download ZURB’s 21 Responsive Trends That Will Shape 2017
    -

    Stay informed with amazing responsive trends each month from ZURB.

    -     -
    - -
    -
    - -
    -
    -
    -
    -

    Foundation for Sites

    -

    Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. -

    -
    -
    - -
    -
    -
    -
    -

    Want more?

    - -
    -
    -
    -
    -

    Talk to us

    -

    Tweet us at
    @ZURBfoundation

    -

    Get involved in
    our amazing community.

    -
    -
    -
    -
    -

    Stay Updated

    -

    Keep up with the latest on Foundation. Find us on Github.

    - Stay Connected -
    -
    -
    -
    -
    -
    -
    - - Studios - Helping more than 200 startups succeed since 1998. - -
    -
    - - Foundation - The most advanced front-end framework in the world. - -
    -
    - - Notable Design Apps - Prototype, iterate and collect feedback on your products. - -
    -
    - - University - Ideas, thoughts and design resources shared with you. - -
    -
    -
    - -
    -
    -
    -
      -
      • -
      • -
      • -
    -
    -
    - - -

    © 1998‐2016 ZURB, Inc. All rights reserved.

    -
    -
    -
    - -
    -
    - - - - - - - - - diff --git a/_build/visibility.html b/_build/visibility.html deleted file mode 100644 index 8c7f3baac..000000000 --- a/_build/visibility.html +++ /dev/null @@ -1,741 +0,0 @@ - - - - - - - - - - Foundation for Sites 6 Docs | Visibility Classes - - - - - - -
    - - - -
    - - -
    - - -
    - - - - - -
    -
    - - Foundation -
    -
    - - - - -
    -
    - -
    - -Jump to Nav - -
    -

    Visibility Classes

    - - -

    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.

    - - -
    - -
    - -
    - -
    - -
    -

    Visibility classes use !important to ensure they aren't overriden by more specific selectors. This is the only component in the framework that uses !important.

    -
    - -
    -

    There are no classes to detect touchscreen devices, as both desktop and mobile browsers inconsistently report touch support. Learn more here: You Can't Detect a Touchscreen

    -
    - -

    Show by Screen Size

    In this example, we use the .show 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>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>
    - -

    You are on a small screen or larger.

    -

    You are on a medium screen or larger.

    -

    You are on a large screen or larger.

    These classes automatically hide the element on screen sizes below what's specified in the class. So .show-for-medium will hide the element on small, and show it on medium and larger.

    -

    A separate set of classes allow you to show content only on a certain screen size. Just add -only to the end of the class.

    -
    -

    Don't see any text below the code sample? You must be on an extra large screen.

    -
    - -
    <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>
    - -

    You are definitely on a small screen.

    -

    You are definitely on a medium screen.

    -

    You are definitely on a large screen.

    -

    Hide by Screen Size

    This example shows the opposite: It uses the .hide visibility classes to state which elements should disappear based on the device's screen size.

    -
    -

    There's no .hide-for-small class, because that would just permanently hide the element. For that, you can use the plain old .hide class instead.

    -
    - -
    <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>
    - -

    You are not on a medium screen or larger.

    -

    You are not on a large screen or larger.

    If you're reading this, you're on a large screen, and can't see either of the above examples.

    - -

    Like with .show, these classes also have -only versions.

    -
    <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>
    - -

    You are definitely not on a small screen.

    -

    You are definitely not on a medium screen.

    -

    You are definitely not on a large screen.

    Generic Hide Classes

    And if you really just need something hidden no matter what, there are classes for that as well. The .hide and .invisible classes respectively set display: none and visibility: hidden on an element. Note that both of these classes hide content from screen readers.

    -
    <p class="hide">Can't touch this.</p>
-<p class="invisible">Can sort of touch this.</p>
    -

    Orientation Detection

    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 class="show-for-landscape">You are in landscape orientation.</p>
-<p class="show-for-portrait">You are in portrait orientation.</p>
    - -

    You are in landscape orientation.

    -

    You are in portrait orientation.

    -

    Accessibility

    Adding display: none 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.

    -

    Show for Screen Readers Only

    To visually hide content, while still allowing assistive technology to read it, add the class show-for-sr.

    -
    <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>
    - -

    This text can only be read by a screen reader.

    -

    There's a line of text above this one, you just can't see it.

    Hide for Screen Readers Only

    To hide text from assistive technology, while still keeping it visible, add the attribute aria-hidden="true". This doesn't affect how the element looks, but screen readers will skip over it.

    -
    -

    It's usually not a good idea to hide content from screen readers. aria-hidden is best used to mask purely visual elements of a page.

    -
    - -
    <p aria-hidden="true">This text can be seen, but won't be read by a screen reader.</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 skip link at the very top of your page, which will send the user farther down the page, past the navigation when clicked on.

    -

    Use the class .show-on-focus to hide an element, except when it has focus. Adding tabindex="0" to the target element makes if focusable.

    -
    <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>
    - -

    Skip to Content

    - - - -
    -
    - -
    -
    -

    Sass Reference

    - - - - -
    -

    Mixins

    - -

    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.

    - - -
    -

    show-for

    - - - -
    - 
    @include show-for($size);
    -
    - -

    Hide an element by default, only displaying it above a certain screen size.

    - - - - - - - - - - - - - - - -
    ParameterTypeDefault ValueDescription
    $sizeKeywordNone

    Breakpoint to use. Must be a breakpoint defined in $breakpoints.

    -
    -
    - -
    - - - -
    -

    show-for-only

    - - - -
    - 
    @include show-for-only($size);
    -
    - -

    Hide an element by default, only displaying it within a certain breakpoint.

    - - - - - - - - - - - - - - - -
    ParameterTypeDefault ValueDescription
    $sizeKeywordNone

    Breakpoint to use. Must be a breakpoint defined in $breakpoints.

    -
    -
    - -
    - - - -
    -

    hide-for

    - - - -
    - 
    @include hide-for($size);
    -
    - -

    Show an element by default, and hide it above a certain screen size.

    - - - - - - - - - - - - - - - -
    ParameterTypeDefault ValueDescription
    $sizeKeywordNone

    Breakpoint to use. Must be a breakpoint defined in $breakpoints.

    -
    -
    - -
    - - - -
    -

    hide-for-only

    - - - -
    - 
    @include hide-for-only($size);
    -
    - -

    Show an element by default, and hide it above a certain screen size.

    - - - - - - - - - - - - - - - -
    ParameterTypeDefault ValueDescription
    $sizeKeywordNone

    Breakpoint to use. Must be a breakpoint defined in $breakpoints.

    -
    -
    - - - - - -
    - - -
    - - - - - -
    - -
    - -
    - -
    - -
    - -
    -
    - - -
    -
    - - -
    -
    -
    - -
    - -
    -
    - -
    -
    -
    - -
    Download ZURB’s 21 Responsive Trends That Will Shape 2017
    -

    Stay informed with amazing responsive trends each month from ZURB.

    -     -
    - -
    -
    - -
    -
    -
    -
    -

    Foundation for Sites

    -

    Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. -

    -
    -
    - -
    -
    -
    -
    -

    Want more?

    - -
    -
    -
    -
    -

    Talk to us

    -

    Tweet us at
    @ZURBfoundation

    -

    Get involved in
    our amazing community.

    -
    -
    -
    -
    -

    Stay Updated

    -

    Keep up with the latest on Foundation. Find us on Github.

    - Stay Connected -
    -
    -
    -
    -
    -
    -
    - - Studios - Helping more than 200 startups succeed since 1998. - -
    -
    - - Foundation - The most advanced front-end framework in the world. - -
    -
    - - Notable Design Apps - Prototype, iterate and collect feedback on your products. - -
    -
    - - University - Ideas, thoughts and design resources shared with you. - -
    -
    -
    - -
    -
    -
    -
      -
      • -
      • -
      • -
    -
    -
    - - -

    © 1998‐2016 ZURB, Inc. All rights reserved.

    -
    -
    -
    - -
    -
    - - - - - - - - - -- 2.47.2