Interface driven behavioral markup powered by MooTools and Bootstrap brought to you by Thanx.

<a data-behavior="BS.Tooltip" title="I'm a tooltip!">I've got a tip!</a>      Go ahead, try it! Mouse over this code block!


Behavior UI is a set of UI components based on Bootstrap and (optionally) Flat UI coupled with a JavaScript framework for building interactive components with a inline declaration for their invocation.

Getting Behavior UI

The project is available on github where you'll also find in the /dist directory:

You can also fork/download the repo from github and use nodejs to compile the components by running grunt. See the Readme in the repo for details. We'll be providing a builder for it soon.

What's In Behavior UI

Behavior UI is built on top of Bootstrap and Flat-UI and offers very few additions to those libraries. Most of what's include is JavaScript with a modest amount of LESS/CSS content to support it.


There are a handful of LESS components included in the library nearly all of which support custom UI components. These include, but are not limited to:

  • Autocomplete styles for the Autocomplete component [demo]
  • Charts styles for our customized version of HighCharts [demo]
  • Date picker styles for our customized version of Arian Stolwijk's DatePicker [demo]


Behavior UI has numerous dependencies each of which have their own documentation that you may find useful to peruse.


Behavior UI is built with MooTools. You'll find loads of information in the documentation for MooTools Core and the documentation for MooTools More.

Key to the UI is the use of MooTools classes and the use of the Behavior library to invoke them.


The other key component to this UI library is Behavior. As outlined in the docs for that library:

Behavior attempts to abstract that domready code into something you only write once and use often. It's fast and easily customized and extended. Instead of having a domready block that, say, finds all the images on a page and turns them into a gallery, and another block that searches the page for all the links on the page and turns them into tool tips, Behavior does a single search for all the elements you've marked. Each element is passed through the filter it names, where a filter is a function (and perhaps some configuration) that you've named. Each of these functions takes that element, reads properties defined on it in a prescribed manner and invokes the appropriate UI component.

It would be very much worth your time to go read the rest of that document.


Behavior UI is provided with the MIT license.