A modern responsive front-end framework based on Material Design

Re:A modern responsive front-end framework based on Material... by roughcoder on Friday April 24, 2015 @08:15AM (#9432746)

Its bigger then li's it about an overall approach. In this use case, yes maybe its an overkill but in some cases its not and allows for quite a bit of flexibility to use the same styles across multiple element types.

I guess it's come about from trying to be more semantic within the documents.

Declaring Headings with classes is a good example as well.

    h1,
    .h1{
       font-size:20px;
    }

    h2,
    .h2{
       font-size:18px;
    }

etc... This allows you to apply <h1> styles to <h3> or even <p>'s while still keeping the content semantically correct and designers happy.

Another few other common ones are

    strong,
    .strong{
        font-weight:600;
    }

    small,
    .small{
        text-size:10px;
    }

The same can go with .collection, somebody may want to use the styles on something thats not a list for example <div>'s.

It also does not really go against inheritance, themes like .collection-alt can still work.

Sometimes its an overkill and I don't always do it, but in some cases (heavily responsive sites) it has worked really well. Its also easier to work in a team with one approach, rather then just doing it for headings etc why not take the principle/standard across all styles.

[ Parent | on HN ]

Re:A modern responsive front-end framework based on Material... by Geee on Friday April 24, 2015 @08:34AM (#9432843)

A more extreme example of this is http://www.basscss.com/ where CSS classes are reusable and composable. E.g. a list could be:

    <ul class="list-reset">
      <li class="inline-block mr1 h4 border border-red">Half-Smoke</li>
      <li class="inline-block mr1 h4 border border-green">Kielbasa</li>
      <li class="inline-block mr1 h4 border border-blue">Bologna</li>
      <li class="inline-block mr1 h4 border border-yellow">Prosciutto</li>
   </ul>

[ Parent | on HN ]