nativeDroid – a free theme for jQuery Mobile 1.3

Sam Deering

screenshot_1

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

screenshot_2

  • 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…

screenshot_3

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.

More Screenshots

screenshot_5
screenshot_6

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

No Reader comments

Comments on this post are closed.