Intro to Topcoat – A Efficiency-First UI Framework

Topcoat is a CSS framework that may make it easier to construct quick, excessive-efficiency UIs.

Topcoat is likely one of the Adobe Open Supply initiatives. When it comes to philosophy, Topcoat believes that UI efficiency leads to higher UX. Additionally, the venture goals to deliver net apps nearer to native apps when it comes to velocity and responsiveness of consumer-interactions.

One of many methods Topcoat achieves efficiency enhancements is by benchmarking how browsers carry out when rendering Topcoat elements. That is executed by measuring load time and frames per second (fps) to seek out underperforming CSS properties.

Topcoat continues to be very new. The newest launch is model zero.eight.zero on the time of writing.

Set Up Topcoat

On this tutorial, we’ll construct a easy consumer interface with Topcoat.

You’ll be able to obtain the supply code for this tutorial by clicking the hyperlink under:

Download Source

The very first thing you will have to do is download Topcoat’s source code from GitHub. Afterwards, extract the contents of the Zip archive someplace in your pc.

Alternatively you should use your Git command immediate to clone Topcoat’s supply code to your pc:

git clone http://ift.tt/1zOSN49

Listed here are Topcoat’s prime-degree directories and information:

To see the UI elements that include Topcoat, go within the demo listing and open index.html in your browser. It is best to see an internet web page that appears like this:

Overview of Topcoat’s Stylesheets

For those who look inside Topcoat’s css listing, you will notice eight CSS information:

• topcoat-desktop-darkish.css


• topcoat-desktop-darkish.min.css


• topcoat-desktop-mild.css


• topcoat-desktop-mild.min.css


• topcoat-cellular-darkish.css


• topcoat-cellular-darkish.min.css


• topcoat-cellular-mild.css


• topcoat-cellular-mild.min.css

The CSS information which have .min of their file names are minified variations, so there are actually simply 4 distinctive stylesheets that include Topcoat. For instance, topcoat-desktop-darkish.min.css is similar to topcoat-desktop-darkish.css, besides the previous is smaller in file measurement. It is best to solely use one or the opposite.

Wireframing the UI

Let’s begin with a fast wireframe of the consumer interface we’ll construct with Topcoat. Doing it will

The post Intro to Topcoat – A Efficiency-First UI Framework appeared first on DICKLEUNG DESIGN 2014.