Components guide

2. Lists

.list
A styled, unordered list with background colour and hover state.

.list-graphical A styled, unordered list with background colour, hover state, and an associated image.

• The default style supports a 40 x 40 pixel image.
• The image size is not specified within the HTML markup. This enables the entire component to scale automatically in response to changes in font size. This technique should be used sparingly because best practice is to specify image sizes to avoid forcing the browser to calculate these before the image can be rendered.

.list-accordion
A styled definition list that uses JavaScript to expand and collapse each definition.

Implementation
To enable this component, add the following code to the head of your page, inside the init function:

     var myAccordionList = new AccordionList("MyListID");

and structure the HTML as follows:

<dl id="MyListID" class="list-accordion">
     <!--Add collapsed or expanded class to set default state for this
     list item -->
     <dt class="collapsed"><span></span>Term</dt>
          <dd><p>Definition</p><dd>
     <dt class="expanded"><span></span>Term</dt>
          <dd><p>Definition</p><dd>
</dl>

When creating multiple accordion lists on one page, an array of IDs can be used in the following manner:

     var myAccordionList = new AccordionList("MyListID");

.grid A simple, flexible grid containing any number of 60 x 60 pixel graphics. Media queries are used to adjust the width of the grid. These can be found in the baseStyles.css style sheet. The default style is optimised for devices with a screen size of fewer than 320 pixels. This style creates a three-image-wide grid. Older Nokia devices with the OSS or legacy S60 browser series cannot read media queries, so they will also load this style, regardless of their screen size. A second style, specified using a media query, is included directly after the default style. This style adjusts the padding, resulting in a four-image-wide grid. This style is triggered when a device is over 320 pixels in width. Older browsers that do not understand media queries (and in most cases also have screens smaller than 320 pixels wide) will ignore this style.

3. Navigation

.breadcrumbs
Simple breadcrumb links with a chevron divider.

.horizontal A stylised, horizontal navigation bar with hover state.

• Assign the .two-piece, .three-piece, or .four-piece class to the <ul> element to create navigation bars with two, three, and four buttons, respectively. Note: The number of <li> divisions must also match the style used.
• Although not currently supported on Nokia browsers, rounded corners can easily be applied to this component using CSS. See the Maemo tweaks style sheet for an example using the proprietary Mozilla border radius extension.

.admin

A versatile horizontal list that can be used as a footer, for admin navigation, or further customised to create a lightweight top nav.

.pagelevel (combined with either .top or .home)
A simple series of navigation components that can be placed at the bottom of the page (or in other locations, as needed).

Example: Back to Top <nav class="pagelevel top">    <a href="#content">Back to top</a> </nav>

Example: Home <nav class="pagelevel home">    <a href="index.html">Home</a> </nav>

4. Stylised links

.external
When added to an <a href> tag, this class displays an icon specifying it as an external link. Note: A similar effect can also be achieved without the use of a class. See slide 13 in The future of CSS for a code sample.

a[href^="mailto:"], a[href^="tel:"], a[href^="sms:"],
These styles will automatically display an icon next to hyperlinks that initiate a telephone call or SMS, prompt an email, or save a date to the Calendar (via iCal data).

Note: iCal date formats may not be compatible with all devices. See 'resources/data-ical.php' for a sample iCal record.

5. Button

.button
A stylised, flexible button with hover state, created using a simple <a href> tag.

This component includes an arbitrary width of 6 em. For a full-width button, set the width to 100 per cent, or adjust as needed.

Note: The button component includes an optional function that can be used on touch devices to automatically add the hover state on press, then remove it after a specified interval. See Optional JavaScript functions for details.

This function should not be used on nontouch devices because it will prevent the normal hover state from displaying. To remove this function from the button element:

1. Remove the onMouseDown="JavaScript:doHighlight(this);" function found on the button component.
2. Locate the a.button.hovering style in baseStyles.css and rename it a.button:hover. This will reenable the native hover style using the :hover pseudo-class.

See Optional JavaScript functions for an example of an unobtrusive implementation of this function.

6. Forms

A collection of styles that can be applied to create lightweight stylised forms. Input fields and selection menus are scaled to 100 per cent width. A drop shadow (in the form of a background graphic) styles each input field.

7. Tables

A collection of styles that can be applied to create a stylised table and caption. The styles include: Stylised top and side header rows. A stylised hover state (using a background graphic) and :hover pseudo-class. Alternating row colours, applied via the .odd class. Note: Not supported on certain devices that use WebKit version 413.

Tip: Change the caption-side property from Bottom to Top to display the caption above the table.

8. Containers

.box-flat
A simple, stylised, scaleable box (shown in Forms). Although not currently supported on Nokia browsers, rounded corners can easily be applied to this component using CSS. See the Maemo tweaks style sheet for an example using the proprietary Mozilla border radius extension.

.box-rounded
A stylised, scaleable box with rounded corners, which expands vertically and horizontally.

• The component scales horizontally on all devices but only scales vertically to a maximum height of 550 pixels.

9. Utility components

These more complex components are great building blocks and will require added customisation to suit the specific needs of your site.

.rating

• This component is static but can be incorporated into many scenarios that make use of dynamically updated 5-star ratings.
• Five classes are included to enable dynamic repositioning of the sprite sheet to display the specified rating.

	.toggle-switch A versatile, JavaScript-based toggle switch created using a series of dynamically wrapped checkboxes. This component can be used in a variety of scenarios to toggle between two Boolean values. Combine with .list-toggle to create grouping of toggle switches, each with a corresponding <label> element.
Figure: A grouping of toggle switches using the optional .list-toggle component

Implementation
To enable this component, add the following code to the header of your page, inside the init function:

     var myToggle = new ToggleSwitch("MyToggleID");

and structure the HTML as follows:

<ul class="toggle">
     <li>
       <label>Label</label>
       lt;input id=" MyToggleID" type="checkbox" name="preference" />
      </li>
</ul>

Note: A callback can be added that will be called on click, and pass the element that has been clicked.

     var myToggle = new ToggleSwitch("MyToggleID", myCallback);

Note: If using multiple toggles on a page, an array can be used in the following manner:

     var myToggle = new ToggleSwitch(["MyToggleID", "MyToggleID2", MyToggleID3"]);

Although not currently supported on Nokia browsers, rounded corners can easily be applied to this component using CSS. See the Maemo tweaks style sheet for an example using the proprietary Mozilla border radius extension.

.slideshow This versatile component uses JavaScript to display a sequence of images. Images are not loaded until they have been requested by the user. Best used to display a short series of images, for example, to introduce three to four 'featured' games or promotional banners on a home page. Note: This component is not recommended for Series 40 WebKit browsers because it is not compatible with certain early builds of the browser on touch devices.

Implementation
To enable this component, add the following code to the head of your page, inside the init function:

<!-- The first value is the slideshow ID -->
<!-- The second value is the start index -->
<!-- The third value is a Boolean specifying whether the slide show will wrap around -->
var slideShow = new Slideshow ("SlideshowID", 0, true);

and structure the HTML as follows:

<section id="SlideshowID"
<!-- img will be dynamically populated with the image -->
<!-- image names should be labelled consecutively with an underscore and three digits -->
<div class="slideshow-image">
     <img src="resources/images/photos/image_001.png" width="200"
     height="130" alt="" />
</div>
<!-- displays the active and total number of slides -->
<p></p>
<!-- the slide show controls using a navigation bar component -->
<nav class="horizontal">
     <ul class="controls two-piece group">
       <li class="previous">
          <a class="first" href="#slideshow"><img src="resources/images/back.png" </a>
       </li>
       <li class="next">
          <a href="#slideshow"><img src="resources/images/next.png" /></a>
       </li>
     </ul>
</nav>