Skip to content

Commit

Permalink
Update readme to CommonMark and fix typos
Browse files Browse the repository at this point in the history
  • Loading branch information
ZMYaro authored Jan 20, 2021
1 parent 8f385f4 commit 548c1c6
Showing 1 changed file with 12 additions and 12 deletions.
24 changes: 12 additions & 12 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
#MaterialZ
# MaterialZ

MaterialZ is a CSS library that implements [Google's Material Design guidelines](http://google.com/design) in plain CSS.


##Material-ize your site
## Material-ize your site
If you want Material-/Paper-themed HTML elements on your page, you just need to include “material-elements.css”, which styles most basic HTML elements.

[See examples and code snippets at materialz.zmyaro.com/#elements →](https://materialz.zmyaro.com/#elements)

##Add Material widgets
## Add Material widgets
You can use widgets such as action bars, lists, and cards by adding “material-widgets.css” and specifying classes:
* To add a top app bar, add an element with the `appBar` class (e.g., `<header class="appBar">`).
* To add a toolbar, add an element with `role="toolbar"` class (e.g., `<div role="toolbar">`). Toolbar buttons are flat and circular by dfault.
* To add a toolbar, add an element with `role="toolbar"` class (e.g., `<div role="toolbar">`). Toolbar buttons are flat and circular by default.
- An Android action bar is frequently just an app bar with toolbar buttons - `<header class="appBar" role="toolbar">`.
* To add a list, add a `<ul>` or `<ol>` element with the class `list` (e.g., `<ul class="list">`).
* To add a card, add the `card` class to an element. You may wish to use the depth classes to "raise" the card as well (see below).
Expand All @@ -20,27 +20,27 @@ Note: adding the widgets stylesheet will automatically add padding to the `body`

[See examples and code snippets at materialz.zmyaro.com/#widgets →](https://materialz.zmyaro.com/#widgets)

##Add depth
## Add depth
You can add shadows to elements with classes `z1`-`z5`. These are best used with `<button>`s (e.g., `<button class="z1">` for a raised button), `.card`s (e.g., `<div class="card z2">`), and `.appBar`s (e.g., `<header class="appBar z3">`).

[See examples and code snippets at materialz.zmyaro.com/#depth →](https://materialz.zmyaro.com/#depth)

##Make it work on older mobile browsers
## Make it work on older mobile browsers
One great use of MaterialZ is to make mobile web sites look like native Android 5+ apps. MaterialZ 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 “material-touch.js” file.
* Add a script tag to your page: `<script type="text/javascript" src="material-touch.js"></script>`.

##Make it work a little better in older desktop browsers
## Make it work a little better in older desktop browsers
You can add the `fix-*.css` stylesheets to fix certain issues ith older browsers, such as IE < 9 and Safari < 6, if you need to support those, however you should only load those stylesheets in those browsers, as they include overrides for better styles used in newer browsers.

##The Roboto Font
material-elements.css imports basic Roboto and Roboto Mono by default. If you need more weights or character sets, you can load them through [Google Web Fonts](https://fonts.google.com/specimen/Roboto.
## The Roboto Font
material-elements.css imports basic Roboto and Roboto Mono by default. If you need more weights or character sets, you can load them through [Google Web Fonts](https://fonts.google.com/specimen/Roboto).

##Known issues
* Certain form elements (checkboxes, radio buttons) are only properly themed in WebKit-derived browsers (e.g. Safari, Chrome) and newer versions of Firefox and partially themed in Presto (older Opera) and the latest versions of Trident/EdgeHTML (IE10+, Edge).
## Known issues
* Certain form elements (checkboxes, radio buttons) are only properly themed in WebKit-derived browsers (e.g. Safari, Chrome, new Edge, newer Opera) and newer versions of Firefox and partially themed in Presto (older Opera) and the latest versions of Trident/EdgeHTML (IE10+, Edge Legacy).
* 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 MaterialZ
## Contributing to MaterialZ
Contributions to this project are welcome. Please follow standard [commit guidelines](http://git-scm.com/book/ch5-2.html#Commit-Guidelines).

0 comments on commit 548c1c6

Please sign in to comment.