https://github.com/mchalapuk/mdl-compat
Makes Material Design Lite work on iPhone and iPad.
https://github.com/mchalapuk/mdl-compat
Last synced: 4 months ago
JSON representation
Makes Material Design Lite work on iPhone and iPad.
- Host: GitHub
- URL: https://github.com/mchalapuk/mdl-compat
- Owner: mchalapuk
- License: apache-2.0
- Created: 2015-09-02T21:55:32.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2016-11-28T03:43:41.000Z (about 9 years ago)
- Last Synced: 2025-01-17T08:45:52.111Z (11 months ago)
- Language: CSS
- Homepage:
- Size: 33.2 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[travis-url]: http://travis-ci.org/muroc/mdl-compat
[travis-image]: https://secure.travis-ci.org/muroc/mdl-compat.png?branch=master
[david-url]: https://david-dm.org/muroc/mdl-compat
[david-image]: https://david-dm.org/muroc/mdl-compat.svg
[david-url-dev]: https://david-dm.org/muroc/mdl-compat?type=dev
[david-image-dev]: https://david-dm.org/muroc/mdl-compat/dev-status.svg
[npm-url]: https://npmjs.org/package/mdl-compat
[npm-image]: https://badge.fury.io/js/mdl-compat.svg
# Make MDL work on iPhone and iPad
[![Build Status][travis-image]][travis-url]
[![Dependency Status][david-image]][david-url]
[![devDependency Status][david-image-dev]][david-url-dev]
[![NPM version][npm-image]][npm-url]
[MDL][mdl] is a fine alternative to [Twitter Bootstrap][bootstrap].
It is compatible with browsers that (at least partially) implement [HTML5][html5].
This package is aimed at making MDL compatible with older browsers, espacially with Safari
on older iPhones and iPads.
[mdl]: http://www.getmdl.io
[bootstrap]: http://getbootstrap.com/
[html5]: http://www.w3.org/html/wg/drafts/html/master/
Package contains:
* Prefixed (cross-browser) CSS3 properties for MDL components,
* A polyfill for MDL grid for old browsers,
* Required JS and DOM polyfills (as bower dependencies).
## Getting the code
Preferred way to get mdl-compat is to use [bower](http://bower.io/).
```shell
bower install mdl-compat --save
```
Or use [npm](https://www.npmjs.com/) (when using [browserify](
https://github.com/substack/node-browserify)):
```shell
npm install mdl-compat --save
```
## Usage
### MDL Components
To add cross-browser styles for MDL components, just import mdl-compat to your main
[Sass](http://sass-lang.com/) file.
```sass
@import 'bower\_components/mdl-compat/src/_mdl-compat.scss';
```
...or link compiled CSS into your HTML.
```html
```
### MDL Grid
On all browsers that do not implement `flex-wrap` property (or any of it's prefixed versions)
a JavaScript polyfill is required for MDL grid to work properly.
```html
```
When using [browserify](https://github.com/substack/node-browserify) module exports
a loader function that must be applied on a window object.
```javascript
var loadMdlCompat = require('mdl-compat');
// TODO polyfills must be loaded first
window.addEventlistener('load', loadMdlCompat.bind(null, window));
```
## Contributing
This project contains styles for components that I used un my projects so far. Further components
will be covered when needed. Flexbox-related mixins can be found in `src/internal/_mixins.scss`.
Pull requests are very welcome!
## License
[Apache License 2.0](LICENSE)