Variations

There are a number of modifications you could make to the style - font size, etc. but this layout looks like the real thing.

Notice that you only get the look and not the behavior.

For example the back button doesn't work and neither does the edit button. To make these work you have to write event handlers for each.

In general none of the UXBBs provide any default behavior and at the moment there is little documentation that relates to JavaScript and the UXBBs.

You can include other elements within the header.

For example you can place a sub-header after the main header:

...

 </header>
 <header>
  <h2>Subheader text</h2>
 </header>
</section>

and you can repeat this as many times as you like but one sub-header is the usual limit. 

You can add as many buttons to the menu as you want:

<menu type="toolbar">
 <button>
  <span class="icon icon-edit">edit</span>  
 </button>
 <button>
  <span class="icon icon-add">add</span>
 </button>
</menu>

The final option is to add an input field:

 ...

 </menu>
 <form action="#">
  <input type="text" placeholder="search"
                         required="required">
  <button type="reset">Remove text</button>
 </form>
</header>

The complete header looks like:

And the code that produces this is:

<section role="region">
 <header>
  <a href="#">
   <span class="icon icon-back">
back</span>
  </a>
  <menu type="toolbar">
   <button>
    <span class="icon icon-edit">edit</span>
   </button>
   <button>
    <span class="icon icon-add">add</span>
   </button>
  </menu>
  <form action="#">
   <input type="text"
    placeholder="search" required="required">
   <button type="reset">Remove text</button>
  </form>
 </header>
 <header>
  <h2>Subheader text</h2>
 </header>
</section>

Conclusion

From this brief look at the way the header works you should be able to make progress with the other UXBBs but you will encounters similar problems along the way. As long as your CSS is up to scratch you should be able to make sense of it. 

Overall however the idea of providing template blocks of HTML and CSS to define the basic building blocks of the standard UI is not a good one.

The first problem is that each app has to have a complete copy of the UXBB resources - each app is sandboxed from every other app and can only refer to its own resources. 

The second problem is that the structure of a UXBB is messy and complex. The reason seems to be an attempt to leave the programmer free to modify the layout as much as possible. The alternative approach of providing a small number of fixed components might be easier to work with. 

It also might be better to create custom controls using the data- attribute to determine the type of control. For example:

<div id="mainHeader"
  data-FFOS-control="FOS.HeaderBB"
  data-FFOS-options="{mainText:'Hello Header'}" >
</div>

Where HeaderBB was a simple Header with a Back Button and some text. The options object is a simple JSON notation to pass the custom data to the control.  A simple JavaScript utility could then expand the div, using the options,  to contain all of the HTML required to build the header.  This would make the HTML on the page much simpler and the penalty in terms of the time to process should be small. 

There clearly is a lot more to say about UXBB but for the moment things are changing too quickly and there isn't enough documentation to determine exactly what the recommended way of doing things is supposed to be. 

This is a subject that needs a second and perhaps third pass. 

There is also a lot to add about the way CSS is used to effect transitions between different pages within an applicatio - which is the subject of the next chapter.. 

Resource And Code Download

You can also download the code example and the resource files - style sheets and icons - from the CodeBin (note you have to Register first). Also notice that the most up-to-date resources are likely to be found on the Mozilla website. 

Firefox OS - Building Apps

This article is part of a first draft of a book on Firefox OS. 

• Chapter 1 Getting Started With Firefox OS And Geeksphone Keon 
• Chapter 2 The UX Building Blocks