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

Quickstart

You can copy-paste this boilerplate HTML to get started using MUI:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- load MUI -->
    <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>
  </head>
  <body>
    <!-- example content -->
    <div class="mui-container">
      <div class="mui-panel">
        <h1>My Title</h1>
        <button class="mui-btn mui-btn--primary mui-btn--raised">My Button</button>
      </div>
    </div>
  </body>
</html>
Learn more

Package Layout

The MUI package includes all the necessary code to use MUI components on the web and over email. In addition, we're working on React and WebComponents libraries to give developers more flexibility on the web.

mui-0.10.3/
├── 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
│   ├── mui-rem.css
│   ├── mui-rem.min.css
│   ├── mui-rem-rtl.css
│   └── mui-rem-rtl.min.css
├── js
│   ├── mui.js
│   └── mui.min.js
├── react
│   ├── mui-react.js
│   └── mui-react.min.js
└── webcomponents
    ├── mui-webcomponents.js
    └── mui-webcomponents.min.js

Features

Small Footprint

MUI has a small download size to help pages load as quickly as possible:

  • mui.min.css - 6.6KB (gzipped)
  • mui.min.js - 5.4KB (gzipped)

Customizable

The MUI CSS can be easily customized by using the SASS files available on GitHub and via Bower. Customize breakpoints, font-settings and use Material Design colors.

No Dependencies

MUI CSS/JS has no external dependencies

Cross-Platform

The MUI project is committed to building a set of components that work across platforms from web to mobile to email to iOS to Android.

HTML Email

To help with HTML emails, MUI includes an email CSS library that can be used with an inliner.

Acknowledgements

MUI is heavily influenced by Bootstrap, Polymer, and Ink as well as some of the popular Material Design frameworks (Materialize, Material-Bootstrap, Material UI). To encourage developers to hack on MUI, the source code for MUI is open-source under an MIT license.

Help Wanted

MUI is a work in progress and we're looking for engineers and designers to help make MUI better, faster, smaller and more developer friendly. In particular we're looking for help with the following:

  • UI/UX
  • ReactJS
  • WebComponents
  • iOS
  • Android

If you want to get involved send us an email (contact@muicss.com) or issue a pull-request on Github!