Topcoat is an open source CSS library by
Adobe HTML (the Topcoat code is available on GitHub). According to the Topcoat blog introduction, the library is “…designed to help developers build web
apps with an emphasis on speed. It evolved from the Adobe design language
developed for Brackets, Edge Reflow, and feedback from the PhoneGap app
developer community.”

In this article, I highlight several Topcoat features and offerings that make it a
unique library, and give a short review using Topcoat in sample HTML and CSS code.

Topcoat highlights

Benchmarks
(Figure A) provides performance results that back up their speed claims. You
can view mean frame time, load time, and layout times expressed in milliseconds for elements like button, text input, search input, radio input, checkbox,
and navigation bar.

Figure A

Demo (Figure B) displays live results
with four background options and various CSS examples, including several button
bars, a large button bar, a call to action button, a checkbox, an icon button, a
radio button, a search input, and several text areas.

Figure B

Another feature I like with the demonstration (and also included in the
download) is the option to view the live code in CodePen. For example, in the Topcoat Button Bar (Figure C) you
can review default settings, accessibility, and semantic variations, and markup
your HTML and CSS on the fly.

Figure C

Blog
features articles that offer tips and tricks for incorporating Topcoat into
existing designs and frameworks. Topics that include “Topcoat components deep dive” and “Desktop Parity Party.”

Topcoat Wiki includes coding guidelines, component architecture, engineering practices, feature detection, installation and usage, and more.

Other notable Topcoat tools in the GitHub repository include Topcoat default theme, Topcoat search input, Topcoat benchmark server, and
Open Source Icons designed for Topcoat.

Using Topcoat

Follow the installation and usage guidelines from the Tomcat Wiki.

1. Download the link from http://topcoat.io/, which gets delivered as the
file topcoat-0.7.0.zip at 2.6MB in size. I created a demo web directory
with an associated demo HTML and CSS file and then extracted the topcoat
download to this directory.

2. I copied the CSS folder and placed it
inside the root web directory and then added the CSS reference link for the
mobile light stylesheet: 

–)ä­é

That’s the basic installation. Download the Topcoat files, and then add
the CSS link reference into the <head> of your HTML document file.

I wanted to play around with the Topcoat CSS, so I started with the
Button first using this code snippet:

v+âuÊ'µéírV¬²f±Â'm…ªí‰É^‰

The
resulting output as displayed in Chrome is shown in Figure D.

Figure
D

Next,
I wanted to try the search input element, so I used the code snippet below:

j»brW¢vǚ­Èbž›­rV¬±Ê&¦‰ÞžØ^i׫‡džj·!"zn·øvþšuêìyËb¢w%jË

This
results in the output showing the active search input as displayed in Chrome in
Figure E.

Figure
E

Considerations

An
under the hood inspection of the Topcoat CSS files using the Chrome Inspect
Elements and Resources tab shows 15 to 16 “Invalid” response errors
for CSS property values, including instances of “no-wrap;” (which are
utilized for white-space properties) and invalid CSS selector errors for vendor
prefixes such as moz and ms placeholders and input placeholders.

Although
several of the properties result in minor CSS errors, there are plenty of
properties that work in modern browsers.