Foundation 5

If you want to develop custom responsive websites faster and better than ever before, the Foundation 5 is the key to your success. Foundation 4 was great, and to me, I wasn’t sure how Zurb could improve upon its speed and flexibility, but Zurb apparently strives to be the best. I’ve tried Skeleton, I’ve developed with Bootstrap, but Foundation is my personal framework of choice.

Foundation 5: Speed and Reliability

The Key to Foundation’s success is the fact that it is built on Sass. The big thing to me that made Foundation the go-to framework for rapid mobile development is the fact that it is intuitive. It makes sense to use and just works. Elements don’t accidentally run into each other. You don’t have conflict issues, such as buttons ending up in the wrong spot or divs overlapping each other unintentionally. You set up the grid, it works, and you’re done. There aren’t an unhappy surprises.

Foundation 5 Responsive

Foundation is Mobile First

A great example is that the main navigation menu is set to be hidden behind the main navigation button we’ve all come to know and love on mobile devices. You don’t need any tricks or special classes to make it work. It just does, and it does it well. The dropdown menu system just does what it’s supposed to. It’s unobtrusive, and to style its colors, you just need to overide the colors on a couple of classes.

Foundation 5 Learn

Foundation: Everything You Need & Nothing You Don’t

Another great thing that I like about Foundation is that it can be customized to your needs. You can automatically include everything, and click download, and you’re done. Don’t want any of the javascript components? Uncheck the boxes. Want to change the main colors? You can do that, too. Another awesome thing is that the index file that comes with Foundation, already has all of the javascript file paths listed in the footer. They are commented out. All you have to do to implement them is to uncomment them. You can’t get any easier than that!

What’s New or Different in Foundation 5?

Things aren’t much different from Foundation 4. They have just been simplified. The simplifications do make sense though. For example, they removed support for Zepto. Support is now for jQuery. They show you how to properly call the script in your sites. They also changed the way that you specify configuration options, too. Instead of wrapping them in single quotes, the are wrapped almost like styles in a stylesheet.

Zurb also changed the way that you refer to variables. Instead of saying activeClass, you will say active_class. It is consistently set up this way for all of your variables. Each word is divided by an underscore, which makes more sense and is easier to understand and implement.


Some of the new and improved features include a medium grid, so now you have an intermediate grid between large and small. Also, Foundation 5 works with a new Sass processor called Libsassy, which is supposed to be much faster. There’s also Off Canvas, which is a dropdown menu that resides off screen, until you click on a single nav button. This is great for mobile. They’ve also improved their forms for better form development.


Conclusion: Foundation 5 is Awesome

What do you think about Foundation 5? Foundation 4 was great, and if you didn’t think it could get better, you were mistaken. Foundation 5 is quicker, and even easier to use than before. It hasn’t changed so much that you are left in the dark in the transition from 4 to 5. If you have any questions about Foundation 5, it is heavily documented. If you have any thoughts about Foundation 5, feel free to leave them in the comments section below.