muicss / mui Goto Github PK

View Code? Open in Web Editor NEW

4.5K 169.0 441.0 17.75 MB

Lightweight CSS framework

Home Page: https://www.muicss.com

License: Other

HTML 0.03% CSS 22.77% JavaScript 77.20%

mui javascript lightweight-css-framework material google-material meteor css-framework nodejs

mui's Introduction

Material Design CSS Framework

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

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

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

Install dependencies

nodejs (http://nodejs.org/)
npm (https://www.npmjs.org/)
sass (http://sass-lang.com/)
http-server (via npm)

Clone repository

$ git clone [email protected]:muicss/mui.git
$ cd mui

Install node dependencies using npm
```
$ npm install
```
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:

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.

mui's People

Contributors

Stargazers

Watchers

Forkers

neilburns bigjoevtrj pramendra mkaarthick merouanekhalili julien-tmp ojengwa tzmartin kublaj carabina nunodotferreira cdfpaz shoe-string iamaxisme lijanele miguelramosfdz pmelia07 darklord6667 jeffikus serzn1 mirandagood29 noemikuzmenko eric-seekas star21 devmetal benediktharter thenyel mattbogado scryver mdeng1024 lukeadams sethdford zzmjohn devotiongeo davinirjr ifa6 pandroid dandv joket1999 webin ul beingsane a233894432 bartuspan holmeswww sivaraj-v tennessine benjaminapetersen code-self touchx zyj1022 x303597316 liu33851861 ezhangle zj23564 funstuff wurh codevlabs kimusan leomiranda92 repos-html5 repos-css deberny yooye nishith29 itech001 c0debrain sidliux iuyes johnulist tsungleo robertomalatesta azundo violetlife phamthaithinh githubandroid pankaj-dhami fiona78 bendroid billybonz1 singba raheemmujavar vixony monnhoccon bibuggy guogongjun md-template wisnurdi jefth sangkyunyoon suxinde2009 arunlodhi shirone jijonglo yecao007 usielc lemoncn neciu freefly801213 javifelices

mui's Issues

Select box UI bug on IE

The default down arrow is still visible:

Select doesn't work as expected on Chrome mobile (Android)

Basically, it shows the default select css:

----- BUT works if click really close from the bottom of the border-line:

----and it will work as expected:

------ I tried really hard to handle this, or give a fix... but all my tries fails.. Need HELP! Thank you very much for the awesome library!!!!

Announcement: Simpler forms markup in v0.2.1

Hi Everyone,

I just wanted to give you a quick update on the new forms syntax in our newest release (v0.2.1). We have removed the need for class names on <input> and <label> elements. Now you can use MUI textfields by modifying the wrapper element:

  <div class="mui-textfield">
    <input type="text">
    <label>This is a fixed label</label>
  </div>

  <div class="mui-textfield mui-textfield--float-label">
    <input type="text">
    <label>This is a floating label</label>
  </div>

  <div class="mui-textfield mui-textfield--wrap-label">
    <input type="text">
    <label>This is a really long long long long label that wraps</label>
  </div>

Hopefully you'll find that the new syntax is simpler, more predicable and more consistent with other MUI components. Enjoy the new forms syntax and let us know if you have any suggestions!

Thanks,

Andres

SideNav

Hi!
When your create an example for sideNav?

Announcement: New version with better error handling and some bug fixes (v0.1.20)

We've released a new version of MUI with the following changes (v0.1.20):

MUI now raises JavaScript Error objects for better tracebacks
Decreased $mui-container-sm width by 18px to accommodate vertical scrollbars on <body>
Bugfix to React dropdown library which was throwing an error on outside clicks
Using browser built-in <select> box on touch devices

https://www.muicss.com

Enjoy!

I have some mui tabs coming dynamicaly , how can i activate the tabs from javascript

appbar docs/docs in general

Some docs are pretty sparse.
For example https://www.muicss.com/docs/v1/css-js/appbar displays exactly 2 options (left and right), but when visiting the docs page I wonder if there's some built in classes for styling appbar-brand or menu-links.
Are the docs in a seperate github repository or somewhere people can contribute to?

Proposal: BEM syntax

Hi Everyone,

In an attempt to make our CSS as consistent and predictable as possible, we're considering using BEM syntax. Please let us know what you think about these examples:

Buttons

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

<!-- button types -->
<button class="mui-btn mui-btn--flat">Button</button>
<button class="mui-btn mui-btn--raised">Button</button>
<button class="mui-btn mui-btn--fab">Button</button>

<!-- button styles -->
<button class="mui-btn mui-btn--primary">Button</button>
<button class="mui-btn mui-btn--danger">Button</button>
<button class="mui-btn mui-btn--accent">Button</button>

<!-- button sizes -->
<button class="mui-btn mui-btn--small">Button</button>
<button class="mui-btn mui-btn--large">Button</button>

Layout

<div class="mui-container"></div>
<div class="mui-container-fluid"></div>

Typography

<!-- style -->
<div class="mui--text-display4">Display4</div>
<div class="mui--text-display3">Display3</div>
<div class="mui--text-display2">Display2</div>
<div class="mui--text-display1">Display1</div>
<div class="mui--text-headline">Headline</div>
<div class="mui--text-title">Title</div>
<div class="mui--text-subhead">Subhead</div>
<div class="mui--text-body2">Body2</div>
<div class="mui--text-body1">Body1</div>
<div class="mui--text-caption">Caption</div>

<!-- color -->
<div class="mui--text-black">Text</div>
<div class="mui--text-white">Text</div>
<div class="mui--text-accent">Text</div>

Dropdown

<div class="mui-dropdown">
  <button class="mui-btn mui-btn--primary" data-mui-toggle="dropdown">
    Dropdown
     <span class="mui-caret"></span>
  </button>
  <ul class="mui-dropdown__menu mui-dropdown__menu--right">
    <li><a href="#">Option 1</a></li>
    <li><a href="#">Option 2</a></li>
    <li><a href="#">Option 3</a></li>
    <li><a href="#">Option 4</a></li>
  </ul>
</div>

Tabs

<ul class="mui-tabs mui-tabs--justified">
  <li class="mui--is-active"><a data-mui-toggle="tab" data-mui-controls="home">Home</a></li>
  <li><a data-mui-toggle="tab" data-mui-controls="profile">Profile</a></li>
  <li><a data-mui-toggle="tab" data-mui-controls="messages">Messages</a></li>
  <li><a data-mui-toggle="tab" data-mui-controls="settings">Settings</a></li>
</ul>
<div>
  <div class="mui-pane mui--is-active" id="home">Home</div>
  <div class="mui-pane" id="profile">Profile</div>
  <div class="mui-pane" id="messages">Messages</div>
  <div class="mui-pane" id="settings">Settings</div>
</div>

Dividers

<!-- block element -->
<div class="mui-divider"></div>

<!-- border helpers -->
<div class="mui--divider-top"></div>
<div class="mui--divider-bottom"></div>
<div class="mui--divider-left"></div>
<div class="mui--divider-right"></div>

Helpers

<!-- alignment -->
<div class="mui--text-left"></div>
<div class="mui--text-right"></div>
<div class="mui--text-center"></div>
<div class="mui--text-justify"></div>
<div class="mui--text-nowrap"></div>
<div class="mui--align-baseline"></div>
<div class="mui--align-top"></div>
<div class="mui--align-middle"></div>
<div class="mui--align-bottom"></div>

<!-- lists -->
<ul class="mui--list-unstyled"></ul>
<ul class="mui--list-inline"></ul>

<!-- depth helpers -->
<div class="mui--z1"></div>
<div class="mui--z2"></div>
<div class="mui--z3"></div>
<div class="mui--z4"></div>
<div class="mui--z5"></div>

<!-- float helpers -->
<div class="mui--clearfix"></div>
<div class="mui--pull-right"></div>
<div class="mui--pull-left"></div>

<!-- toggle helpers -->
<div class="mui--hide"></div>
<div class="mui--show"></div>
<div class="mui--invisible"></div>
<div class="mui--overflow-hidden"></div>

Note that we haven't started working on BEM syntax for form elements and the grid system yet. Based on everyone's feedback on this we'll put together another proposal for those elements.

npm package

It would be great to enable installing MUI via NPM. Ideally this package would include the sass source as well as the css.

Announcement: MUI React Library Release Candidate

Hi Everyone,

Thanks for your patience and your feedback! We finally have a release candidate ready for the MUI React library (v0.3.0-rc3):
https://www.muicss.com/docs/v1/react/introduction

Here is the NPM package:
https://www.npmjs.com/package/muicss

When you have a moment please let us know what you think of the new MUI React library. We're targeting Monday or Tuesday for an official release so please let us know if you have any suggestions soon!

Andres

input.mui-form-control no longer has a line underneath

In version 0.1.8, inputs with mui-form-control drew a line underneath the field. In 0.1.9 this is no longer the case.

Set input validation state

HTML form validation if fine for some simple things, but basically every application has some custom validation.

Is there a class or other way to mark an input as invalid that doesn't rely on the :invalid selector?

Plans to add animation to input fields?

New to MUI. I really like how snappy and minimalistic the framework is!

Didn't see this on the roadmap, so thought I'd ask here: are there plans to add animation for the line at the bottom of input fields, or is that outside the scope of the library?

Polymer Paper Elements 1.0 demo

mui-angular version

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

Question about material ui lite

Since google launched the new ui kit, do you have plans to continue this project? Google material lite is pretty simple yet with too many components missing.

thanks.

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

Dropdown doesn't close on item select

Dropdown issues

Only tested on Chrome V40.0.2 - when you click on the actual arrow in the dropdown ( https://www.muicss.com/docs/v1/css-js/dropdowns ) the dropdown does not open.

This is a problem because a user is likely to click the dropdown box where the mui-caret appears or directly under it.

Question About Mobile Support

Hello,

I have a very basic question about MUI. I'm making a hybrid mobile app using Cordova, and I've been trying out several different Material Design frameworks. I've tried MDL, Phonon, and MUI, and so far MUI is my favorite one. However, I just looked at the roadmap page and was worried to see that iOS and Android are listed as unsupported.

Are there known issues with those platforms? Are they untested, or does MUI just not have features specific to them? If it would be helpful, I can test MUI extensively on Android.

Dropdown click submits form

Clicking on dropdown toggle submits form

[Suggestion] - Make a roadmap

Hey @amorey,

First of all, thanks for your work on mui! :)

Do you think it would be possible for your to create a roadmap, so that people can pick up & implement some work? (checkboxes, radios, ...)

It would be easier for us to know what we can help on!

normalizer should be optional

Adding Mui to an existing project causes global styling to be applied due to normalizer which means it doesn't play nicely.

Would be nicer to have to apply a class at the highest point you want to use mui. Eg globally

or just on part of your page

My use case is a custom side panel on an existing site, I need Mui styling to be isolated.

Cheers and great project~

Announcement: New release candidate with BEM syntax (v0.2.0-rc1)

Hi Everyone,

We just published a new release candidate that uses BEM syntax for CSS (v.0.2.0-rc1). We've been going back and forth on how best to structure our CSS and we believe that BEM syntax is the best way to keep our CSS rules consistent and predictable.

Please check out the release candidate and let us know what you think!

https://www.muicss.com/docs/v1/css-js/reference

Andres

How to load a predefined element with an id in Dom with mui overlay?

Currently new element is created on each overlay initialisation , instead i want show existing single div on every overlay call, is there any option in mui so that we can pass the id or class

Design help with typography

font-smoothing

I've been debating whether or not we should turn on font-smoothing by default. The css property makes text look better on webkit/mozilla browsers but it also results in some changes that might not be desirable (e.g. white text on dark backgrounds is more faint). For an end-user it's easier to add it than remove it in custom CSS so I've been hesitant to make it a MUI global property but it's frustrating when the default text with MUI doesn't look great out of the box.

So far I've been considering 1) making font-smoothing a global property of MUI 2) making font-smoothing a local property for certain elements (e.g. buttons) 3) documenting the issue and letting the developer decide.

Any thoughts?
letter-spacing

The current letter-spacing in MUI is based on Google's recommendations for Roboto but it isn't necessarily ideal for other fonts. Here's the difference between turning on/off MUI letter-spacing for buttons using MUI's default font (Helvetica Neue):

And here's the difference with font-smoothing turned on:

In keeping with the lightweight/minimalist spirit of MUI, I've been considering turning off the custom letter-spacing and leaving it up to the developer to choose the letter-spacing that works best for their font choice. Any thoughts?

Bottom Scroll bars at 768px width

There are scroll bars at this point or so. Replicated in latest Firefox on Linux, Windows.

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>

Input submit button does not have click animation

In the document, it use <button> tag. Everything works fine.

Offline, I tried classes with <input type="submit"> tag, style is good except click animation is lost.

Any idea on this?

How to trigger ripple efect with javascript

Is there a way to trigger a ripple effect adding a class to any element ? Or how to trigger the ripple effect using javascript? This feature would be nice, if there isn't.

Floating labels bug

Labels don't float using this code doesn't work:

<div class="mui-textfield mui-textfield--float-label">
    <label>Email Address</label>
    <input type="email" />
</div>

While they float perfectly using this code:

<div class="mui-textfield mui-textfield--float-label">
    <input type="email" />
    <label>Email Address</label>
</div>

Checkboxes and Radio Buttons not Working

The checkboxes and radio buttons in the example page dont show as they should in Mozilla Firefox 35.0.1 nor in Chrome 40 - Windows 7

Chrome (left) - Firefox (right)

version 0.1.13 doesn't underline form fields

behavior was correct in 0.1.12

Select with optgroup dinamically added issue

<div class="mui-select">
       <select>
           <optgroup label="Something">
                   <option>More than 8 options</option>
                   <option>More than 8 options</option>
           </optgroup>
           <optgroup label="Something">
                  <option>More than 8 options</option>
                  <option>More than 8 options</option>
            </optgroup>
      </select>
</div>

There's a problem when a select with optgroup tags , for some reason the options are displayed inline. Any idea why this happen ? Temporaly I solved removing the optgroup tags, but that's not really a solution.

Very useful library, thanks in advance 👍

$mui-panel-bg-color doesn't change the panel background color

It seems to be hard coded as white, and the variable doesn't change it.

Thanks for the project 😄

form validations are not working

Hi Team form validations are not working with attribute no validate in form tag. I am looking to use this framework with knockout js. could you please suggest me.

dist folder ignored in bower.json

I mean, this probably the most useful folder when you use it with bower. Why ignore it?

package install failed on 1.1

Just tried to add this package on Meteor 1.1 and got the error:
Error: Can't find npm module 'bcrypt'. Did you forget to call 'Npm.depends' in package.js within the 'npm-bcrypt' package?

Do I need to manually install bcrypt. I've actually been using your package just by dropping in the mui.css in my stylesheets and the js file in client/compatibility folder. It has been working fine but saw that you have a package now so wanted to install it that way.

Design help with buttons

mui-btn-default style on IE

The top/left borders aren't visible on IE:

Versus Chrome:

This is also a problem with panels. It'd be great if we could find a border style that works well on IE and Chrome though it's possible to write CSS that targets only IE10+. Any suggestions?
mui-btn-default hover style

For colored buttons, we're changing the background color slightly on hover but for white buttons there's no change in the background:

Versus:

Do you have any recommendations for the mui-btn-default background color on hover?
mui-btn-raised style

The difference between regular and raised buttons is very subtle. Should we make it more obvious?

Will this library include popup dialog in the future?

Just found mui, looks pretty nice, thanks for making this!

As title, will this include modal dialog feature in the future? If not, may I know what's the recommended way to implement that? Thanks!

Overlay event on close

Hi,

thanks for MUI, it's great to use !
I use mui.overlay for modals, and I would need to know when the overlay is removed, to do some cleanups tasks. Do you have any thought on this, for instance about namespace ?

Thanks !

select is not triggering on change

When I try to catch a mui-select with jQuery's on('change') nothing happens. Is there a method for this?

Drop down popup should be over drop down button

As per Material Design guidelines:
http://www.google.com/design/spec/components/menus.html#menus-behavior

React- MUI Dropdown auto submits when placed in form element

Hi ,
I'm using React - MUI. I have a dropdown that is placed in form element.
Since dropdown consists of button that triggers dropdown (and few other elements ) that button auto submits my form.

I know that you can add type="button" as attribute to stop this from happening but I don't know where to place it.

Add pointer:cursor to tabs 'a' elements

It should convey better their intent.

better ReactJs support

Looking forward for better React support. Thanks for your hard work!

https://www.muicss.com/docs/v1/react/boilerplate-html

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

optimize package for jspm

Hi, would it be possible to add the following properties to the package.json file ?
This is so that the package will install cleanly with jspm.
by adding these properties jspm will only install what is inside the "dist" directory so it doesn;t install the other files not needed for execution.
and the "main" entry makes sure that the main file points to the mui.min.js file.

{
  "main": "js/mui.min.js"
  "jspm": {
    "directories":{  
      "lib":"dist"
    }
  }
}

Also with this in place the repo can be used as :

import "muicss";
import "muicss/css/mui.min.css!";

rather than:

import "muicss/dist/js/mui.min";
import "muicss/dist/css/mui.min.css!";

Edge Event error!

This error is shown only on Microsoft Edge for Windows 10 Mobile.
It is a MUI bug or Edge bug?

SCRIPT5007: Unable to get property '_muiEventCache' of undefined or null reference
mui.min.js (1,7975)

Please answer me asap :)

.mui-col-#{$class}-pull(push)-#{$i} doesn't work

@mixin mui-make-grid-columns($i: 1, $list: ".mui-col-xs-#{$i}, .mui-col-sm-#{$i}, .mui-col-md-#{$i}, .mui-col-lg-#{$i}") {
  @for $i from (1 + 1) through $mui-grid-columns {
    $list: "#{$list}, .mui-col-xs-#{$i}, .mui-col-sm-#{$i}, .mui-col-md-#{$i}, .mui-col-lg-#{$i}";
  }

  #{$list} {
    position: relative;
    // Prevent columns from collapsing when empty
    min-height: 1px;

    // Inner gutter via padding
    padding-left:  ($mui-grid-gutter-width / 2);
    padding-right: ($mui-grid-gutter-width / 2);
  }
}

.mui-col-lg没有使用position: relative;
导致.mui-col-#{$class}-pull(push)-#{$i} 无法正常工作。
是疏忽了，还是有别的用意？

muicss / mui Goto Github PK

mui's Introduction

Material Design CSS Framework

Features

Browser Support

Development Quickstart

Run tests

Unit tests

E2E tests

Build Packages

CDN

NPM

Meteor

mui's People

Contributors

Stargazers

Watchers

Forkers

mui's Issues

Buttons

Layout

Typography

Dropdown

Tabs

Dividers

Helpers

Components

Appbar

Buttons

Caret

Container

Dividers

Dropdowns

Forms

Grid

Panel

Tabs

CSS Helpers

JavaScript API

Overlay

Button colors

Button styles

Recommend Projects

Recommend Topics

Recommend Org