Web Development

Try Adobe's open source CSS library Topcoat

If you're looking to revamp your CSS strategy, you might want to add Topcoat to your list of go-to web tools.

TopcoatLogo_091213.gif
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

TopcoatFigA_091213.gif

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

TopcoatFigB_091213.gif

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

TopcoatFigC_091213.gif

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: 

<link rel="stylesheet" type="text/css" href="css/topcoat-mobile-light.min.css">

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:

<div id="content" class="max-width">
    <article id="button-bar" class="component"> 
      <header>
        <h2>Button Bar</h2>
      </header>
      <section class="component">
        <div class="topcoat-button-bar">
          <div class="topcoat-button-bar__item">
            <button class="topcoat-button-bar__button">Button A</button>
          </div>
          <div class="topcoat-button-bar__item">
            <button class="topcoat-button-bar__button">Button B</button>
          </div>
          <div class="topcoat-button-bar__item">
            <button class="topcoat-button-bar__button">Button C</button>
          </div>
        </div>
      </section>
    </article>

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

Figure D

TopcoatFigD_091213.gif

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

<article id="search-input" class="component">
    <header>
      <h2>Search Input</h2>
    </header>
      <section class="component">
        <input type="search" value="" placeholder="search" class="topcoat-search-input">
      </section>
  </article>

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

Figure E

TopcoatFigE_091213.gif

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. 

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

0 comments

Editor's Picks