<script src="assets/js/vendor.js"></script>
<script src="assets/js/foundation.js"></script>
<script src="assets/js/docs.js"></script>
+ <script src="http://localhost:8080/target/target-script-min.js#anonymous"></script>
<!-- <script src='../node_modules/motion-ui/dist/motion-ui.js'></script> -->
</body>
</html>
- validation
---
-
-<div class="callout alert">
- <p>Abide is not fully implemented yet, so these demos aren't functioning quite right.</p>
-</div>
-
-
### Abide Demo
These input types create a text field: `text`, `date`, `datetime`, `datetime-local`, `email`, `month`, `number`, `password`, `search`, `tel`, `time`, `url`, and `week`.
description: Change a basic vertical Menu into a expandable accordion menu with the Accordion Menu plugin.
---
-<div class="alert callout">
- <h5>Known Issues</h5>
- <ul>
- <li>Needs directional arrows.</li>
- </ul>
-</div>
-
```html_example
<ul class="vertical menu" data-accordion-menu>
<li>
js: js/foundation.accordion.js
---
-
-<div class="alert callout">
- <h5>Known Issues</h5>
- <ul>
- <li>None Currently. File an issue if you see something wrong.</li>
- </ul>
-</div>
-
-
-
## Basics
The container for an accordion needs the class `.accordion`, and the attributes `data-accordion` and `role="tablist"`. Note that in these examples, we use a `<ul>`, but you can use any element you want.
sass: scss/components/_badge.scss
---
-<div class="callout alert">
- <h5>Known Issues</h5>
- <ul>
- <li>In some browsers, the badge doesn't render as a perfect circle with one character.</li>
- </ul>
-</div>
-
## Basics
Add the `.badge` class to an element to create a badge.
js: js/foundation.drilldown.js
---
-
-<div class="alert callout">
- <h5>Known Issues</h5>
- <ul>
- <li>Needs an option and method for breadcrumbing? Feedback request.</li>
- <li>Needs directional arrows for items with submenus.</li>
-</div>
-
-
## Basics
Drilldowns use the standard [Menu](menu.html) syntax. Add the attribute `data-drilldown` to the root `<ul>`, and `data-submenu` to each nested menu.
js: js/dropdownMenu.js
---
-
## Horizontal
+
By default, dropdowns are exactly that, horizontally oriented below the parent element, opened by hovering, clicking, or tapping.
```html_example
js: js/foundation.dropdown.js
---
-<div class="alert callout">
- <h5>Known Issues</h5>
- <ul>
- <li>Sometimes has sizing issues on open.</li>
- </ul>
-</div>
-
<div class="primary callout">
<p>You might be looking for <a href="dropdown-menu.html">dropdown menus</a>, which are a separate plugin.</p>
</div>
+++ /dev/null
----
-title: Global Styles
-description: Our global CSS includes helpful resets to ensure consistent styling across browsers.
-sass: scss/_global.scss
----
-
-## 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.
-
-Since the typical default browser font size is 16 pixels, that makes the calculation for grid size. If you want your base font size to be different and not have it affect the grid breakpoints, set `$rem-base` to `$global-font-size` and make sure `$global-font-size` is a pixel value.
-
----
-
-## 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.
-
-<div class="row small-up-1 medium-up-3 large-up-5">
- <div class="column">
- <div class="docs-color-block">
- <div class="docs-color-block-primary"></div>
- <p>Primary</p>
- </div>
- </div>
- <div class="column">
- <div class="docs-color-block">
- <div class="docs-color-block-secondary"></div>
- <p>Secondary</p>
- </div>
- </div>
- <div class="column">
- <div class="docs-color-block">
- <div class="docs-color-block-success"></div>
- <p>Success</p>
- </div>
- </div>
- <div class="column">
- <div class="docs-color-block">
- <div class="docs-color-block-warning"></div>
- <p>Warning</p>
- </div>
- </div>
- <div class="column">
- <div class="docs-color-block">
- <div class="docs-color-block-alert"></div>
- <p>Alert</p>
- </div>
- </div>
- <div class="column">
- <div class="docs-color-block">
- <div class="docs-color-block-white"></div>
- <p>White</p>
- </div>
- </div>
- <div class="column">
- <div class="docs-color-block">
- <div class="docs-color-block-light-gray"></div>
- <p>Light Gray</p>
- </div>
- </div>
- <div class="column">
- <div class="docs-color-block">
- <div class="docs-color-block-medium-gray"></div>
- <p>Medium Gray</p>
- </div>
- </div>
- <div class="column">
- <div class="docs-color-block">
- <div class="docs-color-block-dark-gray"></div>
- <p>Dark Gray</p>
- </div>
- </div>
- <div class="column">
- <div class="docs-color-block">
- <div class="docs-color-block-black"></div>
- <p>Black</p>
- </div>
- </div>
-</div>
-
-
----
-
-To color a component, add the name of the color as a class.
-
-```html_example
-<button class="button">Primary Action</button>
-<button class="secondary button">Secondary Action</button>
-```
-
----
-
-```html_example
-<div class="success callout">
- <p>Created a new folder.</p>
-</div>
-<div class="alert callout">
- <p>Error fetching stick.</p>
-</div>
-```
-
----
-
-## Namespacing
-
-The data attributes used to initialize Foundation plugins can be globally namespaced by setting the `$global-namespace` Sass variable.
-
-```html
-<!-- $global-namespace: false -->
-<div data-reveal></div>
-
-<!-- $global-namespace: 'zf' -->
-<div data-zf-reveal></div>
-```
sass: scss/components/_label.scss
---
-<div class="callout alert">
- <h5>Known Issues</h5>
- <ul>
- <li>Icons aren't perfectly aligned with the text.</li>
- </ul>
-</div>
-
-
## Basics
Add the `.label` class to an element to create a label.
- navigation
---
-<div class="callout alert">
- <h4>Known Issues</h4>
- <ul>
- <li>The right off-canvas menu is not properly hiding on mobile on init.</li>
- <li>Open menus should trap focus.</li>
- </ul>
-</div>
-
<button class="button" type="button" data-toggle="offCanvasLeft">Toggle Off-canvas</button>
## Setup
- carousel
---
-<div class="alert callout">
- <h5>Known Issues</h5>
- <ul>
- <li>Images sometimes vanish from the view/script, throwing errors and breaking things.</li>
- </ul>
-</div>
-
-
## Basic Orbit Slider
<!-- ``` -->
sass: scss/components/_progress-bar.scss
---
-<div class="callout alert">
- <h5>Known Issues</h5>
- <ul>
- <li>Styles for text inside of the bar are not final.</li>
- </ul>
-</div>
-
## 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:
- ./js/foundation.responsiveToggle.js
---
-<div class="callout alert">
- <p>These patterns haven't been finalized yet, but we're collecting feedback on GitHub about them.</p>
-</div>
-
## Responsive Menu
The Menu has some responsive CSS classes built in, which allow you to re-orient a menu on different screen sizes.
- modal
---
-<div class="alert callout">
- <h5>Known Issues</h5>
- <ul>
- <li><em>Future Feature.</em> Instead of each modal getting it’s own background, maybe generate one for the whole page if a modal is detected?</li>
- <li>Focus isn't being trapped in Firefox.</li>
- </ul>
-</div>
-
-
## Basics
A modal is just an empty container, so you can put any kind of content inside it, from text to forms to a whole grid.
js: js/foundation.slider.js
---
-
-<div class="alert callout">
- <h5>Known Issues</h5>
- <ul>
- <li>Feedback Requested.</li>
- </ul>
-</div>
-
-
## Basics
It's got a handle and an active fill, what more do you need?
js: js/foundation.sticky.js
---
-<div class="alert callout">
- <h5>Known Issues</h5>
- <ul>
- <li><em>Future Feature:</em> Needs method for elements to be sticky on the top of the viewport when scrolling down, and if the lower breakpoint is reached, stick to bottom on scroll up.</li>
- <li>Seems to have a problem with short elements: < 2x the sticky element's height or so.</li>
- </ul>
-</div>
-
## 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="alert callout">
- <h5>Known Issues</h5>
- <ul>
- <li>Inconsistent hover effects on Firefox.</li>
- <li>Inconsitent position correction on collision events.</li>
- </ul>
-</div>
-
-
## Basic Tooltip
By default, a tooltip appears below the the definition on hover.
projects / thirdparty / foundation / foundation-sites.git / commitdiff
