Introducing Onsen CSS Components

Onsen CSS Components is a web-based theme roller for Topcoat that lets PhoneGap developers create beautiful UIs easily. Many standard UI components are supported and are easily customizable via a web interface. It also has a growing selection of beautiful UI patterns, each containing HTML and CSS to show how to reproduce the pattern.

Image for post
Image for post

How to use

Just go to Onsen CSS Components to get started. On the right is a color palette with some pre-defined color sets. You can adjust color variables the way you like.

Image for post
Image for post

On the left you can see the UI reflect the color you choose.

After you are done, you can download the CSS components to use with your project… or share your creative work with the world!

The download content contains the following files:

  • demo.html : example code
  • onsen_css_component.css : CSS file
  • patterns : contains all patterns HTML and CSS patterns
  • LICENSE : license info

Open demo.html to see how the CSS file is used. For detail usage, go to the Component panel on the website.

Click on a component will show its markup and CSS code.

Image for post
Image for post

You can copy the markup and use it with the downloaded CSS file.

If you just want to use only a few components, you can just copy the CSS code of those components.

In the Overview panel, you can scroll through collections of beautiful UI patterns. This is not just eye candy; you can inspect the source code. We make it easy to copy and past the code to your project. We will keep adding more patterns. If you cannot find a pattern you want, you can request one by clicking the Request button; or you can contribute your own pattern via the Register button.

Image for post
Image for post


With Onsen CSS Components, we hope we can make your life as a developer easier with this growing collection of UI patterns that is easily customizable. It’s a great place to start. Why not give it a try?

Onsen CSS Components

Originally published at on April 24, 2014.

The Web Tub

Pushing the web current through hybrid mobile and PWA…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store