The best place to start with Onsen UI is our Getting Started page.
Built on top of AngularJS and Topcoat, Onsen UI is open source, free and open for all. Onsen UI is designed and implemented to deliver unprecedented user experience for your apps. Applications can be built using HTML tags web developers already know and love. We love AngularJS and all the power it brings. But we've also added support for JQuery so developers less familiar with AngularJS can take advantage of Onsen UI, too.
Onsen UI also includes Onsen CSS Components, a free resource of UI templates with "theme roller" functionality. Developers can pick and choose, grab the code they need, and they're off and running. And they can create their own templates and submit to Onsen UI to be included with other templates available.
Our Monaca IDE fully supports Onsen UI plugin.
Onsen UI is tested with the following browsers and mobile OS.
- Google Chrome
Click here to see Onsen UI in action!
- AngularJS: for directives
- Topcoat: for fast UI css
- HammerJS: for touch, swipe handling
- Font Awesome: for icons
Getting Started Using Templates
See the Onsen UI Getting Started page.
Getting Started Using Monaca
See the Onsen UI Getting Started Page and scroll down to the Using Onsen UI with Monaca section.
How to build
- Clone this repository
- Open the terminal from OnsenUI directory
- Install dependencies using npm
- Install gulp (globally)
- Type gulp to start building
The files will be built and copied into build, demo/lib/onsen/, and app/lib/onsen/ folder.
- Then navigate your browser to http://0.0.0.0:8000/demo/index.html
Developing your app
Our Monaca IDE makes it super easy to create Onsen UI project, but if you want to use other IDEs, we provide project templates for you in the
project_templates folder. You will see the instruction on how to run the project there.
See the current Onsen UI docs.
Developing Onsen UI
Run gulp task to develop Onsen UI itself with livereload.
Access http://0.0.0.0:8000/demo/index.html and your code changes will be reloaded.
How to contribute
We will happily accept contributions to Onsen UI. It can be both fixes for bugs or typos or even new features that extend Onsen UI.
The basic workflow when making contributions is the following:
After you've made a pull request we will review it. If everything is fine and we like the change the contribution will be pulled into the main Onsen UI repository. In the case where there are some issues with the code or we disagree with how it's been implemented we will describe the issues in the comments so they can be corrected.
There are some things to keep in mind when making code contributions to Onsen UI. The code must adhere to the general code style used.
Here is a list of some rules that should be followed:
- Separate binary operators with spaces:
var x = 1+1is incorrect, it should be written as:
var x = 1 + 1.
for, etc. should be separated from the paranthesis with a space.
- Use easy-to-understand and logical naming for your variables and method names, especially for variables and methods that are exposed to the user.
- Internal APIs should be preceded by an underscore.
If anything about Onsen UI is unclear, please ask a question on Stackoverflow, and tag it "onsen-ui". An Onsen UI support engineer will answer it.
If you have any requests or comments regarding the development of Onsen UI, please feel free to direct them to the Twitter account (@Onsen_UI).