Foundation is a CSS framework designed by ZURB in September 2011. It has a slightly more advanced interface compared to other frameworks. Foundation is compatible on multiple browsers and hand held devices. The responsive menu is one of its greatest assets. The menu is incredible when it comes to functionality and can also be easily styled using CSS. This responsive framework allows designers and developers to create elegant websites with more of a design-it-yourself approach. It has responsive grid ( HTML & 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.
Highlights
- Developer’s: ZURB
- Initial release: September 2011
- Written in: HTML, CSS, Sass and JavaScript
- Open source: Yes
- Website: get.foundation
- Alexa Rank: 36,606
Foundation 6.4 Features:
- Includes XY grids: The latest version of Foundation includes a strong default grid system namely XY grids. This makes you control the layouts displayed both horizontally and vertically.
- Flexbox by default: Although there is a feature available which allows the fall back to float-mode, Flexbox is what they recommend.
- Smooth scrolling: This feature can be used to create “smooth scroll” behavior for any link available inside the page.
- Shifted to ES2016 JavaScript: Foundation moved its javascript architecture to ES2016 module-based architecture. If one does not have a module bundler. The drop-in compiled JS files in dist/js will provide backward compatibility.
- Easier prototyping: The process of prototyping and production often confuses people. With this feature, Foundation offers a better way and a “prototype mode” to speed up the prototyping function.
Pros:
- Offers finest of the customization abilities.
- Possess a robust grid system.
- Provides rapid development of code.
- Easy to use templates available for download.
- Offers services for sites as well as emails.
- Design-it-yourself approach.
- Lightweight.
Cons:
- More complex when trying to customize.
- Not a great framework for beginners.
- Less popular in comparison to Bootstrap.
Popular brands using Foundation
- Adobe
- Amazon
- Ebay
- Pixar Projection
- Washington Post
- Herschel Supply
Ideal for: Developers who have decent amounts of experience and who are primarily concerned with developing fast, attractive, responsive websites.
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, and 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 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 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.
1. Grid system and responsive design: 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.
2. Understanding CSS stylesheet : 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.
3. Reusable 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.
4. JavaScript components and plug-ins : The JavaScript components of Foundation 4 were moved from jQuery Javascript library to Zepto, on a presumption that the physically smaller, but API-compatible alternative to JQuery would prove faster for the user. However, Foundation 5 moved back to the newer release JQuery-2. “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, 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 not as good, on 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. Additional jQuery plug-ins can be installed into the Foundation framework to provide advanced functionality in any UI area, including animation and “off-canvas” elements like slide-in menus.