MUI – Lightweight CSS framework that follows Google’s Material Design guidelines

MUI – Lightweight CSS framework that follows Google’s Material Design guidelines(muicss.com)

48 points by kaizoku111 9 years ago | 13 comments

butu5 9 years ago |

It seems from their github profile active development is going on in MUI CSS since Feb, 2015. This CSS framework looks decent. They given some pre-defined layout to start with. Also, first time I seen they given some example for HTML Email template.

They supports React, Angular JS and Web Components. Website is very neat and clean, it's a real pleasure to navigate their site.

I created a simple and short video overview (no installation, or tutorials) https://www.youtube.com/watch?v=8I2YS7OCkpQ

_Codemonkeyism 9 years ago |

I remember the MUI Amiga UI framework, the first that made AmigaOS really look nice.

daledavies 9 years ago | |

Whenever I see the letters "MUI" this is exactly what I think of!

scoot 9 years ago | | |

I'm the context of Material Deaign, MUI is short for Material UI, a React based implementation of Material Design. Not sure why the developer of this library would choose the same name, although I can guess. In any case it can only lead to confusion.

mixedCase 9 years ago |

It was enough to see the home page for a second to know they don't follow Material Design.

The "Download" and "View on GitHub" buttons are 36px high, which violate the minimum 48px touch target height.

This is the kind of thing that really kills the illusion of a universal spec and turns web{sites,apps} into "lookalikes" rather than "the real thing".

IshKebab 9 years ago |

I've used this. It's easy to use, looks good, and is about a million times easier to set up than Polymer.

chenster 9 years ago |

I wish Apple would have a similar guideline to front-end developers. Here's the closest I can find https://developer.apple.com/ios/human-interface-guidelines/

lucideer 9 years ago |

This is a beautifully put together website to showcase the library. Simple, fast, functional. All examples and questions covered. Design files are a bonus.

Also, as someone who browses with a content-blocker, a complete rarity to come across a site that works fully with zero 3rd-party host dependencies.

shutton 9 years ago |

As an alternative I've been using http://materializecss.com for a while and really love it.

kirillkh 9 years ago |

Is there a terse bird's-eye view explanation what Material Design is from a programmer's perspective? I tried approaching Google's documentation more than once, but, invariably, got completely overwhelmed every time.

on_and_off 9 years ago | |

It is a design language from Google. It takes a lot of inspiration from flat design but uses elevation (for example with elevated buttons). the idea is that our minds are used to '3D scan' what is in front of us and that it helps identify clickable elements. Color is also used a lot. In an app, the same accent color is used in order to denote clickable elements.

It gives us a framework with mostly good choices (nothing is perfect) in order to build apps (or websites) that users can use more easily since they will gradually get used to its conventions.

kaizoku111 9 years ago | |

In a nutshell, Material Design's philosophy is around using animations and transitions to enhance the user's experience and their perspective on the interactions with components. An example is when a user clicks on a button there will be a ripple effect. It's more of a spec with the UX and guidelines around it.

andres 9 years ago |

Hi Everyone - This is Andres, the lead author of MUI. It's exciting to see the project on HN and I'm glad to see some folks are finding it useful. Please let me know if you have any questions or suggestions!