ZURB Foundation: The CSS framework for responsive frontends

Since 1998, the American design agency ZURB has been assisting companies in designing high-quality websites and web services. In 2008, the internally-developed style elements for customer web projects were combined in the ZURB Style Guide. Two years later, ZURB decided to create a framework based on the guide, intended to simplify the creation of prototypes and shorten the development time. The best of the existing code snippets, patterns, and templates were picked out and integrated in the framework Foundation, which was published in 2011 as an open source project and has since been available for free use.

Foundation is a responsive front-end framework that’s compiled from high-functioning HTML and CSS components for UI design, various code snippets and templates, and optional JavaScript extensions. The modular web framework for the design of interdisciplinary projects is distributed under the free MIT license, and can be downloaded from the official homepage as well as off GitHub. Since Foundation 4.0, the “Mobile First” approach has been taken into account, which offers various new modules for performance optimization, and a streamlining of the file size of all framework files. In addition to the standard version of Foundation, ZURB also has variants for the development of cross-device e-mail newsletters (Foundation for E-mails) and one-pagers (Foundation for Apps).

The Foundation framework is characterized by a high degree of flexibility, which results primarily from the modular design. You can decide which components you need and which you don’t before you download them, so you can easily compile your very own variant of the web code collection without having to download the modules that you don’t need. If you realize later that you need a component that you initially left out, you can simply add it to the framework later. Likewise, you can also remove modules that you no longer need. This ensures that you have the exact functions that you need for the implementation of your web project.

For Foundation 6.0, for example, you have a choice of over 49 components from the following seven areas:

• Grid: The decisive component for responsive web design is the standard 1200 pixel wide, flexible grid layout. You can also deselect this module, but the system is the basis for cross-device, cross-resolution design of your web project. Since version 6.0, you have the option to select the “Flex Grid” model, the enables an even more flexible element positioning based on the CSS Flexbox model (for example, a horizontal and vertical alignment of the objects).

• General: The general modules (to which the grid is also officially listed) include the float and visibility classes, which can be used to define rules for the positioning and visibility of individual elements. In this area, you’ll also find a form component, as well as the typography module with basic font and text formatting.

• Controls: This area contains all the important interactive elements of your web project. For example, it includes the buttons that are clicked on to redirect a user or close selected elements. There are also modules that allow you to integrate sliders and control buttons with on/off switches.

• Navigation: Of course, navigation elements can also be used for front-end design, so you have a wide selection of modules for your ZURB Foundation project with which you can create menu bars and lists (accordion, drill-down, drop-down), add navigation paths (breadcrumbs), or mark pages – including with page numbers.

• Containers: Container represent a first-class way to include multiple elements, such as text, images, or videos, in a common area. Here, you can find styles for typical content widgets, like accordion, tabs, drop-down areas, or modal dialogues.

• Media: Under the “Media” rubric you can find modules of the Foundation framework that are necessary for the integration of multimedia elements. The “Flex Video” component supports, for example, the embedding of videos, and ensures that your content is adapted to the different display sizes and resolutions. There are also components for preview images and tooltips.

• Plugins: Finally, you can select some useful extensions for ZURB Foundation that will help you work with the web framework. For example, with the “Motion UI” library, you can download a useful library (only for the Sass variant) that makes creating flexible UI transitions and animations easy as pie.

Before downloading you can also define some standard settings for the framework. This includes options for changing the column number or spacing, as well as the maximum width of the grid system, different color settings, or the direction of the text (left to right or right to left). If you want to test the framework first without having to research the individual modules, you can also download it as a complete version (“Complete”) or in a stripped-down basic version (“Essential”).

If you’re happy with the possibilities of CSS and simply overwrite styles in the downloaded CSS file, then you’ve made a good choice. But the Foundation framework has another special feature: The basics of the CSS code are written in the stylesheet language Sass (Syntactically Awesome Stylesheets), which is a preprocessor for CSS. Sass makes it possible to work in .scss stylesheets, which can then be compiled into the known .css documents that are read and interpreted by the browser.

If you utilize the Sass variant of the ZURB framework, you can enjoy the following benefits:

• Simplified syntax (Sass or SCSS) that makes the writing of stylesheets easier

• The possibility to define templates (mixins) to centralize repetitive patterns and integrate them at any point

• Easy combination of multiple stylesheets for the minimization of HTTP requests

• Use of variables and functions to centrally exchange colors, spacing, fonts, etc.

• Code can be structured hierarchically using nesting, which allows for clean work with much fewer lines of code

The Sass compiler is originally written in Ruby. If you don’t use this programming language, you don’t have to install it for Sass, because LibSass has an alternative written in C available. LibSass runs on all common operating systems and can easily be integrated into a node.js workflow – for example, to automatically translate changes to the Sass code into CSS.

With the update from version 5 to Foundation 6.0, ZURB has significantly reduced the file size of the complete framework: With 60 KB CSS and 84 KB JavaScript, Foundation enjoys the reputation of being a sleek development platform. Through the previously mentioned modularity and the freedom in selection, you can even minimize the size. In combination with the flexible grid and the diver ARIA attributes (for example, the implementation of powerful keyboard navigation) that ZURB includes, the basic options for cross-platform and cross-device web projects are an absolute given. The latter attributes are well documented and available in all areas where they can optimize your site’s accessibility.

If you work with the Sass version of the framework, you also increase your options for the composition of design and layout elements used. The use of these special stylesheets is by no means simple for beginners, and requires a certain amount of training, which also applies to the platform in general. The integration of external components, such as the integration of the Foundation modules or projects into a different framework or content management system, is usually rather tedious. Small weaknesses that ZURB Foundation has when compared to other CSS frameworks such as Twitter Bootstrap are the slim selection of templates, as well as the lack of support for older versions of Internet Explorer.

ZURB Foundation accompanies you as the developer from the first prototype all the way to the functional website, and is characterized above all by efficiency. If you don’t need particular components, you can simply deselect them without influencing the functionality of other elements. As a result, the CSS framework shines through its particular sleek code, which emphasizes the key theme “mobile first” chosen by ZURB. Together with the highly flexible grid system, which you can optionally customize with Sass, the framework is perfectly suited for developing responsive front-ends that are characterized by fast loading-time and accessibility, and are suitable for different screen sizes.

You can use the ZURB framework for the implementation of more complex, individual web projects, but this also means considerable effort, and requires a good understanding of the pre-made code snippets.