Recently I have been playing around with the Topcoat library. Essentially Topcoat is a set of pure CSS-based components for building high performance HTML applications. These apps can be either hosted HTML web apps or native apps packaged with PhoneGap/Cordova. In the app that I’m currently working on I wanted to have a slideable navigation bar that follows the so-called Drawer or Off Canvas UI pattern. Topcoat itself doesn’t come with a built-in implementation of it but all the necessary components are there, so it was just a matter of few lines of CSS and JavaScript to have it running beautifully. In my implementation I also used a simple media query for high-resolution screens like on tablets or desktops where slideable navigation is not necessary. Continue reading →