muicss / mui Goto Github PK

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.

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?

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

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>

It should convey better their intent.

The default down arrow is still visible:

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

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.

1. 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?

2. 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?

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)

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

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

behavior was correct in 0.1.12

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!

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

Thanks for the project 😄

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!

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

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

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?

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

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

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

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.

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>

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

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

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

So far I've found a link to GitHub only on the landing page. If someone is browsing through demos (e.g on "Forms") and wants to go to GitHub, there's no intuitive way to do that. "Support" and "Feedback" recommend email and Facebook.

Clicking on dropdown toggle submits form

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!

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

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

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

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.

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.

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.

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

1. 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?

2. 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?

3. mui-btn-raised style

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

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?

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

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

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.

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

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.

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 !

@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} 无法正常工作。
是疏忽了，还是有别的用意？

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.

Hi!
When your create an example for sideNav?

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