Beautiful HTML5 Apps with Topcoat

Introducing Topcoat, the modern approach to prototyping and presenting your new idea!

HTML5 Mobile App Development for Beginners

Topcoat comes with a lot of great features and assets, including an Open Source font–“Source Sans Pro” and Open Source icons. Topcoat also provides PSD files for use with Adobe Photoshop, for your inner designer. To make things even easier– Topcoat makes use of the cdnjs Content Delivery Network, to serve out your assets in the most efficient way possible. Here are the links: Topcoat Library and
Topcoat Icons.

In this introduction to Topcoat, we will be working with the dark, mobile-minified css stylesheet, the “Source Sans Pro” font and some basic HTML5 markup to create a simple prototype application design.

You can download the tutorial source code here.

So, before we jump into some code, we should download the latest version of Topcoat (currently v0.8.0) and locate the css/ and demo/fonts/ directories inside the zip file.

Inside the css/ directory, we will be using the “topcoat-mobile-dark.min.css” stylesheet and inside the demo/fonts/ directory, we will be using the “sourcesanspro-regular-webfont.woff”. The font is of the “Web Open Font Format” and is currently supported by all major browsers, so we can safely use this font for our projects.

Before we get started, let’s create our directory structure and get ready to start coding!

This is what our directory structure should look like:

As you can see, I have created an “index.html” file and a stylesheet– “app.css”. This stylesheet will be very simple, it’s main purpose is to use the


rule, so we can use the “sourcesanspro-regular-webfont.woff” font. I have also copied the
“topcoat-mobile-dark.min.css” stylesheet and the “sourcesanspro-regular-webfont.woff” font into the css/ and font/ directories, respectively.

This is what our “app.css” should look like:

	@font-face{font-family: "Source Sans Pro", src: url("../font/sourcesanspro-regular-webfont.woff");}
	body{font-family: "Source Sans Pro", sans-serif;}
	img{display: block; margin: 0 auto;}
	strong{display: block; text-align: center;}

If you aren’t familiar with the @font-face rule, this is new in CSS3 and it allows us to specify a custom font file in our stylesheets and use this custom font in our web pages or applications built using HTML and CSS.

Please note that we don’t have to explicitly declare our “Source Sans Pro” font, as the “topcoat-mobile-dark.min.css” stylesheet already declares this font with the @font-face rule for us.

Now, for our markup, we will include our two stylesheets and use the


container for our content:


The #wrapper is essentially the container or parent element that we will be working with.

Inside our #wrapper, we will have a section and inside that section, we will have an unordered list with four list items– being our four contacts. We will also be making use of the new HTML5 tel anchor element’s href value, allowing the end user to click on the element and having the phone application of the device load, with the number specified in the href attribute’s tel value ready to call.

You will notice some semantics of the Topcoat framework, in terms of the naming convention used for the classes.

Our HTML markup should now look something similar to this:









Now, we want to add in our images, and surround each image with an anchor element, like so:

    • Avatar


    • Avatar


    • Avatar


    • Avatar




To finish off our little application prototype, let’s add in some names for our avatars, inside

tags, under the images in the list items and you will have something that looks like this:


You can download the tutorial source code here.

Learn Mobile HTML5 App Development

At ZENVA Academy we have two comprehensive mobile HTML5 courses, one of them uses Topcoat among with bleeding edge HTML5 API’s to create a beautiful app from scratch.

HTML5 Mobile App Development for Beginners

iOS and Android HTML5 App Development for Beginners