Overview

To use MUI, simply add these CSS and JS files to your HTML document:

<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>

The MUI CSS stylesheet defines helper classes that can be used for layouts and UI components such as buttons and forms. The MUI JS file automatically detects when MUI HTML is inserted into the DOM and augments interactive elements such as buttons, forms and dropdowns. You can find a list of all available MUI elements along with HTML examples in this documentation.

HTML5 Boilerplate

MUI already includes Normalize.css so you can use MUI CSS as the base stylesheet in your project. To get started use this HTML document: 

<!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">
    <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>
    <!--

    content goes here

    -->
  </body>
</html>

Dynamic Components

In order to make the framework easy to work with, MUI uses CSS3 features to detect when MUI components are added to the DOM and automatically attaches event handlers. Here's an example of a dynamically created button that supports the ripple effect automatically:

<!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>
    <script>
      window.addEventListener('load', function() {
        // add button dynamically
        var buttonEl = document.createElement('button');
        buttonEl.className = 'mui-btn mui-btn--primary mui-btn--raised';
        buttonEl.innerHTML = 'My dynamic button';
        document.body.appendChild(buttonEl);
      });
    </script>
  </head>
  <body>
  </body>
</html>

Custom Font Example

In order to give developers full control over deployment, MUI doesn't use @imports or download any external files. Therefore if you want to use Google's Roboto font (or any other custom font) you have to add it explicitly to the page and configure it via CSS. When you install a custom font make sure to install fonts for the following font weights that are used by MUI: 300, 400, 500, 700.

The following HTML can be used to set up MUI and Google's Roboto font:

<!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 custom font -->
    <link href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet" type="text/css" />
    <!-- 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>
    <!-- custom font css -->
    <style>
      body {
        font-family: "Roboto", "Helvetica Neue", Helvetica, Arial;
      }
    </style>
  </head>
  <body>
    <!-- content goes here -->
    <h1>Domo arigato, Mr. Roboto</h1>
  </body>
</html>

Icon Font Example

Icon fonts are a great way to add icons to web pages. Although MUI doesn't include any icon fonts by default it's easy to use one of the many open source font icon packages. Here's an example of page that uses Font Awesome:

<!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 icon font -->
    <link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- 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>
    <!-- content goes here -->
    <i class="fa fa-globe"></i> Hello, world!
  </body>
</html>
« Previous Next »