zmyaro / holo-web Goto Github PK

A CSS library that imitates the Android Holo themes. If you are looking for a similar library for Material Design, try https://MaterialZ.dev.

Home Page: https://holo.zmyaro.com

License: MIT License

CSS 82.99% JavaScript 1.70% HTML 15.31%

holo-web's Introduction

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.

holo-web's People

Contributors

Stargazers

Watchers

holo-web's Issues

implement tablet style views

It would be nice is tablet style views were supported.
Example: menu selection on the left and details on the right
http://2.bp.blogspot.com/-szcfOZCfa3g/UNx90DNFCwI/AAAAAAACxe0/cGHw3CzLBmU/s1600/tablet_01.png

Your README seems to be broken

Hey, I can't trust in a CSS that has an ugly README. You should add some pictures in addition to the website.
It's the only thing.
Thanks

Range sliders and progress bars are very broken in Opera

Lower priority since Opera is switching to WebKit, but worth improving if possible since not everyone will update right away.

Radio buttons and checkboxes are only properly themed in WebKit

Gecko (FF, SeaMonkey) is a lost cause for now, but Presto (Opera) could potentially be improved. Also need to look into what is possible in IE10.

Implement `holo-dialog`

This should be the basic dialog container. Content can be added with other elements and widgets.

Carriage returns in source files (^M/CR)

I just noticed from a git diff (not limited to this file):

+++ b/platforms/android/assets/www/css/holo-base-widgets.css
@@ -0,0 +1,99 @@
+body {^M
+       padding-top:44px;^M
+       padding-bottom:44px;^M
+}^M
+^M
+.actionBar, .holo-actionBar { /* the top action bar should be a <header> element */^M
+       display: block;^M
+       -webkit-box-sizing: border-box;^M
+          -moz-box-sizing: border-box;^M
+               box-sizing: border-box;^M
+       position: fixed;^M
+       top: 0px;^M
...

This can easily be fixed with a simple search+replace in nano or sed

Text fields have not been implemented

There is currently no styling for Holo text fields

Add old WebKit radial gradient syntax

Older versions of the stock Android browser do not support the newer radial-gradient syntax.

Implement `holo-list`

This should be a <ul> or <ol> in which all the <li>s get styled like menu items. Nothing is pressable by default, but <button>s inside the <li>s get styled like the pressable parts of menu items (with the backgrounds and borders stripped, like a .holo-actionBar > button.