Unfortunately, it will be a while before we see native browser support for the spec, but that doesn’t mean developers can’t start taking advantage of the component concept now, thanks to Google’s Polymer framework and Mozilla’s x-tags polyfill library (both X-Tag and Polymer share the same low-level, Web Component polyfills).
Putting Brick into Action
which creates a DOM element that looks like this:
Want to edit how the component behaves, such as by adding navigational controls or pre-selecting a date? Like any other native tag, you can change how a component behaves just by changing the attributes of the tag!
<x-calendar controls chosen='2012-05-17'></x-calendar>
At the time of writing, Brick consists of thirteen different tags, most of which are completely independent of one another, and can even be downloaded separately instead of a single bundle.
Some tags abstract away complex widgets into simple HTML tags, such as:
- <x-calendar> (calendars, as seen from the example)
- <x-deck> (a cyclable slide gallery)
- <x-tooltip> (exactly as it sounds).
Others are cross-browser polyfill implementations of existing native not-yet-globally-supported elements, such as:
<input type="range"> and
<input type="date">, respectively. Still others are structural components simplifying the styling and markup of certain components, such as <x-layout>, which ensures that content, headers, and footers can fill a container element without explicit styling markup.
Start Building with Bricks
Want to start using components in your own applications? Head to mozilla.github.io/brick to download a release bundles, view demos, and read the documentation for the available tags. Alternatively, visit the Brick Github page to view the source code and contribute to the effort!
The library is still in a beta release, so we appreciate all user feedback! Brick is already starting to crop up in the wild, so we’d love to hear about how you’re using it!
View full post on Mozilla Hacks – the Web developer blog