Foundation (framework)

Last updated
ZURB Foundation
Developer(s) ZURB
Initial releaseSeptember 2011;12 years ago (2011-09)
Stable release
6.8.1 [1]   OOjs UI icon edit-ltr-progressive.svg / 18 August 2023
Repository Foundation Repository
Written in HTML, CSS, Sass and JavaScript
Type Web development
License MIT License
Website get.foundation

Foundation is a free responsive front-end framework, providing 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 an open source project, and was formerly maintained by ZURB. Since 2019, Foundation has been maintained by volunteers. [2]

Contents

Origin

Foundation emerged as a ZURB project to develop front-end code more efficiently. In October 2011, ZURB released Foundation 2.0 as open source under the MIT License. [3] ZURB released Foundation 3.0 in June 2012, [4] 4.0 in February 2013, [5] 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.

Features

Foundation was designed for and tested on numerous browsers and devices. It is a responsive framework built with Sass/SCSS. The framework includes most common patterns needed to prototype a responsive site.

Since version 2.0 it also supports responsive design. [6] This means the graphic design of web pages adjusts dynamically, taking into account the characteristics of the device used (PC, tablet, mobile phone). Version 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. [7]

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

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.

Grid system and responsive design

Foundation comes standard with a 940 pixel wide, flexible Grid (graphic design) 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.

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. [8]

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.

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, [9] 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.

Use

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

CSS

To use Foundation CSS, default or custom CSS packages can be downloaded from the download page and installed into the appropriate web server folders. Foundation is then integrated into HTML page markup. [11]

Sass

The Foundation Sass install uses Ruby, Node.js, and Git to install Foundation sources. Foundation then provides a command line interface to modify and compile source to CSS for use in HTML page markup. [12]

Foundation Rails gem

The Foundation Rails gem can be installed by adding "gem 'foundation-rails'" to the Rails Application Gemfile. [13]

Related Research Articles

<span class="mw-page-title-main">Ruby on Rails</span> Server-side open source web application framework

Ruby on Rails is a server-side web application framework written in Ruby under the MIT License. Rails is a model–view–controller (MVC) framework, providing default structures for a database, a web service, and web pages. It encourages and facilitates the use of web standards such as JSON or XML for data transfer and HTML, CSS and JavaScript for user interfacing. In addition to MVC, Rails emphasizes the use of other well-known software engineering patterns and paradigms, including convention over configuration (CoC), don't repeat yourself (DRY), and the active record pattern.

<span class="mw-page-title-main">Dojo Toolkit</span> Open-source modular JavaScript library

Dojo Toolkit is an open-source modular JavaScript library designed to ease the rapid development of cross-platform, JavaScript/Ajax-based applications and web sites. It was started by Alex Russell, Dylan Schiemann, David Schontzler, and others in 2004 and is dual-licensed under the modified BSD license or the Academic Free License.

<span class="mw-page-title-main">Aptana</span> Text editor

Aptana, Inc. is a company that makes web application development tools for use with a variety of programming languages. Aptana's main products include Aptana Studio, Aptana Cloud and Aptana Jaxer.

<span class="mw-page-title-main">YUI Library</span>

The Yahoo! User Interface Library (YUI) is a discontinued open-source JavaScript library for building richly interactive web applications using techniques such as Ajax, DHTML, and DOM scripting. YUI includes several cores CSS resources. It is available under a BSD License. Development on YUI began in 2005 and Yahoo! properties such as My Yahoo! and the Yahoo! front page began using YUI in the summer of that year. YUI was released for public use in February 2006. It was actively developed by a core team of Yahoo! engineers.

jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animations, and Ajax. It is free, open-source software using the permissive MIT License. As of August 2022, jQuery is used by 77% of the 10 million most popular websites. Web analysis indicates that it is the most widely deployed JavaScript library by a large margin, having at least three to four times more usage than any other JavaScript library.

Haml is a templating system that is designed to avoid writing inline code in a web document and make the HTML cleaner. Haml gives you the flexibility to have some dynamic content in HTML. Similar to other template systems like eRuby, Haml also embeds some code that gets executed during runtime and generates HTML code in order to provide some dynamic content. In order to run Haml code, files need to have a .haml extension. These files are similar to .erb or .eRuby files, which also help embed Ruby code while developing a web application.

This is a comparison of web frameworks for front-end web development that are heavily reliant on JavaScript code for their behavior.

A CSS framework is a library allowing for easier, more standards-compliant web design using the Cascading Style Sheets language. Most of these frameworks contain at least a grid. More functional frameworks also come with more features and additional JavaScript based functions, but are mostly design oriented and focused around interactive UI patterns. This detail differentiates CSS frameworks from other JavaScript frameworks.

<span class="mw-page-title-main">CSS</span> Style sheet language

Cascading Style Sheets (CSS) is a style sheet language used for specifying the presentation and styling of a document written in a markup language such as HTML or XML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

<span class="mw-page-title-main">Google Closure Tools</span> JavaScript developer toolkit

Google Closure Tools is a set of tools to help developers build rich web applications with JavaScript. It was developed by Google for use in their web applications such as Gmail, Google Docs and Google Maps. As of 2023, the project had over 230K LOCs not counting the embedded Mozilla Rhino compiler.

jQT is an open-source Zepto/ JQuery plugin with native animations, automatic navigation, and themes for mobile WebKit browsers like iPhone, G1 (Android), and Palm Pre. It enables programmers to develop mobile applications with a native look and feel for the target device using HTML, CSS, and JavaScript.

<span class="mw-page-title-main">Sencha Touch</span> JavaScript framework

Sencha Touch is a user interface (UI) JavaScript library, or web framework, specifically built for the Mobile Web. It can be used by Web developers to develop user interfaces for mobile web applications that look and feel like native applications on supported mobile devices. It is based on web standards such as HTML5, CSS3 and JavaScript. The goal of Sencha Touch is to facilitate quick and easy development of HTML5 based mobile apps which run on Android, iOS, Windows, Tizen and BlackBerry devices, simultaneously allowing a native look and feel to the apps.

jQuery Mobile is a touch-optimized web framework, specifically a JavaScript library, developed by the jQuery project team. The development focuses on creating a framework compatible with many smartphones and tablet computers, made necessary by the growing but heterogeneous tablet and smartphone market. The jQuery Mobile framework is consistent with other mobile app frameworks and platforms such as PhoneGap, Worklight, etc.

<span class="mw-page-title-main">Responsive web design</span> Approach to web design for making web pages render well on a variety of devices

Responsive web design (RWD) or responsive design is an approach to web design that aims to make web pages render well on a variety of devices and window or screen sizes from minimum to maximum display size to ensure usability and satisfaction.

<span class="mw-page-title-main">Bootstrap (front-end framework)</span> Web design front-end

Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains HTML, CSS and (optionally) JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.

Front-end web development is the development of the graphical user interface of a website through the use of HTML, CSS, and JavaScript so users can view and interact with that website.

<span class="mw-page-title-main">Ionic (mobile app framework)</span> Open-source framework to develop hybrid mobile apps

Ionic is an open-source UI toolkit for building cross-platform mobile, web, and desktop applications using web technologies such as HTML, CSS, and JavaScript/TypeScript. It provides a set of pre-designed UI components and tools for building high-quality, interactive applications. Ionic was originally built as a complete open-source SDK for hybrid mobile app development created by Max Lynch, Ben Sperry, and Adam Bradley of Drifty Co. in 2013. The original version was released in 2013 and built on top of AngularJS and Apache Cordova. However, the latest release was re-built as a set of Web Components using StencilJS, allowing the user to choose any user interface framework, such as Angular, React or Vue.js. It also allows the use of Ionic components with no user interface framework at all. Ionic provides tools and services for developing hybrid mobile, desktop, and progressive web apps based on modern web development technologies and practices, using Web technologies like CSS, HTML5, and Sass. In particular, mobile apps can be built with these Web technologies and then distributed through native app stores to be installed on devices by utilizing Cordova or Capacitor.

jQWidgets Software framework

jQWidgets is a software framework with widgets, themes, input validation, drag & drop plug-in, data adapters, built-in WAI-ARIA accessibility, internationalization and MVVM support. It is built on the open standards and technologies HTML5, CSS, JavaScript and jQuery. This library is used for developing responsive web and mobile applications. Some developers consider jQWidgets one of the top alternatives to the open-source jQuery UI.

<span class="mw-page-title-main">Quasar Framework</span> JavaScript framework

The Quasar Framework is an open-source Vue.js based framework for building apps with a single codebase. It can be deployed on the Web as a SPA, PWA, SSR, to a Mobile App, using Cordova for iOS & Android, and to a Desktop App, using Electron for Mac, Windows, and Linux.

Tailwind CSS is an open source CSS framework. The main feature of this library is that, unlike other CSS frameworks like Bootstrap, it does not provide a series of predefined classes for elements such as buttons or tables. Instead, it creates a list of "utility" CSS classes that can be used to style each element by mixing and matching.

References

  1. ↑ "Release 6.8.1". 18 August 2023. Retrieved 18 September 2023.
  2. ↑ "Is Zurb Foundation in active development?". GitHub . Retrieved 21 Nov 2019.
  3. ↑ "Announcing Foundation by ZURB" . Retrieved 22 Aug 2012.
  4. ↑ "ZURB Launches Foundation 3 To Take On Twitter's Bootstrap Framework". 29 June 2012. Retrieved 22 Aug 2012.
  5. ↑ "Responsive Design Framework Foundation 4 Goes Mobile-First, Switches From jQuery To Zepto". 28 February 2013. Retrieved 28 Feb 2013.
  6. ↑ "A List Apart: Dive into Responsive Prototyping with Foundation". 10 April 2012. Retrieved 22 Aug 2012.
  7. ↑ "Zurb releases Foundation 4, a mobile-first, 'forward-thinking dev/designer's dream'". 28 February 2013. Retrieved 28 Feb 2013.
  8. ↑ "CSS Introduction". www.w3schools.com. Retrieved 2023-03-14.
  9. ↑ "Why we dropped Zepto".
  10. ↑ Foundation Documentation Archived 2015-10-28 at the Wayback Machine on Thursday, April 30, 2015
  11. ↑ Foundation Getting Started Archived 2015-10-29 at the Wayback Machine on Thursday, April 30, 2015
  12. ↑ Foundation Getting Started on Thursday, April 30, 2015
  13. ↑ Foundation Getting Started on Thursday, April 30, 2015
This page is based on this Wikipedia article
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.