muicss

v0.10.3

Published

2 years ago

Lightweight CSS framework based on Google's Material Design guidelines

Downloads

9,183

0High
0Medium
0Low

muicss

MUI CSS CSS Framework Material Design React

Material Design CSS Framework

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

Introduction

The MUI NPM package makes it easy to import MUI into a project and create a custom build that only includes the components you need.

The simplest way to use MUI is via the top level imports muicss and muicss/react:

import { Appbar, Button, Panel } from 'muicss/react';

You can also optimize your builds by importing modules one-by-one from the lower level API:

import Appbar from 'muicss/lib/react/appbar';
import Button from 'muicss/lib/react/button';
import Container from 'muicss/lib/react/container';

Here's an example of how to use MUI in a React app:

import React from 'react';
import ReactDOM from 'react-dom';
import { Appbar, Button, Panel } from 'muicss/react';

class Example extends React.Component {
  onClick() {
    console.log('clicked on button');
  }
  
  render() {
    return (
      <div>
        <Appbar />
        <Container>
          <Panel>
            <Button onClick={this.onClick}>My Button</Button>
          </Panel>
        </Container>
      </div>
    );
  }
}

ReactDOM.render(<Example />, document.getElementById('example'));

API Documentation

React Library

All of the MUI React components can be accessed as top-level attributes of the muicss/react package. In addition, they can be accessed individually at muicss/lib/react/{component}.

Appbar

import Appbar from 'muicss/lib/react/appbar';

<Appbar />

Read more: https://www.muicss.com/docs/v1/react/appbar

Button

import Button from 'muicss/lib/react/button';

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

Read more: https://www.muicss.com/docs/v1/react/buttons

Checkbox

import Checkbox from 'muicss/lib/react/checkbox';

<Checkbox />
  * {Boolean} checked
  * {Boolean} defaultChecked
  * {String} defaultValue
  * {Boolean} disabled=false|true
  * {String} label
  * {String} name
  * {String} value

Read more: https://www.muicss.com/docs/v1/react/forms

Container

import Container from 'muicss/lib/react/container';

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

Read more: https://www.muicss.com/docs/v1/react/container

Divider

import Divider from 'muicss/lib/react/divider';

<Divider />

Read more: https://www.muicss.com/docs/v1/react/dividers

Dropdown Component

Dropdown

import Dropdown from 'muicss/lib/react/dropdown';

<Dropdown />
  * {String or ReactElement} label
  * {String} alignment=default|right|bottom
  * {String} color=default|primary|danger|accent
  * {String} placement=default|up|right|left
  * {String} size=default|small|large
  * {String} variant=default|flat|raised|fab
  * {Boolean} disabled
  * {Function} onClick
  * {Function} onSelect

Read more: https://www.muicss.com/docs/v1/react/dropdowns

DropdownItem

import DropdownItem 'muicss/lib/react/dropdown-item';

<DropdownItem />
  * {String} link
  * {String} target
  * {String} value
  * {Function} onClick

Read more: https://www.muicss.com/docs/v1/react/dropdowns

Form

import Form from 'muicss/lib/react/form';

<Form />
  * {Boolean} inline=false|true

Read more: https://www.muicss.com/docs/v1/react/forms

Grid Elements

Row

import Row from 'muicss/lib/react/row';

<Row />

Read more: https://www.muicss.com/docs/v1/react/grid

Col

import Col from 'muicss/lib/react/col';

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

Read more: https://www.muicss.com/docs/v1/react/grid

Input

import Input from 'muicss/lib/react/input';

<Input />
  * {String} defaultValue
  * {Boolean} floatingLabel
  * {String} placeholder
  * {Boolean} invalid
  * {String} label
  * {String} name
  * {Boolean} required
  * {String} type=text|email|url|tel|password
  * {String} value
  * {Function} onChange

Read more: https://www.muicss.com/docs/v1/react/forms

Panel

import Panel from 'muicss/lib/react/panel';

<Panel />

Read more: https://www.muicss.com/docs/v1/react/panels

Radio

import Radio from 'muicss/lib/react/panel';

<Radio />
  * {String} name
  * {String} value
  * {Boolean} checked
  * {Boolean} defaultChecked
  * {Boolean} disabled=false|true

Read more: https://www.muicss.com/docs/v1/react/forms

Select Component

Select

import Select from 'muicss/lib/react/select';

<Select />
  * {String} defaultValue
  * {Boolean} disabled=false|true
  * {String} name
  * {String} label
  * {String} placeholder
  * {Boolean} readOnly=false|true
  * {Boolean} required=false|true
  * {Boolean} useDefault=false|true
  * {String} value
  * {Function} onChange

Read more: https://www.muicss.com/docs/v1/react/forms

Option

import Option from 'muicss/lib/react/option';

<Option />
  * {String} value
  * {String} label

Read more: https://www.muicss.com/docs/v1/react/forms

Tabs Component

Tabs

import Tabs from 'muicss/lib/react/tabs';

<Tabs />
  * {Integer} defaultSelectedIndex=0
  * {Integer} selectedIndex
  * {Boolean} justified=false|true
  * {Function} onChange

Read more: https://www.muicss.com/docs/v1/react/tabs

Tab

import Tab from 'muicss/lib/react/tab';

<Tab />
  * {String} label
  * {String} value
  * {Function} onActive

Read more: https://www.muicss.com/docs/v1/react/tabs

Textarea

import Textarea from 'muicss/lib/react/textarea';

<Textarea />
  * {String} defaultValue
  * {Boolean} floatingLabel
  * {String} placeholder
  * {Boolean} invalid
  * {String} label
  * {String} name
  * {Boolean} required
  * {Number} rows
  * {String} value
  * {Function} onChange

Read more: https://www.muicss.com/docs/v1/react/forms

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"></div>
<div className="mui--text-dark-secondary"></div>
<div className="mui--text-dark-hint"></div>
<div className="mui--text-light"></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-secondary"></div>
<div className="mui--text-accent-hint"></div>
<div className="mui--text-danger"></div>
<div className="mui--text-black"></div>
<div className="mui--text-white"></div>

<!-- background color -->
<div className="mui--bg-primary"></div>
<div className="mui--bg-primary-dark"></div>
<div className="mui--bg-primary-light"></div>
<div className="mui--bg-accent"></div>
<div className="mui--bg-accent-dark"></div>
<div className="mui--bg-accent-light"></div>
<div className="mui--bg-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>

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Material Design CSS Framework

Introduction

API Documentation

React Library

Appbar

Button

Checkbox

Container

Divider

Dropdown Component

Dropdown

DropdownItem

Form

Grid Elements

Row

Col

Input

Panel

Radio

Select Component

Select

Option

Tabs Component

Tabs

Tab

Textarea

CSS Helpers

Directory Tree