A CSS library that imitates the Android Holo themes
CSS HTML JavaScript
Latest commit b26353a Jul 3, 2015 @zmyaro Update license headers
Permalink
Failed to load latest commit information.
android_references Add up buttons to Android assets Mar 17, 2014
LICENSE.txt Update license headers Jul 3, 2015
README.md Update readme to take into account updates to Holo Web and various br… Mar 24, 2014
check-active-dark.png Implemented checkboxes and added check images (although the styleshee… Apr 23, 2012
check-active-light.png Implemented checkboxes and added check images (although the styleshee… Apr 23, 2012
check-dark.png Implemented checkboxes and added check images (although the styleshee… Apr 23, 2012
check-light.png Implemented checkboxes and added check images (although the styleshee… Apr 23, 2012
demo-hc-dark.html Fixed a minor typo in the demo files. Jul 10, 2014
demo-hc-light.html Fixed a minor typo in the demo files. Jul 10, 2014
demo-ics-dark.html Fixed a minor typo in the demo files. Jul 10, 2014
demo-ics-light.html Fixed a minor typo in the demo files. Jul 10, 2014
demo-kk-dark.html Fixed a minor typo in the demo files. Jul 10, 2014
demo-kk-light.html Fixed a minor typo in the demo files. Jul 10, 2014
holo-base-elements.css Update license headers Jul 3, 2015
holo-base-widgets.css Update license headers Jul 3, 2015
holo-hc-dark-elements.css Update license headers Jul 3, 2015
holo-hc-dark-widgets.css Update license headers Jul 3, 2015
holo-hc-light-elements.css Update license headers Jul 3, 2015
holo-hc-light-widgets.css Update license headers Jul 3, 2015
holo-ics-dark-elements.css Update license headers Jul 3, 2015
holo-ics-dark-widgets.css Update license headers Jul 3, 2015
holo-ics-light-elements.css Update license headers Jul 3, 2015
holo-ics-light-widgets.css Update license headers Jul 3, 2015
holo-kk-dark-elements.css Update license headers Jul 3, 2015
holo-kk-dark-widgets.css Update license headers Jul 3, 2015
holo-kk-light-elements.css Update license headers Jul 3, 2015
holo-kk-light-widgets.css Update license headers Jul 3, 2015
holo-touch.js Update license headers Jul 3, 2015
icon_128.png Add icons Mar 17, 2014
icon_48.png Add 48×48 icon Mar 18, 2014
icon_512.png Add icons Mar 17, 2014
index.html Add developer information to index.html Mar 27, 2014

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.