+
+

Lu allows HTML authors to describe interface behavior through markup.

+

Get Started or see what Lu can do.

+ +

Read the documentation. See the changelogs. File an issue. Give us a test. Thank the contributors. Fork us + on Github. Predict the future + with our roadmap.

+ +

As you author HTML, Lu goes to work. Under the covers, Lu scans + markup, loads required scripts, and instantiates controls. Meaning + that functional interfaces can be rapidly built without having to + write a lick of javascript.

+ +

Lu comes with a growing library of controls from simple + buttons to a highly flexible carousel. Controls communicate through an event system, intelligently adapt based on markup, and are + designed to work with each other. When mixed and matched, they create rich user + interfaces.

+ +

Built with performance in mind, Lu leverages, Inject, a commonJS loader. Inject loads controls and + persist them locally. Controls are loaded once and reused. As + controls are composable, Lu gets faster overtime, even as the + interface changes.

+ +

Lu also offers a well documented API and helper functions. + Together with its event system, Javascript developers have complete + programatic control, and can build applications on top of Lu, customize + behavior, or build new controls with ease.

+ +

TODO: Lu only has a few small quirks on IOS. TEST LU ACROSS + PLATFORMS AND BROWSERS, write a "Browser tested, mobile approved and + outro paragraph." Lorem ipsum dolor sit amet, consectetur adipisicing elit, + sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+ +
+
+

Getting Started

+

Download the latest version (1.0.0) here. Lu works with jQuery (1.7+), underscore and inject. It also comes bundled with a version of Prototype's Class.

+

Include these scripts on your page.

+ +

Configure Lu in lu-config.js

+ +

Load Lu on your page.

+ +

Write some Html.

+ +

That was the hard part. So, celebrate!

+ Back to top +
+
+

Controls

+

Controls are annotated by name in a data-lu attribute. And are + configured by examining markup for meaningful context and attributes or via an + object literal keyed by with the control's name in + data-lu-config.

+

Lu currently ships with the following controls.

+ +
+

Buttons

+

Annotation: Button[:*], Documentation

+

The simplest of controls are buttons. They take one event (click by + default) and emit another, such as 'play', 'pause', 'next', and 'previous'. Lu + comes with a comprehensive set of preconfigured buttons as well with a base + Button control that can be configured to emit custom events.

+ + + + + + + + + + + + + +

Although buttons are usually <a>, + <button> or <input> elements, anything + will do. This is true with all controls, however, as the markup + becomes less meaningful, more configuration is necessary.

+

For example, a Button:Select control looks for an + aria-controls attribute when on a <button> or + <input> element. When on an <a> it looks + for a hash in the href attribute. Additionally, they look at + their context; if they are part of lists they will send their position in the + list along with the 'select' event.

+ +

Because Lu, is a interface behavior library achieving button groups and + tool bars are a matter of styling. The below is composed of a + Button:Previous a Button:Next and three + Button:Select controls.

+
+ + + + + +
+

To see the Button control in action, check out List, Carousel, Tabs, or Accordion.

+

Back to Controls

+
+
+

List

+

Annotation: List, Documentation

+

The List control manages an iterative set of items and is most + often used with <ol> and <ul> + elements.

+

List responds to events such as 'previous', 'next', 'first', 'last', and + 'select', and works with the corresponding Button controls.

+

Button controls together with lists form the foundation of + other more complex controls like Accordion, Tabs and Carousel but + can also be leveraged to create a variety of other interfaces. For example + both pills and treeview can be achieved with a composition of a + List and Button:Select.

+
Pills
+ + +
Treeview
+ + +
Buttons and Events
+

Buttons not only send events to List, List + controls, send stateful events back to buttons. This allows them to disable or + enable themselves as appropriate. For example, Button:Previous + disables itself when the first item is selected. Likewise, + Button:First disables itself also. Read more about this in Events.

+
+
    +
  • 1
    • +
  • 2
    • +
  • 3
    • +
  • 4
    • +
+
+ + + + + + +
+
+ +

Back to Controls

+
+
+

Container

+

Annotation: Container, Documentation

+

Container is an element that holds content or other elements. The most common element to use with Container is div, but almost any other tag will work, too.

+ +

Container can be pre-filled with markup, or it accepts new content from another DOM node, or from a text string, depending on how you configure it.

+ +

Container responds to show, hide, select, and unselect events by showing or hiding itself (via adding a 'hidden' class). It will emit a corresponding hidden or shown event to signal its new state. Container also responds to a load event by filling itself with fresh content, per its configuration. Afterwards, it will emit a loaded event.

+ +

Container also has the ability to calculate its own height and width for animations and other special effects (TBD).

+ +
+ (an empty container) +
+ + + + +

Back to Controls

+
+ +
+

Tabs

+

Annotation: Tabs, Documentation

+ +
+
    +
  1. Tab 1
    2. +
  2. Tab 2
    3. +
  3. Tab 3
    4. +
  4. Tab 4
    5. +
+
+
Tab 1 content
+
Tab 2 content
+
Tab 3 content
+
Tab 4 content
+
+
+ + +

Back to Controls

+
+
+

Accordion

+

Annotation: Accordion, Documentation

+

Back to Controls

+
+
+ +
+
    +
  1. One
    2. +
  2. Two
    3. +
  3. Three
    4. +
  4. Four
    5. +
+ + +
+
+
+

Dialog

+

Annotation: Dialog, Documentation

+

Back to Controls

+
+
+

Mask

+

Annotation: Mask, Documentation

+

Back to Controls

+
+
+

Dropdown

+

Annotation: Dropdown, Documentation

+

Back to Controls

+
+
+

Tip

+

Annotation: Tip, Documentation

+ + Tip + + +

Back to Controls

+
+
+

Facets(?)

+

Annotation: Facets, Documentation

+

Back to Controls

+
+ Back to top +
+
+

Events

+ Back to top +
+