Monday, October 1, 2007

iPhoneUI: Standards-based iPhone CSS styles

Download free, quick and easy CSS styles for creating iPhone applications using Apple's design specifications.

A coworker of mine created his first iPhone web app, iPhone Lease Calculator, and needed a visual skin on it. I set out to create simple styles so you can easily implement web apps using Apple's recommended iPhone user interface. These styles are used for laying out forms, and limited text styles.

There are two main styles, the Edge to Edge design, and the Rounded Corners design.

Edge-To-Edge Design: Forms
<dl class="edgeToEdge formFields">
  <dt>
    <label for="txt_name">Name:</label>
  </dt>
  
  <dd>
    <input type="text" name="full_name" value="">
  </dd>
</dl>

Pretty simple. The edge to edge design is recommended for most forms. It's not too attractive looking and provides maximum readability. I decided that a definition list provides the greatest flexibility in design and the most meaning for the markup.

A gray border is placed below each row. The last row should not have a border, so add the "last" className to the last DD tag in the definition list.

<dl class="edgeToEdge formFields">
  <dt>
    <label for="txt_name">Name:</label>
  </dt>
  
  <dd class="last">
    <input type="text" name="full_name" value="">
  </dd>
</dl>
Rounded Corners: Forms
<dl class="roundedRect formFields">
  <dt>
    <label for="txt_name">Name:</label>
  </dt>
  
  <dd>
    <input type="text" name="full_name" value="">
  </dd>
</dl>

So really not much different here. The rounded corners design uses the same basic markup with the exception of a different className. This will get the white, rounded corner box. The only thing that's missing is a label:

<h1 class="roundedRectHead">
  Enter your name
</h1>

<dl class="roundedRect formFields">
  ...
</dl>

While that may work for most uses, FIELDSETs and LEGENDs are also very useful on forms.

<fieldset class="roundedRect">
  
  <legend>Enter your name</legend>
  
  <dl class="formFields">
    ...
  </dl>
  
</fieldset>

This requires just a slightly different markup structure. The "roundedRect" className is moved to the FIELDSET tag, and the DL tag only has the "formFields" className.

At some point you'll want buttons on your form.

Edge-To-Edge: Buttons
<p class="edgeToEdge formButtons">
  <input type="submit" value="Submit Name">
</p>
Rounded Corners: Buttons
<p class="roundedRect formButtons">
  <input type="submit" value="Submit Name">
</p>
Showing Form Submission Results

Once the user has submitted the form, you'll want to display some sort of message or result.

<h1 class="roundedRectHead">
  Your name is:
</h1>
<p class="roundedRect formResults">
  John Doe
</p>

These styles aren't anything special and just seek to implement Apple's iPhone user interface on a web application viewed in iPhone's Safari web browser. This will integrate your Web application seamlessly into the iPhone's inherent user interface. And as usual, if I change anything, I'll be sure to post it.

0 comments: