My plan for this blog post was to introduce my preferred "front-end framework", Zurb Foundation. But then the folks over at Zurb saw fit to sabotage my effort by releasing a new version of Foundation. Can you believe the nerve? So instead I’ll just give a quick rundown of why I like Foundation better than that "other framework", and then show off what’s new in Foundation 4.
Foundation vs. Bootstrap (the short version)
Foundation is better because:
- Foundation has a more responsive grid (especially when nesting grids).
- I find the markup just a little bit cleaner.
- It’s easier to override Foundation’s default styling.
- I like the extra goodies (like Orbit, Joyride, and Reveal) in Foundation a bit better than the offerings in Bootstrap.
- Yetis
Obviously this is subjective, and others may disagree. Maybe there are even good reasons for using Bootstrap in a particular project (despite Foundation’s obvious superiority).
I think you’ll agree, though, that "yetis" is objectively better than "no yetis".
Grid Changes
Foundation 4 has been rewritten to encourage "mobile first" development, meaning you build your site for small devices (read: phones) first and then scale things up to support tablet and desktop browsers. The practical upshot of this change is that the CSS class names for columns have changed.
Where in Foundation 3 you might write:
<div class="row">
<div class="four columns">stuff</div>
<div class="eight columns">moar stuff</div>
</div>
in Foundation 4, you do something like:
<div class="row">
<div class="small-4 columns">stuff</div>
<div class="small-8 columns">moar stuff</div>
</div>
I found this a little annoying, since one of the things I liked about Foundation as opposed to Bootstrap was the fact that I don’t much care for the numbers in the class names. However, the observant will notice that the numbers in this case are prefixed with small-, rather than Bootstrap’s span. Why is this better? Because the existence of small- implies that there’s also a large-, and indeed there is. Consider the following code:
<div class="row">
<div class="large-3 small-6 columns">Inky</div>
<div class="large-3 small-6 columns">Blinky</div>
<div class="large-3 small-6 columns">Pinky</div>
<div class="large-3 small-6 columns">stuff</div>
</div>
What this means is that on large screens, each inner <div> will take up 3 columns (of 12), and so they will each be displayed on the same row. But on a small screen, each <div> will take up 6 columns, and then the second two <div>s will wrap around below them, so you’ll end up with two rows of two <div>s each.
I don’t know about you, but I think that’s awesome. It’s probably even worth putting up with numerals in my class names.
Foundation 3 just treated small screens as having 4 columns by default instead of 12, so you get a lot more control over exactly how you want things to look on different screen sizes with the new release.
Some other class names have also changed to reflect the small- vs. large- dichotomy, like small-centered, small-offset-#, and small-block-grid-#. You’ll need to update these if you’re moving to the new version.
It’s also worth noting that the large- prefixed classes override the styling for the small- prefixed styles, so if you use only one or the other, use small-. They should work just fine on large screens.
Semantic SaSSyness
Foundation has been using SaSS (ScSS syntax) since version 3, but in version 4 things got a whole lot cooler.
Firstly, using the SaSS features in Foundation no longer requires the use of Compass. You can still use it, of course, you just don’t have to any more.
Foundation 4 also implements the majority of it’s functionality using SaSS mixins, so if you’re one of those purists who despise having non-semantic classes on your HTML elements, you can implement almost everything in terms of SaSS mixins.
(For the record, I’m not one of those purists, but I guess purists need love too.)
Here’s what that looks like with a button:
#your-semantic-id-here { @include button; }
Now your element looks like a standard Foundation button, but there’s no icky non-semantic classes in the HTML markup.
You can do this with nearly every part of Foundation, and the documentation has a fantastic amount of detail on the same page with the instructions for how to use the equivalent pre-built classes. The few exceptions appear to be because certain JavaScript-y bits need to have specific classes to latch onto.
Of course this means you need to do some extra work to build your actual CSS from SaSS, but for some people, this is just what they’ve been waiting for.
Javascript Changes
Zurb has revamped the JavaScript plugins included with Foundation to streamline them a bit, but things are mostly the same here.
One major change, though is that Foundation 4 assumes you’ll be using zepto.js, rather than jQuery. This worried me at first, since while zepto is great if you’re only targeting webkit-based mobile browsers, it is not a drop-in replacement for jQuery. It turns out I was worried for nothing, though. The bright folks at Zurb have written their plugins to be compatible with both zepto and jQuery, so if you want to use JQuery instead, it’s just a matter of loading jQuery rather than zepto in your HTML.
Other Changes
A few other things that jumped out at me:
- The old nav bar is gone, but you get pretty much the same effect UI-wise by using button groups.
- Tabs, accordions, and vertical navs are all now part of the same thing, which Foundation 4 calls sections. The name is…not great, but the functionality seems like a good idea.
- The top bar has a few changes. Looks like some of the class names are different, and might be a little bit cleaner.
- Typography appears to be built all around
ems now, which is nice. - Universal dropdown javascript, and groovy JS tooltips.
If you want a blow-by-blow of all the main changes, the migration docs are probably the best place to look.
Finale
All in all, it looks like the new release of Foundation is really quite nice. The new grid features give much more control over display of your site on various size devices. Compatibility with both Zepto and jQuery let’s you use whichever is best for your use case. The SaSS features let you move styling almost completely out of your markup if you want (and of course let you customize almost everything that Foundation does, as well).
Migrating to Foundation 4 might cause a bit of upgrade headache for folks switching from Foundation 3, but it looks to be worth it, especially if your site needs to be highly responsive to both mobile and desktop users. Zurb just keeps making Foundation better and better, and Foundation 4 is no exception.
Even if they did derail my topic for this post.
