mc

mdl-compat

Makes Material Design Lite work on iPhone and iPad.

Showing:

Popularity

Downloads/wk

4

GitHub Stars

4

Maintenance

Last Commit

5yrs ago

Contributors

1

Package

Dependencies

0

Size (min+gzip)

0.7KB

License

Apache-2.0

Type Definitions

Tree-Shakeable

No?

Categories

Readme

Make MDL work on iPhone and iPad

Build Status Dependency Status devDependency Status NPM version

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100