A CSS library that imitates the Android Holo themes
CSS HTML JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
android_references
LICENSE.txt
README.md
check-active-dark.png
check-active-light.png
check-dark.png
check-light.png
demo-hc-dark.html
demo-hc-light.html
demo-ics-dark.html
demo-ics-light.html
demo-kk-dark.html
demo-kk-light.html
holo-base-elements.css
holo-base-widgets.css
holo-hc-dark-elements.css
holo-hc-dark-widgets.css
holo-hc-light-elements.css
holo-hc-light-widgets.css
holo-ics-dark-elements.css
holo-ics-dark-widgets.css
holo-ics-light-elements.css
holo-ics-light-widgets.css
holo-kk-dark-elements.css
holo-kk-dark-widgets.css
holo-kk-light-elements.css
holo-kk-light-widgets.css
holo-touch.js
icon_128.png
icon_48.png
icon_512.png
index.html

README.md

#Holo Web

Holo Web is a few stylesheets that attempt to imitate the Android “Holo” themes.

##Holo-ify your site If you want to Holo-ify HTML elements on your page, you just need to include two files:

  • “holo-base-elements.css”, which defines the sizes of the elements
  • One of the following, which will color the page like the corresponding Holo theme:
    • “holo-hc-dark-elements.css” (Honeycomb Holo Dark)
    • “holo-hc-light-elements.css” (Honeycomb Holo Light)
    • “holo-ics-dark-elements.css” (Ice Cream Sandwich Holo Dark)
    • “holo-ics-light-elements.css” (Ice Cream Sandwich Holo Light)
    • “holo-kk-dark-elements.css” (KitKat Holo Dark)
    • “holo-kk-light-elements.css” (KitKat Holo Light)

##Add Holo widgets You can use widgets like action bars (currently available) and tabs (coming soon) by adding other stylesheets and specifying classes:

  • “holo-base-widgets.css”, which defines the sizes of the elements
  • One of the following, which will color the widgets like the corresponding Holo theme:
    • “holo-hc-dark-widgets.css” (Honeycomb Holo Dark)
    • “holo-hc-light-widgets.css” (Honeycomb Holo Light)
    • “holo-ics-dark-widgets.css” (Ice Cream Sandwich Holo Dark)
    • “holo-ics-light-widgets.css” (Ice Cream Sandwich Holo Light)
    • “holo-kk-dark-widgets.css” (KitKat Holo Dark)
    • “holo-kk-light-widgets.css” (KitKat Holo Light)
  • To add an action bar, add a <header> element with the class holo-actionBar: <header class="holo-actionBar"> (use a <footer> element for a bottom action bar)

Note: adding the base stylesheet will automatically add padding for action bars.

##Make it work on older mobile browsers One great use of Holo Web is to make mobile web sites look like native Android apps. Holo Web includes a script to make sure all widgets respond to touch properly in mobile WebKit (Mobile Safari, Android Browser, Chrome for Android).

  • Make sure you include the “holo-touch.js” file in your project.
  • Add a script tag to your page: <script type="text/javascript" src="holo-touch.js"></script>.

##The Roboto Font holo-base-elements.css imports basic Roboto by default. If you need more weights or character sets, you can load them through Google Web Fonts.

##Known issues

  • Certain form elements (checkboxes, radio buttons) are only properly themed in WebKit-based browsers (e.g. Safari, Chrome) and partially themed in Presto (older Opera) and the latest version of Trident (IE10+).
  • Certain form elements, such as range sliders, are unsupported in some older browsers.

The above issues are the result of browser limitations or lack of documented solutions.

##Contributing to Holo Web Contributions to this project are welcome. Please follow standard commit guidelines.