Foundation 4.3: Paving the Road to 5 | Hacker News Reader

Foundation 4.3: Paving the Road to 5

zurb.com

92 pointssuperchink27 comments

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.

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.

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)

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

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.

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.

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

I've been following and using Foundation since some of it's earliest incarnations and I love it more with every release. It's a great framework and the grid is just comfortable. Also, very nicely done responsiveness (as in responsive design).

The guys behind it are great too. I've had questions answered quickly by the devs, and they even sent me some stickers and this weird wooden puzzle thing that I keep on my desk!

tl;dr - Definitely worth checking out.

My only gripe with Foundation is the JavaScript components seem rather difficult to manipulate. I write applications with Backbone.js and I'm still not sure how to programmatically change the active tab in an accordion without resorting to $tab.trigger('click'). Also, the tab/accordion component has serious issues with FOUC (flashes of unstyled content).

Hopefully they can focus on improving some of these JavaScript components. I just don't have the resources right now to contribute pull requests when I run into problems - it's usually easier to completely ditch the component or write a bespoke version using a Backbone view.

Agree with you. I think we are not "supposed" to be using foundation.js. Especially in a widget-y environment we are in, it is faster/easier to just use Backbone events/handlers for everything.

I am defensively disposing of everything in DOM when not used and it seems just wrong to keep using UI components that are clueless to their state and everything is done by hiding content in the DOM.

If anyone is interested, I wrote a python package for Django to integrate Zurb Foundation. I just updated it to the latest version. It's not on PyPI yet, but I will put it there in the next couple of days.

https://github.com/amarsahinovic/django-zurb-foundation/

https://bitbucket.org/amarsahinovic/django-zurb-foundation/

Edit: I just uploaded it to PyPI, it was easier than I thought :)

There was a recent RailsCasts on Foundation if anyone is interested: http://railscasts.com/episodes/417-foundation

I somewhat prefer the Foundation grid system to Bootstrap's equivalent; the way that the classes are namespaced for mobile responsive layouts is pretty handy.

The semantic mixins are fairly well done as well. I'm actually a bit torn between staying with Foundation and switching to Bourbon + Neat right now.

This looks great. I have a feeling that Foundation is going to gain more traction than Bootstrap in the long term. I've seen @mdo and @fat asked several times online when Bootstrap 3 is coming out and they've said soon for the last few months. Very vague. Foundation has the weight of a company, Zurb, pushing it forward.

There was a tweet on the @twbootstrap account today, looks like August 19th: http://blog.getbootstrap.com/2013/07/18/ante-up/

Thank you for the link.

Bootstrap also came out of what they learned from their time working at Zurb, so its not surprising that Foundation is moving quickly.

Foundation has been my favorite over bootstrap for quite some time. Looks like the bootstrap guys are falling behind.

My issue with Bootstrap and Foundation is namespace pollution. Neither has a prefixed version, meaning neither can be imported into an existing project without serious headache. I believe Sass will implement mechanisms to address this soon, until then, I'm disappointed to see this issue absent from the post.

amazing, the lack of medium grid was what I was recently forced to hack myself, now I'll just upgrade. the form validator is great too. keep up the excelent work.

keep up the good work foundation guys! It is always awesome to use a css framework which has mobile responsiveness enabled by default and just gets better!

Nice! Like it!

Great job Foundation - solid progress!

Still waiting for Bootstrap3 - don't understand why Bootstrap is so far behind wrt responsive layouts.

Reply on news.ycombinator.com