Onsen UI is a Custom Elements-Based HTML5 UI Framework for BuildingYour Mobile Front End.
Onsen UI makes building applications simple basing on the concept of Web Components. Applications can be build using HTML tags web developers already know. It is built on top of heroic AngularJS and performance craving Topcoat.
Monaca IDE fully supports Onsen UI plugin.
Onsen UI is tested with the following browsers and mobile OS.
- Android2.3.4+
- iOS6+
- Google Chrome
- Safari
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
See getting started page.
See the Onsen UI Getting Started Page.
-
Clone with submodule
git clone https://github.com/monaca/OnsenUI.git --recursive -
Open the terminal from OnsenUI directory
cd OnsenUI -
Install dependencies using npm
npm install -
Install grunt-cli (globally)
[sudo] npm install -g grunt-cli -
Type grunt to start building
grunt
The files will be built and copied into build, demo/lib/onsen/, and app/lib/onsen/ folder.
-
Run script
scripts/web-server.js -
Then navigate your browser to http://localhost:8000/demo/index.html
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_tempates folder. You will see the instruction on how to run the project there.
See the current Onsen UI docs.
Run grunt task to develop Onsen UI itself with livereload.
grunt serve
Access http://localhost:9000/demo/index.html and your code changes will be reloaded.
- Fill out the CLA here
- Fork the repo
- Commit your changes
- Make a pull request to dev branch.
If anything about Onsen UI is unclear, please ask a question on Stackoverflow, and tag it "onsenui". 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).