PhoneGap Blog

All PhoneGap PhoneGap Build PhoneGap Network
Introducing Onsen CSS Components
by OnsenUI | 07 May 2014 | PhoneGap Blog, Community, Framework, Release, News, Guest Post

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.

How to use

Theme roller

Just go to components.onsenui.io 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.

On the left you can see the UI reflects the color you choose. After you’re 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 detailed usage, go to the Components panel on the website and click on a component to show its markup and CSS code.

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.

UI Patterns

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.

Conclusion

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?

blog comments powered by Disqus