Mozilla has launched the latest version of a reusable UI element library designed to take advantage of HTML5's ability to create custom HTML tags.
The Brick library has been under development since August 2013, though it first appeared in a somewhat different incarnation. Now it's advanced to version 2.0, which builds more directly on HTML5 standards available in the majority of late-model browsers.
The idea behind Brick is to create a library of UI components for Web applications, each with distinct HTML elements. A menu, for instance, wouldn't be a div element with a class designation, but rather its own brick-menu element enclosing other brick-item elements. The resulting HTML is intended to be easier to read and less convoluted.
An earlier version of Brick used the X-Tag polyfill library to create custom elements for browsers that didn't yet support HTML5's custom elements API. Now that the API has been widely adopted, the current version of Brick makes direct use of it.
Brick invites comparison with Google's Polymer, the Web library designed to allow the creation of custom HTML elements for browsers without inherent support for such features. However, Brick doesn't provide bidirectional data binding or templating, except in extremely limited ways.
Brick also seems to parallel the Material Design framework, another Google production and an outgrowth of Polymer. Previously known as Quantum Paper, Material Design has been slated to appear in Google's L release for Android. Again, Brick's focus is more constrained. Instead of supplying an entire top-to-bottom set of design-language metaphors, including animations or other responsive behaviors, Brick deals solely with creating individual components.
The Ionic framework also offers its own HTML5 component library, but is mainly designed for hybrid mobile app design and is tightly coupled to Google's AngularJS framework. Brick's components are meant to work in any HTML5-powered context, whether mobile or desktop, and not depend on a particular framework.
That said, rough edges are evident. Some individual demos, like brick-menu, don't seem to work properly yet in either Chrome or Firefox. Also, as observers have pointed out, the code for the most recent incarnations of these demos seems more verbose than their earlier X-Tag incarnations. For instance, the X-Tag flipbox component is only 2.3KB of JavaScript, while the Brick incarnation is nearly three times that size.
These unfinished surfaces are likely due to the relative newness of Brick 2.0, but they hint at how further refinements could be made. To that end, Mozilla encourages feedback and pull requests through the project's GitHub page.