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.
How to use
Theme roller
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.
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.
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?
Originally published at onsen.io on April 24, 2014.
