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 Elements, as well as optional functionality provided by JavaScript extensions. Foundation is maintained by ZURB and is an open sourceproject.


Foundation emerged as a ZURB project to develop a faster and better code. In October 2011, ZURB released Foundation 2.0 as open source under the MIT License . [2] ZURB released Foundation 3.0 in June 2012, [3] 4.0 in February 2013, [4] 5.0 in November 2013, and 6.0 in November 2015. The team started working on the next version of the Foundation for Sites 7 which most likely will drop support for older browsers and implement newer technologies like flexbox or calculated grid system.

Foundation for Emails, formerly known as ZURB Ink, 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 the most common patterns needed to quickly prototype a responsive site. Through the use of Sass mixins, the Foundation components are easily styled and simple to extend.

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 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.

Structure and function

This section does not cite any sources . Please add this section by adding quotes to reliable sources . Unsourced material can be challenged and removed . (August 2012) ( Learn how to remove this template message )

Foundation is modular and consists 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, and so-called mixins.

Since version 3.0, the configuration also has a special “Customize” option in the documentation. Moreover, developers use a form to choose the desired components and adjust, if necessary, the values ​​of various options to their needs. The newly generated package already includes the pre-built CSS style sheet.

Grid system and responsive design

Foundation comes with 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 low resolution and high resolution (widescreen). This adjusts the width of the columns automatically.

Understanding CSS stylesheet

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

Re-usable components

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.

JavaScript components and plug-ins

Official Zurb Foundation Main documentation page for Javascript

The JavaScript components of Foundation 4 Were Moved from jQuery Javascript library to Zepto, we presumption que la PHYSICALLY smaller, API-compliant alternative to goal JQuery Would Prove faster for the user. However, Foundation 5 moved back to the newer JQuery-2 release. “jQuery 2.x has the same API as jQuery 1.x, but does not support Internet Explorer 6, 7, or 8.” the official Zurb blog explains [7] , and the unsigned writer claims that the switch back was due to issues of compatibility with customized efforts; and that performance was found to be good, we use testing with the newer jQuery-2.

Foundation jQuery components provide general user interface elements and branded extensions. The list includes: dialog, tooltips, carousels, alerts, clearing, cookies, dropdown, forms, joyride, magellan, orbit, placeholder, reveal, section, topbar, flex video, and many others.

Plug-ins that use jQuery can be installed in the Foundation framework to provide advanced functionality in any UI area, including animation and “off-canvas” elements like slide-in menus.

Server-based database and scripting using tools and methods outside the Foundation framework in order to work. External services like MailChimp are still installed for any static HTML page, and do not require a home-rolled backend.

JQuery has become an accepted standard part of the evolution of the web. Wikipedia claims 65% of the top 100 Javascript sites employ it. Javascript is the standard de facto standard for frontend web development work, with HTML and CSS (by general consensus.)


There are three levels of integration for the Foundation: CSS, SASS, and Ruby on Rails with the Gem Rails Foundation. [8]


To use CSS, default or custom CSS packages can be downloaded from the web site. Foundation is then integrated into HTML page markup. [9]


The Foundation SASS installs Ruby, NodeJS, and Git to install Foundation sources. Then provides a command line interface to modify and compile source to CSS for use in HTML page markup. [10]

Foundation Rails Gem

The Foundation Rails can be installed by adding “gem ‘foundation-rails'” to the Gemfile Application Rails. [11]


  1. Jump up^ Foundation Changelogon Aug 18, 2017
  2. Jump up^ “Announcing Foundation by ZURB” . Retrieved 22 Aug 2012 .
  3. Jump up^ “ZURB Launches Foundation 3TB Take On Twitter’s Bootstrap Framework” . Retrieved 22 Aug 2012 .
  4. Jump up^ “Responsive Design Framework Foundation 4 Goes Mobile-First, Switches From jQuery To Zepto” . Retrieved 28 Feb 2013 .
  5. Jump up^ “A List Apart: Dive into Responsive Prototyping with Foundation” . Retrieved 22 Aug 2012 .
  6. Jump up^ “Zurb Foundation releases 4, a mobile-first, ‘forward-thinking dev / Designer’s Dream ‘ ‘ . Retrieved 28 Feb 2013 .
  7. Jump up^ “Why we dropped Zepto” .
  8. Jump up^ Foundation Documentationon Thursday, April 30, 2015
  9. Jump up^ Foundation Getting Startedon Thursday, April 30, 2015
  10. Jump up^ Foundation Getting Startedon Thursday, April 30, 2015
  11. Jump up^ Foundation Getting Startedon Thursday, April 30, 2015