ZURB Found­a­tion

Since 1998, the American design agency ZURB has been assisting companies in designing high-quality websites and web services. In 2008, the in­tern­ally-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 pro­to­types and shorten the de­vel­op­ment time. The best of the existing code snippets, patterns, and templates were picked out and in­teg­rated in the framework Found­a­tion, which was published in 2011 as an open source project and has since been available for free use.

Found­a­tion is a re­spons­ive front-end framework that’s compiled from high-func­tion­ing HTML and CSS com­pon­ents for UI design, various code snippets and templates, and optional JavaS­cript ex­ten­sions. The modular web framework for the design of in­ter­dis­cip­lin­ary projects is dis­trib­uted under the free MIT license, and can be down­loaded from the official homepage as well as off GitHub. Since Found­a­tion 4.0, the “Mobile First” approach has been taken into account, which offers various new modules for per­form­ance op­tim­isa­tion, and a stream­lin­ing of the file size of all framework files. In addition to the standard version of Found­a­tion, ZURB also has variants for the de­vel­op­ment of cross-device e-mail news­let­ters (Found­a­tion for E-mails) and one-pagers (Found­a­tion for Apps).

The Found­a­tion framework is char­ac­ter­ised by a high degree of flex­ib­il­ity, which results primarily from the modular design. You can decide which com­pon­ents you need and which you don’t before you download them, so you can easily compile your very own variant of the web code col­lec­tion without having to download the modules that you don’t need. If you realise 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 im­ple­ment­a­tion of your web project.

For Found­a­tion 6.0, for example, you have a choice of over 49 com­pon­ents from the following seven areas:

• Grid: The decisive component for re­spons­ive 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-res­ol­u­tion 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 po­s­i­tion­ing based on the CSS Flexbox model (for example, a ho­ri­zont­al and vertical alignment of the objects).

• General: The general modules (to which the grid is also of­fi­cially listed) include the float and vis­ib­il­ity classes, which can be used to define rules for the po­s­i­tion­ing and vis­ib­il­ity of in­di­vidu­al elements. In this area, you’ll also find a form component, as well as the ty­po­graphy module with basic font and text format­ting.

• Controls: This area contains all the important in­ter­act­ive 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.

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

• Con­tain­ers: 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 Found­a­tion framework that are necessary for the in­teg­ra­tion of mul­ti­me­dia 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 res­ol­u­tions. There are also com­pon­ents for preview images and tooltips.

• Plugins: Finally, you can select some useful ex­ten­sions for ZURB Found­a­tion 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 trans­itions and an­im­a­tions easy as pie.

Before down­load­ing 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 colour 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 in­di­vidu­al 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 pos­sib­il­it­ies of CSS and simply overwrite styles in the down­loaded CSS file, then you’ve made a good choice. But the Found­a­tion framework has another special feature: The basics of the CSS code are written in the stylesheet language Sass (Syn­tactic­ally Awesome Stylesheets), which is a pre­pro­cessor 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 in­ter­preted by the browser.

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

• Sim­pli­fied syntax (Sass or SCSS) that makes the writing of stylesheets easier

• The pos­sib­il­ity to define templates (mixins) to cent­ral­ise re­pet­it­ive patterns and integrate them at any point

• Easy com­bin­a­tion of multiple stylesheets for the min­im­isa­tion of HTTP requests

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

• Code can be struc­tured hier­arch­ic­ally using nesting, which allows for clean work with much fewer lines of code

The Sass compiler is ori­gin­ally written in Ruby. If you don’t use this pro­gram­ming language, you don’t have to install it for Sass, because LibSass has an al­tern­at­ive written in C available. LibSass runs on all common operating systems and can easily be in­teg­rated into a node.js workflow – for example, to auto­mat­ic­ally translate changes to the Sass code into CSS.

With the update from version 5 to Found­a­tion 6.0, ZURB has sig­ni­fic­antly reduced the file size of the complete framework: With 60 KB CSS and 84 KB JavaS­cript, Found­a­tion enjoys the repu­ta­tion of being a sleek de­vel­op­ment platform. Through the pre­vi­ously mentioned mod­u­lar­ity and the freedom in selection, you can even minimise the size. In com­bin­a­tion with the flexible grid and the diver ARIA at­trib­utes (for example, the im­ple­ment­a­tion of powerful keyboard nav­ig­a­tion) that ZURB includes, the basic options for cross-platform and cross-device web projects are an absolute given. The latter at­trib­utes are well doc­u­mented and available in all areas where they can optimise your site’s ac­cess­ib­il­ity. If you work with the Sass version of the framework, you also increase your options for the com­pos­i­tion 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 in­teg­ra­tion of external com­pon­ents, such as the in­teg­ra­tion of the Found­a­tion modules or projects into a different framework or content man­age­ment system, is usually rather tedious. Small weak­nesses that ZURB Found­a­tion has when compared to other CSS frame­works such as Twitter Bootstrap are the slim selection of templates, as well as the lack of support for older versions of Internet Explorer.

ZURB Found­a­tion ac­com­pan­ies you as the developer from the first prototype all the way to the func­tion­al website, and is char­ac­ter­ised above all by ef­fi­ciency. If you don’t need par­tic­u­lar com­pon­ents, you can simply deselect them without in­flu­en­cing the func­tion­al­ity of other elements. As a result, the CSS framework shines through its par­tic­u­lar sleek code, which em­phas­ises the key theme “mobile first” chosen by ZURB. Together with the highly flexible grid system, which you can op­tion­ally customise with Sass, the framework is perfectly suited for de­vel­op­ing re­spons­ive front-ends that are char­ac­ter­ised by fast loading-time and ac­cess­ib­il­ity, and are suitable for different screen sizes.

You can use the ZURB framework for the im­ple­ment­a­tion of more complex, in­di­vidu­al web projects, but this also means con­sid­er­able effort, and requires a good un­der­stand­ing of the pre-made code snippets.