166 lines
3.9 KiB
Markdown
166 lines
3.9 KiB
Markdown
|
# Material Design CSS Framework
|
||
|
|
||
|
[![MUI](https://www.muicss.com/static/favicons/icon-192x192.png)](https://www.muicss.com)
|
||
|
|
||
|
MUI is a lightweight CSS framework that follows Google's Material Design guidelines.
|
||
|
|
||
|
[![Join the chat at https://gitter.im/muicss/mui](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/muicss/mui?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
|
||
|
[![Build Status](https://travis-ci.org/muicss/mui.svg?branch=master)](https://travis-ci.org/muicss/mui)
|
||
|
[![Dependency Status](https://david-dm.org/muicss/mui.svg)](https://david-dm.org/muicss/mui)
|
||
|
[![devDependency Status](https://david-dm.org/muicss/mui/dev-status.svg)](https://david-dm.org/muicss/mui#info=devDependencies)
|
||
|
|
||
|
**Use From the CDN:**
|
||
|
|
||
|
```html
|
||
|
<link href="//cdn.muicss.com/mui-0.5.9/css/mui.min.css" rel="stylesheet" type="text/css" />
|
||
|
<script src="//cdn.muicss.com/mui-0.5.9/js/mui.min.js"></script>
|
||
|
```
|
||
|
|
||
|
Or for development you can use the latest:
|
||
|
|
||
|
```html
|
||
|
<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:**
|
||
|
|
||
|
```shell
|
||
|
$ npm install --save-dev muicss
|
||
|
```
|
||
|
|
||
|
Read more: https://www.npmjs.com/package/muicss
|
||
|
|
||
|
**Install with Bower:**
|
||
|
|
||
|
```shell
|
||
|
$ 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:
|
||
|
|
||
|
* 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](https://www.muicss.com) to see examples and download boilerplate HTML.
|
||
|
|
||
|
## Browser Support
|
||
|
|
||
|
MUI is tested and works in:
|
||
|
|
||
|
* IE10+
|
||
|
* Latest Stable: Firefox, Chrome, Safari
|
||
|
* iOS 6+
|
||
|
|
||
|
## Development Quickstart
|
||
|
|
||
|
1. Install dependencies
|
||
|
|
||
|
* nodejs (http://nodejs.org/)
|
||
|
* npm (https://www.npmjs.org/)
|
||
|
* sass (http://sass-lang.com/)
|
||
|
* http-server (via npm)
|
||
|
|
||
|
1. Clone repository
|
||
|
|
||
|
```bash
|
||
|
$ git clone git@github.com:muicss/mui.git
|
||
|
$ cd mui
|
||
|
```
|
||
|
|
||
|
1. Install node dependencies using npm
|
||
|
|
||
|
```bash
|
||
|
$ npm install
|
||
|
```
|
||
|
|
||
|
1. Build examples
|
||
|
|
||
|
```bash
|
||
|
$ ./node_modules/.bin/gulp examples:build
|
||
|
```
|
||
|
|
||
|
To view the examples you can use any static file server. To use the nodejs `http-server` module:
|
||
|
|
||
|
```bash
|
||
|
$ npm install http-server
|
||
|
$ ./node_modules/.bin/http-server -p 3000
|
||
|
```
|
||
|
|
||
|
Then visit http://localhost:3000/examples
|
||
|
|
||
|
## Run tests
|
||
|
|
||
|
### Unit tests
|
||
|
|
||
|
To run the unit tests from the command line, run 'npm test':
|
||
|
|
||
|
```bash
|
||
|
$ npm test
|
||
|
```
|
||
|
|
||
|
### E2E tests
|
||
|
|
||
|
To run the E2E tests first compile the unit test files into a version that runs in the browser:
|
||
|
|
||
|
```bash
|
||
|
$ ./node_modules/.bin/gulp e2e-tests:build
|
||
|
```
|
||
|
|
||
|
Then visit http://localhost:3000/e2e-tests
|
||
|
|
||
|
## Build Packages
|
||
|
|
||
|
### CDN
|
||
|
|
||
|
```bash
|
||
|
$ ./node_modules/.bin/gulp cdn:build
|
||
|
```
|
||
|
|
||
|
The build will be located in the `packages/cdn` directory:
|
||
|
|
||
|
<pre>
|
||
|
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
|
||
|
</pre>
|
||
|
|
||
|
### NPM
|
||
|
|
||
|
```bash
|
||
|
$ ./node_modules/.bin/gulp npm:build
|
||
|
```
|
||
|
|
||
|
The NPM package is located in the `packages/npm` directory.
|
||
|
|
||
|
### Meteor
|
||
|
|
||
|
```bash
|
||
|
$ ./node_modules/.bin/gulp meteor:build
|
||
|
```
|
||
|
|
||
|
The Meteor package is located in the `packages/meteor` directory.
|