CSS 'frameworks' are missing the point (2008) • Hacker News Board

Re: CSS 'frameworks' are missing the point (2008)

#41

Post by at-fates-hands » Tue, Jan 21, 2014, 5:35 PM UTC

sergiotapia wrote: post #18

I don't know about you "leet hacker pros" but I do know that using bootstrap 3 helped me make my site[1] completely responsive - with ease the like of which the world has never seen the like of which[2]. If you are using bootstrap for it's color choices you're doing it wrong. What I do is have bootstrap.css vanilla loaded, then I load a bootstrap_overrides.css.scss where I override styles/colors/looknfeel. Make boots…

I just use the Responsive Skeleton framework: http://www.getskeleton.com/ which is basically a grid system with some media queries. Then I can build whatever I want on top of that.

Saves time, overwriting a bunch of code and I can use it with whatever I want - Less, SASS, MYTH, etc.

Plus the code is about 200% cleaner.

Re: CSS 'frameworks' are missing the point (2008)

#42

Post by natural219 » Tue, Jan 21, 2014, 5:40 PM UTC

bjornsteffanson wrote: post #28

natural219 wrote: post #20

Even with less or sass, a basic, modern grid will have at least three levels of DOM-level logic that determines presentation, so you have things like this: that you could perhaps use mixins to replace some of the elements with (you could mix-in "row" to "nav-header", and "col-sm-2" to "my-logo"), but regardless, you still need three DOM nodes, and trying to fit those into a purely semantic separate-structure-from-pre…

You should check out Bourbon Neat: http://neat.bourbon.io/ , or leverage Sass' @extend directive. Your CSS could easily be shortened to: .body { @extend .container; } .nav-header { @extend .row; } .my-logo { @extend .col-sm-2; } And your markup could be much cleaner:

Sorry, I don't think you understood my comment. First of all, container isn't used like that (you don't want to wrap your entire content in one container -- maybe you want a different full-width background for your header vs your body, for example). Secondly, this technique is exactly what I was describing -- using mixins (or @extend) in your CSS to eliminate the redundant classes.

Still, your final output produces three levels of DOM, which was exactly what my point was. No matter how much you try to export your grid code into your CSS (and you should try!), you will always run into situations where you need that and there will be no way to semantically handle that.

Furthermore, there are some limitations even when combining semantic elements that cause issues. For instance, I often write this code:

To find that the exact margin/padding values I want for my well interfere with the default padding/margin values provided by row defaults. In those cases, I almost always have to add an additional DOM level and separate my classes to achieve my effect.

Re: CSS 'frameworks' are missing the point (2008)

#43

Post by bjornsteffanson » Tue, Jan 21, 2014, 7:33 PM UTC

natural219 wrote: post #42

bjornsteffanson wrote: post #28

Earlier quoted context omitted.

You should check out Bourbon Neat: http://neat.bourbon.io/ , or leverage Sass' @extend directive. Your CSS could easily be shortened to: .body { @extend .container; } .nav-header { @extend .row; } .my-logo { @extend .col-sm-2; } And your markup could be much cleaner:

Sorry, I don't think you understood my comment. First of all, container isn't used like that (you don't want to wrap your entire content in one container -- maybe you want a different full-width background for your header vs your body, for example). Secondly, this technique is exactly what I was describing -- using mixins (or @extend) in your CSS to eliminate the redundant classes. Still, your final output produces t…

I did misunderstand - apologies.

Re: CSS 'frameworks' are missing the point (2008)

#44

Post by subsection1h » Wed, Jan 22, 2014, 3:02 AM UTC

sergiotapia wrote: post #18

I don't know about you "leet hacker pros" but I do know that using bootstrap 3 helped me make my site[1] completely responsive - with ease the like of which the world has never seen the like of which[2]. If you are using bootstrap for it's color choices you're doing it wrong. What I do is have bootstrap.css vanilla loaded, then I load a bootstrap_overrides.css.scss where I override styles/colors/looknfeel. Make boots…

Your sites require all of the imported stylesheets[1]? I usually import only around half of the bootstrap-sass stylesheets[2].

[1] https://github.com/twbs/bootstrap/tree/master/less

[2] https://github.com/twbs/bootstrap-sass/tree/master/vendor/as...