Devices & Peripherals > Excerpts >

Quick Reference—Style Guide - Palm webOS

by Mitch Allen

Mojo’s styling is automatically provided when you select the Mojo class names within your HTML, or use Mojo widgets. This appendix will help you determine the selectors or properties to change when you want to override the automatic styling. It’s best to use this style guide along with the StyleMatters sample application provided with the SDK.

Palm webOS book cover

This excerpt is from Palm webOS. This is the official guide to building native JavaScript applications for Palm's new mobile operating system, Palm® webOS™. Written by Palm's software chief technology officer along with the Palm webOS development team, Palm webOS offers you a complete tutorial on the design principles, architecture, UI, tools, and services necessary to develop webOS applications. If you're familiar with HTML, CSS, and Javascript, you're ready to build applications for webOS-based devices, including the Palm Pre.

buy button

Mojo’s styling is automatically provided when you select the Mojo class names within your HTML, or use Mojo widgets. This appendix will help you determine the selectors or properties to change when you want to override the automatic styling. It’s best to use this style guide along with the StyleMatters sample application provided with the SDK.

The guide is organized into several categories, including:

  • Scene Basics

  • List Basics

  • Containers

  • Dividers

  • Panels

  • Text

  • Widgets

Each category is presented in a table with:

  • A brief description

  • The filename of the CSS style sheet where the style category is defined

  • An HTML code sample using the style

  • A list of the base selectors that you can use in your CSS to override the framework’s styling

  • A list of optional selectors

  • Required child selectors, which must be embedded with the base selector for the style to be used effectively

These styles may be updated from time to time by Palm as part of an SDK update—you should check the SDK documentation to get the latest information.

Scene Basics

Backdrop

global-base.css

Change the background of an individual scene or every scene within the application.

Scene HTML

<div class="my-backdrop"></div>

Base selector

Optional selectors

Required child

my-backdrop
  

body
  

Notes:

  • my-backdrop is a developer-defined selector (you can define any selector name); this technique allows each individual scene to have a unique background.

  • Use the body selector to style the body element; a simple solution to style all of the scenes in your application.

Fixed Header

global-lists.css

Floating header atop your scene; visually identical to the View Menu.

Scene HTML

<div class="palm-header"></div>

<div class="palm-header-spacer"></div>

Base selector

Optional selectors

Required child

.palm-header

.left

.right
 

.palm-header-spacer
  

Page Header

global-lists.css

The topmost element of the scrollable content; commonly used atop preference scenes.

Scene HTML

<div class="palm-page-header multi-line">

     <div class="palm-page-header-wrapper">
        <div class="icon"></div>
        <div class="title">
          My title
        </div>
     </div>

</div>

Base selector

Optional selectors

Required child

.palm-page-header

.multi-line

.icon

.palm-page-header-wrapper

.palm-page-header-wrapper
  

.palm-page-header-wrapper > 
.icon
  

.palm-page-header-wrapper > 
.title

.left

.center

.right

.truncating-text
 

Notes:

  • palm-page-header-wrapper is a child element with a specified margin to compensate for the padding effect of -webkit-border-image.

  • palm-page-header-wrapper > .icon should be a 32 × 32px PNG centered on the div.

Scrim

global.css

A translucent layer used to obscure background UI when modal foreground UI is layered on top of the current scene.

Scene HTML

<div class="palm-scrim"></div>

Base selector

Optional selectors

Required child

.palm-scrim

.app-menu

.dialog

.submenu-popup

.menu-panel

.picker-popup
 

Scroll Fades

In the absence of view or command menus, these fades at the edge of your scene indicate more content.

Scene HTML

<div class="my-scene-fade-top" x-mojo-scroll-fade="top"></div>

<div class="my-scene-fade-bottom" x-mojo-scroll-fade="bottom"></div>

Base selector

Optional selectors

Required child

None

  

Notes:

  • Use a high z-index (100,000) if you want your fades to draw above all else, and use the style -webkit-palm-mouse-target: ignore; to allow taps to pass through these fades to underlying content.

View/Command Menus

global-menus.css

Float menus at either the top or bottom of your scene, and the gradient fades behind them.

Scene HTML

None

Base selector

Optional selectors

Required child

.palm-menu
  

.palm-menu.view-menu

.palm-default

.palm-white
 

.palm-menu.view-menu > 
.palm-menu-fade
  

.palm-menu.command-menu

.palm-default

.palm-white
 

.palm-menu.command-menu > 
.palm-menu-fade
  

.palm-menu-button

.selected
 

.palm-menu-spacer

  

List Basics

Add/Remove Rows

global-lists.css

The “add item” row appended to a list and “remove item” buttons for removable rows.

Scene HTML

None

Base selector

Optional selectors

Required child

.list-item-add-button

.list-item-remove-button
  

Lists and Rows

global-lists.css

Rows stacked vertically within lists, designed for legibility and touch interaction.

Scene HTML

<!-- Within Scene    -->
<div id="my-list" x-mojo-element="List"></div>

<!-- Within List template -->
<div class="palm-row"   x-mojo-touch-feedback="delayed">
     <div class="palm-row-wrapper">

       <!-- row content here -->
     </div>
</div>

Base selector

Optional selectors

Required child

.palm-list
  

.palm-row

.first

.last

.single

.no-divider

.no-separator

.disabled

.palm-row-wrapper

.palm-row-wrapper

.textfield-group
 

.palm-row-wrapper > .title

.left

.right

.truncating-text
 

Notes:

  • .palm-row-wrapper: child element with a specified margin to compensate for the padding effect of -webkit-border-image.

Separators

global-lists.css

Thin lines that visually separate rows.

Scene HTML

None

Base selector

Optional selectors

Required child

.palm-row
  

Reordering Rows

global-lists.css

The space behind the reordered items and the item you’re moving.

Scene HTML

None

Base selector

Optional selectors

Required child

.palm-drag-spacer

.palm-row.palm-reorder-element
  

Swipe to Delete

global-lists.css

The space revealed when you swipe to delete, which may contain confirmation buttons.

Scene HTML

None

Base selector

Optional selectors

Required child

.palm-row.palm-swipe-delete

.palm-row.palm-swipe-delete 
.palm-swipe-delete-button

.palm-row.palm-swipe-delete 
.palm-swipe-undo-button
  

Touch Feedback

global-lists.css

Displaying alternate background images and content styling in response to user interaction.

Scene HTML

<div class="palm-row" x-mojo-touch-feedback="delayed">

  <div class="palm-row-wrapper">
    <!-- row content here -->
  </div>
</div>

Base selector

Optional selectors

Required child

.palm-row.selected
  

Notes:

  • When touched, rows using x-mojo-touch-feedback will display a selection graphic implemented using -webkit-border-image with a 9-tile image (41 × 49 pixels).

  • For items within scrollable content, use delayed feedback. For fixed elements that don’t scroll, immediate feedback is an option. Use immediatePersistent or delayedPersistent only if you require exacting control of when feedback is removed (which must be done manually).

Touch Feedback with Groups

global-lists.css

Displaying alternate background images and content styling in response to user interaction with rows within in a palm-group.

Scene HTML

<!--  First Row -->

<div class="palm-group">
    <div class="palm-row first" x-mojo-touch-feedback="delayed">
      <div class="palm-row-wrapper">
        <!-- row content here -->
      </div>
    </div>

</div>

<!--  Last Row -->
<div class="palm-group">
    <div class="palm-row last" x-mojo-touch-feedback="delayed">
      <div class="palm-row-wrapper">
        <!-- row content here -->
      </div>

    </div>
</div>

<!--  Single Row -->
<div class="palm-group">
    <div class="palm-row single" x-mojo-touch-feedback="delayed">
      <div class="palm-row-wrapper">
        <!-- row content here -->

      </div>
    </div>
</div>

Base selector

Optional selectors

Required child

.palm-group 
.palm-row.selected.first
  

.palm-group 
.palm-row.selected.last
  

.palm-group 
.palm-row.selected.single
  

Notes:

  • The first row within a group requires a selection graphic with rounded top corners.

  • The last row within a group requires a selection graphic with rounded bottom corners.

  • A single row within a group requires a selection graphic with rounded corners.

Containers

Drawers

global-lists.css

Hide UI or lists with an area that animates open and closed.

Scene HTML

<div id="my-id" x-mojo-element="Drawer"></div>

Base selector

Optional selectors

Required child

.palm-drawer-container
 

.palm-drawer-contents

.palm-drawer-contents

.label
 

Labeled Groups

global-lists.css

Visually group a list with a label.

Scene HTML

<div class="palm-group">

   <div class="palm-group-title">
    My Title
   </div>
   <div class="palm-list">
    <!-- rows -->
   </div>
  </div>

Base selector

Optional selectors

Required child

.palm-group
 

.palm-group-title

Unlabeled Groups

global-lists.css

Visually group a list without a label.

Scene HTML

<div class="palm-group unlabeled">

   <div class="palm-list">
    <!-- rows -->
   </div>
</div>

Base selector

Optional selectors

Required child

.palm-group.unlabeled

  

Dividers

Alphabetical Dividers

global-dividers.css

Divide a scene or list of rows with a bold line containing a single character.

Scene HTML

<div class="palm-divider alpha">

  <div>#{dividerLabel}</div>
</div>

Base selector

Optional selectors

Required child

.palm-divider.alpha
  

Collapsible Dividers

global-dividers.css

Divide a scene or list of rows with dividers that control corresponding drawers of content.

Scene HTML

<table class="palm-divider collapsible">

  <tr>
    <td class="left"></td>
    <td class="label">My label</td>
    <td class="line"></td>
    <td><div class="palm-arrow-closed arrow_button"></div></td>

    <td class="right"></td>
  </tr>
</table>

Base selector

Optional selectors

Required child

.palm-divider.collapsible

.label

.line

.right
 

Labeled Dividers

global-dividers.css

Divide a scene or list of rows with a bold line and label.

Scene HTML

<table class="palm-divider labeled">
  <tr>
   <td class="left"></td>
   <td class="label">

    My title
   </td>
   <td class="right"></td>
  </tr>
</table>

Base selector

Optional selectors

Required child

.palm-divider.labeled

.left

.right
 

Solid Dividers

global-dividers.css

Divide a scene or list of rows with a bold line.

Scene HTML

<div class="palm-divider"></div>

Base selector

Optional selectors

Required child

.palm-divider

  

Panels

Dashboard Panel

global-notifications.css

A dashboard panel containing UI, custom messages, and images.

Scene HTML

None

Base selector

Optional selectors

Required child

.palm-dashboard-icon-container
  

.palm-dashboard-text-container

.selected
 

.palm-dashboard-icon

.alert
 

.palm-dashboard-text
  

Dialog

global.css and global-buttons.css

A modal panel pinned to the bottom of the scene.

Scene HTML

<div class="palm-dialog-content">

  <div class="palm-dialog-title">Title</div>
  <div class="palm-dialog-separator"></div>
  <div class="palm-dialog-message">Message</div>
</div>
<div class="palm-dialog-buttons">

  <!-- buttons -->
</div>

Base selector

Optional selectors

Required child

.palm-dialog-content
 

.palm-dialog-title

.palm-dialog-separator

.palm-dialog-message

.palm-dialog-title

.un-capitalize
 

.palm-dialog-buttons
 

.palm-button

.palm-dialog-separator
  

.palm-dialog-message
  

Notes:

  • Custom dialog box template with title, message, and buttons.

Menu Panel

global-menus.css

A pop-up panel containing UI or lists, floating under the view or command menu.

Scene HTML

None

Base selector

Optional selectors

Required child

.palm-menu-panel
 

.palm-menu-panel-fade-top

.palm-menu-panel-fade-bottom

.palm-menu-panel-wrapper

.palm-menu-panel-wrapper
 

.palm-list

Submenu

global-menus.css

A pop-up panel containing UI or lists, floating above all other scene UI.

Scene HTML

None

Base selector

Optional selectors

Required child

.palm-popup
  

.palm-popup-container
  

.palm-popup-content

.popup-item-checkmark

.chosen

.palm-divider
 

.palm-popup-icon

.left

.right

 

Text

Basic Text Styles

global.css

Body copy and informational text.

Scene HTML

None

Base selector

Optional selectors

Required child

.palm-text-wrapper
 

.palm-body-text

.palm-body-text
  

.palm-body-title
  

.palm-info-text

.single
 

Notes:

  • .palm-text-wrapper: use this wrapper to contain multiple divs of styled text for proper padding.

Capitalization

global.css

Some Mojo widgets and styles shift strings to uppercase or apply capitalization.

Scene HTML

None

Base selector

Optional selectors

Required child

.capitalize

.un-capitalize
  

Notes:

  • Use .capitalize for CSS title case capitalization and .un-capitalize to override autocapitalization in buttons, dialog box titles, and page headers.

Fonts

global-base.css

Mojo uses the Prelude font family.

Scene HTML

None

Base selector

Optional selectors

Required child

body

button

input

textarea

.condensed

.oblique
 

Truncation

global-base.css

Force text to fit within the available space, with an ellipsis added as needed.

Scene HTML

None

Base selector

Optional selectors

Required child

.truncating-text

  

Widgets

Button

global-buttons.css

Scene HTML

<div class="palm-button" x-mojo-touch-feedback="delayed">

  <div class="palm-button-wrapper">
    Button label
  </div>
</div>

Base selector

Optional selectors

Required child

.palm-button

.primary

.secondary

.dismiss

.negative

.affirmative

.disabled

.selected

.palm-button-wrapper

Check Box

global.css

Scene HTML

<div id="my-id" class="left"   x-mojo-element="CheckBox"></div>

Base selector

Optional selectors

Required child

.checkbox

.left

.right

.disabled

.true
 

Notes:

  • Use the classes .left and .right on the widget when placing the check box into a palm-row with title text.

Date Picker

global-widget-mvpicker.css

Scene HTML

<div id="my-id" x-mojo-element="DatePicker"></div>

Base selector

Optional selectors

Required child

.mv-picker-capsule
  

Integer Picker

global-widget-mvpicker.css

Scene HTML

<div id="my-id" x-mojo-element="IntegerPicker"></div>

Base selector

Optional selectors

Required child

.mv-picker-capsule
  

Filter Field

global-textfields.css

Scene HTML

<div id="my-id"   x-mojo-element="FilterField"></div>

Base selector

Optional selectors

Required child

.filter-field-container

.filter-field-activity-spinner

.search-term

.mag-glass-icon
 

List Selector

global-menu.css

Scene HTML

<div id="my-id"   x-mojo-element="ListSelector"></div>

Base selector

Optional selectors

Required child

.palm-list-selector

.label

.right

.title
 

.palm-popup-container
  

.palm-row

.list-selector-triangle
 

Progress Pill

global.css

Scene HTML

<div id="my-id" x-mojo-element="ProgressPill"></div>

Base selector

Optional selectors

Required child

.progress-pill-background
  

.progress-pill-progress
  

Radio Button

global.css

Scene HTML

<div id="my-id" x-mojo-element="Radio"></div>

Base selector

Optional selectors

Required child

.palm-radiobutton

.selected
 

Slider

global.css

Scene HTML

<div id='my-id' x-mojo-element="Slider"   class="palm-slider"></div>

Base selector

Optional selectors

Required child

.palm-slider
  

.palm-slider-button

.selected
 

.palm-slider-background
  

Spinner

global.css

Scene HTML

<div id="my-id"   x-mojo-element="Spinner"></div>

Base selector

Optional selectors

Required child

.palm-activity-indicator-small
  

.palm-activity-indicator-large
  

Text Field

global-textfields.css

Scene HTML

<!-- Single Text Field -->

<div id="my-id"   x-mojo-element="TextField"></div>

<!-- Grouped Text Field -->
<div class="palm-row">
    <div class="palm-row-wrapper">
     <div class="textfield-group" x-mojo-focus-highlight="true">
      <div class=""title"">

            <div class="truncating-text" x-mojo-element="TextField"></div>
      </div>
      </div>
    </div>
</div>

Base selector

Optional selectors

Required child

.textfield-group

.focused

.title

.label
 

Time Picker

global-widget-mvpicker.css

Scene HTML

<div id="my-id"   x-mojo-element="TimePicker"></div>

Base selector

Optional selectors

Required child

.mv-picker-capsule
  

Toggle Button

global.css

Scene HTML

<div id="my-id"   x-mojo-element="ToggleButton"></div>

Base selector

Optional selectors

Required child

.sliding-toggle-container
  

.toggle-text
  

.toggle-button

.true

.false

 

If you enjoyed this excerpt, buy a copy of Palm webOS.

Recommended for You
 
Sign up today to receive special discounts,
product alerts, and news from O'Reilly.
Privacy Policy >
View Sample Newsletter >