Jump to content

Foundation (framework): Difference between revisions

From Wikipedia, the free encyclopedia
Browse history interactively
← Previous editNext edit →
Content deleted Content added
VisualWikitext
No edit summary
Line 20: Line 20:


}}
}}
'''Foundation''' is the most advanced responsive front-end framework in the world. Foundation comes in three versions to tackle different project types: [[http://zurb.com/ink/|Foundation for Emails]], [[http://foundation.zurb.com/|Foundation for Sites]],
'''ZURB Foundation''' is a [[Free Software|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.
[[http://foundation.zurb.com/apps/|Foundation for Apps]]. Regardless which one you use, you get a responsive grid and plenty of [[HTML]] and [[CSS]] UI components, templates, and code snippets. This includes typography, forms, buttons, navigation and other interface components, as well as optional [[JavaScript]] extensions. Foundation is maintained by {{url|http://zurb.com/}} and is an [[open source|open source]] project.


It is used by [[Dictionary.com]], [[ZURB]]'s web applications, and others.<ref name="zurb">{{cite web|url=http://www.zurb.com/article/805/start-here-build-everywhere-announcing-fo|title=Announcing Foundation by ZURB|accessdate=22 Aug 2012}}</ref>
Foundation is used by [[http://www.express.com/]], [[http://www.toms.com/]], [[http://www.fandango.com/]] [[Mozilla|https://www.openstandard.org/]], Cisco, Ebay, and Citrix to name a few. ZURB also used Foundation on all their client and [[http://zurb.com/apps|internal projects]].<ref name="zurb">{{cite web|url=http://www.zurb.com/article/805/start-here-build-everywhere-announcing-fo|title=Announcing Foundation by ZURB|accessdate=22 Aug 2012}}</ref>


== Origin ==
== Origin ==


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]].<ref name="zurb"/> In June 2012 ZURB released a major update, Foundation 3.0.<ref>{{cite web|url=http://techcrunch.com/2012/06/29/zurb-launches-foundation-3-to-take-on-twitters-bootstrap-framework/|title=ZURB Launches Foundation 3 To Take On Twitter's Bootstrap Framework|accessdate=22 Aug 2012}}</ref> In February 2013 ZURB released another major update, Foundation 4.0.<ref>{{cite web|url=http://techcrunch.com/2013/02/28/responsive-design-framework-foundation-4-launches/|title=Responsive Design Framework Foundation 4 Goes Mobile-First, Switches From jQuery To Zepto|accessdate=28 Feb 2013}}</ref>In November 2013 ZURB released another major update, Foundation 5.0.
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]].<ref name="zurb"/> In June 2012 ZURB released a major update, Foundation 3.0.<ref>{{cite web|url=http://techcrunch.com/2012/06/29/zurb-launches-foundation-3-to-take-on-twitters-bootstrap-framework/|title=ZURB Launches Foundation 3 To Take On Twitter's Bootstrap Framework|accessdate=22 Aug 2012}}</ref> In February 2013 ZURB released another major update, Foundation 4.0.<ref>{{cite web|url=http://techcrunch.com/2013/02/28/responsive-design-framework-foundation-4-launches/|title=Responsive Design Framework Foundation 4 Goes Mobile-First, Switches From jQuery To Zepto|accessdate=28 Feb 2013}}</ref>In November 2013 ZURB released another major update, Foundation 5.0. The team is working on the next version of Foundation for Sites which should be release in Spring 2015.

Foundation for Email was released in September 2013

Foundation for Apps was released in December 2014


== Features ==
== Features ==


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.
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 Web Design|responsive design]].<ref>{{cite web|url=http://www.alistapart.com/articles/dive-into-responsive-prototyping-with-foundation/|title=A List Apart: Dive into Responsive Prototyping with Foundation|accessdate=22 Aug 2012}}</ref> 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.<ref>{{cite web|url=http://venturebeat.com/2013/02/28/zurb-foundation-4/|title=Zurb releases Foundation 4, a mobile-first, ‘forward-thinking dev/designer’s dream’|accessdate=28 Feb 2013}}</ref>
Since version 2.0 it also supports [[Responsive Web Design|responsive design]].<ref>{{cite web|url=http://www.alistapart.com/articles/dive-into-responsive-prototyping-with-foundation/|title=A List Apart: Dive into Responsive Prototyping with Foundation|accessdate=22 Aug 2012}}</ref> 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.<ref>{{cite web|url=http://venturebeat.com/2013/02/28/zurb-foundation-4/|title=Zurb releases Foundation 4, a mobile-first, ‘forward-thinking dev/designer’s dream’|accessdate=28 Feb 2013}}</ref>
Line 40: Line 45:
Foundation is modular and consists essentially of a series of [[Sass (stylesheet language)|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.
Foundation is modular and consists essentially of a series of [[Sass (stylesheet language)|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 to a limited extent through a central configuration stylesheet. More profound changes are possible by changing the Sass variables.
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.
The use of Sass stylesheet language allows the use of variables, functions and operators, nested selectors, as well as so-called mixins.

Revision as of 01:13, 25 February 2015

ZURB Foundation
Developer(s)ZURB
Initial releaseSeptember 2011; 13 years ago (2011-09)
Stable release
5.5.1 / January 29, 2015 (2015-01-29) [1]
Repository
Written inHTML, CSS, Sass and JavaScript
Operating systemCross-platform
TypeHTML and CSS-based design templates
LicenseMIT License
Websitefoundation.zurb.com

Foundation is the most advanced responsive front-end framework in the world. Foundation comes in three versions to tackle different project types: [for Emails], [for Sites], [for Apps]. Regardless which one you use, you get a responsive grid and plenty of HTML and CSS UI components, templates, and code snippets. This includes typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. Foundation is maintained by zurb.com and is an open source project.

Foundation is used by [[1]], [[2]], [[3]] https://www.openstandard.org/, Cisco, Ebay, and Citrix to name a few. ZURB also used Foundation on all their client and [projects].[2]

Origin

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. The team is working on the next version of Foundation for Sites which should be release in Spring 2015.

Foundation for Email 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 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.[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.

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.

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.

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

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.

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.

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 plug-ins

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 the following JavaScript plugins are supported: alerts, clearing, cookie, dropdown, forms, joyride, magellan, orbit, placeholder, reveal, section, tooltips, and topbar.

Use

To use Foundation in an HTML page developers must first compile one CSS file from the downloaded Sass stylesheets. This can be done with a special compiler. Alternatively, developers 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.

See also

References

  1. ^ Foundation Changelog on Thursday, July 17, 2014
  2. ^ a b "Announcing Foundation by ZURB". Retrieved 22 Aug 2012.
  3. ^ "ZURB Launches Foundation 3 To Take On Twitter's Bootstrap Framework". Retrieved 22 Aug 2012.
  4. ^ "Responsive Design Framework Foundation 4 Goes Mobile-First, Switches From jQuery To Zepto". Retrieved 28 Feb 2013.
  5. ^ "A List Apart: Dive into Responsive Prototyping with Foundation". Retrieved 22 Aug 2012.
  6. ^ "Zurb releases Foundation 4, a mobile-first, 'forward-thinking dev/designer's dream'". Retrieved 28 Feb 2013.
Retrieved from "https://en.wikipedia.org/enwiki/w/index.php?title=Foundation_(framework)&oldid=648718536"