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 StructureLight 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.

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.

EventsEvents Structure

Notifications

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

NotificationsNotifications Structure

Overlays

Selection Overlays

Settings

SettingsSettings Structure

Drawer

DrawerDrawer 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.

Check boxes and radio buttons are left aligned

Switches and ticks are right aligned

Common buttons take the entire column width

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.