The Framework Wars

Deadlines. Turn around times. Prototyping. In the chaotic and ever changing world of the web, frameworks are quickly becoming the unsung heros for an increasing number of sites.  Some say they stifle creativity.  Others claim that they offer a strong platform to speed up development, reducing repetitive coding, and increase stability.   Do the pros outweigh the cons?  We’ll let you be the judge.  But, there is no doubt that, love them or hate them, web development frameworks are here to stay.  Let’s consider the two big players in the framework wars.

Bootstrap 2.3

A popular choice these days.  With Bootstrap you get a baked in responsive grid system, custom jQuery plugins and LESS functionality – yes batteries are included. Need a cool looking button?  You can do that with literally 2-3 words of code.  A nice looking table?  Easy as pie.  A pop-up modal?  No need to get into the jQuery, just throw in a few cool new HTML5 data attributes and you’re done – it’s that easy.  A common complaint with bootstrap however, (as with other frameworks) is that it violates an old maxim of never mixing style with your markup.  Indeed Bootstrap stylings are not all semantic – especially when it comes to the grid.

With Bootstrap 3 on the horizon, it promises an overhaul to unify the grid into a single fluid one and ridding itself of redundancies of code and classes, but no talk as of yet to reverting to a more semantic one.  We will have to wait and see.

  • Pros:  Easy to launch sites.  Default styling is clean and aesthetically pleasing
  • Cons: Styling not always semantic.  So popular, sites that use it may start to look all too familiar.

Foundation 4

More of a veteran in this space and it shows.  Many revere Foundation for the greater degree of control one can exercise on the code. It’s quite a robust system utilizing SCSS for it’s styling.   Foundation is taking a mobile first approach with it’s building process, which will accommodate the rapidly changing way people access the web on a variety of devices. A reworked grid.  A handy new feature to get you started is the template.  It can aid in the speed of set up by literally providing a framework of code for several popular site types.  Also the grid brings a welcome change that many have been clamouring for – a semantic grid.  No more style and markup mix up.  Everything is nice and squeaky clean via the use of mixins.

  • Pros: Semantic grid system.  Lots of templates.
  • Cons:  Mobile first means changing the way you approach construction. New, which means there will be bugs to be worked out.

Conclusion

Well its easy to see why both frameworks are so popular.  The distinguishing marks between both can many times come down to personal preference or needs (e.g. LESS vs SCSS).  It seems that Foundation 4 has really stepped up its game and has some real killer features (read: semantic grid). We here at REL like working with LESS so hopefully Bootstrap 3 responds with equally if not better feature set. In the meantime we will be incorporating a lightweight semantic grid into Bootstrap as a bit of a hybrid (who says you can’t have it both ways?).  But it is imperative to remember that frameworks are used to speed up development  and never to replace the design process.  Good design is a must for any website.  We must let the collaboration between the client and designer determine design and let the coders wrestle with the framework to make it play nice with the design.  Both Bootstrap and Foundation are but a piece of the web design puzzle.  When used properly they can be a huge benefit to web designers and developers.

Not your everyday geek, Johann is detailed, organized, meticulous, and usually right. From Wordpress to word-smithing Johann can do it all.