3 ms·

What is the best way to think of this. Is this like Twitter Bootstrap and Zurb Foundation, or is this like something else entirely?

zitterbewegung 9y ago
It's like Twitter Bootstrap where the classes are named after the functionality you are adding to the div. For example a div of an container of three buttons has two classes (three and buttons).
- rspeer 9y ago
  "There are three of them" counts as functionality now?
ukyrgf 9y ago
This is the step between making prototypes with Bootstrap/Foundation and turning those classes/mixins into a final working application. You don't want your final build to have a bunch of 'col-md-6' class names.
- enraged_camel 9y ago
  >>You don't want your final build to have a bunch of 'col-md-6' class names. Why not? Who cares what your class names are?
  - karmajunkie 9y ago
    Nobody, except the individual that has to change them all when you need to swap out frameworks or upgrade to a version that breaks compatibility or the product team decides on a new layout across the app...
    - enraged_camel 9y ago
      Okay, no one has actually explained how Semantic UI overcomes this. What if in the future you decide to switch from Semantic UI to something else?
      - karmajunkie 9y ago
        Fair point, but I'm with you on it—I'm not proposing Semantic UI is any better, just that ".col-md-12" has its own set of problems. I suppose in theory what would be the best is using application selectors (i.e. class names your application owns) with the sass version of bootstrap/semantic/etc to extend the selectors with appropriate styles. However, I've done this, and while I'm no CSS expert so I probably was doing something wrong, my stylesheets became ginormous. Now, I just kind of live with the ".col-md-12" business...
  - ed312 9y ago
    Some people think bootstrap without dashes in the class names is better... or is there more to it?
    - inputcoffee 9y ago
      Good question. From looking at it, it looks less, well, dashy. But in addition, there also seems to be much more compact HTML. I don't know if that is actually the case. Compare: <button type="button" class="btn btn-primary"> Primary </button> <button class="ui button"> Follow </button> or Semantic UI: <div class="ui breadcrumb"> <a class="section">Home</a> <div class="divider"> / </div> <a class="section">Store</a> <div class="divider"> / </div> <div class="active section">T-Shirt</div> </div> Twitter Bootstrap: <ol class="breadcrumb"> <li class="breadcrumb-item active">Home</li> </ol> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item active">Library</li> </ol> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item"><a href="#">Library</a></li> <li class="breadcrumb-item active">Data</li> </ol>
- Bahamut 9y ago
  I think Google takes it one step further and minifies the CSS class names
- SippinLean 9y ago
  From Semantic UI docs: <div class="ui three column grid"> <div class="four wide column"></div> <div class="eight wide column"></div> <div class="four wide column"></div> </div> How is that different than col-md-8? Either can be used as HTML classes or Sass mixins.
deleted 9y ago
[deleted]

zitterbewegung 9y ago

It's like Twitter Bootstrap where the classes are named after the functionality you are adding to the div. For example a div of an container of three buttons has two classes (three and buttons).

rspeer 9y ago
"There are three of them" counts as functionality now?

ukyrgf 9y ago

This is the step between making prototypes with Bootstrap/Foundation and turning those classes/mixins into a final working application. You don't want your final build to have a bunch of 'col-md-6' class names.

enraged_camel 9y ago
>>You don't want your final build to have a bunch of 'col-md-6' class names. Why not? Who cares what your class names are?
- karmajunkie 9y ago
  Nobody, except the individual that has to change them all when you need to swap out frameworks or upgrade to a version that breaks compatibility or the product team decides on a new layout across the app...
  - enraged_camel 9y ago
    Okay, no one has actually explained how Semantic UI overcomes this. What if in the future you decide to switch from Semantic UI to something else?
    - karmajunkie 9y ago
      Fair point, but I'm with you on it—I'm not proposing Semantic UI is any better, just that ".col-md-12" has its own set of problems. I suppose in theory what would be the best is using application selectors (i.e. class names your application owns) with the sass version of bootstrap/semantic/etc to extend the selectors with appropriate styles. However, I've done this, and while I'm no CSS expert so I probably was doing something wrong, my stylesheets became ginormous. Now, I just kind of live with the ".col-md-12" business...
- ed312 9y ago
  Some people think bootstrap without dashes in the class names is better... or is there more to it?
  - inputcoffee 9y ago
    Good question. From looking at it, it looks less, well, dashy. But in addition, there also seems to be much more compact HTML. I don't know if that is actually the case. Compare: <button type="button" class="btn btn-primary"> Primary </button> <button class="ui button"> Follow </button> or Semantic UI: <div class="ui breadcrumb"> <a class="section">Home</a> <div class="divider"> / </div> <a class="section">Store</a> <div class="divider"> / </div> <div class="active section">T-Shirt</div> </div> Twitter Bootstrap: <ol class="breadcrumb"> <li class="breadcrumb-item active">Home</li> </ol> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item active">Library</li> </ol> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item"><a href="#">Library</a></li> <li class="breadcrumb-item active">Data</li> </ol>
Bahamut 9y ago
I think Google takes it one step further and minifies the CSS class names
SippinLean 9y ago
From Semantic UI docs: <div class="ui three column grid"> <div class="four wide column"></div> <div class="eight wide column"></div> <div class="four wide column"></div> </div> How is that different than col-md-8? Either can be used as HTML classes or Sass mixins.

deleted 9y ago

[deleted]