Working with Foundation 5 JS Framework

JS Frameworks for delivering mobile responsive websites have improved dramatically over the past 3 years. Twitter Bootstrap 3.2 has already been reviewed for its fit with DHTMLx and then another demo of Bootstrap with several UI/Widget JS Frameworks. One thing is for sure, developing with Bootstrap and its 12-column grid styling plus basic JavaScript routines is indeed fast and effective. However, there are some problems when using other JS Frameworks with Bootstrap. Read the above reviews for the details.

This prompted a review of other JS Mobile Responsive Frameworks like Foundation, InK-Interface Kit, and Skeleton. The common thread among these JS Frameworks is:
1)easy to use 12 column or higher grid layouts;
2)powerful menu navbars with dropdowns, buttons, and sticky positioning;
3)enhanced CSS usually with LESS or SASS/SCSS;
4)JavaScript components which implement basic UI widgets like tabs and modals.

So this review will look at Foundation 5 and how it measures up to Bootstrap for simple event and portfolio apps. This first comparison will  not use other JS UI/Widget Frameworks but rather will use some sliders and iframe routines. Here is the Northumberland Hills Fall Festival of Events schedule:

Click on the screenshot to get all the details on Northumberland Hills Fall events.

The elements that are common between BootStrap and Foundation, are the following:
1)The sticky menu. Scroll down in the file and note that the menu stays at the top.
2)Dropdown menu items. Click on Fall Colors and Fall Colors 2 to see the dropdown menuitems.
3)Collapse to menu icon in small display mode. Collapse screen to mobile phone portrait.
4)Easy 3 column [or any from 2 to 6] layouts.
5)Auto-resizing of text, images, video and iframes. Test this by resizing the screen.
6)Support of modal popup windows. Click on Northumberlad Hills menuitem.
7)Support of core slider functions. Click on Fall Pictures to see slider.
8)Using a dropdown to allow users to select the iframe Fall Scene they want.
In sum on basic functionality for this Northumberland Hills website, both Bootstrap and Foundation have more than enough features to make building this SPA-Single Page App easy and fast. It took 7 hours using Foundation. But that includes 9 Fair events, 2 summaries, a slider with 9 images, a choice of 18 fall scenes, plus a  popup modal window with image plus Mapquest map of Northumberland Hills. In less than a day a major promotional site was produced.

The Differences

We have argued that in basic functionality, Bootstrap and Foundation offer roughly equivalent capabilities. However, the JavaScript components are a bit richer in Bootstrap but Foundation gives users the ability to create their own script extensions. Foundation has a very good set of onsite templates. But Bootstrap has a very good 3rd party site with many free and useful Bootstrap templates. Perhaps the most significant difference is that Bootstrap has available both LESS and SASS source versions whereas Foundation is exclusively SASS based.

Nonetheless, one can see a trend here; each JS Framework has some distinctive attributes but for the most part they are closely matched. For example, this reviewer found the Bootstrap Getting Started guide easier to follow than Foundation; however both have very good overall documentation. Likewise, both Bootstrap and Foundation power several WordPress themes each. However, Foundation has a broad set of other resources conveniently listed on its site.

Summary

To create a very good SPA-Single Page Application website promoting various events, fairs and festivals around Northumberland Hills, Foundation 5.3.3 JS Framework proved more than equal to the task. However, this reviewer has done a roughly equivalent portfolio site in Bootstrap 3.2 in slightly faster time – 4-5 hours. However, with Bootstrap we did have conflicts when using multiple JS libraries with Bootstrap. Unfortunately, a project requiring multiple JS libraries using Foundation has not yet been done.

So a definitive conclusion on the relative performance of Foundation versus Bootstrap is not possible. However,  right now one can say creating Single Page Apps or attractive Landing Pages using either framework will be  easy to do. And  all the indications are that these two JS Mobile Responsive Frameworks will not be too far apart in performance as well as development.