This article needs a technical review. How you can help.
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
@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.
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="disabled" 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.
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
@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.
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
@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.
Firefox OS live demos generally require a Gecko-based browser, and work best in recent builds of Firefox.