Since 1998, the American design agency Zurb has been supporting companies in the design of high-quality websites and web services. In 2008, the style elements developed in-house for customer projects were brought together in the ZURB style guide.
Two years later, Zurb decided to create a framework based on this guide, in order to simplify the creation of prototypes and reduce development time. To do this, the best code snippets and templates were extracted and integrated into the Foundation framework, which was released as an open-source project in 2011, and has been available for free ever since.
What is the ZURB Foundation Framework?
Zurb Foundation Framework is a responsive front-end framework, consisting of HTML and CSS functional elements for UI design, various code snippets, templates, as well as optional JavaScript extensions.
The framework is modular, designed for interdisciplinary projects, is distributed under the MIT license and can be downloaded from its official page or from GitHub.
Mobile-First approach has been taken into account ever since Foundation 4.0, and in all framework files, thanks to various new modules designed to optimize performance, as well as a reduction in file size.
In addition to the standard version of the Zurb Foundation Framework, Zurb has also designed variants for the development of newsletters (Foundation for emails) and applications (Foundation for Apps) compatible with various devices.
A tour of it’s modules
The Zurb Foundation framework is characterized by a high level of flexibility, which results in modular construction. It is possible, before downloading, to choose the modules you need or not: this way you can configure your code collection yourself, without having to download modules that you do not need.
If you realize you need another module, you can download it at any time and add it to the framework. Likewise, you can also delete components that you no longer need. This allows you to always have the right modules you need to carry out your Web project.
For Foundation 6.0 for example, there is a choice of more than 40 components, grouped into seven different sectors:
- Grid: The decisive component for responsive web design is the flexible standard 1200 pixels wide grid. It is certainly possible to remove this add-on as well, but this grid system forms the basis of a design compatible with various devices and various resolutions . Since version 6.0, the module also exists in a version flex grid , which allows you to position the elements in an even more flexible way thanks to the models of boxes flexbox in CSS.
- General: modules (of which the grid is also a part) include the classes Float and Visibility, through which you can define rules for the placement and visibility of individual elements. In addition, this section also includes a component for forms and a module typography, containing basic fonts and text formatting options.
- Controls: This is where the most important interactive elements of your web project are located. These are, for example, buttons that redirect the reader to another page after a click, or that close selected items. There are also modules for integrating slideshows, as well as on / off buttons .
- Navigation: it is of course possible that some navigation elements are missing for the frontend design, that’s why there is a wide selection of modules for your ZURB Foundation project, thanks to which you can create menus (accordions, scrolling menus , drop-down lists), add breadcrumbs , or number the pages.
- Containers: Containers are the best way to group multiple items, such as text, images, or videos, into a common area. Here you will find styles for typical content of elements such as accordions, tabs, dropdowns and modal dialogs.
- Media: in the section you media will find the Foundation framework modules that you will need to integrate multimedia elements. The component, flex video for example, makes it easier to integrate videos, and ensures that the content can adapt to different screen sizes and different resolutions. In addition, there are other components for the preview, as well as various guides.
- Plug-ins: finally, it is possible to select extensions for ZURB Foundation, which will allow you to work more easily with the framework. For example, with the library motion UI, you can download a very useful library, allowing you to create flexible UI transitions and animations (this add-on only works with the Sass version).
In addition, it is possible to define some basic parameters of the framework before downloading it. This includes changing the number of columns, or the maximum spacing and width of the grid system, different color settings, and text direction (left to right or right to left).
In case you want to test the framework first without having to learn about the modules, you can also download its full version ( complete ) or light version ( essentials ).
A flexible and adaptable code base thanks to Sass
If you are happy with the possibilities of CSS and can easily edit the styles in the downloaded CSS document, this is definitely a good choice.
However, the ZURB Foundation framework has a special feature: the basics of CSS code are written with the stylesheet of the Sass language (Syntactically Awesome Stylesheets), which is a preprocessor for CSS. Sass allows you to work with .scss stylesheets, which can be compiled to .css documents which can be read and interpreted by the browser.
Users who use the Sass version of the ZURB framework will benefit from a number of advantages, including:
- A simplified syntax (Sass or CSS), which makes writing with style sheets easier
- The ability to define models (mixins) for repeated and centralized patterns, and to integrate them at any time.
- A simple combination of style sheets to minimize HTTP requests
- Several variables and features to change colors, spaces, fonts, etc.
- Thanks to Nesting, it is now possible to work with fewer lines of code.
The Sass compiler was originally written in Ruby. If you are not using Ruby, there is no need to install it for Sass, as there is an alternative available, LibSass, written in C language. LibSass is compatible with most common browsers and is easy to implement with the Node.js-Workflow.
Advantages and disadvantages
With the update to version 5 and the release of Zurb Foundation Framework 6.0, Zurb has significantly reduced the file size of the framework. With a 60 KB CSS file and an 84 KB JavaScript file, ZURB Foundation Framework enjoys its reputation as one of the lightest development platforms.
You may like to look at our list of best javascript libraries and frameworks.
Thanks to the modularity of the program, which allows you to choose only the modules you need, it is even possible to further reduce the size of the framework. In combination with the flexible grid and the various ARIA attributes (for example a powerful navigation keyboard) that ZURB has implemented, the program provides absolutely all the elements necessary for the realization of a web project that easily adapts to anything.
ARIA attributes are well documented and available wherever they can optimize the accessibility of your website.
If you are working with the Sass version of the framework, you have more options when it comes to concept, design, and layout. Using these specific frameworks is far from easy for beginners and requires some adaptation time, which also applies to the platform as a whole.
In addition, the integration of external elements is generally complicated, whether they are Foundation modules or projects carried out with another framework or another content management system.
ZURB Foundation has some small drawbacks compared to other CSS frameworks such as Twitter’s Bootstrap: indeed, it has a limited choice of models, and is not compatible with older versions of Internet Explorer.
When to use the ZURB foundation framework?
ZURB Foundation framework supports developers in the realization of the first prototypes to the building of fully functional websites and is distinguished by its efficiency. If you do not need one or more elements, in particular, it is possible to simply delete them, without influencing the operation of the other elements.
The result is a CSS framework with very light code, which puts into practice the principle of mobile-first chosen by ZURB. In addition to the particularly flexible grid system (which can also be customized with Sass), the Foundation framework is perfect for developing responsive frontends, which stand out for their speed of display and their adaptability to different screen sizes.
It is also possible to use the ZURB framework to carry out more complex individual projects, but this requires a considerable additional effort and implies having a solid knowledge of pre-made code snippets.