4 ms·

I've been using Foundation for everything lately, and I'm really impressed with it. This new medium grid size thing is a great upgrade. What I never liked abo

by sivers 13y ago

I've been using Foundation for everything lately, and I'm really impressed with it. This new medium grid size thing is a great upgrade. What I never liked about the Bootstrap/Foundation CSS frameworks was having to mark up my HTML with those damn "small-4 large-8 columns" attributes. It felt to me like that purely-visual stuff should be kept in the CSS, not the HTML. So I was thrilled when I found I didn't have to put any of that in the HTML - that it could all go in the SCSS, which then parses/compiles it into the final public CSS. So you can just have: <div id="sidebar">blah</div> <div id="article">blah</div> ... then in your SCSS file, do this: div#sidebar { @extend .columns; @extend .small-3; } div#article { @extend .columns; @extend .small-9; } ... and that's it! It adds those selectors to the final CSS file and your semantic HTML will have the layout/look you want. To me, that changed everything, and I've been a fan since. This has been covered other places, but I don't think it's been covered enough, and I think it was another HN commenter that turned me onto it like this, so just paying it forward in case someone else didn't know yet.

pallandt 13y ago
I second that, SCSS/SASS is awesome. Btw, Bootstrap is available in a SASS version as well, actually multiple conversions by different persons, but this is the most popular and actively maintained https://github.com/thomas-mcdonald/bootstrap-sass https://github.com/thomas-mcdonald/bootstrap-sass .I still prefer Foundation over anything Bootstrap though, or Susy (http://susy.oddbird.net/ http://susy.oddbird.net/) if I don't need any of the extras a full framework like Foundation offers.
joallard 13y ago
There's even a mixin for that! @include grid-column(3); (There's a mixin for practically everything, documented at the bottom of every docs page, eg http://foundation.zurb.com/docs/components/grid.html http://foundation.zurb.com/docs/components/grid.html)
timdorr 13y ago
@extend itself is awesome and you should use it extensively, especially when using a framework. For instance, if you're using Bootstrap, when version 3 rolls around and removes a ton of old class names, you won't have to hunt through all your view code to replace classes. You can look through your SASS files and just update @extend's where appropriate. I highly recommend looking at Object Oriented CSS and Ian Storm Taylor's great post on combining it with SASS: http://ianstormtaylor.com/oocss-plus-sass-is-the-best-way-to-css/ http://ianstormtaylor.com/oocss-plus-sass-is-the-best-way-to... Using SASS placeholders and @extend'ing your framework's classes are a great way to reduce code duplication and complexity. I recently redid our entire frontend using these techniques and it reduced our SASS code by about 30-40%, got rid of plenty of gnarly nested classes, and made it drastically easier to start adding new features.
andrewmunsell 13y ago
I've used both Bootstrap and Foundation extensively, though for my recent work I've been gravitating towards Foundation much more. It's an amazing framework (Bootstrap too :) ), and the new form validation plugin is a great bonus addition.
snide 13y ago
You also might want to check out Bourbon Neat for your grid system, which has been doing this for awhile. Rather than extends, it does a lot of this through mixins. Their breakpoint system is also pretty nifty. In general although I appreciate the larger CSS frameworks from a documentation and organization standpoint I find that their expanded use over the last year to lead to the "Oh, this was built with X" sameyness in a lot of new projects across the web. You even see newer frameworks like purecss.io that are trying to remove the actual styling from the framework itself, concentrating instead on base elements. I'm curious to see how this will all transition over the next couple years. I'm a frontend designer myself so I'm biased, but I think relying heavily on any of them too much can limit your product once you get past the prototype stage. That said, I've learned so much over the past year just being able to look through their documentation and see proper smacss principles at work on large projects.
envex 13y ago
It doesn't have the same "install and scaffold quickly" effect that Foundation offers, but I've recently been using Bourbon Lite. http://neat.bourbon.io/ http://neat.bourbon.io/ It's along the same lines as what you suggested above.
kibibu 13y ago
Bootstrap is written in LESS, which lets you do exactly the same thing. You have to get the source though.
- jrochkind1 13y ago
  If you prefer sass, there is a maintained bootstrap-sass port too. It works out fine, less and sass are pretty much feature equivalent these days, it's a simple port. https://github.com/thomas-mcdonald/bootstrap-sass https://github.com/thomas-mcdonald/bootstrap-sass (You don't have to use it as a ruby gem, you can just download the source same as you do original less bootstrap, if you want)
  - kibibu 13y ago
    After playing with Foundation, I must say SCSS's variable defaults [1] are a much cleaner way of handling configuration than LESS's. [1] http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#variable_defaults_ http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#va...

by sivers 13y ago

pallandt 13y ago

I second that, SCSS/SASS is awesome. Btw, Bootstrap is available in a SASS version as well, actually multiple conversions by different persons, but this is the most popular and actively maintained https://github.com/thomas-mcdonald/bootstrap-sass https://github.com/thomas-mcdonald/bootstrap-sass .I still prefer Foundation over anything Bootstrap though, or Susy (http://susy.oddbird.net/ http://susy.oddbird.net/) if I don't need any of the extras a full framework like Foundation offers.

joallard 13y ago

There's even a mixin for that! @include grid-column(3); (There's a mixin for practically everything, documented at the bottom of every docs page, eg http://foundation.zurb.com/docs/components/grid.html http://foundation.zurb.com/docs/components/grid.html)

timdorr 13y ago

@extend itself is awesome and you should use it extensively, especially when using a framework. For instance, if you're using Bootstrap, when version 3 rolls around and removes a ton of old class names, you won't have to hunt through all your view code to replace classes. You can look through your SASS files and just update @extend's where appropriate. I highly recommend looking at Object Oriented CSS and Ian Storm Taylor's great post on combining it with SASS: http://ianstormtaylor.com/oocss-plus-sass-is-the-best-way-to-css/ http://ianstormtaylor.com/oocss-plus-sass-is-the-best-way-to... Using SASS placeholders and @extend'ing your framework's classes are a great way to reduce code duplication and complexity. I recently redid our entire frontend using these techniques and it reduced our SASS code by about 30-40%, got rid of plenty of gnarly nested classes, and made it drastically easier to start adding new features.

andrewmunsell 13y ago

I've used both Bootstrap and Foundation extensively, though for my recent work I've been gravitating towards Foundation much more. It's an amazing framework (Bootstrap too :) ), and the new form validation plugin is a great bonus addition.

snide 13y ago

You also might want to check out Bourbon Neat for your grid system, which has been doing this for awhile. Rather than extends, it does a lot of this through mixins. Their breakpoint system is also pretty nifty. In general although I appreciate the larger CSS frameworks from a documentation and organization standpoint I find that their expanded use over the last year to lead to the "Oh, this was built with X" sameyness in a lot of new projects across the web. You even see newer frameworks like purecss.io that are trying to remove the actual styling from the framework itself, concentrating instead on base elements. I'm curious to see how this will all transition over the next couple years. I'm a frontend designer myself so I'm biased, but I think relying heavily on any of them too much can limit your product once you get past the prototype stage. That said, I've learned so much over the past year just being able to look through their documentation and see proper smacss principles at work on large projects.

envex 13y ago

It doesn't have the same "install and scaffold quickly" effect that Foundation offers, but I've recently been using Bourbon Lite. http://neat.bourbon.io/ http://neat.bourbon.io/ It's along the same lines as what you suggested above.

kibibu 13y ago

Bootstrap is written in LESS, which lets you do exactly the same thing. You have to get the source though.

jrochkind1 13y ago
If you prefer sass, there is a maintained bootstrap-sass port too. It works out fine, less and sass are pretty much feature equivalent these days, it's a simple port. https://github.com/thomas-mcdonald/bootstrap-sass https://github.com/thomas-mcdonald/bootstrap-sass (You don't have to use it as a ruby gem, you can just download the source same as you do original less bootstrap, if you want)
- kibibu 13y ago
  After playing with Foundation, I must say SCSS's variable defaults [1] are a much cleaner way of handling configuration than LESS's. [1] http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#variable_defaults_ http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#va...