Foundation by Zurb – great front end framework to cover your rapid prototyping needs


Foundation is a responsive front-end framework for rapid and not so rapid development of web and embed HTML applications. For years now I have worked on projects for myself and for my customers using either my own snippets of CSS code to put something together or relaying on UI programmers work for larger projects. To be honest, this approach has been causing constant trouble to maintain and to develop this way, in particular because of inconsistencies all over the way – one UI programmer does layouts one way, some other does in completely different way, just because of lack of particular set of rules to fallow. Same problems would be with back-end development if we wouldn’t adapt frameworks and CMS’es which sets some particular rules in back-end development. In recent years we have witnessed numerous new front end frameworks spawning all around the web. From all the wide variety of frameworks available now ones I considered were Bootstrap and Foundation by Zurb. I won’t dive into deep comparisons between the two but here are the main reasons I went with the Foundation -

  • Maturity – Foundation just feels a bit more mature than Bootstrap. It’s about that feeling of trust, when you make something and you have a tool to depend on.
  • Internet Explorer support – and there is that. Progress is all fine, but in commercial development You can’t always say “we wont support this and that”. This happens a lot when you work with gov projects a lot. There is specific requirements here you must meet and noncompliance with them will punish you quite hard to the point where customer refuses to accept the project without IE support. Although Bootstrap does support, for example, IE7, this support is more on paper than in real life. Foundation on the other hand does not support IE7 officially but it still works on it and does it very well.
  • Columns – Bootstrap limits you to 12. Although it is enough in most applications, I have some which requires 16 and even more.
  • Use of predefined classes – “.one .column” by Foundation versus “.span1″ from Bootstrap. Needless to say, You can actually use “.one” and “.column” separately to achieve
  • Media queries and visibility classes – this particular aspect of Foundation kicks Bootstrap out of the water. There is just too much to list, but main options I feel Bootstrap lacks is ability to show and hide stuff in touch and classic devices, print views and show/hides divided in sizes rather than by the type of the device itself.
  • Did you saw the Orbit JavaScript component from Foundation? It’s just awesome. I won’t even mention the Reveal and Joyride.

Last, but not least – Foundation just feels smoother and by my opinion, looks better. Hey, I didn’t say that this article will be objective, did I?…

But to be honest, the choice of mine to favor Foundation over Bootstrap is just a matter of opinion and the reasoning behind this would be more like “I like it better. So I use it”. Important thing about all this front-end framework fuss is that there are some around and they will help you do stuff more efficiently and maybe will bring some fresh air in your toolbox. If you are aware and have chosen some front end framework to work with, great! If not – take a peek on both Bootstrap and Foundation. You might find them to solve many of your problems.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>