ZURB Foun­da­tion

Since 1998, the American design agency ZURB has been assisting companies in designing high-quality websites and web services. In 2008, the in­ter­nal­ly-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­te­grat­ed in the framework Foun­da­tion, which was published in 2011 as an open source project and has since been available for free use.

Foun­da­tion is a re­spon­sive front-end framework that’s compiled from high-func­tion­ing HTML and CSS com­po­nents for UI design, various code snippets and templates, and optional JavaScript ex­ten­sions. The modular web framework for the design of in­ter­dis­ci­pli­nary 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 Foun­da­tion 4.0, the “Mobile First” approach has been taken into account, which offers various new modules for per­for­mance op­ti­miza­tion, and a stream­lin­ing of the file size of all framework files. In addition to the standard version of Foun­da­tion, ZURB also has variants for the de­vel­op­ment of cross-device e-mail newslet­ters (Foun­da­tion for E-mails) and one-pagers (Foun­da­tion for Apps).

The Foun­da­tion framework is char­ac­ter­ized by a high degree of flex­i­bil­i­ty, which results primarily from the modular design. You can decide which com­po­nents 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 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 im­ple­men­ta­tion of your web project.

For Foun­da­tion 6.0, for example, you have a choice of over 49 com­po­nents from the following seven areas:

• Grid: The decisive component for re­spon­sive 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­o­lu­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­si­tion­ing based on the CSS Flexbox model (for example, a hor­i­zon­tal and vertical alignment of the objects).

• General: The general modules (to which the grid is also of­fi­cial­ly listed) include the float and vis­i­bil­i­ty classes, which can be used to define rules for the po­si­tion­ing and vis­i­bil­i­ty of in­di­vid­ual elements. In this area, you’ll also find a form component, as well as the ty­pog­ra­phy module with basic font and text for­mat­ting.

• Controls: This area contains all the important in­ter­ac­tive 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­i­ga­tion: Of course, nav­i­ga­tion elements can also be used for front-end design, so you have a wide selection of modules for your ZURB Foun­da­tion project with which you can create menu bars and lists (accordion, drill-down, drop-down), add nav­i­ga­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 Foun­da­tion framework that are necessary for the in­te­gra­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­o­lu­tions. There are also com­po­nents for preview images and tooltips.

• Plugins: Finally, you can select some useful ex­ten­sions for ZURB Foun­da­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 tran­si­tions and an­i­ma­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 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 in­di­vid­ual 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­si­bil­i­ties of CSS and simply overwrite styles in the down­loaded CSS file, then you’ve made a good choice. But the Foun­da­tion framework has another special feature: The basics of the CSS code are written in the stylesheet language Sass (Syn­tac­ti­cal­ly Awesome Stylesheets), which is a pre­proces­sor 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­pret­ed by the browser.

If you utilize 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­si­bil­i­ty to define templates (mixins) to cen­tral­ize repet­i­tive patterns and integrate them at any point

• Easy com­bi­na­tion of multiple stylesheets for the min­i­miza­tion of HTTP requests

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

• Code can be struc­tured hi­er­ar­chi­cal­ly using nesting, which allows for clean work with much fewer lines of code

The Sass compiler is orig­i­nal­ly 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­ter­na­tive written in C available. LibSass runs on all common operating systems and can easily be in­te­grat­ed into a node.js workflow – for example, to au­to­mat­i­cal­ly translate changes to the Sass code into CSS.

With the update from version 5 to Foun­da­tion 6.0, ZURB has sig­nif­i­cant­ly reduced the file size of the complete framework: With 60 KB CSS and 84 KB JavaScript, Foun­da­tion enjoys the rep­u­ta­tion of being a sleek de­vel­op­ment platform. Through the pre­vi­ous­ly mentioned mod­u­lar­i­ty and the freedom in selection, you can even minimize the size. In com­bi­na­tion with the flexible grid and the diver ARIA at­trib­ut­es (for example, the im­ple­men­ta­tion of powerful keyboard nav­i­ga­tion) that ZURB includes, the basic options for cross-platform and cross-device web projects are an absolute given. The latter at­trib­ut­es are well doc­u­ment­ed and available in all areas where they can optimize your site’s ac­ces­si­bil­i­ty. If you work with the Sass version of the framework, you also increase your options for the com­po­si­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­te­gra­tion of external com­po­nents, such as the in­te­gra­tion of the Foun­da­tion modules or projects into a different framework or content man­age­ment system, is usually rather tedious. Small weak­ness­es that ZURB Foun­da­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 Foun­da­tion ac­com­pa­nies you as the developer from the first prototype all the way to the func­tion­al website, and is char­ac­ter­ized above all by ef­fi­cien­cy. If you don’t need par­tic­u­lar com­po­nents, you can simply deselect them without in­flu­enc­ing the func­tion­al­i­ty of other elements. As a result, the CSS framework shines through its par­tic­u­lar sleek code, which em­pha­sizes the key theme “mobile first” chosen by ZURB. Together with the highly flexible grid system, which you can op­tion­al­ly customize with Sass, the framework is perfectly suited for de­vel­op­ing re­spon­sive front-ends that are char­ac­ter­ized by fast loading-time and ac­ces­si­bil­i­ty, and are suitable for different screen sizes.

You can use the ZURB framework for the im­ple­men­ta­tion of more complex, in­di­vid­ual 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.