6 ms·

MUI – Lightweight Web/Email CSS Framework

58 points by andres 12y ago

nailer 12y ago
> 'mui-btn mui-btn-default mui-btn-flat mui-btn-lg' This would be better implemented via mixins. Eg, the a element has the class 'download-button', which has all the additional visual elements mixed in via sass/less/stylus. There's a small overhead in file size, but it allows you to keep all the visual settings in a single place (the stylesheet) rather than two (the stylesheet and the HTML).
- andres 12y ago
  You can use mixins from the source SASS files to do most of this. I was thinking about formalizing it and including it in the documentation but I wanted to get some feedback first. https://github.com/amorey/mui/blob/master/src/sass/mui/_buttons.scss#L145 https://github.com/amorey/mui/blob/master/src/sass/mui/_butt...
  - nailer 12y ago
    Excellent - since a lot of us work primarily in sass these days that would be quite useful.
    - graffitici 12y ago
      As someone who's been meaning to learn LESS or SASS, good to see this. SASS might be the way to go then..!
Geee 12y ago
What's up with the Material design? Am I the only one who thinks it's just horrible in looks and behavior?
- ARussell 12y ago
  Personally I think it's a huge improvement over flat design. Do you have any specific criticisms, or is it just a subjective aesthetic opinion?
  - andreiv 12y ago
    I also think it's an improvement but I wouldn't call it "huge". My biggest problem so far was the lack of "support". By that I mean that a simple to medium difficulty Flat Design project does not require a lot of transitions/animations work. This in turn means that the development time is kept relatively low. In contrast, Material Design emphasizes these visual features. In my opinion, this framework is the missing piece for MD. I only wished that Google had thought of that and helped speed up the development process.
    - ARussell 12y ago
      It's just my opinion, but I still think it's a huge improvement. The oversimplification of flat design sort of put it in an "uncanny valley" of sorts for user interfaces, in my experience. I'd look at a UI and really have to ask myself whether I should be able to click on an element or not.
    - Navarr 12y ago
      I see where MUI fits in, but I think Google is also using Material Design to drive polymer and webcomponent adoption. Being able to import a few elements and make a resizable toolbar is a much better experience than adding a fucktonne of classes, in my opinion.
- skrowl 12y ago
  I'm in love with material design. Google spent A LOT of time designing it and focus group testing it. The idea is that everything is supposed to be obvious / apparent in how to use it. If you've used the gmail app on a smartphone, you immediately feel comfortable in any material design app.
- Numberwang 12y ago
  I completely agree with you. You are not alone. More importantly, the feedback from the designs is worse than ordinary layouts.
- oliv__ 12y ago
  Yup. Those shadows. The garish colors. Too much animation for animations's sake. Un-necessary ornament (e.g. waves on click). Weird negative spacing. Weird proportions on desktop. Use of mobile "logic" everywhere: how is a tiny hamburger bar ever a good solution on desktop when you could easily display the menu the whole time? Those shadows.
- andres 12y ago
  I think the Material Design spec will evolve but the design principles are sound and the paper metaphor is useful. With MUI I tried to focus on the core elements and leave the more stylized design decisions up to the app designer.
- rebelidealist 12y ago
  Does anyone else think the bold colors distract away from the content in Material Design?
dingdingdang 12y ago
Any auto sizing columns for content/images? Or is that beyond the scope?
- andres 12y ago
  I think it's beyond the scope for the core library but it'd be a good addition as a plugin further down the road.
egypturnash 12y ago
Every time I see a link to this I can't help but show my age and think of "Magic User Interface" (http://en.wikipedia.org/wiki/Magic_User_Interface http://en.wikipedia.org/wiki/Magic_User_Interface) for the Amiga. Which might possibly be older than the person who created this MUI. (If you really want a blast from the past have a look at its old homepage: http://www.sasg.com/mui/ http://www.sasg.com/mui/)
doughj3 12y ago
What's the with hamburger menu icon and a hidden sidebar navigation? It doesn't make any sense on a 1600px wide display.
glitcher 12y ago
Down in the Features section the stars marking each li item render horribly in the latest chrome on my desktop and on an android tablet. While not a real reason not to try MUI, it is an annoying distraction for a frontend framework's website.

58 points by andres 12y ago

> 'mui-btn mui-btn-default mui-btn-flat mui-btn-lg' This would be better implemented via mixins. Eg, the a element has the class 'download-button', which has all the additional visual elements mixed in via sass/less/stylus. There's a small overhead in file size, but it allows you to keep all the visual settings in a single place (the stylesheet) rather than two (the stylesheet and the HTML).

andres 12y ago
You can use mixins from the source SASS files to do most of this. I was thinking about formalizing it and including it in the documentation but I wanted to get some feedback first. https://github.com/amorey/mui/blob/master/src/sass/mui/_buttons.scss#L145 https://github.com/amorey/mui/blob/master/src/sass/mui/_butt...
- nailer 12y ago
  Excellent - since a lot of us work primarily in sass these days that would be quite useful.
  - graffitici 12y ago
    As someone who's been meaning to learn LESS or SASS, good to see this. SASS might be the way to go then..!

Geee 12y ago

What's up with the Material design? Am I the only one who thinks it's just horrible in looks and behavior?

ARussell 12y ago
Personally I think it's a huge improvement over flat design. Do you have any specific criticisms, or is it just a subjective aesthetic opinion?
- andreiv 12y ago
  I also think it's an improvement but I wouldn't call it "huge". My biggest problem so far was the lack of "support". By that I mean that a simple to medium difficulty Flat Design project does not require a lot of transitions/animations work. This in turn means that the development time is kept relatively low. In contrast, Material Design emphasizes these visual features. In my opinion, this framework is the missing piece for MD. I only wished that Google had thought of that and helped speed up the development process.
  - ARussell 12y ago
    It's just my opinion, but I still think it's a huge improvement. The oversimplification of flat design sort of put it in an "uncanny valley" of sorts for user interfaces, in my experience. I'd look at a UI and really have to ask myself whether I should be able to click on an element or not.
  - Navarr 12y ago
    I see where MUI fits in, but I think Google is also using Material Design to drive polymer and webcomponent adoption. Being able to import a few elements and make a resizable toolbar is a much better experience than adding a fucktonne of classes, in my opinion.
skrowl 12y ago
I'm in love with material design. Google spent A LOT of time designing it and focus group testing it. The idea is that everything is supposed to be obvious / apparent in how to use it. If you've used the gmail app on a smartphone, you immediately feel comfortable in any material design app.
Numberwang 12y ago
I completely agree with you. You are not alone. More importantly, the feedback from the designs is worse than ordinary layouts.
oliv__ 12y ago
Yup. Those shadows. The garish colors. Too much animation for animations's sake. Un-necessary ornament (e.g. waves on click). Weird negative spacing. Weird proportions on desktop. Use of mobile "logic" everywhere: how is a tiny hamburger bar ever a good solution on desktop when you could easily display the menu the whole time? Those shadows.
andres 12y ago
I think the Material Design spec will evolve but the design principles are sound and the paper metaphor is useful. With MUI I tried to focus on the core elements and leave the more stylized design decisions up to the app designer.
rebelidealist 12y ago
Does anyone else think the bold colors distract away from the content in Material Design?

dingdingdang 12y ago

Any auto sizing columns for content/images? Or is that beyond the scope?

andres 12y ago
I think it's beyond the scope for the core library but it'd be a good addition as a plugin further down the road.

egypturnash 12y ago

Every time I see a link to this I can't help but show my age and think of "Magic User Interface" (http://en.wikipedia.org/wiki/Magic_User_Interface http://en.wikipedia.org/wiki/Magic_User_Interface) for the Amiga. Which might possibly be older than the person who created this MUI. (If you really want a blast from the past have a look at its old homepage: http://www.sasg.com/mui/ http://www.sasg.com/mui/)

doughj3 12y ago

What's the with hamburger menu icon and a hidden sidebar navigation? It doesn't make any sense on a 1600px wide display.

glitcher 12y ago

Down in the Features section the stars marking each li item render horribly in the latest chrome on my desktop and on an android tablet. While not a real reason not to try MUI, it is an annoying distraction for a frontend framework's website.