Firefox OS Building Blocks to the rescue

Some months ago we started thinking how could we reuse visual components inside Firefox OS, both to help designers create new apps in a consistent way and also to help developers share some markup. The UX team reviewed hundreds of generated screens to create a set of all components called Common Controls (Kudos to Sergi Vila). Common controls repeated in two or more core apps were considered Building Blocks (BB).

My mission in this process, together with Ismael Gonzalez, was converting those visuals into HTML/CSS markup (no JavaScript at all).

From the very beginning Mozilla was clear about not creating a framework, allowing devs build their own apps without any restriction. In a way that also meant not using arbitrary classes. The code, of course, had to pass the W3C validator for HTML5 and CSS3, which was still unstable. So we ended up with completely correct code, but nothing to see from an OOCSS perspective, if you are a fan of that.

Using Headers Building Block

For instance, imagine you want to use Headers BB but you want your header in red. You will need to link headers.css and include this in your css:

section[role="region"] > header:first-child {
    background: red;

You can see all BB in action in (For a better browsing experience use Firefox Nightly). This page was initially meant to be used by devs working on the first release of Firefox OS as a bootstrap for core apps, so you will find CSS links there to Gaia’s (Firefox OS UI) shared folder.

Building Blocks and type of app

For core apps, any shared CSS file you link is copied to the app on build time, following the idea of one app containing all needed files, but also allowing us to have a shared folder. For third party applications – meaning any app that isn’t a core Gaia app – all BBs you want to use have to be copied manually from: gaia/shared/style or gaia/shared/style_unstable.

Why style_unstable? Could I use those BB’s? Yes you can, it’s just that at some point we decided not to include any extra BBs until it was not used in several apps, to test if markup was flexible enough. This folder should disappear soon, and all stable BBs will live in the same shared folder.

Using the Building Blocks

After this intro, I’ll show you how easy it is achieving Firefox OS look & feel. Find the code for this example on GitHub. You will find the links to each step in separate commits.

I will create a basic app containing the two most used components: headers and lists.

These are the steps:

  1. Create basic HTML structure
  2. Set base font size
  3. Getting files and assets
  4. Create two views
  5. Use lists’ markup
  6. Adding Settings button
  7. Add content to the Settings view

Create basic HTML structure

Initial screen capture of a basic HTML structure.
Commit 1

Set base font size

First things first! all CSS files in Gaia have this: html { font-size: 10px } that allow us to have an easy conversion to rems (1rem = 10px), and rems are the key for our scaling system.

Getting files and assets

We will need some headers.css and lists.css, and also the folders with those same names, which contain all the shared assets.

Create two views

We need two views: one will be a list of applications, and the second one a settings screen. We will hide the settings view by now, and add some extra markup for the headers. Our header’s parent container have to be: section role="region" to get the correct styling.

Commit 2

Use lists’ markup

Now we use lists’ markup:

  • aside for left aligned content
  • aside class="pack-end" for right aligned content
  • p (first element) for main content
  • And p (second element) for additional content

Note: It’s important to have all asides before p.

We will also add data-type="list" to the ul parent container. And after adding a couple of icons we can get something like this:

Commit 3

Adding Settings button

Now we will add a button in the header to show the Settings view. We need an icon, a click event in JavaScript, and two classes to animate the screen up and down. Adding also class="skin-organic" to our Settings view will change the color of the header.

Commit 4

Add content to the Settings view

And now we will add some content in the Settings view, a small form logging in to our service. We will need to link a new BB (input areas) to make our inputs nicer.

Commit 5

Files used in the app

Here’s the specific code needed for the app, with CSS files for the Building Blocks included:


That’s it! With some basic markup, we have Firefox OS styles integrated in our app. Go try it out!

About Arnau March

Arnau March is a "designloper" working for Telefonica. Not good enough to tell you why a button should be right aligned in a header, neither to code perfect javascript. But he is the guy who can apply visual solutions to programming limitations.

More articles by Arnau March…

About Robert Nyman [Editor emeritus]

Technical Evangelist & Editor of Mozilla Hacks. Gives talks & blogs about HTML5, JavaScript & the Open Web. Robert is a strong believer in HTML5 and the Open Web and has been working since 1999 with Front End development for the web - in Sweden and in New York City. He regularly also blogs at and loves to travel and meet people.

More articles by Robert Nyman [Editor emeritus]…


  1. Jan Jongboom

    To get started on this more easily, we have a repository with the shared folder from gaia that you can submodule into your project; so you can also use the components when not building core apps, or just want to test in any modern browser.

    February 18th, 2013 at 07:15

  2. Clochix

    I’m very disappointed. Are we talking about Open Web Apps, running in any modern browser, or FirefoxOS “native” apps. This building blocks only use -moz prefixes. I understand this is enough for core apps, but I want to write web apps that works in Firefox, Chromium, Opera and any modern browser.

    I’m not sure we should encourage developers to use this building blocks for their apps, because they will build apps that are not reusable in other browsers.

    February 18th, 2013 at 13:15

    1. Robert Nyman [Editor]

      The Building Blocks, as mentioned in the article, were targeted for core apps in Firefox OS. However, in the name of platform consistency when it comes to the end user experience – a major success factor for a platform like iOS – they were made available for developers building any kind of app. Yes, Open Web Apps are meant to work on as many platforms as possible, and no, it shouldn’t be prefixes for just one web browser – these have been examples from core apps, and if you want it to work in more web browsers, you need to add other prefixes in.

      I, for one, respect developers’ goals to have apps on Firefox OS to work and look the same as the core apps for a better user experience. That doesn’t exclude other platforms, or mean that you should do something exclusively for Firefox OS. I rather see it as tweaks to your content to make it work in any environment you plan to run it in, just as you, for instance, would use Responsive Design for a desktop web site to make it work better on smaller resolutions.

      February 19th, 2013 at 01:43

      1. Fawad Hassan

        Is there any plan in future to add other browser prefixes or its main focus will remain on core apps?

        Everything in building blocks is beautifully design except for brownish header color in default skin :(

        February 19th, 2013 at 12:19

        1. Robert Nyman [Editor]

          Right now, the code resides in Gaia for Firefox OS, so that focus will remain there. However, it doesn’t sound completely unlikely to to have it broken out at some point for a more general purpose.

          February 19th, 2013 at 13:26

  3. Nathan

    Is Shadow DOM or XBL2 support coming to Firefox? It would be perfect for this kind of stuff.

    February 18th, 2013 at 13:22

    1. Robert Nyman [Editor]

      I can’t say more on that, unfortunately. However, there are bugs to track status for Shadow DOM and XBL2.

      February 19th, 2013 at 02:06

  4. basiclaser

    Hey guys, once Ive made a html, css and js, how do I tie them together into a clickable app for firefox OS? Thanks :D

    February 22nd, 2013 at 15:56

    1. Robert Nyman [Editor]

      I recommend reading Getting started with Open Web Apps – why and how.

      February 26th, 2013 at 16:50

  5. Fred Lin

    I referenced and mdn to comeup with a UIDemos webapp. with source sample and block descriptions

    March 4th, 2013 at 08:56

    1. Robert Nyman [Editor]

      Nice! Thanks for sharing!

      March 5th, 2013 at 06:46

  6. Lance

    This is absolutely fantastic work !

    What you guys are doing is amazing – and thanks for including us developers by opening up the native building blocks.

    If you can, more of the same (examples and demos) will certainly be appreciated.

    Keep it up !

    March 19th, 2013 at 10:04

    1. Robert Nyman [Editor]

      Thanks, glad you like it!

      March 19th, 2013 at 16:20

Comments are closed for this article.