Foundation (framework)

Foundation is a responsive front-end framework. Foundation provides a responsive grid and HTML and CSS UI components, templates, and code snippets, including typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. Foundation is maintained by ZURB and is an open source project.

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. ZURB released Foundation 3.0 in June 2012, 4.0 in February 2013, 5.0 in November 2013, 6.0 in November 2015. The team started working on the next version of Foundation for Sites 7 which most likely will drop support for older browsers and implement newer technologies like flexbox or maybe calculated grid system.

Foundation for Email was released in September 2013.

Foundation for Apps was released in December 2014.

Foundation was designed for and tested on numerous browsers and devices. It is a mobile first responsive framework built with Sass/SCSS giving designers best practices for rapid development. The framework includes most common patterns needed to rapidly prototype a responsive site. Through the use of Sass mixins, Foundation components are easily styled and simple to extend.

Since version 2.0 it also supports responsive design. 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.

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

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. Developers can adapt the Foundation file itself, selecting the components they wish to use in their project.

Adjustments are possible 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.