An Introduction to Topcoat

Kerry Butters
Kerry Butters

Working from feedback from the PhoneGap app developer community, the folks at Adobe have built a new open source CSS library designed with speed in mind. This should prove incredibly useful for web app design. The language was initially based on languages for Brackets and Edge Reflow and it has evolved from there.

Adobe is working on the library and bringing out new releases each month, as well as structuring in order to ensure that it’s simple to contribute. According to the Topcoat introductory blog: “It is an early time but we’re already looking at how each CSS control impacts loading, layout, and frames per second.”

Topcoat doesn’t contain any JavaScript, all animated content can be done with CSS animations, leaving you free to use it with any JS framework, or write your own. An excellent tool for speeding up mobile UI elements, it’s likely that Topcoat will become an invaluable tool for many developers.

Getting started with Topcoat

Topcoat can be dropped into a web app and be used straight away and it contains all of the tools that were used to build it. That allows developers to customize Topcoat to suit their exact requirements and the controls, which are available in individual git repos, allowing you to build apps targeting specific platforms.

  1. To get started, download Topcoat direct from the website, or clone the repo.
  2. Then reference the /css
  3. <link rel="stylesheet" type="text/css" href="css/topcoat-mobile-light.min.css"/>
  4. Check out the styleguide for examples

There’s been a lot of benchtesting carried out for Topcoat and the impact the tool can have on speed is not disputed. However, it’s still in its infancy so there will be much more testing to come and Adobe is also actively looking for contributors.

There’s also a dedicated Wiki for Topcoat that contains a wealth of information on the following:

  • Coding guidelines
  • Architecture
  • Feature detection
  • Requesting a featuring or filing a bug
  • Installation and usage
  • List of controls
  • How to measure performance
  • Running a performance test on Android
  • Transition effects

It’s also worth having a look at the benchmarking area of the Topcoat site to see how Adobe backs up its claims about performance. Here you can look at mean frame, loading and layout times for various elements such as search input, check boxes and navigation bars.

Convinced Topcoat will work for you?

Great stuff, let’s have a further look at what it can do. Firstly, it’s a good idea to familiarize yourself with the Demo area of the Topcoat site, which shows you exactly what can be created with Topcoat, how it is likely to display and code snippets for you to use.

You can choose the Demo in desktop mode with a light or dark background or in mobile mode, again with the choice of background. To the left of the page, a menu allows you to select different elements such as buttons in different sizes, navigation bars, lists, text areas and so on.

Topcoat demo area

As you can see, below each element is a link to open up the code snippet, below is the snippet for a call to action button.

call to action button

The actual code snippet looks like this:

code snippet

By choosing the link underneath ‘Examples’ it’s also possible to view the live code in CodePen, where you can also look at the default settings, accessibility and semantic variations.

See the Pen Topcoat Button Bar by Topcoat (@Topcoat) on CodePen

Click on the HTML, CSS and Results tabs to look through the code and the end result, as well as tips for altering text sizes and so on.

Further resources

You can find further resources for Topcoat on Github such as the default theme and some open source icons that have been designed especially for use with Topcoat. The latter includes commonly used icons such as:

  • Social sharing icons for all of the major networks
  • Users
  • Favorites
  • Attachments
  • Checkmarks
  • Cancel
  • Photo
  • Back and next
  • And many more

Familiarize yourself with Stylus

The components of Topcoat are authored in Stylus, using many features from it so if you’re not familiar with it now might be a good time to have a look. It’s simple to pick up and you can take online interactive tutorials to help you get started.

written in stylus

Custom builds for themes and hacks

It’s relatively straightforward to cut the Topcoat library down so that it just contains the components you need for each project. To do this, edit the build script so you can create a custom library using Grunt:

  1. Fork Topcoat from Github
  2. Install Node and run npm install –g grunt-cli and npm install in the Topcoat directory
  3. Modify package.json pointing to the controls that you need
  4. Run grunt to generate the custom build

To generate custom themes you also need to use Grunt by taking the following steps:

  1. Fork Topcoat from Github
  2. Modify variables files in order to make changes
  3. Modify ./topcoat-X.X.X/package.json to point to your theme and run grunt

The team behind Effeckt.css is reported to be working with Topcoat to produce a mobile-friendly library for performant transitions and animations too, but this is still a work in progress at the moment so keep an eye out for developments.

Topcoat is an extremely useful tool to have in your arsenal when it comes to time-saving when designing UI and can be used for building high-performance HTML applications. These can be native apps which are packaged with PhoneGap or Cordova, or they can be hosted HTML apps.