Brick - Mozilla Does UI Web Components
Brick - Mozilla Does UI Web Components
Written by Ian Elliot   
Monday, 26 August 2013

Not content with having an entire OS to develop, not to mention a well known browser, Mozilla has now taken on the task of creating a UI for the modern web app. But why call it Brick?  

There is still a big problem with HTML5 when it come to creating a sophisticated UI - it just doesn't support enough widgets. The solution to the problem is to use JavaScript to build new widgets using the tags and graphics already defined in HTML5.

 However, the standard way to do the job is to create a web component. W3C is working on a standard way to extend HTML using custom tags, JavaScript and the shadow DOM - so it isn't 100% standardized as yet.

The good news is that, once the hard work of developing a custom component has been done, using it is as easy as using a standard tag - as long as you remember to load  the JavaScript that makes it all work. 

So, for example, if you want to make use of a flipbox component all you have to do is include:

    <div>I'm the front face.</div>
    <div>And I'm the back face.</div>

and to make it flip from front to back:

// assume that toggleButton and flipBox are already
// defined as their respective DOM elements
toggleButton.addEventListener("click", function(){




Mozilla now has a library of web components that you can download and use. It is in beta at the moment and there are some bugs. The range of components is quite large - appbar, calendar, datepicker, deck, flipbox, iconbutton, slidebox, slider, tabbar, toggle, togglegroup and tooltip. 

In principle the components can be used with any browser and in an general HTML page but all of the examples on the Brick website show a mobile phone sized screen. 

It is very clear that Mozilla intends Brick to be used to develop apps for FIrefox OS but this isn't made explicit. In fact, apart from the basic documentation, there isn't much information at all on the project, which appears to be a descendant of the older X-Tag project.

If you are planning to create an app for Firefox OS there isn't much official guidance on what to use  for the UI - jQuery Mobile, The UX Building Blocks or now Brick?

Mozilla needs to get a coherent SDK for Firefox OS apps together very soon and stop pretending that developing for it is just the same as developing a general web app. 

Despite the lack of communication, Brick looks good and especially so if you are attempting to create a Firefox OS app - but surely it should be called Bricks?


More Information

Brick Website

Brick On GitHub


Related Articles

New Firefox OS Website Documents The UI       

Firefox OS Simulator Reaches 4       

Getting Started with Firefox OS - The UX Building Blocks

Getting Started With Firefox OS And Geeksphone Keon


To be informed about new articles on I Programmer, install the I Programmer Toolbar, subscribe to the RSS feed, follow us on, Twitter, FacebookGoogle+ or Linkedin,  or sign up for our weekly newsletter.






or email your comment to:



Canada's RAND Immigration Lottery Not Random!

Well of course it isn't, but that doesn't stop people who should no better from stirring up a mock disgust and alarm. Oh dear we programmers are at it again, cutting corners with our job lot of not-qu [ ... ]

Blazor, .NET In The Browser, Reaches 0.3

History has some strange twists and turns for those willing to see them. Blazor is one of the oddest. Take .NET compile it to Web Assembly and run it in the browser. Sounds like fun? Now we can all tr [ ... ]

More News


Last Updated ( Monday, 26 August 2013 )

RSS feed of news items only
I Programmer News
Copyright © 2018 All Rights Reserved.
Joomla! is Free Software released under the GNU/GPL License.