npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

muicss

v0.10.3

Published

Lightweight CSS framework based on Google's Material Design guidelines

Downloads

5,353

Readme

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

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>

Directory Tree