Adobe Topcoat


Adobe Topcoat is a young css framework, focussed on building (web) apps. I’m putting the web in paranthesis, because it’s what seems to be used in the Adobe Edge Tools, which are stand alone applications, like the brackets editor, to be found at

At this point I’d like to state, that I should go wild with my predictions sometimes, because I think that this way of developing applications, that work on possibly both desktop and the web is going to be a trend with heavy growth. Now we have a css framework for applications of that kind.


Features of Topcoat

Currently the topcoat framework has a number of features that sometimes are limited to the desktop version. Most mentionable are:

  • buttons (grouped and dropdowns)
  • input fields, checkboxes
  • sliders, switches
  • progress indicators and loading graphics

In contrast to other frameworks like Zurb Foundation and Twitter Bootstrap, there are no implications of how to organise and place actual content.


Feel free to check out the style guides below:

Get Topcoat

To get started trying it out or building your web app, stop by the official github repository. I personally like the look and feel of both Edge Animate and Brackets, so this framework seems useful to me.

Thank you for reading! If you have any comments, additions or questions, please leave them in the form below! You can also tweet them at me

If you want to read more like this, follow me on feedly or other rss readers

Leave a Reply

Your email address will not be published. Required fields are marked *