Make MDL work on iPhone and iPad

MDL is a fine alternative to Twitter Bootstrap. It is compatible with browsers that (at least partially) implement HTML5. This package is aimed at making MDL compatible with older browsers, espacially with Safari on older iPhones and iPads.

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.

bower install mdl-compat --save

Or use npm (when using browserify):

npm install mdl-compat --save

Usage

MDL Components

To add cross-browser styles for MDL components, just import mdl-compat to your main Sass file.

@import 'bower\_components/mdl-compat/src/_mdl-compat.scss';

...or link compiled CSS into your HTML.

<link href="bower_components/mdl-compat/dist/mdl-compat.min.css" rel="stylesheet">

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.

<script src="bower_components/js-polyfills/polyfill.js"
    type="text/javascript"></script>
<script src="bower_components/js-polyfills/dom.js"
    type="text/javascript"></script>
<script src="bower_components/media-match/media.match.js"
    type="text/javascript"></script>
<!-- mdl-compat.js must be loaded after JS and DOM polyfills -->
<script src="bower_components/mdl-compat/dist/mdl-compat.min.js"
    type="text/javascript"></script>

When using browserify module exports a loader function that must be applied on a window object.

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