10 ms·

A modern responsive front-end framework based on Material Design

215 points by czottmann 11y ago

rattray 11y ago
This really does look incredible. I'm curious, how much heritage does it share with Bootstrap?
pan69 11y ago
Looks great. However, I've never really understood this sort of approach: <ul class="collection"> <li class="collection-item">Alvin</li> <li class="collection-item">Alvin</li> <li class="collection-item">Alvin</li> <li class="collection-item">Alvin</li> </ul> Rather than assigning a "collection-item" class to each "li", would you not simply style the "li" in the context of "collection"? Bootstrap does a similar thing. Drives me nuts...
- weego 11y ago
  It's so you don't clobber the underlying styles, otherwise you end up having to reset on top of the frameworks resets and styles on the odd occasion you want one of the collection li's to not have the styles. I tend to agree with you, but I was heavily chastised by lead the front end dev at my last gig for ever directly applying design styles to tag entities as doing it as above is considered best practice at the moment (until the cycle comes around again to another best practice).
  - pan69 11y ago
    >> but I was heavily chastised by lead the front end dev at my last gig for ever directly applying design styles to tag entities as doing it as above is considered best practice I'd say, keep it DRY [1]. http://en.wikipedia.org/wiki/Don't_repeat_yourself http://en.wikipedia.org/wiki/Don't_repeat_yourself
    - ahallock 11y ago
      It doesn't violate DRY. The repetition of "collection" is indicating a descendent component: https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md https://github.com/suitcss/suit/blob/master/doc/naming-conve...
      - BinaryIdiot 11y ago
        HTML provides nesting. Nesting indicates it is a descendent component. This would violate DRY.
        ahallock 11y ago
        LIs are generic containers--the only way to narrowly scope LIs is to use hierarchical selectors, which leads location dependency and specificity issues. The class name creates a scope and you need to apply that to decedent components to enforce the scope. It's DRY within the naming convention, which doesn't mix element selectors with class selectors (or at least rarely).
        BinaryIdiot 11y ago
        > LIs are generic containers LIs are actually kinda special. It's incredibly difficult to create your own LI in, say, web components because of their specialness (at least I've never seen it work in all browsers though there are probably some crazy hacks to get it there (or at least close enough)). > which leads location dependency and specificity issues You have a list of a specific type so you put a class on it. Why would that specific type of list now contain items that can be used in multiple places versus in that specific list and why would they ever be moved from that specific type of list? I don't really understand the issue you're trying to convey.
  - bbx 11y ago
    Tell your lead front dev this approach isn't best practice at all. You want one collection li's to not have the style? Use an alternative class on the ul: "collection collection-alt". You want nested li's to not inherit the styles? Use ".collection > li" in your CSS. In any case, assigning a class on each li goes exactly against CSS best practices, because it prevents taking advantage of the inheritance of property values or of advanced selectors.
    - dovel 11y ago
      I dont do this repeating class business but CSS Tricks 'css guidelines' web page says that when you do : '.collection li', it first searches through the page for all 'li's then wittles it down to the ones within the correct parent. Essentially that css selectors work from right to left. So I guess the idea is that classing up the li elements within a parent may be marginally quicker? I have never bothered though. Does anyone know more about this?
      - ddoolin 11y ago
        This is true, actually. They are read from right-to-left. I'm not sure how much extra resources are expended searching this way opposed to the other, though my guess would be the same as yours. It may be worth a benchmark?
      - anton-107 11y ago
        It used to be the issue in the "old browsers", modern browsers optimize the css query selectors to a very high extent, so users probably won't see a difference on any real web page / app
      - vbezhenar 11y ago
        Modern browsers do their best to optimize typical use-cases for CSS selectors and .collection li for sure will be handled optimally. You shouldn't worry about CSS selector performance unless you have to provide good performance for very old browsers or hit specific performance problem. Optimize for humans, not for computers.
  - moron4hire 11y ago
    I've come to expect people who criticize others using "best practice" as their "source" are themselves not very good at what they do and are just cargo-culting ideas without any real understanding in underlying principles.
- deleted 11y ago
  [deleted]
- danielmason 11y ago
  There's a reasoning behind this. You may not agree with it, but it's good to fully understand the problem it's trying to solve. There are two problems with your suggested approach -- specificity and coupling. The rules of CSS are such that .collection > li is a more specific selector than .collection-item. So if you want a particular item in the list to be red, you can't just give it a class name .warning-item and style against that -- you have to match or exceed the existing specificity. In the simple case, this isn't too bad, but it's surprisingly easy to end up representing deeply nested structures in your CSS which are very difficult to override. The coupling problem is really just a way of saying that it might not be a good idea to describe the specifics of your HTML implementation in CSS. Class names are like an interface. One refactoring I've actually done a lot is switching out lists like the above for a combination of nav and anchor elements. It's great to be able to do that without needing to rewrite all the corresponding CSS, too. These are tools designed to help you manage complexity and increase flexibility, not dogma. If you don't find your HTML needing to change much, or you don't need to make styles overrideable, then YAGNI. Hopefully it makes sense why framework authors, whose work is explicitly designed to be overridden, would choose this approach.
  - riquito 11y ago
    Performance is penalized too. Since CSS rules are parsed from right to left and you have probably a lot of "li" tags, the rule would be very inefficient. Of course this doesn't matter in small pages.
    - rimantas 11y ago
      It does not matter in any real life pages.
      - riquito 11y ago
        It did for Trello, to name an example (search for speed in http://blog.trello.com/refining-the-way-we-structure-our-css-at-trello/ http://blog.trello.com/refining-the-way-we-structure-our-css...).
    - 11y ago
- CleanCoder 11y ago
  SMACSS - Scalable and Modular Architecture for CSS.
- yummybear 11y ago
  My personal experience is: Using element names instead of class names can be problematic. In some frameworks you may need to use a different element or an element that wraps another element to achieve certain functionality. Some use generic names like "button large" as class names, but, again in my personal experience, it often causes problems. You might have other elements that need to be "large" and may need to be inside a button - but which "large" do you mean. So to keep things predictable, I've adopted the following practices: - Always namespace components. - Always ensure that selectors work even if the child has a wrapper around it. - Whenever possible use classnames instead of element names. And to ensure I don't get tendonitis (not sure if everyone agrees with this): - If possible provide a shorthand for at least the most used components (i.e. "col"/"col-i" for "collection"/"collection-item"
- EugeneOZ 11y ago
  What will you do when you need div.a list instead of ul.li?
drikerf 11y ago
Looks awesome!
ben_hall 11y ago
I've been using it for the past six months, very powerful however it's important to try and understand the underlying Google Material Design guidelines otherwise elements can look out of place.
bjrnjs 11y ago
This looks really good, but the jQuery dependency makes it unfortunately less interesting. It should be possible to have the jQuery dependency optional, possibly only for legacy browser support.
- biot 11y ago
  Agreed. I'd love to see an AngularJS port of this. https://material.angularjs.org https://material.angularjs.org seems to lack some of the polish that this has.
  - sosuke 11y ago
    You might also like http://ui.lumapps.com/ http://ui.lumapps.com/ then. Rumor has it they are going to merge with that project eventually, or help out.
- sergiotapia 11y ago
  On the other hand, supporting jQuery makes it better on my end because it's easy to integrate.
tinussky 11y ago
Bootstrap material design has something similar, although it is not matured yet: https://github.com/FezVrasta/bootstrap-material-design https://github.com/FezVrasta/bootstrap-material-design
- skore 11y ago
  The main issue with bootstrap-material is that this project is afflicted by the dreaded "developer thinks he needs his own license" bug[0][1]. It's effectively CC BY-SA-NC which is rather bold when you consider that it's adopting a design framework from Google for a css framework from Twitter. [0] https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md https://github.com/FezVrasta/bootstrap-material-design/blob/... [1] https://github.com/FezVrasta/bootstrap-material-design/search?q=license&type=Issues https://github.com/FezVrasta/bootstrap-material-design/searc...
  - hughstephens 11y ago
    +1. Saw this earlier, thought "looks good, I should use it for a project", then read license and went "hahahahhaha no chance, not using a normal/standard licence is way too high risk for me, no matter the project".
    - skore 11y ago
      If you follow the discussions on github, the latest consideration is to use AGPL. For a CSS library. But fear not! > There will be a commercial license as well. [0] Well, if he goes that far, perhaps Google or Twitter lawyers will finally put an end to this. [0] https://github.com/FezVrasta/bootstrap-material-design/issues/410#issuecomment-73026734 https://github.com/FezVrasta/bootstrap-material-design/issue...
starikovs 11y ago
It's really cool. They use flexbox in some places! I don't understand why bootstap hasn't do that yet.
- roughcoder 11y ago
  If it was not for the need to have a fallback for IE9 I would be using flexbox as standard, its a great feature with deals with so many of the common page layout issues, including vertical align. Bootstrap is quite web focused still so I guess it will come when support for IE9 is not expected. Though if you are doing an mobile/tablet only solution I would probably use flexbox only now. As long as you keep to the 2012 spec, you should be ok. http://caniuse.com/#feat=flexbox http://caniuse.com/#feat=flexbox Bring on the death of IE9!!
zhte415 11y ago
This looks really nice, and I will try it in a project. The responsiveness doesn't seem to totally work though, perhaps an environment not tested. Desktop: I tried this by progressively shrinking my (desktop) browser window width to around 200px, and the main content seemed to get stuffed under the left menu with no responsive re-layout. [IE 11 on Windows 8.1]. Mobile: I tried on my mobile (Android 4.4.2 480*800, Firefox - worked OK on default browser) the design was definitely for mobile (no problem like the above) apart from a ~20px white margin for the content on the right.
hbhakhra 11y ago
"Generally it is wise to import javascript files at the end of the body to reduce page load time." Does this really make a difference? Even if it did, wouldn't it lead to seeing a jump in the content after the CSS loads?
- sergiotapia 11y ago
  Yep. If you link a javascript file your browser needs to parse that URL, open the connection, download the asset, etc. all before drawing something on the screen. As a general best practice don't load -any- javascript in the head. Only at the end of the body tag right before `</body>`
- chucksmash 11y ago
  CSS files must be in the head element. JS files can be in either the head or the body.
  - chucksmash 11y ago
    (Though IIRC all linked resources in the head are retrieved and processed prior to rendering so unless your JS is crucial to correct display of the page your preference should be to load JS as late as possible.)
- madeofpalk 11y ago
  Basically because of document.write(), the browser has to download and execute a script tag before it can move on to rendering the rest of page.
- DougWebb 11y ago
  In every real project I've done, where a nested templating system is used to generate the markup and templates might contain javascript code, I always load some javascript libraries in the head. Typically that's Modernizr and jQuery, and if I'm using them jQuery Validate and Microsoft's jQuery Unobtrusive Validation. This lets my templates contain initialization functions inside of $(document).ready(function() {...}); calls without running into a "$ not defined" error. The alternative would be to somehow bubble up from my templates a list of initialization functions to call, or to have every page load run through a bunch of tests to find things that need to be initialized. I think the tradeoff of loading jQuery early is worth it, especially since I usually load it from Google's CDN so it's probably cached.
V-2 11y ago
Nice. I'm not a Google fanboy, but I believe Material is the best visual language for UI. Okay, there are different contexts, but it's best thought-through, and most modern. For instance, the use of animation is finally mature and at the same rich and amplifying user experience (rather than being an eye-candy). And I think it's very compatible with web apps. A Material-ish popular chess site: http://en.lichess.org/ http://en.lichess.org/ (I'm in no way associated, but a happy user)
- Karunamon 11y ago
  What? Why? I personally find Material to be hideous because of its color abuse. It makes your UI look like an over-saturated Fischer-Price toy because of all the bright primary colors everywhere, and that's before we get into the lack of shadow and shading that seems to have infected "modern" design.
  - kenbellows 11y ago
    Colors are easily changed, and certainly expected to be changed for reach site; that really isn't relevant to the tech being present. And are you railing against flat design in general? This is another personal preference religious war that's been waged back and forth since the advent of digital design. Don't worry, the pendulum will undoubtedly swing back your way again in a few years.
    - V-2 11y ago
      Well, Material is already a bit of a compromise, it's not as radical as Microsoft's Metro (I know they don't call it that anymore). It uses physical metaphores and fake 3D, it's just very subtle at it.
  - kenbellows 11y ago
    Also, with respect to color, Material is by no means limited to (or even promoting) primary colors: http://materializecss.com/color.html http://materializecss.com/color.html
  - 11y ago
pachydermic 11y ago
Outstanding work - now I have to fight the temptation to go haywire with this and try putting it everywhere... Looks great, though!
smoe 11y ago
I have started using it this week and really like it so far. But there were two annoyances: Select elements (without .browser-default class) are display:none and only shown, when initiated via javascript and similarly checkboxes are put off screen and thus invisible if there's no corresponding label (in my case the ones to select rows in a table). Of course they were easily fixed. But it seems odd to me, to make unexpected things like that the default behavior and – in the case of the selects – risk making your site/app unusable if something goes wrong in your js just to avoid a flash of unstyled content.
Raphmedia 11y ago
I understand that the localisation of the text is done by JS, but god that flicker on the menu annoys me. You should hide the menu and only display it after the work has been done. Make it fade in or use some other material design animation. Edit: Why is this getting downvoted? This is a page made to present a framework based on material design. Flickering instead of smoothly presenting content is the anti-thesis of material design. If your demo page features a big annoying issue, this is giving a very bad impression to your users.
subpixel 11y ago
This is impressive. I'll just have to override the form styling - personally I find the material approach to forms to be a case of trying to fix something that isn't broken.
smrtinsert 11y ago
Been playing with this project. The team is energetic and responsive, submitted a bug and it was fixed literally in a few hours. They seem committed to producing a top css framework, and of course its already gorgeous. Great work.
Tankenstein 11y ago
Have been using this in production for about 4 months now, still has a lot of quirks to iron out, but nothing you can't solve pretty fast. It's noticeably (and obviously) less mature than bootstrap, but it's definitely worth a shot. I quite recommend it.
bjterry 11y ago
One thing I've noticed about Material Design is that most of the examples of "best designs" have elements that are overlapping to some extent, but none of the frameworks that I see make it easy to have overlapping elements with defaults like grid layouts. I guess this isn't limited to just material design though. It seems like many times overlapping visual elements is a subtle indicator of a more professional design. Is there a solution to this problem using CSS (I mean, I know how to overlap elements, but ideally there would be something more structured or principled) or is it just doomed to be difficult?
- DougWebb 11y ago
  I don't know any frameworks that do it, but it seems like you could have an element that fits into the normal grid, and then inside that have an element with a "breaks the grid" class applied which uses positioning raise it up and make it overlap grid boundaries. You might need a special class on the parent element too so you can prevent it from collapsing. This seems like something that can be done in a fairly generic way.
  - bjterry 11y ago
    Yeah, I think in isolation stuff like that can be useful, but I feel like there should be a better abstraction. I'm not enough of a designer to know what that abstraction would be, and it seems like unexplored territory in CSS frameworks now as far as I can tell.
Taig 11y ago
This framework really impressed me when I first saw it and made me immediately wanna use it. However, when I took a closer look I found a few things that annoyed me: - The required HTML classes seemed kinda bloated and not semantic, but I intended to fix that with Sass (well, officially they're on Less) - The input elements have weird animation on page load - When I just dropped in some basic elements, like an input field (with its wrappers) nothing was really working. Things were not properly aligned and I had to add all this container/row/column stuff, even though I just came for the widgets And last but not least what made me finally ditch it: - To display form validation errors, I have to supply a data-error attribute which will then get rendered via css as a pseudo ::after to the label. That is just weird. I then checked how it works without JavaScript and saw labels overlapping placeholders. It looks beautiful and I like how comprehensive it is. Really hope they'll improve on some of these technical flaws.
- jmett 11y ago
  Regarding the labels overlapping placeholders, adding the "active" class to the label solves this.
- andres 11y ago
  If you have a second check out MUI, which is a lightweight Material Design framework that addresses some of your technical concerns: https://www.muicss.com https://www.muicss.com Let me know what you think!
ac360 11y ago
This looks beautiful and it's wonderful to have more options than Bootstrap. I also recommend Skeleton for anyone who wants a super minimal UI framework: https://github.com/dhg/Skeleton https://github.com/dhg/Skeleton
they4kman 11y ago
I'm using this library for a side project, whose main application is on mobile. The layout system and styles are absolutely fantastic, but the library falls short on forms. Specifically, the range input uses a bubble on mouseover, which is not touch-screen friendly. I've also had minor issues with the select widget not closing after a selection is made. Additionally, the styles for labels is inconsistent amongst different input types. For everything else, this library is wonderful. The forms area could use some polish.
theVirginian 11y ago
At first I was like "not another framework" but then I looked at it and this is actually very nice.
ozten 11y ago
Overall, very cool project! The menu animation is really slow on Firefox 37 on Mac OS X. The way pages load and then more animations happen seems jarring. I've not used any material based apps, so maybe I'm just not used to how things work.
spdustin 11y ago
Many comments here use the phrase "best practices" as a means to shut down opposing opinions or practices. That feels very wrong to me. I am often heard saying (in classes, public presentations, etc.), "I don't like the phrase 'best practice'. It implies that someone knows your requirements better than you. So I don't use it. What's 'best' for me might suck for you. So I say: the best practice is, in many cases, simply to have a practice that you and your team adhere to. One which meets your requirements, now and foreseen." Class-itis, div-itis, selector-nesting-itis... They all have a place in the Real World.
- tehchromic 11y ago
  i think this is a good perspective. at the some practices are clearly better than others, and sometimes it is appropriate to say "best practice", because in certain narrowly defined circumstances, there really is a best. but the idea of team practice as the goal overall, and best practice as something that is both personal and defined by external circumstance is solid.
Animats 11y ago
What a blast from the past! It's like looking at Flash sites from a decade ago. Compare https://www.straphq.com/ https://www.straphq.com/ with Jennifer Estep (author) 2009 [1] Compare: http://danielangel.media/ http://danielangel.media/ with Girbaud (designer jeans, now defunct) 2005 [2] 2012[3] [1] https://web.archive.org/web/20070408092333/http://www.jenniferestep.com/ https://web.archive.org/web/20070408092333/http://www.jennif... [2] https://web.archive.org/web/20051130094152/http://www.girbaud.com/eng/home.html https://web.archive.org/web/20051130094152/http://www.girbau... [3] https://web.archive.org/web/20120207224137/http://www.girbaud.com/eng/ https://web.archive.org/web/20120207224137/http://www.girbau...
northm 11y ago
FWIW Some of us have built a nice ember.js wrapper around Materialize :) http://sgasser.github.io/ember-cli-materialize http://sgasser.github.io/ember-cli-materialize https://github.com/sgasser/ember-cli-materialize https://github.com/sgasser/ember-cli-materialize

215 points by czottmann 11y ago

This really does look incredible. I'm curious, how much heritage does it share with Bootstrap?

pan69 11y ago

Looks great. However, I've never really understood this sort of approach: <ul class="collection"> <li class="collection-item">Alvin</li> <li class="collection-item">Alvin</li> <li class="collection-item">Alvin</li> <li class="collection-item">Alvin</li> </ul> Rather than assigning a "collection-item" class to each "li", would you not simply style the "li" in the context of "collection"? Bootstrap does a similar thing. Drives me nuts...

weego 11y ago
It's so you don't clobber the underlying styles, otherwise you end up having to reset on top of the frameworks resets and styles on the odd occasion you want one of the collection li's to not have the styles. I tend to agree with you, but I was heavily chastised by lead the front end dev at my last gig for ever directly applying design styles to tag entities as doing it as above is considered best practice at the moment (until the cycle comes around again to another best practice).
- pan69 11y ago
  >> but I was heavily chastised by lead the front end dev at my last gig for ever directly applying design styles to tag entities as doing it as above is considered best practice I'd say, keep it DRY [1]. http://en.wikipedia.org/wiki/Don't_repeat_yourself http://en.wikipedia.org/wiki/Don't_repeat_yourself
  - ahallock 11y ago
    It doesn't violate DRY. The repetition of "collection" is indicating a descendent component: https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md https://github.com/suitcss/suit/blob/master/doc/naming-conve...
    - BinaryIdiot 11y ago
      HTML provides nesting. Nesting indicates it is a descendent component. This would violate DRY.
      - ahallock 11y ago
        LIs are generic containers--the only way to narrowly scope LIs is to use hierarchical selectors, which leads location dependency and specificity issues. The class name creates a scope and you need to apply that to decedent components to enforce the scope. It's DRY within the naming convention, which doesn't mix element selectors with class selectors (or at least rarely).
        BinaryIdiot 11y ago
        > LIs are generic containers LIs are actually kinda special. It's incredibly difficult to create your own LI in, say, web components because of their specialness (at least I've never seen it work in all browsers though there are probably some crazy hacks to get it there (or at least close enough)). > which leads location dependency and specificity issues You have a list of a specific type so you put a class on it. Why would that specific type of list now contain items that can be used in multiple places versus in that specific list and why would they ever be moved from that specific type of list? I don't really understand the issue you're trying to convey.
- bbx 11y ago
  Tell your lead front dev this approach isn't best practice at all. You want one collection li's to not have the style? Use an alternative class on the ul: "collection collection-alt". You want nested li's to not inherit the styles? Use ".collection > li" in your CSS. In any case, assigning a class on each li goes exactly against CSS best practices, because it prevents taking advantage of the inheritance of property values or of advanced selectors.
  - dovel 11y ago
    I dont do this repeating class business but CSS Tricks 'css guidelines' web page says that when you do : '.collection li', it first searches through the page for all 'li's then wittles it down to the ones within the correct parent. Essentially that css selectors work from right to left. So I guess the idea is that classing up the li elements within a parent may be marginally quicker? I have never bothered though. Does anyone know more about this?
    - ddoolin 11y ago
      This is true, actually. They are read from right-to-left. I'm not sure how much extra resources are expended searching this way opposed to the other, though my guess would be the same as yours. It may be worth a benchmark?
    - anton-107 11y ago
      It used to be the issue in the "old browsers", modern browsers optimize the css query selectors to a very high extent, so users probably won't see a difference on any real web page / app
    - vbezhenar 11y ago
      Modern browsers do their best to optimize typical use-cases for CSS selectors and .collection li for sure will be handled optimally. You shouldn't worry about CSS selector performance unless you have to provide good performance for very old browsers or hit specific performance problem. Optimize for humans, not for computers.
- moron4hire 11y ago
  I've come to expect people who criticize others using "best practice" as their "source" are themselves not very good at what they do and are just cargo-culting ideas without any real understanding in underlying principles.
deleted 11y ago
[deleted]
danielmason 11y ago
There's a reasoning behind this. You may not agree with it, but it's good to fully understand the problem it's trying to solve. There are two problems with your suggested approach -- specificity and coupling. The rules of CSS are such that .collection > li is a more specific selector than .collection-item. So if you want a particular item in the list to be red, you can't just give it a class name .warning-item and style against that -- you have to match or exceed the existing specificity. In the simple case, this isn't too bad, but it's surprisingly easy to end up representing deeply nested structures in your CSS which are very difficult to override. The coupling problem is really just a way of saying that it might not be a good idea to describe the specifics of your HTML implementation in CSS. Class names are like an interface. One refactoring I've actually done a lot is switching out lists like the above for a combination of nav and anchor elements. It's great to be able to do that without needing to rewrite all the corresponding CSS, too. These are tools designed to help you manage complexity and increase flexibility, not dogma. If you don't find your HTML needing to change much, or you don't need to make styles overrideable, then YAGNI. Hopefully it makes sense why framework authors, whose work is explicitly designed to be overridden, would choose this approach.
- riquito 11y ago
  Performance is penalized too. Since CSS rules are parsed from right to left and you have probably a lot of "li" tags, the rule would be very inefficient. Of course this doesn't matter in small pages.
  - rimantas 11y ago
    It does not matter in any real life pages.
    - riquito 11y ago
      It did for Trello, to name an example (search for speed in http://blog.trello.com/refining-the-way-we-structure-our-css-at-trello/ http://blog.trello.com/refining-the-way-we-structure-our-css...).
  - 11y ago
CleanCoder 11y ago
SMACSS - Scalable and Modular Architecture for CSS.
yummybear 11y ago
My personal experience is: Using element names instead of class names can be problematic. In some frameworks you may need to use a different element or an element that wraps another element to achieve certain functionality. Some use generic names like "button large" as class names, but, again in my personal experience, it often causes problems. You might have other elements that need to be "large" and may need to be inside a button - but which "large" do you mean. So to keep things predictable, I've adopted the following practices: - Always namespace components. - Always ensure that selectors work even if the child has a wrapper around it. - Whenever possible use classnames instead of element names. And to ensure I don't get tendonitis (not sure if everyone agrees with this): - If possible provide a shorthand for at least the most used components (i.e. "col"/"col-i" for "collection"/"collection-item"
EugeneOZ 11y ago
What will you do when you need div.a list instead of ul.li?

drikerf 11y ago

Looks awesome!

ben_hall 11y ago

I've been using it for the past six months, very powerful however it's important to try and understand the underlying Google Material Design guidelines otherwise elements can look out of place.

bjrnjs 11y ago

This looks really good, but the jQuery dependency makes it unfortunately less interesting. It should be possible to have the jQuery dependency optional, possibly only for legacy browser support.

biot 11y ago
Agreed. I'd love to see an AngularJS port of this. https://material.angularjs.org https://material.angularjs.org seems to lack some of the polish that this has.
- sosuke 11y ago
  You might also like http://ui.lumapps.com/ http://ui.lumapps.com/ then. Rumor has it they are going to merge with that project eventually, or help out.
sergiotapia 11y ago
On the other hand, supporting jQuery makes it better on my end because it's easy to integrate.

tinussky 11y ago

Bootstrap material design has something similar, although it is not matured yet: https://github.com/FezVrasta/bootstrap-material-design https://github.com/FezVrasta/bootstrap-material-design

skore 11y ago
The main issue with bootstrap-material is that this project is afflicted by the dreaded "developer thinks he needs his own license" bug[0][1]. It's effectively CC BY-SA-NC which is rather bold when you consider that it's adopting a design framework from Google for a css framework from Twitter. [0] https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md https://github.com/FezVrasta/bootstrap-material-design/blob/... [1] https://github.com/FezVrasta/bootstrap-material-design/search?q=license&type=Issues https://github.com/FezVrasta/bootstrap-material-design/searc...
- hughstephens 11y ago
  +1. Saw this earlier, thought "looks good, I should use it for a project", then read license and went "hahahahhaha no chance, not using a normal/standard licence is way too high risk for me, no matter the project".
  - skore 11y ago
    If you follow the discussions on github, the latest consideration is to use AGPL. For a CSS library. But fear not! > There will be a commercial license as well. [0] Well, if he goes that far, perhaps Google or Twitter lawyers will finally put an end to this. [0] https://github.com/FezVrasta/bootstrap-material-design/issues/410#issuecomment-73026734 https://github.com/FezVrasta/bootstrap-material-design/issue...

starikovs 11y ago

It's really cool. They use flexbox in some places! I don't understand why bootstap hasn't do that yet.

roughcoder 11y ago
If it was not for the need to have a fallback for IE9 I would be using flexbox as standard, its a great feature with deals with so many of the common page layout issues, including vertical align. Bootstrap is quite web focused still so I guess it will come when support for IE9 is not expected. Though if you are doing an mobile/tablet only solution I would probably use flexbox only now. As long as you keep to the 2012 spec, you should be ok. http://caniuse.com/#feat=flexbox http://caniuse.com/#feat=flexbox Bring on the death of IE9!!

zhte415 11y ago

This looks really nice, and I will try it in a project. The responsiveness doesn't seem to totally work though, perhaps an environment not tested. Desktop: I tried this by progressively shrinking my (desktop) browser window width to around 200px, and the main content seemed to get stuffed under the left menu with no responsive re-layout. [IE 11 on Windows 8.1]. Mobile: I tried on my mobile (Android 4.4.2 480*800, Firefox - worked OK on default browser) the design was definitely for mobile (no problem like the above) apart from a ~20px white margin for the content on the right.

hbhakhra 11y ago

"Generally it is wise to import javascript files at the end of the body to reduce page load time." Does this really make a difference? Even if it did, wouldn't it lead to seeing a jump in the content after the CSS loads?

sergiotapia 11y ago
Yep. If you link a javascript file your browser needs to parse that URL, open the connection, download the asset, etc. all before drawing something on the screen. As a general best practice don't load -any- javascript in the head. Only at the end of the body tag right before `</body>`
chucksmash 11y ago
CSS files must be in the head element. JS files can be in either the head or the body.
- chucksmash 11y ago
  (Though IIRC all linked resources in the head are retrieved and processed prior to rendering so unless your JS is crucial to correct display of the page your preference should be to load JS as late as possible.)
madeofpalk 11y ago
Basically because of document.write(), the browser has to download and execute a script tag before it can move on to rendering the rest of page.
DougWebb 11y ago
In every real project I've done, where a nested templating system is used to generate the markup and templates might contain javascript code, I always load some javascript libraries in the head. Typically that's Modernizr and jQuery, and if I'm using them jQuery Validate and Microsoft's jQuery Unobtrusive Validation. This lets my templates contain initialization functions inside of $(document).ready(function() {...}); calls without running into a "$ not defined" error. The alternative would be to somehow bubble up from my templates a list of initialization functions to call, or to have every page load run through a bunch of tests to find things that need to be initialized. I think the tradeoff of loading jQuery early is worth it, especially since I usually load it from Google's CDN so it's probably cached.

V-2 11y ago

Nice. I'm not a Google fanboy, but I believe Material is the best visual language for UI. Okay, there are different contexts, but it's best thought-through, and most modern. For instance, the use of animation is finally mature and at the same rich and amplifying user experience (rather than being an eye-candy). And I think it's very compatible with web apps. A Material-ish popular chess site: http://en.lichess.org/ http://en.lichess.org/ (I'm in no way associated, but a happy user)

Karunamon 11y ago
What? Why? I personally find Material to be hideous because of its color abuse. It makes your UI look like an over-saturated Fischer-Price toy because of all the bright primary colors everywhere, and that's before we get into the lack of shadow and shading that seems to have infected "modern" design.
- kenbellows 11y ago
  Colors are easily changed, and certainly expected to be changed for reach site; that really isn't relevant to the tech being present. And are you railing against flat design in general? This is another personal preference religious war that's been waged back and forth since the advent of digital design. Don't worry, the pendulum will undoubtedly swing back your way again in a few years.
  - V-2 11y ago
    Well, Material is already a bit of a compromise, it's not as radical as Microsoft's Metro (I know they don't call it that anymore). It uses physical metaphores and fake 3D, it's just very subtle at it.
- kenbellows 11y ago
  Also, with respect to color, Material is by no means limited to (or even promoting) primary colors: http://materializecss.com/color.html http://materializecss.com/color.html
- 11y ago

pachydermic 11y ago

Outstanding work - now I have to fight the temptation to go haywire with this and try putting it everywhere... Looks great, though!

smoe 11y ago

I have started using it this week and really like it so far. But there were two annoyances: Select elements (without .browser-default class) are display:none and only shown, when initiated via javascript and similarly checkboxes are put off screen and thus invisible if there's no corresponding label (in my case the ones to select rows in a table). Of course they were easily fixed. But it seems odd to me, to make unexpected things like that the default behavior and – in the case of the selects – risk making your site/app unusable if something goes wrong in your js just to avoid a flash of unstyled content.

Raphmedia 11y ago

I understand that the localisation of the text is done by JS, but god that flicker on the menu annoys me. You should hide the menu and only display it after the work has been done. Make it fade in or use some other material design animation. Edit: Why is this getting downvoted? This is a page made to present a framework based on material design. Flickering instead of smoothly presenting content is the anti-thesis of material design. If your demo page features a big annoying issue, this is giving a very bad impression to your users.

subpixel 11y ago

This is impressive. I'll just have to override the form styling - personally I find the material approach to forms to be a case of trying to fix something that isn't broken.

smrtinsert 11y ago

Been playing with this project. The team is energetic and responsive, submitted a bug and it was fixed literally in a few hours. They seem committed to producing a top css framework, and of course its already gorgeous. Great work.

Tankenstein 11y ago

Have been using this in production for about 4 months now, still has a lot of quirks to iron out, but nothing you can't solve pretty fast. It's noticeably (and obviously) less mature than bootstrap, but it's definitely worth a shot. I quite recommend it.

bjterry 11y ago

One thing I've noticed about Material Design is that most of the examples of "best designs" have elements that are overlapping to some extent, but none of the frameworks that I see make it easy to have overlapping elements with defaults like grid layouts. I guess this isn't limited to just material design though. It seems like many times overlapping visual elements is a subtle indicator of a more professional design. Is there a solution to this problem using CSS (I mean, I know how to overlap elements, but ideally there would be something more structured or principled) or is it just doomed to be difficult?

DougWebb 11y ago
I don't know any frameworks that do it, but it seems like you could have an element that fits into the normal grid, and then inside that have an element with a "breaks the grid" class applied which uses positioning raise it up and make it overlap grid boundaries. You might need a special class on the parent element too so you can prevent it from collapsing. This seems like something that can be done in a fairly generic way.
- bjterry 11y ago
  Yeah, I think in isolation stuff like that can be useful, but I feel like there should be a better abstraction. I'm not enough of a designer to know what that abstraction would be, and it seems like unexplored territory in CSS frameworks now as far as I can tell.

Taig 11y ago

This framework really impressed me when I first saw it and made me immediately wanna use it. However, when I took a closer look I found a few things that annoyed me: - The required HTML classes seemed kinda bloated and not semantic, but I intended to fix that with Sass (well, officially they're on Less) - The input elements have weird animation on page load - When I just dropped in some basic elements, like an input field (with its wrappers) nothing was really working. Things were not properly aligned and I had to add all this container/row/column stuff, even though I just came for the widgets And last but not least what made me finally ditch it: - To display form validation errors, I have to supply a data-error attribute which will then get rendered via css as a pseudo ::after to the label. That is just weird. I then checked how it works without JavaScript and saw labels overlapping placeholders. It looks beautiful and I like how comprehensive it is. Really hope they'll improve on some of these technical flaws.

jmett 11y ago
Regarding the labels overlapping placeholders, adding the "active" class to the label solves this.
andres 11y ago
If you have a second check out MUI, which is a lightweight Material Design framework that addresses some of your technical concerns: https://www.muicss.com https://www.muicss.com Let me know what you think!

ac360 11y ago

This looks beautiful and it's wonderful to have more options than Bootstrap. I also recommend Skeleton for anyone who wants a super minimal UI framework: https://github.com/dhg/Skeleton https://github.com/dhg/Skeleton

they4kman 11y ago

I'm using this library for a side project, whose main application is on mobile. The layout system and styles are absolutely fantastic, but the library falls short on forms. Specifically, the range input uses a bubble on mouseover, which is not touch-screen friendly. I've also had minor issues with the select widget not closing after a selection is made. Additionally, the styles for labels is inconsistent amongst different input types. For everything else, this library is wonderful. The forms area could use some polish.

theVirginian 11y ago

At first I was like "not another framework" but then I looked at it and this is actually very nice.

ozten 11y ago

Overall, very cool project! The menu animation is really slow on Firefox 37 on Mac OS X. The way pages load and then more animations happen seems jarring. I've not used any material based apps, so maybe I'm just not used to how things work.

spdustin 11y ago

Many comments here use the phrase "best practices" as a means to shut down opposing opinions or practices. That feels very wrong to me. I am often heard saying (in classes, public presentations, etc.), "I don't like the phrase 'best practice'. It implies that someone knows your requirements better than you. So I don't use it. What's 'best' for me might suck for you. So I say: the best practice is, in many cases, simply to have a practice that you and your team adhere to. One which meets your requirements, now and foreseen." Class-itis, div-itis, selector-nesting-itis... They all have a place in the Real World.

tehchromic 11y ago
i think this is a good perspective. at the some practices are clearly better than others, and sometimes it is appropriate to say "best practice", because in certain narrowly defined circumstances, there really is a best. but the idea of team practice as the goal overall, and best practice as something that is both personal and defined by external circumstance is solid.

Animats 11y ago

What a blast from the past! It's like looking at Flash sites from a decade ago. Compare https://www.straphq.com/ https://www.straphq.com/ with Jennifer Estep (author) 2009 [1] Compare: http://danielangel.media/ http://danielangel.media/ with Girbaud (designer jeans, now defunct) 2005 [2] 2012[3] [1] https://web.archive.org/web/20070408092333/http://www.jenniferestep.com/ https://web.archive.org/web/20070408092333/http://www.jennif... [2] https://web.archive.org/web/20051130094152/http://www.girbaud.com/eng/home.html https://web.archive.org/web/20051130094152/http://www.girbau... [3] https://web.archive.org/web/20120207224137/http://www.girbaud.com/eng/ https://web.archive.org/web/20120207224137/http://www.girbau...

northm 11y ago

FWIW Some of us have built a nice ember.js wrapper around Materialize :) http://sgasser.github.io/ember-cli-materialize http://sgasser.github.io/ember-cli-materialize https://github.com/sgasser/ember-cli-materialize https://github.com/sgasser/ember-cli-materialize