Foundation (framework)

ZURB Foundation is a free collection of tools for creating websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions.

It is used by Dictionary.com, ZURB's web applications, and others.^[2]

Foundation emerged as a ZURB project to develop front-end code faster and better. In October 2011, ZURB released Foundation 2.0 as open-source under the MIT License.^[2] In June 2012 ZURB released a major update, Foundation 3.0.^[3] In February 2013 ZURB released another major update, Foundation 4.0.^[4]In November 2013 ZURB released another major update, Foundation 5.0.

Foundation has relatively incomplete support for HTML 5 and CSS 3, but it is compatible with all major browsers. Basic information of compatibility of websites or applications is available for all devices and browsers. There is a concept of partial compatibility that makes the basic information of a website available for all devices and browsers. For example, the properties introduced in CSS3 for rounded corners, gradients and shadows are used by Foundation despite lack of support by older web browsers. These extend the functionality of the toolkit, but are not required for its use.

Since version 2.0 it also supports responsive design.^[5] This means the graphic design of web pages adjusts dynamically, taking into account the characteristics of the device used (PC, tablet, mobile phone). Additionally, since 4.0 it has taken a mobile-first approach, designing and developing for mobile devices first, and enhancing the web pages and applications for larger screens.^[6]

Foundation is open source and available on Github. Developers are encouraged to participate in the project and make their own contributions to the platform.

This section does not cite any sources. Please help improve this section by adding citations to reliable sources. Unsourced material may be challenged and removed. (August 2012) (Learn how and when to remove this message)

Foundation is modular and consists essentially of a series of Sass stylesheets that implement the various components of the toolkit. Component stylesheets can be included via Sass or by customizing the initial Foundation download. The developer can adapt the Foundation file itself, selecting the components he wishes to use in his project.

Adjustments are possible to a limited extent through a central configuration stylesheet. More profound changes are possible by changing the Sass variables.

The use of Sass stylesheet language allows the use of variables, functions and operators, nested selectors, as well as so-called mixins.

Since version 3.0, the configuration of Foundation also has a special "Customize" option in the documentation. Moreover, the developer chooses on a form the desired components and adjusts, if necessary, the values of various options to their needs. The subsequently generated package already includes the pre-built CSS style sheet.

Foundation comes standard with a 940 pixel wide, flexible grid layout. The toolkit is fully responsive to make use of different resolutions and types of devices: mobile phones, portrait and landscape format, tablets and PCs with a low and high resolution (widescreen). This adjusts the width of the columns automatically.

Foundation provides a set of stylesheets that provide basic style definitions for all key HTML components. These provide a browser and system-wide uniform, modern appearance for formatting text, tables and form elements.

In addition to the regular HTML elements, Foundation contains other commonly used interface elements. These include buttons with advanced features (for example, grouping of buttons or buttons with drop-down option, make and navigation lists, horizontal and vertical tabs, navigation, breadcrumb navigation, pagination, etc.), labels, advanced typographic capabilities, and formatting for messages such as warnings.

The JavaScript components of Foundation are based on Zepto.js, a lighter but API-compatible alternative to the jQuery JavaScript framework. They provide additional user-interface elements such as dialog, tooltips and carousels. They also extend the functionality of some existing interface elements, including for example a split drop-down button. In version 4.0 following JavaScript plugins are supported: alerts, clearing, cookie, dropdown, forms, joyride, magellan, orbit, placeholder, reveal, section, tooltips, and topbar.

This section does not cite any sources. Please help improve this section by adding citations to reliable sources. Unsourced material may be challenged and removed. (August 2012) (Learn how and when to remove this message)

To use Foundation in an HTML page the developer must first compile one CSS file from the downloaded Sass stylesheets. This can be done with a special compiler. Alternatively, the developer can download a pre-compiled CSS file.

Then they must integrate the generated CSS file in the HTML file. If JavaScript components are selected, they must be referenced along with the Zepto.js or jQuery library in the HTML document.

• CSS
• HTML
• JavaScript
• jQuery
• CSS frameworks

• Foundation: The Most Advanced Responsive Front-end Framework from ZURB - The official website, contains documentation and downloads
• zurb / foundation on github - The official git repository, contains the source code and issue tracker
• Sass - Syntactically Awesome Stylesheets - The dynamic stylesheet language
• ZURB Foundation Tutorial - Examples and explanations