A semanticly strict, high-level UI component library.
Powered by _hyperscript.
Components are defined with the id attribute.
Sub-components are defined with the class attribute.
- Must be defined on a
headerelement. - May contain the following sub-components.
- hamburger
- title
<header id="navbar"> </header> - Must be the child of a navbar component.
- Must be defined on a
buttonelement. - Must conatin 3 span elements.
- Toggles an offcanvas component.
<header id="navbar"> <button class="hamburger" _="on click toggle .open on me then toggle .open on #offcanvas end" > <span></span><span></span><span></span> </button> </header> - Must be the child of a navbar component.
- Must be defined on an
spanelement.
<header id="navbar"> <span class="title">Grapevine UI</span> </header> - Must be defined on a
navelement. - Id attribute must end with 'offcanvas'.
- May contain the following sub-components.
- nav-elements
<nav id="offcanvas"> </nav> - Must be the child of an offcanvas component.
- Must be defined on a
menuelement. - May contain the following sub-components.
- dropdown
- dropdown-elements
<nav id="offcanvas"> <menu class="nav-elements"> <li><a href="#">Page One</a></li> <li><a href="#">Page Two</a></li> <li><a href="#">Page Three</a></li> </menu> </nav> - Must be the child of a nav-elements sub-component.
- Dropdown must be defined on a
buttonelement. - Dropdown-elements must be defined on a
menuelement and placed after a dropdown sub-component. - Toggles a dropdown-elements sub-component
<nav id="offcanvas"> <menu class="nav-elements"> <li><a href="#">Page One</a></li> <li> <a href="#">Page Two</a> <button class="dropdown" _="on click toggle .open on me then toggle .open on the next .dropdown-elements end"></button> </li> <menu class="dropdown-elements"> <li><a href="#">Page One</a></li> <li><a href="#">Page Two</a></li> <li><a href="#">Page Three</a></li> </menu> <li><a href="#">Page Three</a></li> <li> <a href="#">Page Four</a> <button class="dropdown" _="on click toggle .open on me then toggle .open on the next .dropdown-elements end"></button> </li> <menu class="dropdown-elements"> <li><a href="#">Page One</a></li> <li><a href="#">Page Two</a></li> <li><a href="#">Page Three</a></li> </menu> </menu> </nav>