{"id":16603015,"url":"https://github.com/mchalapuk/mdl-compat","last_synced_at":"2026-05-29T12:01:22.314Z","repository":{"id":57293597,"uuid":"41829691","full_name":"mchalapuk/mdl-compat","owner":"mchalapuk","description":"Makes Material Design Lite work on iPhone and iPad.","archived":false,"fork":false,"pushed_at":"2016-11-28T03:43:41.000Z","size":34,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-05-19T10:43:12.980Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mchalapuk.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-09-02T21:55:32.000Z","updated_at":"2017-11-13T23:11:07.000Z","dependencies_parsed_at":"2022-08-27T12:21:19.071Z","dependency_job_id":null,"html_url":"https://github.com/mchalapuk/mdl-compat","commit_stats":null,"previous_names":["webfront-toolkit/mdl-compat","md-extensions/mdl-compat"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/mchalapuk/mdl-compat","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mchalapuk%2Fmdl-compat","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mchalapuk%2Fmdl-compat/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mchalapuk%2Fmdl-compat/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mchalapuk%2Fmdl-compat/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mchalapuk","download_url":"https://codeload.github.com/mchalapuk/mdl-compat/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mchalapuk%2Fmdl-compat/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33650712,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-05-29T02:00:06.066Z","response_time":107,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-12T00:46:34.827Z","updated_at":"2026-05-29T12:01:22.253Z","avatar_url":"https://github.com/mchalapuk.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"[travis-url]: http://travis-ci.org/muroc/mdl-compat\n[travis-image]: https://secure.travis-ci.org/muroc/mdl-compat.png?branch=master\n\n[david-url]: https://david-dm.org/muroc/mdl-compat\n[david-image]: https://david-dm.org/muroc/mdl-compat.svg\n\n[david-url-dev]: https://david-dm.org/muroc/mdl-compat?type=dev\n[david-image-dev]: https://david-dm.org/muroc/mdl-compat/dev-status.svg\n\n[npm-url]: https://npmjs.org/package/mdl-compat\n[npm-image]: https://badge.fury.io/js/mdl-compat.svg\n\n# Make MDL work on iPhone and iPad\n\n[![Build Status][travis-image]][travis-url]\n[![Dependency Status][david-image]][david-url]\n[![devDependency Status][david-image-dev]][david-url-dev]\n[![NPM version][npm-image]][npm-url]\n\n[MDL][mdl] is a fine alternative to [Twitter Bootstrap][bootstrap].\nIt is compatible with browsers that (at least partially) implement [HTML5][html5].\nThis package is aimed at making MDL compatible with older browsers, espacially with Safari\non older iPhones and iPads.\n\n[mdl]: http://www.getmdl.io\n[bootstrap]: http://getbootstrap.com/\n[html5]: http://www.w3.org/html/wg/drafts/html/master/\n\nPackage contains:\n\n * Prefixed (cross-browser) CSS3 properties for MDL components,\n * A polyfill for MDL grid for old browsers,\n * Required JS and DOM polyfills (as bower dependencies).\n\n## Getting the code\n\nPreferred way to get mdl-compat is to use [bower](http://bower.io/).\n```shell\nbower install mdl-compat --save\n```\n\nOr use [npm](https://www.npmjs.com/) (when using [browserify](\nhttps://github.com/substack/node-browserify)):\n```shell\nnpm install mdl-compat --save\n```\n\n## Usage\n\n### MDL Components\n\nTo add cross-browser styles for MDL components, just import mdl-compat to your main\n[Sass](http://sass-lang.com/) file.\n\n```sass\n@import 'bower\\_components/mdl-compat/src/_mdl-compat.scss';\n```\n\n...or link compiled CSS into your HTML.\n\n```html\n\u003clink href=\"bower_components/mdl-compat/dist/mdl-compat.min.css\" rel=\"stylesheet\"\u003e\n```\n\n### MDL Grid\n\nOn all browsers that do not implement `flex-wrap` property (or any of it's prefixed versions)\na JavaScript polyfill is required for MDL grid to work properly.\n\n```html\n\u003cscript src=\"bower_components/js-polyfills/polyfill.js\"\n    type=\"text/javascript\"\u003e\u003c/script\u003e\n\u003cscript src=\"bower_components/js-polyfills/dom.js\"\n    type=\"text/javascript\"\u003e\u003c/script\u003e\n\u003cscript src=\"bower_components/media-match/media.match.js\"\n    type=\"text/javascript\"\u003e\u003c/script\u003e\n\u003c!-- mdl-compat.js must be loaded after JS and DOM polyfills --\u003e\n\u003cscript src=\"bower_components/mdl-compat/dist/mdl-compat.min.js\"\n    type=\"text/javascript\"\u003e\u003c/script\u003e\n```\n\nWhen using [browserify](https://github.com/substack/node-browserify) module exports\na loader function that must be applied on a window object.\n\n```javascript\nvar loadMdlCompat = require('mdl-compat');\n// TODO polyfills must be loaded first\nwindow.addEventlistener('load', loadMdlCompat.bind(null, window));\n```\n\n## Contributing\n\nThis project contains styles for components that I used un my projects so far. Further components\nwill be covered when needed. Flexbox-related mixins can be found in `src/internal/_mixins.scss`.\nPull requests are very welcome!\n\n## License\n\n[Apache License 2.0](LICENSE)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmchalapuk%2Fmdl-compat","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmchalapuk%2Fmdl-compat","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmchalapuk%2Fmdl-compat/lists"}