Lightweight CSS framework

Overview

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:

  • 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 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
  1. Clone repository

    $ git clone [email protected]: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:

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

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

Issues
  • Float label not detecting autocomplete from chrome

    Float label not detecting autocomplete from chrome

    I used the float label input for username and password. When the page is loaded in chrome it is autofilled and for the password field, the float label overlaps the autofilled password.

    screen shot 2016-09-06 at 16 17 04

    bug help wanted priority: high 
    opened by randomcatgamer 39
  • mui-angular version

    mui-angular version

    Hi amorey, Do you have any plans to develop angular version of mui in the near future?

    opened by ghostpanda 36
  • Proposal: Use data-attributes instead of classes

    Proposal: Use data-attributes instead of classes

    Hi Everyone,

    In some cases, using HTML classes to markup components feels awkward. One option is to use data-attributes instead. Here are some examples of what MUI markup would look like with data-attributes instead of classes:

    Button colors

    Classes:

    <button class="mui-btn mui-btn-default">Button</button>
    <button class="mui-btn mui-btn-primary">Button</button>
    

    Data-attributes:

    <button class="mui-btn" data-mui-color="default">Button</button>
    <button class="mui-btn" data-mui-color="primary">Button</button>
    

    Button styles

    Classes:

    <button class="mui-btn mui-btn-default mui-btn-raised">Button</button>
    <button class="mui-btn mui-btn-default mui-btn-flat">Button</button>
    

    Data-attributes:

    <button class="mui-btn" data-mui-color="default" data-mui-style="raised">Button</button>
    <button class="mui-btn" data-mui-color="default" data-mui-style="flat">Button</button>
    

    Let me know your thoughts on data-attributes syntax!

    Andres

    question 
    opened by amorey 26
  • InputText value & defaultValue Problem.

    InputText value & defaultValue Problem.

    Summary: value attr should be taken from state. I am planning to change it that way and implement componentShouldUpdate

    Here is the scenario. I have a grid.

    1. Selection + Edit button renders a form.
    2. Form must be rendered with the values from selection.
    3. Form must be able to re-render it self if we do 1st step again (change selection & click edit)
    4. Form values must be editable after render.

    So as a know , defaultValue renders only for the first time. So if I set selected values to defaultValue attr it will not be rendered again after selection changes. value attr renders everytime so it will be updated after my new selection but it is becoming editable=false by the nature of the React. I added onChange props to the component, it is not throwing any warning log also it is not reflecting by value change to the field. So only solution is to render form on every onChange.

    handleChange = (code,event)=> {
            console.log(event);
            var state = {};
            state[code] = event.target.value;
            this.setState(state);
    };
    

    Here is the ss for better explaining what I did. screen shot 2016-02-04 at 15 56 26

    opened by serayuzgur 24
  • Which files need to be hosted?

    Which files need to be hosted?

    Hello @amorey , I am the member of cdnjs project. We want to host this library. But there is a question want to ask. I want to confirm with you about the main file need to be grab on npm. I found that there are both mui.js and mui.css on github. So I think the main files which is needed to be grab are these two files, right? But I just found that mui.css under lib/css/. How about mui.js? Please help me confirm this. Thanks for your help!

    https://github.com/cdnjs/cdnjs/issues/8334

    low hanging fruit priority: high 
    opened by kennynaoh 22
  • Proposal: React Library Spec

    Proposal: React Library Spec

    Hi Everyone,

    We're planning an upgrade to the MUI React library to make it production-ready. Please let us know what you think of this spec:

    Components

    Appbar

    <Appbar/>
    

    Buttons

    <Button/>
      * {String} color=default|primary|danger|accent
      * {String} variant=default|flat|raised|fab
      * {String} size=default|small|large
      * {Boolean} isDisabled=false|true
    

    Caret

    <Caret/>
    

    Container

    <Container/>
      * {Boolean} isFluid=false|true
    

    Dividers

    <Divider/>
    

    Dropdowns

    <Dropdown/>
      * {String} color=default|primary|danger|accent
      * {String} variant=default|flat|raised|fab
      * {String} size=default|small|large
      * {String} label
      * {String} alignMenu=left|right
      * {Function} onClick
      * {Boolean} isDisabled
    
    <DropdownItem/>
      * {String} link
      * {Function} onClick
    

    Forms

    <Form/>
      * {Boolean} isInline=false|true
    
    <TextInput/>
      * {String} type=text|email|password
      * {String} hint
      * {String} label
      * {Boolean} isLabelFloating=false|true
      * {Boolean} isRequired=false|true
    
    <TextareaInput/>
      * {Integer} rows
      * {String} hint
      * {String} label
      * {Boolean} isLabelFloating=false|true
      * {Boolean} isRequired=false|true
    
    <Checkbox/>
      * {String} value
      * {String} label
      * {Boolean} isChecked=false|true
      * {Boolean} isDisabled=false|true
    
    <Radio/>
      * {String} name
      * {String} value
      * {Boolean} isChecked=false|true
      * {Boolean} isDisabled=false|true
    
    <Select/>
      * {String} name
      * {Boolean} isAutofocus=false|true
      * {Boolean} isDisabled=false|true
      * {Boolean} isMultiple=false|true
      * {Boolean} isRequired=false|true
      * {Boolean} useDefault=false|true
      * {Function} onChange
    
    <SelectItem/>
      * {String} value
      * {String} label
    

    Grid

    <Row/>
    
    <Col/>
      * {Integer} xs
      * {Integer} xs-offset
      * {Integer} sm
      * {Integer} sm-offset
      * {Integer} md
      * {Integer} md-offset
      * {Integer} lg
      * {Integer} lg-offset
    

    Panel

    <Panel/>
    

    Tabs

    <Tabs/>
      * {Integer} initialSelectedIndex=0
      * {Boolean} isJustified=false|true
      * {Function} onChange
    
    <Tab/>
      * {String} label
      * {String} value
      * {Function} onActive
    

    CSS Helpers

    <!-- animation -->
    <div className="mui--no-transition"></div>
    
    <!-- alignment -->
    <div className="mui--text-left"></div>
    <div className="mui--text-right"></div>
    <div className="mui--text-center"></div>
    <div className="mui--text-justify"></div>
    <div className="mui--text-nowrap"></div>
    <div className="mui--align-baseline"></div>
    <div className="mui--align-top"></div>
    <div className="mui--align-middle"></div>
    <div className="mui--align-bottom"></div>
    
    <!-- depth helpers -->
    <div className="mui--z1"></div>
    <div className="mui--z2"></div>
    <div className="mui--z3"></div>
    <div className="mui--z4"></div>
    <div className="mui--z5"></div>
    
    <!-- float helpers -->
    <div className="mui--clearfix"></div>
    <div className="mui--pull-right"></div>
    <div className="mui--pull-left"></div>
    
    <!-- toggle helpers -->
    <div className="mui--hide"></div>
    <div className="mui--show"></div>
    <div className="mui--invisible"></div>
    <div className="mui--overflow-hidden"></div>
    
    <!-- responsive utilities -->
    <div className="mui--visible-xs-block"></div>
    <div className="mui--visible-xs-inline"></div>
    <div className="mui--visible-xs-inline-block"></div>
    <div className="mui--visible-sm-block"></div>
    <div className="mui--visible-sm-inline"></div>
    <div className="mui--visible-sm-inline-block"></div>
    <div className="mui--visible-md-block"></div>
    <div className="mui--visible-md-inline"></div>
    <div className="mui--visible-md-inline-block"></div>
    <div className="mui--visible-lg-block"></div>
    <div className="mui--visible-lg-inline"></div>
    <div className="mui--visible-lg-inline-block"></div>
    <div className="mui--hidden-xs"></div>
    <div className="mui--hidden-sm"></div>
    <div className="mui--hidden-md"></div>
    <div className="mui--hidden-lg"></div>
    
    <!-- typograpy -->
    <div className="mui--text-display4"></div>
    <div className="mui--text-display3"></div>
    <div className="mui--text-display2"></div>
    <div className="mui--text-display1"></div>
    <div className="mui--text-headline"></div>
    <div className="mui--text-title"></div>
    <div className="mui--text-subhead"></div>
    <div className="mui--text-body2">Body2</div>
    <div className="mui--text-body1">Body1</div>
    <div className="mui--text-caption">Caption</div>
    <div className="mui--text-menu">Menu</div>
    <div className="mui--text-button">Button</div>
    
    <!-- text color -->
    <div className="mui--text-dark-primary"></div>
    <div className="mui--text-dark-secondary"></div>
    <div className="mui--text-dark-hint"></div>
    
    <div className="mui--text-light-primary"></div>
    <div className="mui--text-light-secondary"></div>
    <div className="mui--text-light-hint"></div>
    
    <div className="mui--text-accent"></div>
    <div className="mui--text-accent-fallback"></div>
    
    <div className="mui--text-danger"></div>
    
    <!-- user select -->
    <div className="mui--no-user-select"></div>
    
    <!-- appbar dimension helpers -->
    <div className="mui--appbar-height"></div>
    <div className="mui--appbar-min-height"></div>
    <div className="mui--appbar-line-height"></div>
    
    <!-- list helpers -->
    <ul className="mui-list--unstyled"></ul>
    <ul className="mui-list--inline"></ul>
    

    JavaScript API

    Overlay

    <script>
      mui.overlay('on'[, <options>[, <childEl>]]);
      mui.overlay('off');
    </script>
    
    question 
    opened by amorey 21
  • Tab events

    Tab events

    Hi,

    I'd like to attach a handler for when a tab is activated (because I have some flot charts that need to be redrawn).

    Is there an existing event that I can attach to?

    thanks

    question 
    opened by igitur 20
  • Angular: <mui-input> validation doesn't work correctly with type=

    Angular: validation doesn't work correctly with type="email"

    It looks like there is a validation issue with email inputs using the <mui-input> directive.

    As you can see in this JSBin, if you type an invalid email, the wrapper div.mui-textfield still has the .ng-valid class while the inner input has .ng-invalid and .ng-invalid-email classes, plus the wrapper has the .ng-empty class while the inner input has an .ng-not-empty class and an .mui--is-empty class. And obviously, the floating label overlaps with the text input content because it thinks it's empty (because that's what the html classes tells!).

    It made me laugh at first, but overall this is a complete mess and a pain to work around in application code. I did take a look at the source code of the directive but found nothing shockingly wrong, so I think the issue has more to do with the way angular input updates bubbles up to the wrapper div.mui-textfield.

    EDIT: I'm not sure how this works, but this line updates the ng-model value but I'm almost certain it's not updating html classes.

    bug priority: high 
    opened by ClementParis016 16
  • Error when DOM node's are removed

    Error when DOM node's are removed

    I'm getting a website breaking error:

    mui.js:1617 Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
    

    It happens when my router removes content from a DOM node and appends new content to the same node.

    opened by Thermatix 15
  • version 0.1.13 doesn't underline form fields

    version 0.1.13 doesn't underline form fields

    behavior was correct in 0.1.12

    bug priority: high 
    opened by ghost 15
  • fix for some other tag in SELECT

    fix for some other tag in SELECT

    such as template

    opened by Funlang 2
  • Dark mode support via automatic CSS media query prefers-color-scheme

    Dark mode support via automatic CSS media query prefers-color-scheme

    Hey,

    all major browsers have supported the prefers-color-scheme CSS media query for over a year now. Would it be a good idea for mui to also support this functionality? In essence the web site would have two themes, a light and a dark, and the end user's browser chooses automatically which one to use based on user preference and/or system settings.

    If this functionality is welcome, any tips on how to implement it?

    opened by tonimelisma 1
  • Outlined text

    Outlined text

    Is there any option to outlined text ? Here is an example Oulined text

    opened by sridhargoshika 1
  • Sass rem generator

    Sass rem generator

    Using @sass-collective/sass-rem for generate REM values.

    :)

    opened by borisdamevin 0
  • How we can update the muicss docs?

    How we can update the muicss docs?

    I wanna update the muicss docs for implementing CSS of muicss in ReactJS. how we can help with docs?

    opened by amerllica 3
  • Update gulp-rtlcss to the latest version 🚀

    Update gulp-rtlcss to the latest version 🚀


    ☝️ Important announcement: Greenkeeper will be saying goodbye 👋 and passing the torch to Snyk on June 3rd, 2020! Find out how to migrate to Snyk and more at greenkeeper.io


    The devDependency gulp-rtlcss was updated from 1.4.0 to 1.4.1.

    This version is not covered by your current version range.

    If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.


    Publisher: jjlharrison License: MIT

    Release Notes for v1.4.1
    Commits

    The new version differs by 5 commits.

    See the full diff


    FAQ and help

    There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


    Your Greenkeeper bot :palm_tree:

    greenkeeper 
    opened by greenkeeper[bot] 0
  • Fix inputRef in Input

    Fix inputRef in Input

    opened by tianhuil 2
  • Update jsdom to the latest version 🚀

    Update jsdom to the latest version 🚀

    The devDependency jsdom was updated from 15.2.1 to 16.0.1.

    This version is not covered by your current version range.

    If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.


    Publisher: domenic License: MIT

    Release Notes for Version 16.0.1
    • Fixed Node v10 and v11 support when runScripts was set.
    • Fixed the behavior when changing an <input>'s type="" attribute.
    • Fixed input validation behavior for <input type="range"> when max="" is less than min="".
    Commits

    The new version differs by 52 commits.

    • afc85c8 Version 16.0.1
    • 6472db4 Fix Node v10 and Node v11 support
    • 16c9856 Improved "expected fail" messages for web platform tests
    • e2dbad8 Add support for reverse range validation
    • 94b40d3 Implement type state switch logic
    • c292572 Add comment about radio button activation muddiness
    • 52109d5 Clean up typeMismatch constraint validation
    • 4a374e5 Clean up _defaultStepBase in
    • 92e9adb Consistently use ._value for constraint validation
    • 11664ca More consistent applicability checking for attributes
    • b097c0a Roll Web Platform Tests
    • d240291 Remove unnecessary dependencies
    • 902b69e Version 16.0.0
    • 020539e Remove document.origin and add window.origin
    • 678141f Use mutability as a measure for valueMissing constraint

    There are 52 commits in total.

    See the full diff


    FAQ and help

    There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


    Your Greenkeeper bot :palm_tree:

    greenkeeper 
    opened by greenkeeper[bot] 0
  • Update gulp-rename to the latest version 🚀

    Update gulp-rename to the latest version 🚀

    The devDependency gulp-rename was updated from 1.4.0 to 2.0.0.

    This version is not covered by your current version range.

    If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.


    Publisher: contra License: MIT

    Find out more about this release.


    FAQ and help

    There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


    Your Greenkeeper bot :palm_tree:

    greenkeeper 
    opened by greenkeeper[bot] 0
  • React Input component crashes when inputRef is used

    React Input component crashes when inputRef is used

    If you use an Input element with inputRef, it clobbers the inputRef passed here resulting in an error being thrown here because this.controlEl is undefined.

    I think there might be a workaround here: https://github.com/facebook/react/issues/13029

    opened by download13 9
Owner
Lightweight CSS framework that follows Google's Material Design guidelines
null
Modular and customizable Material Design UI components for the web

Material Components for the web Material Components for the web helps developers execute Material Design. Developed by a core team of engineers and UX

Material Components 15.8k Oct 13, 2021
Essence - The Essential Material Design Framework

#[Essence] - The Essential Material Design Framework About Essence Essence is a CSS framework that implements the guidelines from Google Material Desi

Evo Forge 416 Oct 13, 2021
React Bootstrap with Material Design - Powerful and free UI KIT

React Bootstrap with Material Design Built with React and Bootstrap 4. Absolutely no jQuery. 400+ material UI elements, 600+ material icons, 74 CSS an

MDBootstrap 1.2k Oct 10, 2021
A frontend framework for building admin SPAs on top of REST services, using React and Material Design.

admin-on-rest A frontend Framework for building admin applications running in the browser on top of REST services, using ES6, React and Material Desig

marmelab 400 Oct 12, 2021
Material design for react, powered by materializecss

react-materialize Material design components for react, powered by materializecss. Install npm install [email protected] npm install react-material

React Materialize 1.4k Oct 18, 2021
Free and Open Source Admin for Tailwind CSS and React based on Google's Material Design.

Material Tailwind Dashboard React Material Tailwind Dashboard React is a free Admin Template based on two popular front-end technologies: Tailwind CSS

Creative Tim 29 Oct 13, 2021
Free React Typescript Admin Dashboard Template built with Material-UI

Tokyo Free White Typescript React Admin Dashboard Free React Typescript Admin Dashboard Template built with Material-UI This free and open source admi

Horia S 27 Oct 8, 2021
Stateless UI components for react that follow material design

Material Components Stateless UI components for react that follow material design. Introduction material-components is a library of React (15.0.0) use

Garth Williams 99 Sep 9, 2021
☄️React Material Admin is a React template built with Material-UI

React Material Admin — Material-UI Dashboard Template

Flatlogic 1.2k Oct 17, 2021
React 17 & Bootstrap 5 & Material Design 2.0 UI KIT

MDB 5 React React 17 & Bootstrap 5 & Material Design 2.0 UI KIT >> Get Started in 4 steps >> MDBReact 5 Demo 500+ material UI components Super simple,

MDBootstrap 1.2k Oct 10, 2021
Introduce users to your app with this Material-style carousel.

Material AutoRotatingCarousel So you wrote a great app and deployed it and everything. But how do you introduce new users to your app? Well, the Mater

Wertarbyte 419 Oct 3, 2021
Material ripple effect. Ripples everything

react-ripples Material ripple effect, ripples everywhere Live Demo Attraction ✅ Zero dependencies ?? Tiny and blazing fast (Pure Component) ⚡ Typescri

Rocky Wu 177 Sep 19, 2021
React Material Design Icons – built with Pixo, Styled Components, and Styled System

React Material Design Icons Built with Pixo, Styled Components, and Styled System https://jxnblk.com/rmdi npm i rmdi // import icons individually for

Brent Jackson 132 Oct 19, 2020
Material Design component library for Mithril and React

Polythene Material Design component library for Mithril and React. Can be used as general-purpose component library that includes dialogs, cards, noti

Arthur Clemens 585 Oct 10, 2021