Garnish

Garnish UI Toolkit

Installation

You can download the latest version of garnishjs on GitHub.

To install via npm:

npm install garnishjs

To install via bower:

bower install garnishjs

Building

To build, run gulp build.

Use -d or --dest options to customize the destination:

gulp build --dest=/path/to/dest
gulp build -d=/path/to/dest

Use -v or --version options to customize the version:

gulp build --version=1.0.0
gulp build -v=1.0.0

To watch, run gulp watch.

Testing

To test, run gulp test.

To watch and test, run gulp watch --test

UI Elements

Disclosure

This element should be used in instances where a trigger button shows or hides content.

Some possible applications include accordion menus, navigation dropdown menus, etc.

To create a disclosure element, use a button with the following properties:

• An aria-controls attribute referencing the ID of the element to be toggled
• An aria-haspopup attribute set to "true".
• An aria-expanded attribute set to either "true" or "false".
• A data-disclosure-trigger attribute is used to find and instantiate the UI element

<button aria-controls="disclosure" aria-expanded="false" aria-haspopup="true" data-disclosure-trigger>Open Menu</button>

<div id="disclosure">
	This is the content you want to reveal.
</div>

Positioning

The disclosure container is positioned absolutely with respect to the trigger element. Because of this, both the disclosure container and the trigger need to be contained inside of a relatively positioned wrapper element. This element needs to have the attribute data-wrapper.

Note that this is different from the CustomSelect element, where dropdowns are positioned relative to the document.

You can change the horizontal alignment of the disclosure by adding a data-align attribute with one of the following values: left, center, or right.

Adjusting positioning

You may need to align the disclosure menu positioning to a different element inside of the trigger.

In cases like this add a data-align-to attribute to the disclosure menu with the selector of the element you want to align it with.

License

Garnish is available under the MIT license.