6 ms·

Material Design Lite

105 points by lobo_tuerto 11y ago

Goranek 11y ago
this feels so much faster than the angular material :/
lorenzhs 11y ago
previous discussion on HN: https://news.ycombinator.com/item?id=9840682 https://news.ycombinator.com/item?id=9840682
pksunkara 11y ago
This is such a cool move from google. Doing material design in HTML/CSS/JS is pure win. I am working on React.js components for this. I have already did half of them. Check out https://github.com/pksunkara/react-mdl https://github.com/pksunkara/react-mdl. I welcome any contributions. EDIT: Components can be seen at https://github.com/pksunkara/react-mdl/tree/master/src https://github.com/pksunkara/react-mdl/tree/master/src
- tleunen 11y ago
  I also started the same thing a few weeks ago but I chose a different approach. I decided to use their `upgradeElement` function to upgrade the component, instead of re-writing everything. https://github.com/tleunen/react-mdl https://github.com/tleunen/react-mdl
- dominotw 11y ago
  > I am working on React.js components for this. Can you just use polymer though?
  - pksunkara 11y ago
    You can but I didn't like it and wanted to use react.js
    - dominotw 11y ago
      you can use both together if you don't care about server side rendering.
- mmahemoff 11y ago
  Thankyou. Until I saw your comment, I had no idea this came from Google. The domain is http://www.getmdl.io/ http://www.getmdl.io/, the site doesn't mention it, and a "lite" version sounds unofficial. The only clue is the Github icon links to https://github.com/google/material-design-lite https://github.com/google/material-design-lite link.
aesthetics1 11y ago
I think this has been around for a little while. I remember seeing it pop up on my feed. I think it's a great idea, but a lot of the animations are still a bit clunky (slow/choppy). Polymer still has the leg up, but this is neat for projects where you know your user base won't have access to the latest and greatest browser.
- minimaxir 11y ago
  Yes, it was released last month: https://news.ycombinator.com/item?id=9840682 https://news.ycombinator.com/item?id=9840682 I'm looking into using MDL for a redesign for my blog. Some of the layouts (e.g. the navigation and cards) seem more efficient than using Bootstrap. > Polymer still has the leg up, but this is neat for projects where you know your user base won't have access to the latest and greatest browser. MDL only loses support for IE9, which a) has a low market share b) will drop market share further as Win7 users upgrade to Win10 and c) heavy-duty websites have been dropping support.
nkozyra 11y ago
Well this was certainly better than extracting the AngularMaterial CSS, although I preferred the semantics used for the flexbox grid in the latter.
flowerpot 11y ago
Neat. Really like the approach. Is anyone else noticing the distracting optical illusion in the logo when reading the first paragraph on the landing page? If I am not the only one, someone should find a way to fix it.
- dboshardy 11y ago
  What are you seeing?
xdissent 11y ago
We wanted to use MDL but had already committed to Stylus and weren't willing to use a prebuilt MDL, so I am maintaining a Stylus port here: https://github.com/xdissent/material-design-lite/tree/stylus https://github.com/xdissent/material-design-lite/tree/stylus
harrybr 11y ago
Honest question: why would you want to use this? Material design is intended for Android native apps isn't it? It strikes me as a strange idea: - Material design uses lots of UI idioms that work well for an OS (user will learn them), but not so well for a website (that needs to be instantly usable on first use, or user will leave for a competitor). The overflow icon (three vertical dots) is one example. - Material design is the Google "branded" look and feel. No sane web business would want to give up their own look and feel. It even strikes me as a weird choice for @minimaxir's personal blog. If you're going to skin your site with another brand's look and feel, why not Uber? Amazon? etc? - It's never going to feel quite right. Uncanny valley between native app and website.
- elwesties 11y ago
  It is not only intended for mobile. Check out https://developers.google.com/ https://developers.google.com/ for what I think is a great use of material design. I agree that using it in your site may be somewhat Google branding of your site though.
  - katruchu 11y ago
    Also https://photos.google.com https://photos.google.com.
- eloisant 11y ago
  Actually no, material design is suppose to unify design for the web and native apps. Many Google properties on the web are Material Design now (Play Music, Google Photos, Google Plus...
  - mattmanser 11y ago
    And generally have really awful experiences on both desktop and mobile. On desktop there is tons of wasted space, key actions are generally hidden behind pointless hidden menus or silly + buttons that do multiple things even though there's loads of space to fit multiple buttons. Google Drive, Sheets, etc. are total jokes now. And I personally find Google play music is an incredibly bad user experience now for my habits. I like listening to my thumbs up playlist (unnecessarily hidden behind a slide out menu) and I like seeing my shuffle playlist (hidden behind a button that opens an idiotic floating modal). On mobile, everything is too spaced out so you can only see 5 out of the 50 things you might need to actually see. A perfect example is the calendar which is an unusable joke compared to the old one. Another good example is the new clock app where the alarms only show 3, and the timers are bizarrely stacked with only a tiny indicator showing there are multiple timers running. Material is a tablet design paradigm masquerading as a total solution.
andreapaiola 11y ago
Now I can Materialize your sites :D http://andreapaiola.name/magpie/ http://andreapaiola.name/magpie/
r3bl 11y ago
The blog template[1] looks stunning! [1] http://www.getmdl.io/templates/blog/index.html http://www.getmdl.io/templates/blog/index.html
PaulHoule 11y ago
What the hell is this? Does google pay fanbois to pretend that they want to tattoo themselves with material design, have a material design toaster, have a material design car, etc.. Material design is bad enough in Android we don't need it anyplace else.
ConAntonakos 11y ago
Used Polymer for a part of my team's application, but it seemed too heavy. Also, Polymer doesn't seem optimized for anything other than Chrome right now. I think Polymer is great for the web components portion of it. But I feel MDL might be better if you simply want the UI/UX design.
thom_nic 11y ago
One thing I like about material vs e.g. Bootstrap is their treatment of widgets. In particular, the range slider & toggle slider (checkbox alternative) seem common but bootstrap doesn't address these.
eivarv 11y ago
I really don't understand the hype surrounding material design. I get the widgets as "material" metaphor, space, motion, etc., but as I understand it the redefinition of every widget's appearance and ignoring UI conventions is the opposite of good design. The new design language (Material Design) is not made with any apparent metaphors in mind (e.g. the "tabs" are just plain nonsensical as elements), do not convey the system status or their use in any intuitive way, and is inconsistent with the widget look users are already accustomed to (as defined by their systems and by history). As others have mentioned, it's hard to see any real value in this outside of Google's own systems.
nightpool 11y ago
Why does this have such a heavy penalty? @dang can you comment on why this seems to have dropped off the front 3 pages?
pluma 11y ago
Aren't the transitions between the icon states supposed to be animated? For me (using the latest Google Chrome on Linux) they just jump from one state to the next when hovering over them.

105 points by lobo_tuerto 11y ago

Goranek 11y ago

this feels so much faster than the angular material :/

lorenzhs 11y ago

previous discussion on HN: https://news.ycombinator.com/item?id=9840682 https://news.ycombinator.com/item?id=9840682

pksunkara 11y ago

This is such a cool move from google. Doing material design in HTML/CSS/JS is pure win. I am working on React.js components for this. I have already did half of them. Check out https://github.com/pksunkara/react-mdl https://github.com/pksunkara/react-mdl. I welcome any contributions. EDIT: Components can be seen at https://github.com/pksunkara/react-mdl/tree/master/src https://github.com/pksunkara/react-mdl/tree/master/src

tleunen 11y ago
I also started the same thing a few weeks ago but I chose a different approach. I decided to use their `upgradeElement` function to upgrade the component, instead of re-writing everything. https://github.com/tleunen/react-mdl https://github.com/tleunen/react-mdl
dominotw 11y ago
> I am working on React.js components for this. Can you just use polymer though?
- pksunkara 11y ago
  You can but I didn't like it and wanted to use react.js
  - dominotw 11y ago
    you can use both together if you don't care about server side rendering.
mmahemoff 11y ago
Thankyou. Until I saw your comment, I had no idea this came from Google. The domain is http://www.getmdl.io/ http://www.getmdl.io/, the site doesn't mention it, and a "lite" version sounds unofficial. The only clue is the Github icon links to https://github.com/google/material-design-lite https://github.com/google/material-design-lite link.

aesthetics1 11y ago

I think this has been around for a little while. I remember seeing it pop up on my feed. I think it's a great idea, but a lot of the animations are still a bit clunky (slow/choppy). Polymer still has the leg up, but this is neat for projects where you know your user base won't have access to the latest and greatest browser.

minimaxir 11y ago
Yes, it was released last month: https://news.ycombinator.com/item?id=9840682 https://news.ycombinator.com/item?id=9840682 I'm looking into using MDL for a redesign for my blog. Some of the layouts (e.g. the navigation and cards) seem more efficient than using Bootstrap. > Polymer still has the leg up, but this is neat for projects where you know your user base won't have access to the latest and greatest browser. MDL only loses support for IE9, which a) has a low market share b) will drop market share further as Win7 users upgrade to Win10 and c) heavy-duty websites have been dropping support.

nkozyra 11y ago

Well this was certainly better than extracting the AngularMaterial CSS, although I preferred the semantics used for the flexbox grid in the latter.

flowerpot 11y ago

Neat. Really like the approach. Is anyone else noticing the distracting optical illusion in the logo when reading the first paragraph on the landing page? If I am not the only one, someone should find a way to fix it.

dboshardy 11y ago
What are you seeing?

xdissent 11y ago

We wanted to use MDL but had already committed to Stylus and weren't willing to use a prebuilt MDL, so I am maintaining a Stylus port here: https://github.com/xdissent/material-design-lite/tree/stylus https://github.com/xdissent/material-design-lite/tree/stylus

harrybr 11y ago

Honest question: why would you want to use this? Material design is intended for Android native apps isn't it? It strikes me as a strange idea: - Material design uses lots of UI idioms that work well for an OS (user will learn them), but not so well for a website (that needs to be instantly usable on first use, or user will leave for a competitor). The overflow icon (three vertical dots) is one example. - Material design is the Google "branded" look and feel. No sane web business would want to give up their own look and feel. It even strikes me as a weird choice for @minimaxir's personal blog. If you're going to skin your site with another brand's look and feel, why not Uber? Amazon? etc? - It's never going to feel quite right. Uncanny valley between native app and website.

elwesties 11y ago
It is not only intended for mobile. Check out https://developers.google.com/ https://developers.google.com/ for what I think is a great use of material design. I agree that using it in your site may be somewhat Google branding of your site though.
- katruchu 11y ago
  Also https://photos.google.com https://photos.google.com.
eloisant 11y ago
Actually no, material design is suppose to unify design for the web and native apps. Many Google properties on the web are Material Design now (Play Music, Google Photos, Google Plus...
- mattmanser 11y ago
  And generally have really awful experiences on both desktop and mobile. On desktop there is tons of wasted space, key actions are generally hidden behind pointless hidden menus or silly + buttons that do multiple things even though there's loads of space to fit multiple buttons. Google Drive, Sheets, etc. are total jokes now. And I personally find Google play music is an incredibly bad user experience now for my habits. I like listening to my thumbs up playlist (unnecessarily hidden behind a slide out menu) and I like seeing my shuffle playlist (hidden behind a button that opens an idiotic floating modal). On mobile, everything is too spaced out so you can only see 5 out of the 50 things you might need to actually see. A perfect example is the calendar which is an unusable joke compared to the old one. Another good example is the new clock app where the alarms only show 3, and the timers are bizarrely stacked with only a tiny indicator showing there are multiple timers running. Material is a tablet design paradigm masquerading as a total solution.

andreapaiola 11y ago

Now I can Materialize your sites :D http://andreapaiola.name/magpie/ http://andreapaiola.name/magpie/

r3bl 11y ago

The blog template[1] looks stunning! [1] http://www.getmdl.io/templates/blog/index.html http://www.getmdl.io/templates/blog/index.html

PaulHoule 11y ago

What the hell is this? Does google pay fanbois to pretend that they want to tattoo themselves with material design, have a material design toaster, have a material design car, etc.. Material design is bad enough in Android we don't need it anyplace else.

ConAntonakos 11y ago

Used Polymer for a part of my team's application, but it seemed too heavy. Also, Polymer doesn't seem optimized for anything other than Chrome right now. I think Polymer is great for the web components portion of it. But I feel MDL might be better if you simply want the UI/UX design.

thom_nic 11y ago

One thing I like about material vs e.g. Bootstrap is their treatment of widgets. In particular, the range slider & toggle slider (checkbox alternative) seem common but bootstrap doesn't address these.

eivarv 11y ago

I really don't understand the hype surrounding material design. I get the widgets as "material" metaphor, space, motion, etc., but as I understand it the redefinition of every widget's appearance and ignoring UI conventions is the opposite of good design. The new design language (Material Design) is not made with any apparent metaphors in mind (e.g. the "tabs" are just plain nonsensical as elements), do not convey the system status or their use in any intuitive way, and is inconsistent with the widget look users are already accustomed to (as defined by their systems and by history). As others have mentioned, it's hard to see any real value in this outside of Google's own systems.

nightpool 11y ago

Why does this have such a heavy penalty? @dang can you comment on why this seems to have dropped off the front 3 pages?

pluma 11y ago

Aren't the transitions between the icon states supposed to be animated? For me (using the latest Google Chrome on Linux) they just jump from one state to the next when hovering over them.