Totally Rad Topcoat!

August 29, 2013By 11 Comments

topcoat-logoIf you haven’t checked out Topcoat lately then you might be pleasantly surprised to see some of the latest happenings.

Topcoat version 0.6 recently became available and the details of the release can be found here.

I wanted to highlight a couple of the latest events and also show off some of the latest components being worked on in a little demo application below.

  • npm happiness – now you can install Topcoat components with npm (node package management system). This is so great since so many of us rely on npm already, it just makes installing and using Topcoat that much easier. If you search Topcoat on you will see a bunch of different results now as shown below (more available than shown in screenshot :)).

    Screen Shot 2013-08-27 at 3.35.58 PM

  • CodePen coolness – now you can also see the latest and greatest in-process development and feedback via the new Topcoat CodePen. Check it out to find new components being developed along with the CSS and HTML source and preview to see it immediately and try it out yourself, then feel free to leave feedback.

Lastly, I’m including a working preview of some of the latest components being worked on for Topcoat. These were pulled from a combination of the GiHhub repository, CodePen and the latest 0.6 version. This sample includes preview code for the following components:

Click around and try it out!

The components included in this preview may still be undergoing further updates so keep checking the Topcoat CodePen and GitHub account for the latest updates. You can also provide feedback on the Topcoat CodePen site and it’s encouraged. Also remember you can always get the latest version of a reviewed component through npm.
Word has it we’ll soon be seeing some switch, well, combobox goodness coming to Topcoat so stay tuned!

Filed in: PhoneGapTopcoat

About the Author ()

Comments (11)

Trackback URL | Comments RSS Feed

  1. Reza says:

    Is 0.6 production ready yet?
    I am watching Topcoat since 0.3
    I am not sure we replace some of my JQM pages with topcoat yet!

  2. Anthony says:

    Very cool!

  3. luca says:

    This is the most amazing way to call a component: Hamburger/Slide-Out Menu!

    great job Holly!

  4. I am still trying to get my head around this. Docs on it are pretty light – maybe I’m a noob but I couldn’t figure out how to test/use the icons it comes with. I’m def keeping my eye on this though.

  5. Jay Finn says:

    Shouldn’t these be built with Polymer?

  6. Kane Schutzman says:

    I am having a few issues using topcoat UI range sliders. I am unable to “slide” them when using the mobile touch screen. Do you have any advice on how to fix this? Android 2.3 + Phonegap + = unslidable range sliders…

    Thank you,


  7. kong says:


    How do i get access to the sample source code that is part of your demo?


  8. james says:

    I was wondering where i can download this project so i can start my app with this look and feel. it´s there any repository where i can download these files (the onces on the preview. Thanks a lot,

  9. Vineeth Vijayan says:

    Hai, First of all Thanks for this wonderful post.

    I have seen the demo, But I would I like to have a source code. I have seen the github, but it dosent have hamburger Menu. Could you please upload it?

    It would be very helpful

Leave a Reply