This is a custom jquery mobile theme, that matches the Holo theme family in Android 4.0 Theme.Holo.Dark and Theme.Holo.Light.
http://developer.android.com/design/building-blocks/buttons.html
- Download the sources (js, css, themes-folder) from github
- Include it in your html file:
<link rel="stylesheet" href="themes/android-theme.css" />
<script type="text/javascript">
var DEBUG_ANDROID_THEME=true
</script>
<script type="text/javascript" src="jquery.mobile.android-theme.js"></script>
- hide-on-android css class use this class, to hide some elements on android devices (e.g. header back button)
The basic css is generated with the jquery mobile theme generator. Then all rules are wrapped with .android class. Compile it with SASS.
- Go to http://jquerymobile.com/themeroller/
- Click "Import" (top-left-corner)
- Open the file android-theme.scss in any editor
- remove the line at the beginning: body.android {
- remove the last line "}"
- copy now the content of this file into the theme generator import-window
- Click on "Download-Theme"
- Name it "android-theme"
- Download it, extract and copy the file "themes/android-theme.css" to the "themes/android-theme.scss" of this project. Overwrite it.
- Wrap the complete content with body.android:
- add the line at the beginning: body.android {
- add a closing "}" at the end of the file
- Compile it with SASS
http://www.jjoe64.com/2011/09/android-theme-for-jquery-mobile.html