We've been getting some great response to our recent release of Foundation 4. One of the newer things that has folks talking is our move over from jQuery to Zepto. Since Foundation 4's CSS was designed to be Mobile First, we decided to snatch the opportunity to completely overhaul the JavaScript and focus on a more robust implementation for mobile devices. Which, in the end, makes things a bit faster than ever before.
Getting Zepto With It
Lightening the code base was our first move. To do this, we started looking at jQuery alternatives and quickly found Zepto. Where jQuery rings in at about 9,600 lines of code, Zepto is a mere 1,900 lines and is practically a drop-in replacement for jQuery. We say "practically" because there are some areas where Zepto takes dramatic shortcuts that makes things occasionally arduous, such as animation queueing and proper width/height calculations.
We had to make Zepto a more direct substitute for jQuery. To compensate for some of the functionality it was lacking, we have created a core foundation.js file that handles the differences. This file also centralizes shared functionality among the different libraries in Foundation.
Another crucial aspect of Foundation 4 was making it developer friendly. We rewrote almost all of the JavaScript libraries in Foundation with a consistent syntax and structure. Developer contributions on Foundation 3 were few and far between on the JavaScript front, mostly because of the previous syntax and structure was not consistent.
There are some new libraries, which make choices based on the screen-size, taking into account the differences between desktop and mobile. Foundation 4 introduces Section JS, one library that encompasses tabs, accordions, vertical navigation and horizontal navigation elements. In addition, dropdowns can now be applied to any element with the new Dropdown JS library.
The installation process has also undergone an overhaul. With a much simpler one line call, you can get all of the Foundation libraries initialized on your page. So let's get started!
Installing
The new JS now works with both Zepto and jQuery. If you want to load Zepto with a fallback to jQuery, you can use the following embed code:
Remember, the core foundation.js file handles the differences, as well as centralizes shared functionality among the different libraries in Foundation.
In Foundation 3, we had a jQuery plugin for each and every plugin in Foundation. So if you wanted to initialize the tooltips, you had to call $(document).foundationTooltips ( ); — which goes against jQuery's best practices. In 4, we created one plugin that occupies only one namespace within jQuery and Zepto that all Foundation libraries get loaded into, allowing us to initialize all plugins by simply calling foundation( ) on your document.
Configuration
Don't mistake ease of implementation with lack of functionality. The new foundation( ) method supports a myriad of new options. You can initialize particular plugins on certain sections of your pages content, instead on the whole document:
This will initialize and bind events only to tooltips and Section elements within the sidebar. The new Foundation method supports a variety of configurations. Some examples:
This will initialize the new section library with deep linking turned on. In addition, a callback is fired and a response object is returned. For now, only errors are returned in the response. The errors provide useful information, such as libraries that may have failed to properly initialize but don't prevent other libraries from loading. Down the road, we may expand the available attributes of the response object for more complex implementations.
This code will trigger open method on the #awesomeModal and subsequently open the modal.
The Future is Data Options
We are working on way to fine tune the configuration options by adding support for a data-options attribute in your markup that the libraries can read and customize the configuration on the fly for that particular instance.
Some of the libraries, like sections, support data options now. Let's say you had the following global config set on your page:
This will disable deep linking for all section components on your page. However, you can override this setting on an individual basis by passing data-options in your markup.
Now this particular section element will have deep linking support enabled and the other section components on your page will have it disabled. Sweet!
Data options work well with content that is dynamically loaded on the page. These new additions can have fully custom configurations that are completely different from the defaults passed to foundation( ), instead of inheriting the default configuration.
Right now, only Section and Orbit support data-options. We are working to bring this great new functionality to the rest of the libraries in Foundation.
Conclusion
Foundation 4 provides a mobile friendly, light and fast JS library for adding common interactive components to your page. It plays well with both jQuery and Zepto and can be as simple or as complex as you're willing to make it.
We'd love to hear your thoughts about future development and feel free to contribute over on Github!