iUI - Styles & Themes

Advanced styling & themes

This section is written for people that have already created some pages using iUI or are familiar with the basic concepts of iUI. If you're just getting started, please read our Getting Started Guide. This will give you all the basics you need to understand this section.

If you have an iUI-related problem with your code (you're probably not the first), go check our Google Group. The answser you're looking for is certainly waiting for you there.

Summary
- Basic/predefined styles
- Fullscreen/Webapp mode
- Themes

See also
- Getting Started
- iUI code documentation
- Frequently Asked Questions
- Extensions, sandbox & plugins

1. Basic / predefined styles

iUI comes with some predefined styles for lists, texts, background colors or form elements. Here is what you can easily create.

Grouped lists

<ul id="screen1" title="Screen 1"> <li class="group">Links</li> <li><a href="#screen2">Go to Screen #2</a></li> <li><a href="#screen3">Go to Screen #3</a></li> <li class="group">No links</li> <li>Just a list item</li> <li>Just a list item</li> </ul> see live demo

Panel fieldset

<div id="screen1" title="Screen 1" class="panel"> <fieldset> <div class="row"> <p>Hello</p> </div> <div class="row"> <p>World!</p> </div> </fieldset> <fieldset> <div class="row"> <p>Hello World! Hello World! Hello World! Hello World! Hello World!</p> </div> </fieldset> </div> see live demo

Forms 1

<form id="screen1" title="Screen 1" class="panel" name="formname" action="" method="get"> <fieldset> <div class="row"> <label>Login</label> <input type="text" name="ident" placeholder="Your login"> </div> <div class="row"> <label>Password</label> <input type="password" name="password" placeholder="Your password"> </div> </fieldset> <a class="whiteButton" href="javascript:formname.submit()">Login me in!</a> </form> see live demo

Buttons

<div id="screen1" title="Screen 1" class="panel"> <a class="whiteButton" href="#screen1">whiteButton</a> <a class="grayButton" href="#screen1">grayButton</a> <a class="redButton" href="#screen1">redButton</a> </div> see live demo

Toolbar buttons

<div class="toolbar"> <h1 id="pageTitle"></h1> <a id="backButton" class="button" href="#"></a> <a class="button" href="#">Button</a> </div> <div class="toolbar"> <h1 id="pageTitle"></h1> <a id="backButton" class="button" href="#"></a> <a class="button redButton" href="#">Button</a> </div> <div class="toolbar"> <h1 id="pageTitle"></h1> <a id="backButton" class="button" href="#"></a> <a class="button blueButton" href="#">Button</a> </div> see live demo

Dialog box

<div class="toolbar"> <h1 id="pageTitle"></h1> <a id="backButton" class="button" href="#"></a> <a class="button" href="#search">Search</a> </div> <div id="screen1" title="Screen 1" class="panel" selected="true"> <a class="whiteButton" href="#search">Show Search dialog</a> </div> <form id="search" title="Search" class="dialog" name="formname" action="" method="GET"> <div class="toolbar"> <h1>Search</h1> <a class="button leftButton" type="cancel">Cancel</a> <a class="button blueButton" href="javascript:formname.submit()">Search</a> </div> <fieldset> <div class="row"> <label for="keyword">Search:</label> <input type="text" name="q" id="keyword" placeholder="Type your keywords"> </div> </fieldset> </form> see live demo

2. Fullscreen/Webapp mode

On Apple iOS devices (iPhone, iPod Touch & iPad) a mobile website can be run as a standalone application. Users can press the + icon on the Safari bottom bar and choose "Add to homescreen". As a result, a bookmark to your website is added to your homescreen icons.

Application icon
By default, a preview of the webpage is used as an icon, and this bookmark behaves like a bookmark: it opens Safari. But this can be changed and customized. First, you can use a PNG file as an icon (114x114 - see iUI one as an example).
To do so, here is the code to add between <head> and </head>.

<link rel="apple-touch-icon" href="icon.png">

Note: this code is supported by all iOS devices and also on BlackBerry OS6 favorites bars.

Fullscreen mode
This code only put an icon, but your webapp will still be used in the browser. To enable standalone mode, just add the following line too

<meta name="apple-mobile-web-app-capable" content="yes">

Fullscreen startup image
Just like a native application, you can startup image on app loading. This image remains until the webapp is fully downloaded. If signal is bad, this can be long so if you choose to active this, you'd better design it like a boss :)
This image can be a JPG or a PNG (320x460 for iPhone/iPod, 1004x768 for iPad - see iUI iPhone/iPod or iPad one as an example).

<link rel="apple-touch-startup-image" href="startup.png">

Full code would look like that:

<!DOCTYPE html> <html> <head> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/> <link rel="apple-touch-icon" href="icon.png"> <meta name="apple-mobile-web-app-capable" content="yes"> <link rel="apple-touch-startup-image" href="startup.png"> <link rel="stylesheet" href="iui/iui.css" type="text/css" /> <link rel="stylesheet" href="iui/t/default/default-theme.css" type="text/css"/> <script type="application/x-javascript" src="iui/iui.js"></script> </head>

For more information, please check the Safari Web Content Guide.

3. Themes

(this part of the documentation will come later -- for now you can checkout the Theme Gallery)