Developing Themes for Bowtie Chapter 4: Tasty Recipes

Tasty Recipes

Over the years, we've learned that there are a few things that almost every theme needs or wants to do. For your convenience, we've gathered a few of those code snippets here for use in your own themes.

Ellipsis (…) Truncation

On Mac OS X, it's common practice to display a horizontal ellipsis (…) when a string exceeds the length of its containing control. For this reason, it would be a good idea to emulate this behavior in your own themes whenever possible. Luckily, WebKit + CSS3 provides an easy way to do this.

For any element you'd like to exhibit ellipsis truncation, simply apply these three CSS styles:

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

Any text that exceeds the width of this element will now be automatically truncated.

Orientation Changes with CSS3 Media Queries

On Bowtie Touch, it's strongly recommended that your theme support both landscape and portrait orientations, especially on iPad. Using CSS3 media queries, you can easily create a theme that supports both orientations within a single file.

The easiest way to use CSS3 media queries for this type of task is to use the same HTML for both orientations, but a different stylesheet. If you were to do this (and name one style-portrait.css and the other style-landscape.css), you could set your theme up to automatically switch them by putting this in your head element:

<meta name="viewport" content="minimum-scale=0.5, maximum-scale=0.5, width=device-width, user-scalable=no">
<link rel="stylesheet" type="text/css" href="style-portrait.css" media="screen and (max-width: <cutoff>px)">
<link rel="stylesheet" type="text/css" href="style-landscape.css" media="screen and (min-width: <cutoff+1>px)">

Don't forget to substitute in the correct cutoffs. The cutoff is the point in the middle of the two screen dimensions. The iPhone is 320x480, and the iPad is 768x1024. Thus, on iPhone, you would replace <cutoff> and <cutoff+1> with 400 and 401 (respectively), and on iPad, with 896 and 897.

You can also use media queries inline. The following example demonstrates switching between four stylesheets, for iPhone and iPad in portrait and landscape:

<style type="text/css">
/* iPad */
@media screen and (min-device-width: 768px) {
    @media screen and (max-width: 896px) { @import url('ipad-portrait.css'); }
    @media screen and (min-width: 897px) { @import url('ipad-landscape.css'); }
}
/* iPhone */
@media screen and (max-device-width: 480px) {
    @media screen and (max-width: 400px) { @import url('iphone-portrait.css'); }
    @media screen and (min-width: 401px) { @import url('iphone-landscape.css'); }
}
</style>

The above code will break if the screen resolutions of the iPhone or iPad ever change. However, at this time, this mirrors the documentation in Apple's Safari Web Content Guide, so it is assumed to be safe.