Firefox OS Lists
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)
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.
Notifications should be kept short and concise and provide the user with a quick overview of the message being communicated.
You can download the Firefox OS Stencil PSD here.