I would like to present a new & clean theme for jQuery Mobile 1.3 calling nativeDroid. The first release of nativeDroid (v0.1) you can find on nativedroid.godesign.ch. Its freely available and can be used in any private and commercial projects. You’re just encouraged setting a backlink in your credits.
Features of nativeDroid
- the GUI is looking close to Android HOLO
- pure CSS3/HTML5 imageless design (Includes Font Awesome for the Icons)
- comes in 5 different colours (blue/green/purple/red/yellow) where are fully combinable with light- and dark-theme.
- fits as a start framework for any mobile project
- examples for all jQuery Mobile 1.3 items
- all Font Awesome icons can be added using the jQM data-icon-Attribute
nice, but a few tweaks…
- all styles are applied to data-theme=’b’
- only use the structure stylesheet without a theme (css/jquerymobile.css).
- Stylesheets from jQuery Mobile’s Themeroller will break the design.
- the data-inset=’true|false’ parameter is not working in nativeDroid. Use the wrapping <div class=”inset”>-Tag instead.
- use the data-role=’header’ only in combination with data-position=’fixed’ and data-tap-toggle=’false’ and specificly apply the data-theme=’b’ to link elements inside the header.
- the data-role=’footer’ is not yet designed. Use them with cause.
As a best practice we recommend you to start by copying one of the HTML-Documents from the demonstration.
Colors and Styles
- css/font-awesome.min.css contains the fonts and icons used in nativeDroid.
- css/jquerymobile.css contains the original structure for jQuery Mobile without any theme (minified).
- css/jquerymobile.nativedroid.css contains the structure adjustments needed for nativeDroid.
- css/jquerymobile.nativedroid.light.css contains the light-theme.
- css/jquerymobile.nativedroid.dark.css contains the dark-theme.
- css/jquerymobile.nativedroid.color.blue.css blue-color style.
- css/jquerymobile.nativedroid.color.green.css green-color style.
- css/jquerymobile.nativedroid.color.purple.css purple-color style.
- css/jquerymobile.nativedroid.color.red.css purple-color style.
- css/jquerymobile.nativedroid.color.yellow.css yellow-color style.
To create your own color-style simply copy one of the basic color.css-files and adjust the few color codes as you like.
Is this is the end version?
No, definitvely not. nativeDroid will be developed week by week in spare times so you can be sure, that there will be some cool new features and bugs will be fixed.
Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.