
Foundation 4.3: Paving the Road to 5 - superchink
http://zurb.com/article/1226/foundation-4-3-paving-the-road-to-5
======
sivers
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.

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

~~~
jrochkind1
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
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...](http://sass-
lang.com/docs/yardoc/file.SASS_REFERENCE.html#variable_defaults_)

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

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

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

------
amarsahinovic
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://github.com/amarsahinovic/django-zurb-foundation/)

[https://bitbucket.org/amarsahinovic/django-zurb-
foundation/](https://bitbucket.org/amarsahinovic/django-zurb-foundation/)

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

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

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

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

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

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

~~~
falk
Thank you for the link.

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

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

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

------
bryanwbh
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!

------
ronaldsvilcins
Nice! Like it!

------
andyl
Great job Foundation - solid progress!

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

