4 ms·

Why I prefer Bourbon over Bootstrap

5 points by dataminer 12y ago

coldtea 12y ago
>Another thing that bugs me is that I like having fine-control over my markup. I’d also rather keep the “style stuff” completely out of my markup. Separation of concerns is always good thing Not always, and this is a good example. HTML is not supposed to be some clean semantic layer, and treating it as such doesn't make things better. Sure, you can keep some style separate but don't overdo it and don't fall for the "semantic" structure BS. HTML is part of your presentation layer. You need to craft it to work well with what you want to show. Were you need to have sound semantics is your data layer -- that would be your DB/NoSQL/REST service/whatever source. You're not gonna screen-scrap your pages to extract data out of them to have to care about semantics and separation -- for that you're gonna build services or talk to the DB directly. Designers, who didn't have much experience in actual MVC history, and were oversold BS terms like 'semantic' they didn't understand, created this whole confusion in webpage development. Instead of asking for proper "black-box" separation between UI/style and code, they treat HTML as some bastard child between data (semantics) and presentation. Consider how in GUI programming (which is 100 times more mature than the HTML/CSS/JS etc mess) the UI part is not meant to be semantic or anything. It's just a blob of style and output specs. Having "Semantic HTML" is nothing to be proud of. It's mostly a continued cargo cult, from people with no GUI experience. And it carries all the myths with it (re-usability -- as if the reusable layer would be your HTML and not your data, re-styling with just CSS -- as if anything bigger than a personal site or a free-styling experiment like CSS Zen Garden doesn't require template changes too, etc).
- err4nt 12y ago
  > Having "Semantic HTML" is nothing to be proud of. It's mostly a continued cargo cult, from people with no GUI experience. And it carries all the myths with it (re-usability -- as if the reusable layer would be your HTML and not your data, re-styling with just CSS -- as if anything bigger than a personal site or a free-styling experiment like CSS Zen Garden doesn't require template changes too, etc). What if you could style individual design elements and copy/paste those from site to site like http://staticresource.com/widget-demo.html http://staticresource.com/widget-demo.html ?
RickS 12y ago
The example in the article narrowly avoids a very common use case that's one of the reasons I enjoy bootstrap - it lets you address multiple width cases in the same line. EG, if I want a content area that adapts to phone/tablet/desktop, Bootstrap makes it as easy as div class="col-xs-12 col-md-8 col-lg-6" in bourbon/neat it would look more like div.class { @include media($mobile) { @include span-columns(6); } @include media($tablet) { @include span-columns(8); } @include media($desktop) { @include span-columns(12); } } I certainly concede that the latter makes more sense from a code-cleanliness standpoint, since it keeps the styling in the stylesheet. However, for designing in the browser / mashing stuff out quickly, I find myself gravitating towards bootstrap because it makes prototyping really fast, even if it slightly violates the "don't style in the structure" rule

5 points by dataminer 12y ago

>Another thing that bugs me is that I like having fine-control over my markup. I’d also rather keep the “style stuff” completely out of my markup. Separation of concerns is always good thing Not always, and this is a good example. HTML is not supposed to be some clean semantic layer, and treating it as such doesn't make things better. Sure, you can keep some style separate but don't overdo it and don't fall for the "semantic" structure BS. HTML is part of your presentation layer. You need to craft it to work well with what you want to show. Were you need to have sound semantics is your data layer -- that would be your DB/NoSQL/REST service/whatever source. You're not gonna screen-scrap your pages to extract data out of them to have to care about semantics and separation -- for that you're gonna build services or talk to the DB directly. Designers, who didn't have much experience in actual MVC history, and were oversold BS terms like 'semantic' they didn't understand, created this whole confusion in webpage development. Instead of asking for proper "black-box" separation between UI/style and code, they treat HTML as some bastard child between data (semantics) and presentation. Consider how in GUI programming (which is 100 times more mature than the HTML/CSS/JS etc mess) the UI part is not meant to be semantic or anything. It's just a blob of style and output specs. Having "Semantic HTML" is nothing to be proud of. It's mostly a continued cargo cult, from people with no GUI experience. And it carries all the myths with it (re-usability -- as if the reusable layer would be your HTML and not your data, re-styling with just CSS -- as if anything bigger than a personal site or a free-styling experiment like CSS Zen Garden doesn't require template changes too, etc).

err4nt 12y ago
> Having "Semantic HTML" is nothing to be proud of. It's mostly a continued cargo cult, from people with no GUI experience. And it carries all the myths with it (re-usability -- as if the reusable layer would be your HTML and not your data, re-styling with just CSS -- as if anything bigger than a personal site or a free-styling experiment like CSS Zen Garden doesn't require template changes too, etc). What if you could style individual design elements and copy/paste those from site to site like http://staticresource.com/widget-demo.html http://staticresource.com/widget-demo.html ?

RickS 12y ago

The example in the article narrowly avoids a very common use case that's one of the reasons I enjoy bootstrap - it lets you address multiple width cases in the same line. EG, if I want a content area that adapts to phone/tablet/desktop, Bootstrap makes it as easy as div class="col-xs-12 col-md-8 col-lg-6" in bourbon/neat it would look more like div.class { @include media($mobile) { @include span-columns(6); } @include media($tablet) { @include span-columns(8); } @include media($desktop) { @include span-columns(12); } } I certainly concede that the latter makes more sense from a code-cleanliness standpoint, since it keeps the styling in the stylesheet. However, for designing in the browser / mashing stuff out quickly, I find myself gravitating towards bootstrap because it makes prototyping really fast, even if it slightly violates the "don't style in the structure" rule