Coding guide: Header

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

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.

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

@import url(https://developer.mozilla.org/media/gaia/shared/style/headers.css);
@import url('https://developer.mozilla.org/media/css/gaia.css');
html, body {
  margin: 0;
  padding: 0;
  font-size: 10px;
  height: 100%;
  overflow-x: hidden;
  background: #000 url(https://mdn.mozillademos.org/files/4655/fx_logo_white_backdrop.jpg) fixed;
}
body { background: none; }

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

Working demo

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

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

@import url(https://developer.mozilla.org/media/gaia/shared/style/headers.css);
@import url('https://developer.mozilla.org/media/css/gaia.css');
html, body {
  margin: 0;
  padding: 0;
  font-size: 10px;
  height: 100%;
  overflow-x: hidden;
  background: #000 url(https://mdn.mozillademos.org/files/4655/fx_logo_white_backdrop.jpg) fixed;
}
body { background: none; }

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

Working demo

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

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

@import url(https://developer.mozilla.org/media/gaia/shared/style/headers.css);
@import url('https://developer.mozilla.org/media/css/gaia.css');
html, body {
  margin: 0;
  padding: 0;
  font-size: 10px;
  height: 100%;
  overflow-x: hidden;
  background: #000 url(https://mdn.mozillademos.org/files/4655/fx_logo_white_backdrop.jpg) fixed;
}
body { background: none; }

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

Working demo

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

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

@import url(https://developer.mozilla.org/media/gaia/shared/style/headers.css);
@import url('https://developer.mozilla.org/media/css/gaia.css');
html, body {
  margin: 0;
  padding: 0;
  font-size: 10px;
  height: 100%;
  overflow-x: hidden;
  background: #000 url(https://mdn.mozillademos.org/files/4655/fx_logo_white_backdrop.jpg) fixed;
}
body { background: none; }

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.