A CSS library that imitates the Android Holo themes
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
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.