As discussed at the Perth Hackfest, I'm opening this bug to discuss the idea of adding the Totara element library to Moodle. The main benefits are:

1. Encourages consistency around the use of UI elements in Moodle
2. Provide theme designers with a single place to check their themes
3. Provide developers with examples of how to implement common UI elements correctly
4. By allowing us to focus on a key set of elements we can ensure they are all implemented really well (including accessibility, usability, right-to-left support, working with responsive design etc.)

I've pushed an initial version here:

https://github.com/totara/moodle/tree/mdl-feature-element-library

This is based on the Totara element library but implemented as an admin tool (adding a menu item under Appearance in the administration menu). Some immediate areas for improvement are:

1. Currently these are just static pages. At the hackfest we discussed providing a more pluggable architecture to allow modules to define their own elements and to dynamically generate pages with code examples, output source code and an example from a single example. For example see the Twitter bootstrap documentation (http://twitter.github.com/bootstrap/base-css.html#forms).
2. The current pages only show a limited number of basic elements, there are sure to be lots of extra UI elements that should be added.
3. We should look at which methods are considered best practice and depreciate then remove UI elements that should no longer be used.