nativeDroid – a free theme for jQuery Mobile 1.3

April 16, 2013

Introduction

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
no extra JavaScript code needed
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…

nativeDroid is basically only a theme for jQuery Mobile so you can use any functionality provided by jQM but for a better looking design there are a few tweaks to respect:

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

screenshot_4
Basic CSS

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.

Theme

css/jquerymobile.nativedroid.light.css contains the light-theme.
css/jquerymobile.nativedroid.dark.css contains the dark-theme.

Colors

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.