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
<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:
##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.
- 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.