Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/muicss/mui

Lightweight CSS framework
https://github.com/muicss/mui

css-framework google-material javascript lightweight-css-framework material meteor mui nodejs

Last synced: 3 days ago
JSON representation

Lightweight CSS framework

Host: GitHub
URL: https://github.com/muicss/mui
Owner: muicss
License: other
Created: 2015-02-15T17:30:26.000Z (almost 10 years ago)
Default Branch: master
Last Pushed: 2021-08-23T07:53:31.000Z (over 3 years ago)
Last Synced: 2025-01-01T18:05:40.043Z (10 days ago)
Topics: css-framework, google-material, javascript, lightweight-css-framework, material, meteor, mui, nodejs
Language: JavaScript
Homepage: https://www.muicss.com
Size: 17.3 MB
Stars: 4,511
Watchers: 169
Forks: 426
Open Issues: 77
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE.txt

Awesome Lists containing this project

awesome-material - mui
awesome-material-design - MUICSS - Lightweight Material framework, frequently updated (CSS and JS / Frameworks CSS JS)
Awesome-CSS-Resources - mui:
fucking-awesome-css-frameworks - Repo
awesome-css-frameworks - Repo
starred-awesome - mui - Lightweight CSS framework (JavaScript)

README

# 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?type=dev)
[![CDNJS](https://img.shields.io/cdnjs/v/muicss.svg)](https://cdnjs.com/libraries/muicss)
[![Greenkeeper badge](https://badges.greenkeeper.io/muicss/mui.svg)](https://greenkeeper.io/)
[![Gitpod Ready-to-Code](https://img.shields.io/badge/Gitpod-Ready--to--Code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/muicss/mui)

**Use From the CDN:**

```html

```

Or for development you can use the latest:

```html

```

**Install with NPM:**

```shell
$ npm install --save 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 [email protected]:muicss/mui.git
$ cd mui
```

1. Install node dependencies using npm

```bash
$ npm install
```

1. Build examples

```bash
$ npm run build-examples
```

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

```bash
$ 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](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/from-referrer/)

## 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
$ npm run build-e2e-tests
```

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

## Build Packages

### CDN

```bash
$ npm run build-cdn
```

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


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

### NPM

```bash
$ npm run build-npm
```

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

### Meteor

```bash
$ npm run build-meteor
```

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