A modern responsive front-end framework based on Material Design • Hacker News Board

Re: A modern responsive front-end framework based on Material Design

#61

Post by riquito » Fri, Apr 24, 2015, 3:47 PM UTC

danielmason wrote: post #42

pan69 wrote: post #2

Looks great. However, I've never really understood this sort of approach: Alvin Alvin Alvin Alvin 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...

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 st…

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.

Re: A modern responsive front-end framework based on Material Design

#62

Post by CleanCoder » Fri, Apr 24, 2015, 3:48 PM UTC

pan69 wrote: post #2

Looks great. However, I've never really understood this sort of approach: Alvin Alvin Alvin Alvin 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...

SMACSS - Scalable and Modular Architecture for CSS.

Re: A modern responsive front-end framework based on Material Design

#63

Post by Tankenstein » Fri, Apr 24, 2015, 3:48 PM UTC

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.

Re: A modern responsive front-end framework based on Material Design

#64

Post by bjterry » Fri, Apr 24, 2015, 3:57 PM UTC

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?

Re: A modern responsive front-end framework based on Material Design

#65

Post by BinaryIdiot » Fri, Apr 24, 2015, 4:12 PM UTC

ahallock wrote: post #60

BinaryIdiot wrote: post #45

Earlier quoted context omitted.

HTML provides nesting. Nesting indicates it is a descendent component. This would violate DRY.

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

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

Re: A modern responsive front-end framework based on Material Design

#66

Post by Taig » Fri, Apr 24, 2015, 4:18 PM UTC

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.

Re: A modern responsive front-end framework based on Material Design

#67

Post by warfangle » Fri, Apr 24, 2015, 4:24 PM UTC

solve wrote: post #59

Karunamon wrote: post #39

Earlier quoted context omitted.

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.

I'll take the opposite side - pastel colors are horrible and disgusting. I can't imagine why anyone would like pastel colors.

Ugh, I don't understand you color fanatics.

I like my user interfaces black and white - you know, like on an amber monitor.

/s

Re: A modern responsive front-end framework based on Material Design

#68

Post by drinchev » Fri, Apr 24, 2015, 4:42 PM UTC

brlewis wrote: post #43

drinchev wrote: post #14

Earlier quoted context omitted.

I don't agree with this. Do you have some references about your statement. I think the whole community went to separating the HTML tag names from the styles and work only with class names [1]. If you start styling your tags directly it imminently increase the code debt if you scale. Let's say you just want to add another element inside the tag. I can give you example : .collection > li { color: red; } and later on yo…

Thank you for pointing to the interesting BEM article. As to this specific case, though, I was surprised to see your "this will not work" comment and tested it. It worked: http://jsfiddle.net/brlewis/p0Locwgp/

Yeah, sorry for the mistake. Yes, you are right in this case bad code would look like :

    
        
          Is red
          
            Should be blue
          
        
    

    
    .collection > li { color: red; }
    .collection-special { color: blue; }

http://jsbin.com/tulenoxutu/1/edit?html,css,output

Re: A modern responsive front-end framework based on Material Design

#69

Post by jmett » Fri, Apr 24, 2015, 4:44 PM UTC

Taig wrote: post #66

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…

Regarding the labels overlapping placeholders, adding the "active" class to the label solves this.

Re: A modern responsive front-end framework based on Material Design

#70

Post by rimantas » Fri, Apr 24, 2015, 4:46 PM UTC

riquito wrote: post #61

danielmason wrote: post #42

Earlier quoted context omitted.

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 st…

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.

It does not matter in any real life pages.