Firefox OS Lists

Basics

Operating systems have many types of lists that can differ from one another and the content they display. The following is a guide to the most common lists found in Firefox OS. Depending on the content needs, each list can be adjusted at the designers' discretion.

A couple of general rules that all lists should follow – they should contain a margin of 1.5 rem from the screen edge to the content and also be a minimum of 4.5 rem in height.

There can be exceptions to this rule depending on the elements that are part of or around the list. For example, the addition of a contact list index scroll, which is placed on the right hand side of the screen, causes the width of the list to shorten.

Common Lists (Light and Dark Apps)

Light Apps (Default)
List Structure
Light Apps (Edit Mode)
Full Info

The list index/date separators are composed of a letter or a date and a horizontal division line. This helps with organizing content and is also helpful when scrolling. The index stays visible to indicate the connection to the content being scrolled. Dependent on the screen being light or dark the index separator is either orange (with a orange division line) or light blue (with a grey division line), respectively.

Dark lists are often shorter in content compared to light lists seeing as they belong to overlays, notifications or media apps.

Narrowed Width for Index (Light Apps)
Narrowed Width for Index (Structure)
Narrowed Width for Index (Dark Apps)
Dark Apps

Events have their own structure where the time stamp is separated from the rest of the content. This is because the time is the most relevant piece of information found within this type of list. All day events are separated from the rest of the list by a drop shadow and stays static on top, while other list items scroll underneath.

Events
Events Structure

Notifications

Notifications should be kept short and concise and provide the user with a quick overview of the message being communicated.

Notifications
Notifications Structure

Overlays

Selection Overlays

Settings

Settings
Settings Structure

Drawer

Drawer
Drawer Structure

Buttons Inside Lists

Buttons are used for a variety of reasons within a list including the selection of elements and activating/deactivating given items. Some examples of buttons found in lists include check boxes, toggles and ticks. Also, the height of a list item row can be increased to accommodate space to fit certain buttons.

Buttons inside lists
  1. Check boxes and radio buttons are left aligned
  2. Switches and ticks are right aligned
  3. Common buttons take the entire column width
  4. Buttons that affect the entire list are placed at the bottom of the screen. They are separated by a full width horizontal division line with a black background of 5% opacity.

Usage Examples

Contacts list
Albums list (music)
Messages list (email)
Settings
Value selector overlay

Download

You can download the Firefox OS Stencil PSD here.