Channels ▼
RSS

Onsen CSS Components For UI Customization


All the way from Japan comes Monaca, an HTML5 PhoneGap hybrid software application development platform, now with a new HTML/CSS resource for building mobile UIs.

Onsen CSS Components is a web-based theme roller for Topcoat that lets PhoneGap developers create UIs with many standard UI components supported. The tool is easily customizable via a web interface.

The new Onsen CSS Components page takes the app development process and eases it with 20+ useful patterns for mobile devices that offer a starting point for HTML5 developers. Developers have the option to either grab code snippets for a full pattern and begin editing, or pick and choose to just grab a certain part.

Japanopholes will already know that the term onsen (温泉) is a term for hot springs and bathing facilities in the Japanese language.

This new theme roller provides a view of color customization. Once done, developers can download the CSS components to use with their project. Programmers can click on a component to show its markup and CSS code for a quick and customizable grab, or just copy the CSS code for only certain components.

If a developer can't find one they want, they are able to submit a request or contribute their own via the Register option. The software is described as "free and open to all" and there are supplementary notes to guide users online.

Monaca itself is an HTML5 hybrid app development platform that offers programmers the option to develop applications in HTML5, CSS3, and JavaScript, and deploy across multiple platforms.

Onsen UI is an HTML5 UI framework that specializes in hybrid PhoneGap applications, giving developers native-like UX for apps written in CSS and JavaScript. Onsen comes with Topcoat and AngularJS, which is provided in open source, and Onsen UI itself is available in the Apache open source license.


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 


Video