News

Build a lightweight mobile UI with Adobe Topcoat

Forget frameworks with excessive options. This tutorial focuses on the new CSS-only UI; TopCoat from Adobe

featured

There are a great many frameworks around to help with mobile development, one of the most popular is jQuery Mobile.

There’s nothing wrong with using a framework but sometimes a whole framework can be so overblown if you only need a small amount of functionality. In these cases all you need is a helping hand with some User Interface (UI) elements and your own JavaScript for functionality. This is exactly why TopCoat has been created. It doesn’t have any JavaScript, it only consists of a CSS file, so any animated content is simply done with CSS3 animations. This means that you are free to use any JavaScript framework that you prefer, or you can write your own JavaScript!
The CSS has been put together by Adobe and is still in very-early alpha stages (version 0.02 at present)! The reason for putting this together is because of PhoneGap. They found that sometimes designers just wanted a simple UI system instead of a full-blown framework. As such this is definitely something to watch for the future and can speed up the creation of mobile-friendly common UI elements. This tutorial will focus on creating a three-page app that employs these UI elements with your own custom CSS to show how easy it is to work with.

DOWNLOAD TUTORIAL FILES

Set up your project

From the cover CD, copy the start folder to your desktop. This includes the TopCoat CSS which you can download from topcoat.io. Create a new HTML5 file in Dreamweaver or similar and save it as ‘index.html’ in the start folder. Now add the following code into the head section which will link to the CSS we are going to use.

001 <meta name=”viewport”content=”width=device-width, initial-scale=1.0”>
 002 <link rel=”stylesheet” type=”text/css”     href=”css/styleguide.css”>
 003 <link rel=”stylesheet” type=”text/css”     href=”css/topcoat-mobile-min.css”>
 004 <link rel=”stylesheet” type=”text/css”     href=”css/discover.css”>

Set up your own CSS

In the body tag of the HTML page give this an id of ‘home’ as shown in the code below. Once you’ve done this create a new CSS file and save it into the CSS folder. Name this ‘discover.css’. This will contain your own CSS to layout the content as you see fit for the project.

001 <body id=”home”>

Style the page

Inside the new CSS file, add the following style so that the homepage is styled up. This adds an image to the background and centres it in the browser. It’s also set to have the image always cover the size of the browser on differing sized mobile screens. Save the files and test them in a small-screen browser.

001 #home {
 002     background: url(../images/london-blur.    jpg)     no-repeat center center fixed; 
 003     -webkit-background-size: cover; -moz-    background-size: cover;
 004     -o-background-size: cover; background-    size:     cover;
 005     color: #fff;
 006 }

Creating page content

Move back into the HTML file now and add the following code into the body section of the document. This creates a new <div> tag that has an image and heading inside it. Notice how there are three new classes here for ‘intro’, ‘logo’ and ‘title’, these haven’t been created yet but they will define how this will be laid out in the design.

001 <div id=”intro”>
 002     <img src=”images/logo.png” width=”75”     height=”75” class=”logo”>
 003      <h1 class=”title”>Discover<br>London</    h1>

Add a subheading

Continue adding the code shown which adds in a subheading to the page and then we use one of the lightweight buttons from TopCoat. Here we are using the dark version of the cta button, cta stands for ‘Call To Action’. Our label for the button has the text ‘Begin’ and a right-facing arrow icon.

001 <p class=”sub clearfix”>Your interactive     guide     to the sites and sounds of London starts here</    p>    
 002    <a href=”begin.html” class=”dark-cta     dark-    button” role=”button”>Begin &#8594;</a>

Credit the photograph

Finally we add a link to the photographer under the Call To Action button. Save the page and view the design in the browser. You can see that the design needs a little fine tuning as it is just listed one after another. Return back to Dreamweaver and go into the ‘discover.css’ file to start styling up content.

001 <p class=”caption”>Photo: <a href=”http://
 www.flickr.com/photos/38181284@        N06/7232892250/”>vulture labs</a><br>&nbsp;</p>
 002 </div>

Introducing the design

Add the following CSS directly below your previous code. We give the intro a little padding so that the text isn’t so close to the edge of the page now. The title is made slightly larger and given some text shadow, then your caption link is made white rather than the default blue. Save and view the changes in the browser.

001 #intro { padding: 80px 40px 40px; }
 002 .title {
 003     float: left; color: #fff;
 004     font-size: 2.5em; line-height: 0.9em;
 005     text-shadow: 0.05em 0.05em 0.14em black;
 006 }
 007 .caption a{ color: #fff };
 008 .main { padding: 0 100px 60px 40px;}

Finishing the introduction

You’ll see now that the design for the first page is really beginning to take shape, however you need to align your logo to the left and ensure new content starts below. Also ensure your subheading stands out by adding a shadow and create the clearfix class for ensuring content below the logo starts on a new line. Then save these changes and refresh your browser.

001 .sub {
 002     line-height: 0.9em;
 003     text-shadow: 0.1em 0.1em 0.2em black;
 004 }
 005 .logo { float: left; }
 006 .clearfix{ clear: both; }

Adding tabbed browsing

The next step is to move back into the ‘index.html’ document and then before you close the body tag add the unordered list as we’ve outlined here. This will create two tabs that you want to sit at the bottom of the window that will allow the user easy access to your settings and your guide. Once you’ve done this, save the page and refresh the view in your browser.

001 <ul class=”dark-tab-bar”>
 002     <a href=”index.html” class=”down”>GUIDE</a>        <a href=”settings.html”>SETTINGS</a>
 003 </ul>

Slight amendments

While you have two tabs, it’s not the desired effect. Firstly you need each tab to take 50% of the design so that they fill the full width. You also need to fix the bar to the bottom of the design. Switch back to the ‘discover.css’ document and add the CSS as shown below. Now save and refresh the browser to see the difference.

001 .dark-tab-bar a {width: 50%;}
 002 .dark-tab-bar {position: fixed; bottom: 0;}

Create the settings page

Choose File> Save As on the ‘index.html’ page, saving it as ‘settings.html’. Then work your way through and delete all of the content inside the body tags except for the tab bar which you added in Step 9. Inside the body tag remove the id that states ‘home’ so that it is once again just a regular body tag. Once this is done you are now ready to build the settings page.

001 <body>

Create the header

Add in the following code immediately after the body tag in your new ‘settings.html’ document. This will then add a title bar at the top of the screen that has the heading ‘Settings’. Then once this is done, save the page and refresh the browser to see the changes that you’ve made, bear in mind that you may need to click across on the Settings tab to see the changes.

001 <div class=”dark-header-bar”>
 002    <p class=”header-bar-title”>Settings</p>
 003 </div>

A light background

Don’t forget to change the ‘class=”down”’ from the guide to the settings in the tab bar. Then save this and move over to the ‘discover.css’ document. Add the following CSS which you’ll implement when you create the design for the settings page. This gives a light grey background to your page.

001 .light {
 002     color: #000;
 003     background: #DFE2E2;
 004     padding: 1px 20px 20px;
 005 }

Add a checkbox

When you produce a settings page you need some UI elements that enable you to interact with the project. Add the code shown below to the body section of the code after the header. This sets up a checkbox which is selected, you can then add some more checkboxes too.

001 <div class=”light”>
 002    <p class=”sub”>Attractions</p>
 003    <p>
 004        <input type=”checkbox”         id=”checkbox-1”     checked />
 005      <label for=”checkbox-1” class=”light-    checkbox checkbox-right”>Siteseeing</label>
 006       <br />

Adding two more

Continue to add the remaining two checkboxes which are pretty much the same as the first. These appear unchecked by default. There is a nice design to these checkboxes in the TopCoat UI, but don’t preview just yet as you haven’t closed all the tags.

001 <input type=”checkbox” id=”checkbox-2” />
 002       <label for=”checkbox-2” class=”light-    checkbox checkbox-right”>Restaurants</    label>
 003          <br />
 004      <input type=”checkbox” id=”checkbox-3”     005 />
 006       <label for=”checkbox-3” class=”light-    checkbox checkbox-right”>Shopping</label>
 007    </p>

More settings

Other UI elements useful for settings pages are slide switches that turn on and off. These where first made popular on the iPhone platform but have become a standard UI design pattern. Add the code shown, which opens a paragraph and <div> container to hold the switch.

001 <hr>
 002    <p class=”sub”>Location Aware</p>
 003    <p>Allow location access: 
 004    <div class=”slide-switch-container”> 

Add the slide switch

The next code that we add actually adds the switch itself using classes that are predefined by TopCoat. The switch is powered by a CSS3 transform so it will be hardware accelerated on your device and won’t rely on JavaScript to get the animation done.

001 <input type=”checkbox” name=”light-switch” 002 id=”slideswitch-light” checked>
 003        <label class=”light-slide-switch”     004 for=”slideswitch-light”>
 005            <div class=”on-off”></div>
 006            <div class=”switch”></div>
 007        </label>
 008    </div></p>

Adding a search field

Continuing to add your UI elements, you’re adding a search area in here, so place the code shown after the last. This not only provides a TopCoat-formatted search field but closes the <div> for the ‘light’ section on the page. Save the page now and refresh your browser to see these new UI elements in action.

001 <p>Distance: <input type=”range” 
 class=”light    -slider” name=”Distance”     002 value=””></p>
 003    <p><input type=”search” class=”light-    search-input” value=”” placeholder=”Search for     help”></p>
 004   <p>&nbsp;</p>
 005 </div>

Final CSS tweaks

In the following step you will find out how to create a new page with list elements on it. You are going to make these list elements into links to further pages, so first you need to style this up. Move to the ‘discover.css’ and add the following CSS which is the last you’ll need to add. This just removes the underline and makes the colour black.

001 li a {
 002     text-decoration: none;
 003     color: rgb(69, 69, 69);
 004 }

Create the final page

The next step is to move back to the settings page and save it as the ‘begin.html’. This time remove the contents of the ‘light’ <div> so that the heading and the tab bar remain. Change the heading to state ‘Discover London’ and change the ‘down’ class to the guide in the tab controller. Now add the unordered list shown below inside the ‘light’ <div>.

001 <ul class=”light-list”>
 002          <li><a href=”#”>&#10140; Walking     Tours</a></li>
 003          <li><a href=”#”>&#10140; Major     London     Sites</a></li>
 004          <li><a href=”#”>&#10140; Museums &     Galleries</a></li>
 005          <li><a href=”#”>&#10140; Olympic     Tours</a></li>
 006 </ul>

Showing a profile

The next block of code you are going to add will create a lighter panel that enables a profile picture, name and link to be added. This is again defined by TopCoat so that it looks  correct. The image is placed to the left of the person’s name, so this is a really useful feature for showing profiles in projects etc.

001 <section>
 002        <section>
 003        <img src="images/person.jpg"     004 alt="Joe Smith">
 005          <div>
 006          <h1>Joe Smith</h1>
 007               <p><a href="#">www.        webdesignermag.co.uk</a></p>
 008          </div>    
 009        </section>

Final code

The final code that you’re going to add places two sections of content side by side. Add this code then save the page and view again in your browser. All the links should work and you should be able to see just how useful TopCoat is in setting up UI elements for mobile devices. By not being a complete framework it leaves you free to create your own functionality.

001 <dl>
 002            <dt>Total Tours</dt>
 003            <dd>123,456</dd>
 004        </dl>
 005        <dl>
 006            <dt>Tours today</dt>
 007            <dd>8</dd>
 008        </dl>
 009    </section>
 010    <p>&nbsp;</p>
×