nativeDroid: A simple jQuery Mobile 1.3 theme

This article introduces nativeDroid, a new and simple theme created for jQuery Mobile 1.3. Its first version (v0.1) is available for free on nativedroid.godesign.ch and can be used for any personal and commercial projects, just add a backlink to the project attribution.

nativeDroid Features:

• The interface design is close to Android HOLO style.
• Based on pure CSS3/HTML5, no pictures are required (using Font Awesome to provide icons).
• Available in 5 color schemes (blue/green/purple/red/yellow) that can be combined with bright and dark themes.
• The starting framework for any mobile project.
• No additional JavaScript code is required.
• Provides examples of all jQuery Mobile 1.3 components.
• All Font Awesome icons can be added through the jQM's data-icon attribute.

Using tips and precautions:

nativeDroid is just a jQuery Mobile theme, you can use any of the features provided by jQM, but for better visual effects, please note the following:

1. All styles are applied to data-theme='b'.
2. Only use jQuery Mobile's structure style sheet (css/jquerymobile.css), and does not include theme styles. jQuery Mobile's Themerroller generates stylesheets that break the design.
The
3. data-inset='true|false' parameter is invalid in nativeDroid. Please use the <div class="inset"> tag as a substitute. <li> <code>data-role='header' is used in combination with data-position='fixed' and data-tap-toggle='false' only and applied data-theme='b' separately for link elements within the header.
4. data-role='footer'Not designed yet, please use with caution. It is recommended that you copy one from the HTML document in the demo as the starting point.

Colors and Styles:



• Basic CSS:

  • css/font-awesome.min.css: Contains fonts and icons used by nativeDroid.
  • css/jquerymobile.css: jQuery Mobile's original structure style sheet (compressed) does not include theme styles.
  • css/jquerymobile.nativedroid.css: Structural adjustments required by nativeDroid.

• Theme:

  • css/jquerymobile.nativedroid.light.css: Bright color theme.
  • css/jquerymobile.nativedroid.dark.css: Dark theme.

• Color:

  • css/jquerymobile.nativedroid.color.blue.css: Blue style.
  • css/jquerymobile.nativedroid.color.green.css: Green style.
  • css/jquerymobile.nativedroid.color.purple.css: Purple style.
  • css/jquerymobile.nativedroid.color.red.css: Red style.
  • css/jquerymobile.nativedroid.color.yellow.css: Yellow style.

You can copy any base color CSS file and adjust the color code to create your own color style.

Future development:

nativeDroid will continue to be updated, add new features and fix bugs.



(The following is a simplified version of the original FAQ part, avoid duplicate information) This part has been highly summarized, retains the core information, and reorganizes and expresses the problem.

FAQ:

• Install: Download the theme, unzip the file, and place the file in the project directory, and then link the CSS and JS files in the HTML file.
• Compatibility: Designed for jQuery Mobile 1.3, compatibility of other versions is not guaranteed.
• Customization:Customization of CSS and JS files. Remember to back up the original file.
• Troubleshooting: Check whether the installation and link are correct and view the console error message.
• Responsive design: Supports responsive design.
• Commercial Use: Can be used in commercial projects.
• Update: Release updates regularly and download the latest version to replace the old files.
• RTL language support: Natively not supported, CSS file needs to be modified.
• Plugin addition:Include the plugin's JS and CSS files in the HTML file, make sure to be placed behind the theme file.
• Other JavaScript frameworks: It is recommended to use with jQuery Mobile.