4 ms·

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 fina

by ukyrgf 10y 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 10y 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 10y 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 10y 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 10y 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 10y ago
  Some people think bootstrap without dashes in the class names is better... or is there more to it?
  - inputcoffee 10y 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 10y ago
I think Google takes it one step further and minifies the CSS class names
SippinLean 10y 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.

by ukyrgf 10y ago

enraged_camel 10y 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 10y 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 10y 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 10y 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 10y ago
Some people think bootstrap without dashes in the class names is better... or is there more to it?
- inputcoffee 10y 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 10y ago

I think Google takes it one step further and minifies the CSS class names

SippinLean 10y 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.