Coding guide: Header Redirect 2

Download resources

This article presents examples and coding instructions for creating headers in your Firefox OS apps. You'll also find downloads for the CSS and image resources needed to match the appearance of headers presented in this user experience guide, and to match the appearance of the headers in the built-in apps. You can simply copy these resources into your app.

Implementing headers

To implement a header using the style shown here, place the CSS and media files into your app and then import the CSS using the @import at-rule:

@import url(resources/headers.css);

Make sure the media files are in the location expected by the CSS (either by placing them in a corresponding location or by revising the CSS).

Standard icon buttons

The following list provides an example of the Firefox icons provided in the standard Gaia style resources:

Button Name Image Class
Add icon-add
Back icon-back
Close icon-close
Compose icon-compose
Edit icon-edit
Menu icon-menu
Reply icon-reply
Reply All icon-reply-all
Send icon-send
User icon-user

Note: To find the latest up-to-date icons, consult the Gaia source code on Github.

To insert a button into your header, create a <menu> of type "toolbar" and use the corresponding class for each item in the toolbar. This is demonstrated in many of the Examples.

Note: In a right-to-left locale, the back button is actually located at the right side of the screen, and points to the right.

Examples

Simple headers

This example demonstrates some simple headers; it shows several headers in one display (in a real app, you would only have one primary header and possibly a secondary header).

With add and edit buttons

This header includes a toolbar that offers edit and add buttons at its right end.

<section role="region">
  <header>
    <menu type="toolbar">
      <a href="#"><span class="icon icon-edit">edit</span></a>
      <a href="#"><span class="icon icon-add">add</span></a>
    </menu>
    <h1>Messages</h1>
  </header>
</section>

With a back button and edit button

The toolbar in this header has a back button at the left end and an edit button at the right.

<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>
    </menu>
    <h1>Jane Doe</h1>
  </header>
</section>

With a drawer menu button

This header adds a button to open a drawer at the left, in addition to edit and add buttons at the right.

<section role="region">
  <header>
    <button><span class="icon icon-menu">menu</span></button>
    <menu type="toolbar">
      <button><span class="icon icon-edit">edit</span></button>
      <button><span class="icon icon-add">add</span></button>
    </menu>
    <h1>Inbox <em>(2)</em></h1>
  </header>
</section>

With a close button

This example presents a header with a close button as well as a "Done" button, then a subheader below it.

<section role="region">
  <header>
    <button><span class="icon icon-close">close</span></button>
    <menu type="toolbar">
      <button>done</button>
    </menu>
    <h1>Title</h1>
  </header>
  <header>
    <h2>Subheader text</h2>
  </header>
</section>

CSS

section[role="region"] {
  margin-bottom: 1.5rem;
  position: relative;
}

Working demo

You can try out the action menu in this live demonstration.


Firefox OS live demos generally require a Gecko-based browser, and work best in recent builds of Firefox.

Headers with inputs

Including a search box in a header is as simple as including a form with the search box and a button to reset the form. In this case, it's a search box for a person in an address book.

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

CSS

section[role="region"] {
  margin-bottom: 1.5rem;
  position: relative;
}

Working demo

You can take a look at these headers in this live demonstration.


Firefox OS live demos generally require a Gecko-based browser, and work best in recent builds of Firefox.

Using the dark theme

Media apps are encouraged to use the dark theme for their headers; you apply this theme to a header by using the class "skin-dark". The code below shows a simple media header:

<section role="region" class="skin-dark">
  <header>
    <h1>Song title</h1>
  </header>
</section>

This code shows a header for a song's detail page, which would show extra information about a song. It has a subheader, and also a back button to return to the main music player view.

<section role="region" class="skin-dark">
  <header>
    <a href="#"><span class="icon icon-back">back</span></a>
    <h1>Song title</h1>
  </header>
  <header>
    <h2>Subheader text</h2>
  </header>
</section>

CSS

section[role="region"] {
  margin-bottom: 1.5rem;
  position: relative;
}

Working demo

These simple dark "media" theme headers are demonstrated in this live sample.


Firefox OS live demos generally require a Gecko-based browser, and work best in recent builds of Firefox.

Using the organic theme

The "organic" theme, which you use by applying the class "skin-organic", is used by settings panels, primarily. Here, the class is applied to a <div> surrounding the header, so that we don't have to individually apply it to each element in the header, but you can do it either way.

<div class="skin-organic">
  <section role="region">
    <header>
      <h1>Settings</h1>
    </header>
    <header>
      <h2>Subheader text</h2>
    </header>
  </section>

  <section role="region">
    <header>
      <a href="#"><span class="icon icon-close">close</span></a>
      <h1>Settings</h1>
    </header>
    <header>
      <h2>Subheader text</h2>
    </header>
  </section>
</div>

CSS

section[role="region"] {
  margin-bottom: 1.5rem;
  position: relative;
}

Working demo

You can take a look at these example settings panel headers in this live demonstration.


Firefox OS live demos generally require a Gecko-based browser, and work best in recent builds of Firefox.

Document Tags and Contributors

Last updated by: chrisdavidmills,