Comment by sivers | Hacker News Reader

Comment by sivers | Hacker News Reader

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.

@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...

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.

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)

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.

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/

It's along the same lines as what you suggested above.

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.

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 .I still prefer Foundation over anything Bootstrap though, or Susy (http://susy.oddbird.net/) if I don't need any of the extras a full framework like Foundation offers.

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

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

(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)

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#va...

Reply on news.ycombinator.com