Material Design Lite Components in HTML/CSS/JS

https://github.com/google/material-design-lite

by vladikoff • 11 years ago

295 73 11 years ago

github.com

paulirish• 11 years ago

Full site here: http://getmdl.io

marcacohen• 11 years ago

and article with nice overview here: https://medium.com/google-developers/introducing-material-de...

thirdsun• 11 years ago

Smooth scrolling seems to be broken on iOS.

"-webkit-overflow-scroll: touch" seems to be missing on the main content if I had to guess.

asurma5• 11 years ago

Yes, your solution is correct! I discovered this issue too late for launch, but I have a PR open with this.

It needs some extensive testing because there might be weird interactions with our layout component and all the different header modes it has (scrolling header, waterfall, etc). Working on it :)

edit: https://github.com/google/material-design-lite/pull/730

spoiler2• 11 years ago

I love this! I've been meaning to make something like this myself for a project; now I won't have to.

I have to point out some flaws, though; for example the side menu here[1] has very low text contrast once you hove over them.

[1] http://www.getmdl.io/templates/dashboard/index.html

Zikes• 11 years ago

I think that's worth filing an issue for.

asurma5• 11 years ago

https://github.com/google/material-design-lite/issues/739

addy_osmani5• 11 years ago

Lead for MDL here. Glad you like the idea, spoiler :) Thanks for catching the low contrast issue with the dashboard navigation - is it the same as https://github.com/google/material-design-lite/issues/739?. If not, would you mind filing an issue on the repo and we'll try to get that fixed up soon?

https://github.com/google/material-design-lite/blob/master/C...

Alternatively, we can file a bug for you if you share details about the browser/os/device you were testing on.

spoiler2• 11 years ago

I was just leaving work when I wrote that; I was on my way to do it now, but then I saw someone already opened an issue.

Keep up the great work! :D

cc: @Zikes @asurma

Aldo_MX• 11 years ago

I loved that in contrast with the other Material Design Toolkits, this one uses only CSS for its animations.

andybak• 11 years ago

Are you saying that's a good thing mainly for performance reasons?

I ask mainly because I vaguely remember someone running the numbers and finding out that js animations surprisingly beat CSS animations in a number of not-unrealistic scenarios.

(I know there's other reasons for favouring CSS animations)

at-fates-hands• 11 years ago

Well, there's a slight distinction there. CSS animations are faster than jQuery which is important to remember. You can get the same boost from CSS Animations and even better performance if you're using GSAP (Green Sock Animation Platform) which uses Javascript to give the same benefits you see in CSS animations.

Here's the two articles:

https://css-tricks.com/myth-busting-css-animations-vs-javasc... - this article was written by the author of GSAP

http://davidwalsh.name/css-js-animation

The basic point of the article:

The results confirm what is widely reported on the web - CSS animations are significantly faster than jQuery. However, on most devices and browsers I tested, the JavaScript-based GSAP performed even better than CSS animations (by a wide margin in some cases, like on the Microsoft Surface RT GSAP was probably at least 5 times faster than the CSS transitions created by Zepto, and on the iPad 3 iOS7 transforms were significantly faster when animated with GSAP instead of CSS transitions)

TheSisb22• 11 years ago

I love the design, but I'm finding a lot of the animations aren't smooth. I'm on Chrome 43.

addy_osmani5• 11 years ago

If there are any animations at all you find are janky, could you file and we'll look at it soon? We've been performance testing on a wide range of devices/browsers but I'm certain there are plenty of areas we can improve on.

TheSisb22• 11 years ago

No problem.

weitzj• 11 years ago

I agree. The site does not scroll 'natively' (has inertia) on iOS 8.3 (iPad 3)

asurma5• 11 years ago

See @thirdsun’s comment :)

qwreasdfkjhiouy• 11 years ago

I have to say, I really dislike the appearance of material design.

frik• 11 years ago

It's like saying in a Windows 10 thread you dislike the MetroUI/ModernUI design.

I prefer the material design in Android 5+. And I like the iOS 7+ design and Win7 Aero design. But I cannot live with the ModernUI of Win8/XboxOne - who choose those ugly colors?

mattmanser• 11 years ago

The ripples drive me crazy. Everytime I click a button my mind gets yanked into "what just went wrong?" because of the inconsistent nature of the ripples. Even though I know it's going to happen.

bluthru• 11 years ago

At times it feels like a Flash site from 15 years ago--too much animation and it can be really heavy-handed.

Saturnaut• 11 years ago

I think we need to be careful of treating Material as an all encompassing solution. A lot of UI / UX folks I know are full on embracing it without taking a step back and seriously evaluating what problems it will and won't solve. I'm not saying I dislike it, I just think that there are different solutions for different situations. There is no silver bullet in our industry.

zvrba• 11 years ago

I dislike the abundance of color schemes with low saturation. This lower contrast, and I can imagine I'd have to turn up screen backlight to the max if I used it in sunlight.

I tried to use colleague's android and I found it unintuitive to use too (it wasn't obvious what elements you can interact with, and animations were annoying).

(I'm a WP user and it's THE UI I like best.)

vijayr• 11 years ago

What are the differences between this one and http://materializecss.com/ ?

4x3l• 11 years ago

There's FAQ page which explains it: http://www.getmdl.io/faq/index.html#existing-implementations

fiveseven_• 11 years ago

Material Design Lite is released and maintained officially by Google, whereas Materialize is by a third party

more info here: https://medium.com/google-developers/introducing-material-de...

JohnTHaller2• 11 years ago

Materialize seems to work much better in Firefox than MDL, especially on Android.

ranyefet• 11 years ago

It's looks great. Nice job! One problem I had with site is that the scrolling is unusable on mobile safari. Would be great if you could fix that.

asurma5• 11 years ago

Sorry it’s making the site unusable. Fix is incoming. See @thirdsun’s comment and my answer for details.

dstaley3• 11 years ago

So, I just wanna say I am absolutely, incredibly excited for this. I've loved the design of paper-elements, but I don't want to attempt integrating Polymer into my projects.

That being said, the use of BEM is a huge turn off. The markup for a simple card uses seventeen different classes, which is absolutely a nightmare to memorize. For comparison, a card from Materialize uses only five to seven classes (depending on the type of card).

However, since this is built in SASS, I assume you could use the extend keyword to combine a lot of the frequently used together classes into something more manageable. I haven't really used SASS in this way, so I'm not sure how that'd work.

addy_osmani5• 11 years ago

Thanks for the feedback. We used BEM as we find it helps with the long-term maintainability of CSS/SASS codebases (there's also copy/paste support on all of our snippets). That said, if you find the use of BEM a turn-off, we welcome folks just taking our styles and adapting them to the naming scheme that makes most sense for them. Anything that helps.

dominotw2• 11 years ago

Great work Addy!!. This made my day.

Any idea when we can expect these to make it to polymer 1.0. Basic components like dropdowns/cards are missing atm .

Akkuma• 11 years ago

I was overall impressed with what I saw, but when I saw the amount of classes required to achieve a simple button my jaw hit the ground at the level of commitment to BEM that bordered on what I'd consider absurd. To be fair, one could create their own snippets in an editor or in the case of React their own components to remove the need for all the boilerplate.

Now, a simple question is why would I want to use this over materializecss.com? I saw this from the FAQ:

That said, the large, diverse number of implementations available are often quite liberal with their interpretation of the spec (not their fault!) and their opinions don’t always reflect what the Material Design team would consider ‘correct’.

It doesn't specifically point out what these guys are doing wrong and I personally can't see much that is being done differently. Are there any specific examples you can point me toward?

Why make a completely new project rather than working with the communities out there? If the spec is too liberal it should be updated and issues posted under these projects, so these projects can properly follow the spec, unless they specifically choose to deviate from it.

spankalee• 11 years ago

I'm curious, what's keeping you from trying Polymer? Its paper-elements are a very good implementation of Material Design, and the library is very light weight.

dstaley3• 11 years ago

Most of my apps are built with Ember, and I just haven't quite figured out how to marry them both.

akshatpradhan• 11 years ago

What's keeping me from using Polymer is that nobody can tell me if Web Components is going to last. In fact, I don't know what's even in the running anymore.

tiglionabbit• 11 years ago

I was considering using Polymer. It worked great in Chrome. Then I tried using it in Firefox. It took a whole extra 1 second longer for Polymer to bootstrap itself on every page load, even when all assets were cached.

The blog post mentions speedups in Chrome and Safari. It does not mention Firefox.

BinaryIdiot• 11 years ago

I've used Polymer in two projects now. It's simply not ready for real production use in my opinion. Too many issues overriding / styling their components (modal is awkward as hell to style the content) and it's simply too slow on start-up. Firefox literally freezes for many seconds to load several components (chrome doesn't but it's still not very fast).

I want web components to be a thing but Polymer is not the path forward in its current state.

1qaz2wsx3edc• 11 years ago

As someone who used polymer/paper-elements recently in a project, these are some downsides:

1. The whole design guide is not implemented (date picker for example)

2. Web components polyfill while pretty fast still slows things down a bit

3. Extra effort required to debug/style components (shadow DOM)

4. It's still fairly bleeding edge, not for the faint of heart

5. Vulcanizing required for assets to avoid hundreds of imports/requests

These are some of the factors that would make me reconsider using it on another project. It still turned out very nice for the project however.

sidthekidder• 11 years ago

Tried Polymer in a recent project for a basic social webapp last month. Within 2 days we found ourselves reading github issues about to-be-released customization options - options that we needed. The basic features are present alright, but the customization options aren't enough. Integrating modals with custom scrolling, wanting more than 5 options for spacing in the header - why give yourself a hard time when materialize and foundation are waiting with their arms open?

matthijs_• 11 years ago

Great implementation of Material Design, the best I've seen so far. With other material design implementations [1] I ran into problems with checkboxes, sliders and other design choices, as well as problems on mobile. I appreciate the design choices made for MDL. It also runs smooth on mobile and the form elements like checkboxes and sliders work really nice.

Also, useful documentation along with codepen and easy clipboard buttons.

Following.

[1] To name a few material design examples: http://superdevresources.com/material-design-web-ui-framewor...

TranquilMarmot• 11 years ago

Well, it was made by Google, who originally defined Material Design in the first place, so I'd hope it would be the best one...

ArthurClemens• 11 years ago

Great news that Google has started this library. This will help MD implementors like me.

"That said, the large, diverse number of implementations available are often quite liberal with their interpretation of the spec (not their fault!) and their opinions don’t always reflect what the Material Design team would consider ‘correct’."

Nevertheless I found a number of deviations from the design specs:

  - Disabled buttons should not have a z level
  - FAB ripples should originate from the center
  - Icon buttons should have a touch area of at least 40px
  - The same goes for slider knobs (at least 30px, already small)

On the website:

  - The scrollable tabs on the site are scrolled just a couple of pixels per arrow click, instead of scrolled per tab
  - Scroll areas should have -webkit-overflow-scrolling: touch, the current site is not scrollable on Mobile Safari

Author of Polythene for Mithril, https://github.com/ArthurClemens/Polythene

addy_osmani5• 11 years ago

I'm almost certain our implementation isn't perfect :) We'll file bugs for the items you called out above and try to get them fixed up shortly.

LoSboccacc• 11 years ago

Outstanding library. I like this version of material more than the other with polimer that's completeley flat.

There are some issues with scrolling in general and with scrolling with tooltips open on ios, but will follow and see if they eventually get around those.

gbrits• 11 years ago

Rigorous implementation of the specs, with well managed css (BEM) to boot. Render me excited!

applecore• 11 years ago

It'd be great to see this work with Bootstrap.

JohnTHaller2• 11 years ago

Check out Material Design for Bootstrap: https://fezvrasta.github.io/bootstrap-material-design/

Animats• 11 years ago

Is there a site using this does something useful and is better than a vanilla site? One that isn't a portfolio, resume, demo, or Material Design promotion? There's a site of "15 awesome examples"[1], but they're mostly promotions for material design, or very basic sites.

[1] http://materialdesignblog.com/15-awesome-examples-of-materia...

philtar• 11 years ago

I'm genuinely curious: This looks very lame. Why are the commenters excited? Not trying to offend I'm mean lame as pragmatically as possible.

philliphaydon• 11 years ago

I was thinking the same. I initially thought based on the name I could pick a single component to use but its an entire framework, so it still suffers from bloat.

adl• 11 years ago

28K minified is bloat?

okpatil• 11 years ago

It might be brand "GOOGLE" that is getting them excited

moeedm• 11 years ago

Material Design is the new Bootstrap.

ConAntonakos2• 11 years ago

Perhaps! At the same time, it's great that there are more options for those who need help with design! ;)

mistborn1991• 11 years ago

Thanks alot for sharing it.

urbanvikingr• 11 years ago

Material Design Lite is the framework that is most true to MD guidelines and requires less code to implement. That being said, it is still early in development.

I tried Polymer for 6 months ago. It looked, but it was every early, and I was developing with Angular. Later, I switch to React which is a better fit for me than Angular. But I still wanted MD, so I tried both Material_UI and Materialize. Material-UI is a React implementation of MD and Materialize uses jQuery. I quickly discarded them. MDL is as the name says very small and mostly built with CSS. You can customize the CSS classes easy, if you need to. I like BEM. It might be difficult for some to use, but long-term in large production apps, it is great for easy maintenance.

I encourage everyone that like MD to try it out and file issue requests for bugs or feature requests if you are missing something.

rtpg• 11 years ago

Is it just me or do a lot of these components lack the depth perception aspect of other material design things?

Depth is such an important part of the nice look of Material Design that not having it seems like a big mistake

neya• 11 years ago

Wow, this is really nice, considering the fact that it's coming directly from Google. However, I really urge you to also try the Material Design theme from Semantic UI framework - I can tell you honestly that I haven't seen a framework as comprehensive and elegant as it. It's a pleasure to not having to write a custom class because what you want is already provided by the framework in some form or the other. Just my humble opinion.

freyr• 11 years ago

The Material Design Lite website (http://www.getmdl.io) breaks scroll behavior on mobile Safari.

If you're promoting a UI/UX product, you really shouldn't be bungling scrolling. Because if you can't get your own site working well, I'm not trusting your libraries on my site.

sancha_• 11 years ago

Haven't you heard, Safari is the new IE.

asurma5• 11 years ago

We just rolled out a fix for that :)

_ari• 11 years ago

If only this had dropdown/selection menus. I probably would have used it in a project.

pan69• 11 years ago

Agreed. This project is awesome but without usable form elements (there's more to forms that text fields) this isn't really usable for anything a little more complex.

tyingp• 11 years ago

Why do tooltips look exactly like buttons? I see end users haplessly clicking on tooltips, waiting for something to happen.

bikas• 11 years ago

Ohh the BEM bummer. All those __ and -- makes my eye hurt. Write decent line of code in HTML file with BEM classes and it looks worse than inline styles (visually). For the rest of library, I'm still trying and testing, but I don't think I'll be moving any of my main projects to this library because of BEM.

shenzhuxi• 11 years ago

I've moved my project https://github.com/shenzhuxi/readiator from Onsen UI to Material Design Lite. Looking forward modal component.

ConAntonakos2• 11 years ago

Thank you for this. I still feel like the Material Design implementation within Polymer is rough around the edges. Having issues with Firefox, for example, in terms of optimization and documentation is still very incomplete. Looking forward to working with both libraries, though!

Material Design Lite Components in HTML/CSS/JS

Related Stories