Subscribe / Unsubscribe Enewsletters | Login | Register

Pencil Banner

BLOG: Cross-browser library 'Brick' from Mozilla provides custom HTML tags for flexible semantic Web Components

Mark Gibbs | Aug. 28, 2013
Mozilla's Brick abstracts away common user interface patterns into easy-to-use, flexible, and semantic Web Components

Imagine if you could put this markup in a Web page:

<x-calendar controls chosen='2012-05-17'></x-calendar>

... and create this:

That is what Brick, a cross-browser library from Mozilla, will allow you to do. Using Brick you will be able to create custom HTML tags to:

... abstract away common user interface patterns into easy-to-use, flexible, and semantic Web Components. Built on Mozilla's x-tags library, Brick allows you to plug simple HTML tags into your markup to implement widgets like sliders or datepickers, speeding up development by saving you from having to initially think about the under-the-hood HTML/CSS/JavaScript.

As of August 27 Brick provides thirteen tags. Some tags abstract away complex widgets into simple HTML tags, such as <x-calendar> (as above), <x-deck> (a cyclable slide gallery), and <x-tooltip> (exactly as it sounds). Other tags provide cross-browser "native not-yet-globally-supported elements" such as <x-slider> and <x-datepicker> while 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 ... Each tag comes with a flexible attribute/JavaScript API and can be fully styled to match your application.

Interesting stuff but, as the Mozilla blog points out:

... 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 ...


Sign up for Computerworld eNewsletters.