Action menu

An action menu presents a list of actions, related to the app's content, from which the
user may make a selection.More
Example

Note
Use <button type="button"> in case you don't want your form to be submitted.
Css link
1
<link href="(your styles folder)/style/action_menu.css" rel="stylesheet"
type="text/css">
HTML code
1
2
3
4
5
6
<form role="dialog" data-type="action">
<header>Title</header>
<menu>
<button>Action 1</button>
<button disabled>Action 2 (disabled)</button>
<button>Action 3</button>
7
8
9
10
11
12
13
14
15
<button>Action 4</button>
<button disabled>Action 5 (disabled)</button>
<button>Action 6</button>
<button>Action 7</button>
<button disabled>Action 8 (disabled)</button>
<button>Action 9</button>
<button>Cancel</button>
</menu>
</form>

Buttons
Buttons perform an action when tapped by the user. Firefox OS has a wide variety of
button styles to accommodate different uses and contexts.More
Default
Default buttons are used when there are only a few actions and a list isn't needed. A
primary action button uses a special highlight color to improve visibility and simplify the
choice for the user. Buttons that have potentially negative consequences, such as
deleting an item, are highlighted in red.
Example

Css link
1
<link href="(your styles folder)/style/buttons.css" rel="stylesheet"
type="text/css">
HTML code
1
2
3
<button>Default</button>
<a class="bb-button recommend" href="#">Primary</a>
<button class="danger">Danger</button>

Disabled buttons
Disabled buttons do not respond to users' taps.
Example

Css link
1
<link href="(your styles folder)/style/buttons.css" rel="stylesheet"
type="text/css">
HTML code
1
2
3
4
5
6
7
8
9
10
<div>
<button disabled="disabled">Default</button>
<a class="bb-button recommend" aria-disabled="true" href="#">Recommend</a>
<button class="danger" disabled="disabled">Danger</button>
</div>
<div class="skin-dark"><!-- disabled buttons over dark background -->
<button disabled="disabled">Default</button>
<button class="recommend" disabled="disabled">Recommend</button>
<button class="danger" disabled="disabled">Danger</button>
</div>

List buttons
List buttons are used when displaying a list of actions, or to trigger the display of a value
selector.
Example

Note
This example uses Gaia Icon Font. For more details, please follow the link.
Css link
1
<link href="(your styles folder)/style/buttons.css" rel="stylesheet"
type="text/css">
HTML code
1
2
3
4
5
6
7
8
9
10
11
<ul>
<li>
<button>Default</button>
</li>
<li>
<button disabled="disabled">Disabled</button>
</li>
<li><button>Action 1</button></li>
<li><button data-icon="forward">View Name</button></li>
<li><button data-icon="expand">Tuesday September 18, 2012</button></li>
</ul>




Confirm
A confirmation prompt is used to confirm an action or inform the user of an event.
Confirmation prompts are frequently used to confirm tasks that cannot be undone, such
as permanently deleting an item. Confirmation prompts are designed to disrupt tasks
and, as a result, should be used sparingly.More
Default
Example

Note
Use <button type="button"> in case you don't want your form to be submitted.
Css link
1
<link href="(your styles folder)/style/confirm.css" rel="stylesheet"
type="text/css">
HTML code
1 <form role="dialog" data-type="confirm">
2
3
4
5
6
7
8
9
10
<section>
<h1>Confirmation</h1><!-- this heading is optional -->
<p>Are you sure you want to delete this contact?</p>
</section>
<menu>
<button>Cancel</button>
<button class="danger">Delete</button>
</menu>
</form>

Confirm with content
Example

Css link
1
<link href="(your styles folder)/style/confirm.css" rel="stylesheet"
type="text/css">
HTML code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<form role="dialog" data-type="confirm">
<section>
<h1>Confirmation</h1>
<p>
<img src="../images/BB/app_logo.png" alt="Lightbox Icon" width="55"
height="55">
<strong>Lightbox</strong>
<small>Lightbox Enterprises LLC.</small>
</p>
<p>Do you want to download and install this application?</p>
</section>
<menu>
<button>Cancel</button>
<button class="recommend">Yes</button>
</menu>
</form>

Drawer
Drawers provide access to top-level navigation options that may be too numerous for a
tabs or toolbar interface. Drawers can also be used to access user-generated content
such as browser tabs, accounts in an email or messaging client, or multiple calendars.
Drawers slide out from the edge of the screen at the user's request (pushing the
underlying content aside), then slide back out of the way when no longer needed.More
Example

Css link
1
2
<link href="(your styles folder)/style/headers.css" rel="stylesheet"
type="text/css">
<link href="(your styles folder)/style/drawer.css" rel="stylesheet"
type="text/css">
HTML code
1
2
3
4
5
6
7
8
9
10
<section data-type="sidebar">
<header>
<menu type="toolbar">
<a href="#content"><span class="icon icon-add">add</span></a>
</menu>
<h1>Title <em>(9)</em></h1>
</header>
<nav>
<ul>
<li><a href="#content">label</a></li>
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<li><a href="#content">label</a></li>
<li><a href="#content">label</a></li>
<li><a href="#content">label</a></li>
</ul>
<h2>Subtitle</h2>
<ul>
<li><a href="#content">label</a></li>
<li><a href="#content">label</a></li>
<li><a href="#content">label larger label than the </a></li>
<li><a href="#content">label</a></li>
</ul>
</nav>
</section>
<section id="drawer" role="region">
<header>
<a href="#content"><span class="icon icon-menu">hide sidebar</span></a>
<a href="#drawer"><span class="icon icon-menu">show sidebar</span></a>
<h1>Inbox</h1>
</header>
<div role="main"></div>
</section>

Edit mode
State of an app where content becomes editable by the user (eg: deleting messages).
Example

Note
Use <button type="button"> in case you don't want your form to be submitted.
Css link
1 <link href="(your styles folder)/style/edit_mode.css" rel="stylesheet"
type="text/css">
HTML code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<form role="dialog" data-type="edit">
<section role="region">
<header>
<button><span class="icon icon-close">close</span></button>
<menu type="toolbar">
<button>done</button>
</menu>
<h1>Edit</h1>
</header>
</section>
<menu>
<button>Delete all</button>
<button>Delete selected</button>
</menu>
</form>

Filters
Filters can be used for two purposes: data filtering, in which the user can view a single
set of data in different ways (for example, the Calendar app uses filters to select the
time scale to use when viewing data (that is, by day, week, or month); and secondary
navigation (presenting a second set of tabs when tabs are already present in your user
interface).More
Example

Css link (Both Tabs and Filters are in tabs.css)
1
<link href="(your styles folder)/style/tabs.css" rel="stylesheet"
type="text/css">
HTML code
1
2
<ul role="tablist" class="bb-tablist" data-type="filter">
<li id="filter1-1" role="presentation"><a href="#filter1-1"
3
4
5
6
7
8
9
10
role="tab">Action 01</a></li>
<li id="filter1-2" role="presentation"><a href="#filter1-2"
role="tab">Action 02</a></li>
</ul>

<ul role="tablist" data-type="filter" class="skin-grey bb-tablist">
<li id="filter2-1" role="presentation"><a href="#filter2-1"
role="tab">Action 01</a></li>
<li id="filter2-2" role="presentation"><a href="#filter2-2"
role="tab">Action 02</a></li>
<li id="filter2-3" role="presentation"><a href="#filter2-3"
role="tab">Action 02</a></li>
</ul>

Headers
Used for labeling the active view and providing top-level navigation and inputs for the
active view.More
Default
Example

Css link
1
<link href="(your styles folder)/style/headers.css" rel="stylesheet"
type="text/css">
HTML code
1
2
<section role="region">
<header>
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<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>
<section role="region">
<header>
<button><span class="icon icon-menu">menu</span></button>
<menu type="toolbar">
<button><span class="icon icon-add">add</span></button>
</menu>
<h1>Inbox <em>(2)</em></h1>
</header>
</section>
<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>

Skins
Example

Css link
1
<link href="(your styles folder)/style/headers.css" rel="stylesheet"
type="text/css">
HTML code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<section class="skin-dark" role="region"><section class="skin-dark"
role="region">
<header>
<a href="#"><span class="icon icon-back">back</span></a>
<h1>Song title</h1>
</header>
<header>
<h2>Subheader text</h2>
</header>
</section>
<section class="skin-organic" role="region">
<header>
<a href="#"><span class="icon icon-back">back</span></a>
<h1>Settings</h1>
</header>
<header>
<h2>Subheader text</h2>
</header>
</section>
<section class="skin-comms" role="region">
<header>
22
23
24
25
26
27
<a href="#"><span class="icon icon-back">back</span></a>
<h1>Contacts</h1>
</header>
<header>
<h2>Subheader text</h2>
</header>
</section>

Input areas
An input area is a data entry field. There are many variations on what an input area can
look like - they can be as simple as a text entry field, and as complex as a multi-part
entry field with text entry, value selectors, and buttons.
Default
Example

Css link
1
<link href="(your styles folder)/style/input_areas.css" rel="stylesheet"
type="text/css">
HTML code
1
2
3
4
5
6
7
<form>
<p>
<input type="text" placeholder="Placeholder" required="">
<button type="reset">Clear</button>
</p>
<p>
<textarea placeholder="Placeholder in textarea" required=""></textarea>
8
9
10
11
12
13
</p>
<p>
<input type="text" placeholder="Placeholder" value="Some written text"
required="">
<button type="reset">Clear</button>
</p>
</form>

Fieldset
Example

Css link
1
<link href="(your styles folder)/style/input_areas.css" rel="stylesheet"
type="text/css">
HTML code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<form>
<fieldset>
<legend class="action">Mobile</legend>
<section>
<p>
<input type="tel" placeholder="Phone number" required="">
<button type="reset">Clear</button>
</p>
<p>
<input type="text" placeholder="Name" value="Jessy James"
required="">
<button type="reset">Clear</button>
</p>
</section>
</fieldset>
</form>

Forms
Example

Css link
1
<link href="(your styles folder)/style/input_areas.css" rel="stylesheet"
type="text/css">
HTML code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<form role="search">
<p>
<input placeholder="Search..." type="text">
<button type="reset">Clear</button>
</p>
</form>

<form role="search">
<button type="submit">Cancel</button>
<p>
<input placeholder="Search..." value="Some text here" type="text">
<button type="reset">Clear</button>
</p>
</form>

Layout
This utility will help us creating most common layout structures.
Basic
You could find this structure in most apps in Firefox OS: Fixed header and footer with
scrollable content.
Using layout.css is easy to achieve it, using display: flex in your main container
and classes fit and scroll in your content section.
Example

Css link
1
<link href="(your styles folder)/style/layout.css" rel="stylesheet"
type="text/css">
HTML code
1
2
3
4
5
6
7
8
9
10
11
12
<section role="region" class="vbox fit">
<header>
<h1>App name</h1>
</header>
<section class="gaia-list fit scroll sticky">
<article>
<header>Lipsum</header>
<ul>
<li><p>Lorem ipsum dolor sit amet, consectetur adipiscing
elit.</p></li>
<li><p>Mauris id tellus at tellus tristique sollicitudin a non
erat.</p></li>
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<li><p>Pellentesque eu dui commodo, sollicitudin mauris.</p></li>
<li><p>Nam condimentum mi id convallis pretium.</p></li>
<li><p>Etiam sit amet risus a nulla suscipit dapibus.</p></li>
</ul>
</article>
<article>
<header>quisquam</header>
<ul>
<li><p>Aliquam cursus magna ut sollicitudin tincidunt.</p></li>
<li><p>Proin convallis odio nec fermentum porttitor.</p></li>
<li><p>Phasellus vel magna quis leo ultricies finibus non et
lectus.</p></li>
<li><p>Ut vel dolor eget eros ullamcorper rutrum.</p></li>
</ul>
</article>
<article>
<header>Consectetur</header>
<ul>
<li><p>Curabitur ullamcorper risus at felis tristique
vestibulum.</p></li>
<li><p>Nullam aliquet justo vitae nulla porttitor, vel scelerisque
magna aliquet.</p></li>
<li><p>Maecenas tristique libero maximus, porttitor mauris id,
condimentum orci.</p></li>
<li><p>Duis ut tellus viverra, tincidunt eros nec, feugiat
augue.</p></li>
</ul>
</article>
</section>
<footer class="gaia-footer">
<button>Phasellus</button>
<button class="recommend">Scelerisque</button>
</footer>
</section>




Lists
Lists are used to display a set of consecutive items, such as a list of contacts or a list of
messages.More
Default
Example

Css link
1
<link href="(your styles folder)/style/lists.css" rel="stylesheet"
type="text/css">
HTML code
1
2
3
4
5
6
7
8
9
10
<section data-type="list">
<header>Title</header>
<ul>
<li>
<p>Travis Gray</p>
</li>
<li>
<a href="#">
<p>Travis Gray</p>
<p>Clickable item</p>
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
</a>
</li>
<li>
<aside class="pack-end">
<img alt="placeholder" src="myimage.jpg">
</aside>
<a href="#">
<p>Travis Gray</p>
<p>Beginning of message</p>
</a>
</li>
</ul>
<header>Another title</header>
<ul>
<li aria-disabled="true">
<aside class="pack-end">
<img alt="placeholder" src="myimage.jpg">
</aside>
<a href="#">
<p>Travis Gray</p>
<p>Disabled item</p>
</a>
</li>
<li>
<a href="#">
<aside data-icon="call-outgoing">
asidecall
</aside>
<p>Travis Gray <em>(2)</em></p>
<p>
<time datetime="17:43">5:43PM</time>
Mobile
</p>
</a>
</li>
</ul>
</section>

Edit mode
Example

Css link
1
<link href="(your styles folder)/style/lists.css" rel="stylesheet"
type="text/css">
HTML code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<section data-type="list">
<ul data-type="edit">
<li>
<label class="pack-checkbox danger">
<input type="checkbox">
<span></span>
</label>
<aside class="pack-end">
<img alt="placeholder" src="myimage.jpg">
</aside>
<a href="#">
<p>Travis Gray</p>
<p>Beginning of message</p>
</a>
</li>
<li>
<label class="pack-checkbox danger">
<input type="checkbox">
<span></span>
</label>
<a href="#">
<aside data-icon="call-outgoing"></aside>
<p>Travis Gray <em>(2)</em></p>
<p>
<time datetime="17:43">5:43PM</time>
26
27
28
29
30
31
Mobile
</p>
</a>
</li>
</ul>
</section>

Object menu
An Object menu (contextual menu) presents a list of actions, related to the app's
content, from which the user may make a selection.More
Example

Css link
1
<link href="(your styles folder)/style/object_menu.css" rel="stylesheet"
type="text/css">
HTML code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<form role="dialog" data-type="object">
<header>Title</header>
<section>
<ul>
<li>First item</li>
<li><p>One Paragraph</p></li>
<li>
<p>Two</p>
<p>Paragraphs</p>
</li>
<li><button>Button</button></li>
<li><a href="#">Anchor</a></li>
<li>
<a href="#">
<p>Paragrah inside anchor</p>
</a>
</li>
<li>
<a href="#">
<p>Two Paragrahs</p>
<p>inside anchor</p>
</a>
</li>
</ul>
</section>
<menu type="toolbar">
<button class="full">Cancel</button>
</menu>
</form>










Progress and activity
Used for providing user with visual feedback that a process is active.
Inline
Spinner
Spinner
Activity bar
Progress bar
Progress + activity bar
Example

Css link
1
<link href="(your styles folder)/style/progress_activity.css"
rel="stylesheet" type="text/css">
HTML code
1 <progress></progress>
Modal
Spinner
Spinner
Progress bar
Activity bar
Example

Css link
1
<link href="(your styles folder)/style/progress_activity.css"
rel="stylesheet" type="text/css">
HTML code
1
2
3
4
5
6
7
8
<form role="dialog" data-type="confirm">
<section>
<h1>Name of the action</h1>
<!-- Note: inline style only for demo purposes -->
<p style="text-align: center;"><progress></progress></p>
</section>
<menu><button class="full">Cancel</button></menu>
</form>
Header
Progress
Progress
Activity bar in light Headers
Example

Css link
1
<link href="(your styles folder)/style/progress_activity.css"
rel="stylesheet" type="text/css">
HTML code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<section role="region">
<header>
<a href="#"><span class="icon icon-back">back</span></a>
<h1>Song title</h1>
</header>
<progress value="80" max="100"></progress>
<header>
<h2>Subheader text</h2>
</header>
</section><section role="region">
<header>
<a href="#"><span class="icon icon-back">back</span></a>
<h1>Song title</h1>
</header>
<progress value="80" max="100" class="pack-activity"></progress>
<header>
<h2>Subheader text</h2>
</header>
</section>






Seek bars
Used for scrolling through content (i.e. a song or video).
Example

Css link
1
<link href="(your styles folder)/style/seekbars.css" rel="stylesheet"
type="text/css">
HTML code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<section role="region">
<div role="slider" aria-valuemin="0" aria-valuenow="80" aria-
valuemax="100" aria-valuetext="slider description">
<div>
<progress value="80" max="100"></progress>
<button>handler</button>
</div>
</div>
</section>
<section role="region">
<div role="slider" aria-valuemin="0" aria-valuenow="80" aria-
valuemax="100" aria-valuetext="slider description">
<label>0</label>
<label>100</label>
<div>
<progress value="80" max="100"></progress>
<button>handler</button>
</div>
</div>
20
21
22
23
24
25
26
27
28
</section>
<section role="region">
<div role="slider" aria-valuemin="0" aria-valuenow="80" aria-
valuemax="100" aria-valuetext="slider description">
<label data-icon="moon">0</label>
<label data-icon="brightness">100</label>
<div>
<progress value="80" max="100"></progress>
<button>handler</button>
</div>
</div>
</section>

Switches
Switches activate/deactivate a given item. They are also used to select a elements
within a list.
Checkboxes
Example

Css link
1
<link href="(your styles folder)/style/switches.css" rel="stylesheet"
type="text/css">
HTML code
1
2
3
4
5
6
7
8
9
10
11
<label class="pack-checkbox">
<input type="checkbox" checked>
<span></span>
</label>
<label class="pack-checkbox">
<input type="checkbox">
<span></span>
</label>
<label class="pack-checkbox danger">
<input type="checkbox" checked>
<span></span>
12
13
14
15
16
</label>
<label class="pack-checkbox danger">
<input type="checkbox">
<span></span>
</label>

Radio buttons
Example

Css link
1
<link href="(your styles folder)/style/switches.css" rel="stylesheet"
type="text/css">
HTML code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<label class="pack-radio">
<input type="radio" name="example" checked>
<span></span>
</label>
<label class="pack-radio">
<input type="radio" name="example">
<span></span>
</label>
<label class="pack-radio danger">
<input type="radio" name="example2" checked>
<span></span>
</label>
<label class="pack-radio danger">
<input type="radio" name="example2">
<span></span>
</label>

Switches
Example

Css link
1 <link href="(your styles folder)/style/switches.css" rel="stylesheet"
type="text/css">
HTML code
1
2
3
4
5
6
7
8
<label class="pack-switch">
<input type="checkbox" checked>
<span></span>
</label>
<label class="pack-switch">
<input type="checkbox">
<span></span>
</label>

Toolbars
Toolbars contain actions, indicators, and navigation associated with the current view.
Example

Note
This example uses Gaia Icon Font. For more details, please follow the link.
Css link
1
<link href="(your styles folder)/style/toolbars.css" rel="stylesheet"
type="text/css">
HTML code
1
2
3
4
5
6
<div role="toolbar">
<button data-icon="delete">delete</button>
<button data-icon="flag">Flag</button>
<button data-icon="email-mark-read">Mark read</button>
<button data-icon="email-move">Move</button>
</div>









Value selectors
(SYSTEM COMPONENT: This is how <select> , <input type="time"
/> and <input type="date" /> are displayed in Firefox OS)
Value selectors allow users to select one of more values from a single form field.
Single selector
Example

To launch it use:
1
2
3
4
5
6
<select>
<option>None</option>
<option>At time of event</option>
<option>5 minutes before</option>
<option>15 minutes before</option>
<option>30 minutes before</option>
7
8
9
10
<option>1 hour before</option>
<option>2 hours before</option>
<option>1 day before</option>
</select>
Note:
You could also use this if you need multiple selection:
<select multiple="true">

Time selector
Example

To launch it use:
1 <input type="time" />

Date selector
Example

To launch it use:
1 <input type="date" />