Home

Awesome

Material Design CSS Framework

MUI

MUI is a lightweight CSS framework that follows Google's Material Design guidelines.

Join the chat at https://gitter.im/muicss/mui Build Status Dependency Status devDependency Status CDNJS Greenkeeper badge Gitpod Ready-to-Code

Use From the CDN:

<link href="//cdn.muicss.com/mui-0.10.3/css/mui.min.css" rel="stylesheet" type="text/css" />
<script src="//cdn.muicss.com/mui-0.10.3/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 muicss

Read more: https://www.npmjs.com/package/muicss

Install with Bower:

$ bower install mui

Features

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:

To get started using MUI, go to the MUI website to see examples and download boilerplate HTML.

Browser Support

MUI is tested and works in:

Development Quickstart

  1. Install dependencies
  1. Clone repository

    $ git clone git@github.com:muicss/mui.git
    $ cd mui
    
  2. Install node dependencies using npm

    $ npm install
    
  3. Build examples

    $ npm run build-examples
    

    To view the examples you can use any static file server. To use the nodejs http-server module:

    $ npm install http-server
    $ npm run http-server -- -p 3000
    

    Then visit http://localhost:3000/examples

Alternatively, you can use a pre-configured development environment on GitPod:

Open in Gitpod

Run tests

Unit tests

To run the unit tests from the command line, run 'npm test':

$ npm test

E2E tests

To run the E2E tests first compile the unit test files into a version that runs in the browser:

$ npm run build-e2e-tests

Then visit http://localhost:3000/e2e-tests

Build Packages

CDN

$ npm run build-cdn

The build will be located in the packages/cdn directory:

<pre> cdn/ ├── angular │   ├── mui-angular.js │   └── mui-angular.min.js ├── css │   ├── mui.css │   ├── mui.min.css │   ├── mui-rtl.css │   └── mui-rtl.min.css ├── email │   ├── mui-email-inline.css │   ├── mui-email-inline-rtl.css │   ├── mui-email-styletag.css │   └── mui-email-styletag-rtl.css ├── extra │   ├── mui-angular-combined.js │   ├── mui-angular-combined.min.js │   ├── mui-colors.css │   ├── mui-colors.min.css │   ├── mui-combined.js │   ├── mui-combined.min.js │   ├── mui-noglobals.css │   ├── mui-noglobals.min.css │   ├── mui-noglobals-rtl.css │   ├── mui-noglobals-rtl.min.css │   ├── mui-react-combined.js │   └── mui-react-combined.min.js ├── js │   ├── mui.js │   └── mui.min.js ├── react │   ├── mui-react.js │   └── mui-react.min.js └── webcomponents ├── mui-webcomponents.js └── mui-webcomponents.min.js </pre>

NPM

$ npm run build-npm

The NPM package is located in the packages/npm directory.

Meteor

$ npm run build-meteor

The Meteor package is located in the packages/meteor directory.