MUI – Lightweight CSS framework that follows Google’s Material Design guidelines | Hacker News Reader

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

muicss.com

48 pointskaizoku11113 comments

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

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

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

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.

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".

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

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/

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.

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

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.

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.

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.

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!

Reply on news.ycombinator.com