muicss / mui Goto Github PK
View Code? Open in Web Editor NEWLightweight CSS framework
Home Page: https://www.muicss.com
License: Other
Lightweight CSS framework
Home Page: https://www.muicss.com
License: Other
When I try to catch a mui-select with jQuery's on('change') nothing happens. Is there a method for this?
As per Material Design guidelines:
http://www.google.com/design/spec/components/menus.html#menus-behavior
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
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~
mui-btn-default style on IE
The top/left borders aren't visible on IE:
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:
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?
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:
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>
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
@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} ๆ ๆณๆญฃๅธธๅทฅไฝใ
ๆฏ็ๅฟฝไบ๏ผ่ฟๆฏๆๅซ็็จๆ๏ผ
<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 ๐
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.
There are scroll bars at this point or so. Replicated in latest Firefox on Linux, Windows.
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!
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:
<!-- 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>
<div class="mui-container"></div>
<div class="mui-container-fluid"></div>
<!-- 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>
<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>
<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>
<!-- 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>
<!-- 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.
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.
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.
We've released a new version of MUI with the following changes (v0.1.20):
Enjoy!
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.
It would be great to enable installing MUI via NPM. Ideally this package would include the sass source as well as the css.
Hi amorey,
Do you have any plans to develop angular version of mui
in the near future?
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.
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?
Looking forward for better React support. Thanks for your hard work!
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 :)
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
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?
I mean, this probably the most useful folder when you use it with bower. Why ignore it?
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 !
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!";
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?
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:
<Appbar/>
<Button/>
* {String} color=default|primary|danger|accent
* {String} variant=default|flat|raised|fab
* {String} size=default|small|large
* {Boolean} isDisabled=false|true
<Caret/>
<Container/>
* {Boolean} isFluid=false|true
<Divider/>
<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
<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
<Row/>
<Col/>
* {Integer} xs
* {Integer} xs-offset
* {Integer} sm
* {Integer} sm-offset
* {Integer} md
* {Integer} md-offset
* {Integer} lg
* {Integer} lg-offset
<Panel/>
<Tabs/>
* {Integer} initialSelectedIndex=0
* {Boolean} isJustified=false|true
* {Function} onChange
<Tab/>
* {String} label
* {String} value
* {Function} onActive
<!-- 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>
<script>
mui.overlay('on'[, <options>[, <childEl>]]);
mui.overlay('off');
</script>
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.
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
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!
It seems to be hard coded as white, and the variable doesn't change it.
Thanks for the project ๐
behavior was correct in 0.1.12
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?
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
Clicking on dropdown toggle submits form
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.
It should convey better their intent.
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?
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 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
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>
Hi!
When your create an example for sideNav?
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
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.