Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zmyaro/holo-web
A CSS library that imitates the Android Holo themes. If you are looking for a similar library for Material Design, try https://MaterialZ.dev.
https://github.com/zmyaro/holo-web
Last synced: 3 months ago
JSON representation
A CSS library that imitates the Android Holo themes. If you are looking for a similar library for Material Design, try https://MaterialZ.dev.
- Host: GitHub
- URL: https://github.com/zmyaro/holo-web
- Owner: ZMYaro
- License: mit
- Created: 2012-04-17T02:59:53.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2022-10-20T15:13:31.000Z (about 2 years ago)
- Last Synced: 2024-05-08T10:32:30.996Z (6 months ago)
- Language: CSS
- Homepage: https://holo.zmyaro.com
- Size: 921 KB
- Stars: 108
- Watchers: 9
- Forks: 25
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
- Awesome-CSS-Resources - holo-web:
README
# 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 `` element with the class `holo-actionBar`: `` (use a `` 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](http://google.com/fonts#UsePlace:use/Collection:Roboto).
## 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](http://git-scm.com/book/ch5-2.html#Commit-Guidelines).