MUI is a lightweight CSS framework that follows Google's Material Design guidelines.
Use From the CDN:
<link href="//cdn.muicss.com/mui-0.6.6/css/mui.min.css" rel="stylesheet" type="text/css" />
<script src="//cdn.muicss.com/mui-0.6.6/js/mui.min.js"></script>
Or for development you can use the latest:
<link href="//cdn.muicss.com/mui-latest/css/mui.min.css" rel="stylesheet" type="text/css" />
<script src="//cdn.muicss.com/mui-latest/js/mui.min.js"></script>
Install with NPM:
$ npm install --save-dev muicss
Read more: https://www.npmjs.com/package/muicss
Install with Bower:
$ bower install mui
MUI is designed from the ground up to be fast, small and developer friendly. By design it only includes the basic components you need to build a site that follows Google's Material Design guidelines. Some of the key features of MUI are:
- Small footprint: mui.min.css - 6.6K, mui.min.js - 5.4K (gzipped)
- A responsive grid to make mobile-friendly sites
- No external dependencies
- CSS library that can be customized with your own colors
- JS library can be loaded asyncronously
- Email library for styling HTML emails
To get started using MUI, go to the MUI website to see examples and download boilerplate HTML.
MUI is tested and works in:
- IE10+
- Latest Stable: Firefox, Chrome, Safari
- iOS 6+
- Install dependencies
- nodejs (http://nodejs.org/)
- npm (https://www.npmjs.org/)
- sass (http://sass-lang.com/)
- http-server (via npm)
-
Clone repository
$ git clone [email protected]:muicss/mui.git $ cd mui
-
Install node dependencies using npm
$ npm install
-
Build examples
$ ./node_modules/.bin/gulp examples:build
To view the examples you can use any static file server. To use the nodejs
http-server
module:$ npm install http-server $ ./node_modules/.bin/http-server -p 3000
Then visit http://localhost:3000/examples
To run the unit tests from the command line, run 'npm test':
$ npm test
To run the E2E tests first compile the unit test files into a version that runs in the browser:
$ ./node_modules/.bin/gulp e2e-tests:build
Then visit http://localhost:3000/e2e-tests
$ ./node_modules/.bin/gulp cdn:build
The build will be located in the packages/cdn
directory:
cdn/ ├── css │ ├── mui.css │ ├── mui.min.css ├── js │ ├── mui.js │ └── mui.min.js ├── email │ ├── mui-email-inline.css | └── mui-email-styletag.css ├── react │ ├── mui-react.js │ └── mui-react.min.js └── webcomponents | ├── mui-webcomponents.js | └── mui-webcomponents.min.js └── extra ├── mui-colors.css ├── mui-combined.js └── mui-react-combined.js
$ ./node_modules/.bin/gulp npm:build
The NPM package is located in the packages/npm
directory.
$ ./node_modules/.bin/gulp meteor:build
The Meteor package is located in the packages/meteor
directory.