DEPRECATION WARNING

This documentation is not using the current rendering mechanism and is probably outdated. The extension maintainer should switch to the new system. Details on how to use the rendering mechanism can be found here.

Foundation 5¶

Author:	Detlef Fluess
Created:	2014-03-16T14:45:42.520000000
Changed:	2015-09-04T19:25:56.340000000
Classification:	df_foundation5
Description:	Foundation - The most advanced responsive front-end framework. Documentation and reference library for ZURB Foundation. JavaScript, CSS, components, grid and more.
Keywords:	responsive design template
Author:	Detlef Fluess
Email:	fluess@2-ad.de
Language:	en, de

Foundation 5¶

Extension Key: df_foundation5

Language: en, de

Version: 2.x.x

Keywords: responsive design template

This document is published under the Open Content License

available from http://www.opencontent.org/opl.shtml

The content of this document is related to TYPO3

a GNU/GPL CMS/Framework available from www.typo3.org

Wow slider license notice :

WOWSlider is free for non-commercial use. If you want to use WOWSlider on a school site, your non-commercial blog or non-profit organization website, use it for free.

A license fee is required for commercial use. For more info about commercial licenses, please click here.

Wow-Slider Lizenzhinweis:

WOWSlider ist für den nicht-kommerziellen Gebrauch kostenlos. Wenn Sie WOWSlider auf einer Schulseite, Ihrem nicht-kommerziellen Blog oder Webseite Ihrer non-profit-Organisation benutzen wollen, benutzen Sie es kostenlos.

Für kommerzielle Anwendungen muss eine Lizenzgebühr entrichtet werden.

klick hier.

Table of Contents¶

`Foundation 5 1 <#__RefHeading__5708_1738894311>`_

`What does it do? 3 <#__RefHeading__463_413120346>`_

`Funktionsauswahl im Inhaltselement 4 <#__RefHeading__1257_1697845689>`_

`Das Inhaltselement: 5 <#__RefHeading__806_1389193060>`_

Bildeinstellungen 5

Achtung!Bei Angabe von Breite und/oder Höhe, oder Bildzuschnitt wird die Funktion Interchange außer Kraft gesetzt! 5

Bild-Slider (Orbit) 6

Sticky-Navigation (Magellan) 7

Tabs 8

Bild-/Text Ausrichtungen 9

Ausgabebedingungen 9

Erweitert 10

`Users manual 11 <#__RefHeading__467_413120346>`_

http://zurb.foundation.com 11

`Libraries 12 <#__RefHeading__31507_818911409>`_

All settings are easily set in Constant Editor. 12

`Examples 27 <#__RefHeading__887_1470137876>`_

An TScript Template exmple 27

TScript Template exmple for HTML Template below 27

HTML Template Example (index.html) 27

`FAQ 28 <#__RefHeading__31509_818911409>`_

`Sponsor developments 29 <#__RefHeading__1216_571210081>`_

`ChangeLog 30 <#__RefHeading__31623_818911409>`_

What does it do?¶

Extension installieren
Script-Update durchführen! (siehe Abbildung 1)

Statische Templates einbinden (mindestens erforderlich: basic df_foundation5)

Abbildung 1: Aktualisierungsscript aufrufen

Wichtig: A. Nach einem Major-Update von Version 0.3x auf 1.x (oder höher) müssen die statischen Templates (Foundation 5 ...) neu hinzugefügt werden!

1. Alle Templates (Foundation 5 ...) entfernen, speichern und schließen.2. Alle TYPO3 Caches löschen (auch den System Cache).3. Templates wieder hinzufügen und speichern.

B. Nach einem Majot-Update von Version 1.x auf 2.x müssen die Konstants über den Konstant-Editor (Konstanten bearbeiten) neu eingestellt werden!

Funktionsauswahl im Inhaltselement¶

Hinsweis:

Nach Aktivierung stehen im Inhaltselement die entsprechenden Funktionen zur Verfügung. Die statischen Templates sind nach Aktivierung der Funktion im Kontstant-Editor auswählbar:

foundation5 – magellanfoundation5 – tabfoundation5 – slider (Wow- Slider oder Orbit-Slider)

Das Inhaltselement:¶

Bildeinstellungen¶

Achtung!Bei Angabe von Breite und/oder Höhe, oder Bildzuschnitt wird die Funktion *Interchange* außer Kraftgesetzt!

Bild-Slider (Orbit oder Wow-Slider)¶

Eingefügte Bilder im Inhaltselement werden bei Aktivierung eines Sliders automatisch als Slideshow dargestellt. Verfügbare Optionen für den Slider können über Contstants eingestellt werden.

Hinweis:Um einen Slider nutzen zu können, muß das entsprechende statische Template“ *Foundation 5 - Wow* ” oder “ *Foundation 5 - Orbit* ” hinzugefügt werden!Die mögliche Auswahl (Wow-Slider oder Orbit-Slider) richtet sich nach der Funktionsauswahl in der Konfiguration der Extension. (siehe “ Funktionsauswahl im Inhaltselement”)

¶

Tabs¶

Wird dieser Haken gesetzt, erscheint die Überschrift als Tab-Reiter in einer Tab-Navigation (Magellan).

Hinweis:Um die Tab-Navigation nutzen zu können, muss das statische Template “ *Foundation 5 - Tabs* ” hinzugefügt werden!

Im Template kann die Tab-Navigation zum Beispiel so eingefügt werden:

page.10.marks {
        tabs < lib.tabs
}

Weitere Beispiele weiter unten...

Bild-/Text Ausrichtungen¶

Large – Desktop-Monitor (voreingestellt max 1024px)
Medium – Tablet (voreingestellt max 768px)
Small – Smartphone (voreingestellt max 480px)

Abbildung 2: Dynamische Bildgrößen nach Anzahl der Bildspalten. Beispiel Desktop's (Large).

Zusätzliche CSS-Class [links/rechts] Beispiel: “small-only-center”. Inhalte werden so auf Smartphones zentriert dargestellt.Weitere Standard-Classes:

¶

Ausgabebedingungen¶

Erweitert¶

Zusätzliche CSS-Classes und/oder Inline-Styles für exclusive, Formatierungen eines Inhaltselements.

Beispiel:

Users manual¶

http://zurb.foundation.com ¶

Responsive design gets a whole lot faster for users.

Foundation 5 is the professional choice for designers, developers and teams.

For example:

Interchange

Not just for responsive images any more, Interchange in Foundation 5 lets you create beautifully optimized sites by letting you selectively load entire sections based on the client device type.

Medium Grid

By popular request, Foundation now includes a medium grid that you can leverage, nestled neatly between the small and large grids you’re used to. That’s a lot less custom code for you to write to make use of intermediate sizes.

Libraries¶

All settings are easily set in Constant Editor.

Top Bar¶

The Foundation Top Bar gives you a great way to display a complex navigation bar on small, medium or large screens.

Off Canvas¶

Off-canvas menus are positioned outside of the viewport and slide in when activated. Setting up an off-canvas layout in Foundation is super easy.

Side Nav¶

Side nav, like you see on the Foundation docs, is a great way to provide navigation for your entire site, or for sections of an individual page.

Sub Nav¶

This simple sub nav is great for moving between different states of a page. We use these frequently to show iterations of something, typically by date, but they're also handy for filters like these.

Interchange¶

Interchange uses media queries to dynamically load responsive content that is appropriate for different users' browsers.

*Wichtiger Hinweis:* Die Eingabe einer Breite oder einer Höhe im Inhaltselement hat Priorität!

Pagination¶

Pagination is a type of navigation that lets users tap through a series of related pages. Moving between pages has become less common with the advent of longer pages and AJAX loading, but if you need pagination, Foundation has you covered.

Breadcrumbs¶

Breadcrumbs come in handy to show a navigation trail for users clicking through a site or app. They'll fill out 100% of the width of their parent container.

Orbit¶

Orbit is an easy, powerful, responsive image slider that allows users to swipe on touch-enabled devices.

Wow-Slider¶

WOWSlider looks and works flawlessly on all mobile devices, modern and legacy browsers, thanks to the standards compliant, valid, semantic markup and thoroughly optimized script

Magellan¶

Magellan is a style-agnostic plugin that lets you give your site sticky navigation. This fixed-position navigation helps users keep track of where they are on a page without scrolling.

Tabs¶

Tabs are elements that help you organize and navigate multiple documents in a single container. They can be used for switching between items in the container.

Examples¶

An TScript Template exmple¶

You can use the following TypoScript code in the setup field of your template:

page.10.marks {
        offcanvas < lib.off-canvas
        offcanvas.stdWrap.wrap = <section class="show-for-small"> | </ section>
        topbar < lib.top-bar
        topbar.stdWrap.wrap = <section class="hide-for-small"> | </ section>
}

TScript Template exmple for HTML Template below¶

page = PAGE
page.10 = TEMPLATE
page.10 {
        template = FILE
        template.file = fileadmin/Template/index.html
        workOnSubpart = DOCUMENT
        marks {
                offcanvas < lib.off-canvas
                topbar < lib.top-bar
                dropdown < lib.dropdown-nav
                sidenav < lib.side-nav
                subnav < lib.sub-nav
                pager < lib.pagination
                breadcrumbs < lib.breadcrumbs
                tabs < lib.tabs
          magellan < lib.magellan
        }
}

HTML Template Example (index.html)¶

[…]
<body>
<!--###DOCUMENT### Start-->
<div class="show-for-small">###offcanvas###</div>
<div class="page-wrapper">
        <header>
                <div class="row">
                        <div class="large-12 columns">
                                <nav class="hide-for-small">###topbar###</nav>
                                [...]
                        </div>
                </div>
        </header>
        <section>
                <div class="row">
                        <div class="large-2 medium-2 columns"> ###sidenav### </div>
                        <div class="large-10 medium-10 columns">
                                <div class="breadcrumbs">###breadcrumbs###</div>
                                <div class="sub-nav">###subnav###</div>
                                <div class="magellan">###magellan###</div>
                                <div class="magellan">###tabs###</div>
                                <div class="content">###content###</div>
                                <div class="pager">###pager###</div>
                        </div>
                </div>
        </section>
</div>
<!--###DOCUMENT### End-->
</body>
[…]

FAQ¶

Foundation is not loaded automatically after the update from v0.3x to v1.x: After the major update on 1.x, the static template must be re-mounted.

- Delete Typo3Cache. (Static templates would be all removed).- Add Static templates new, save, done.

Foundation constants not loaded after the major update 1.x to v2.x: After the major update on 2.x, the Contstants in the constant editor must be reset .

ChangeLog¶

2.1.3September 04, 2015¶

Version

2.1.3September 04, 2015

Changes

Foundation Version update to 5.5.2

2.1.2Juni 15, 2015¶

Version

2.1.2Juni 15, 2015

Changes

Add TYPO3 CMS 7.0.x compatiblity.Foundation Version update to 5.5.1

2.1.1März 03, 2015¶

Version

2.1.1März 03, 2015

Changes

WowSlider - more than 50 Theme added! Full screen support optimized.

2.1.0Februar 27, 2015¶

Version

2.1.0Februar 27, 2015

Changes

Wow-Slider added (Orbit-Slider deprecated)interchange module can now be turned off for individual content items .

2.0.1Februar 08, 2015¶

Version

2.0.1Februar 08, 2015

Changes

Add TYPO3 CMS 7.0.x compatiblity.Version update to 5.5.1

2.0.0Januar 14, 2015¶

Version

2.0.0Januar 14, 2015

Changes

Major Update! For an update from 1.x to 2.x , please instructions in the product literature ! Framework version update to 5.5.0, Tabs added.

1.2.8November 01, 2014¶

Version

1.2.8November 01, 2014

Changes

Magellan (Sticky Navigation) added.This fixed-position navigation helps users keep track of where they are on a page without scrolling.

1.2.7Oktober 30, 2014¶

Version

1.2.7Oktober 30, 2014

Changes

Image description for Orbit Slider added.

Code for T3 v6.2x optimized. (obsolete code removed and bugfixes).

1.2.6Oktober 30, 2014¶

Version

1.2.6Oktober 30, 2014

Changes

Bugfix: Foundation Initialisation JS added again.Documentation completed.

1.2.5Oktober 28, 2014¶

Version

1.2.5Oktober 28, 2014

Changes

Orbit Slider for images added in the content element.Orbit is an easy, powerful, responsive image slider that allows users to swipe on touch- enabled devices. You can adjust settings using Constants. Small bugs fixed.

1.2.4Oktober 26, 2014¶

Version

1.2.4Oktober 26, 2014

Changes

Framework version update to 5.4.6Changelog see: http://foundation.zurb.com/docs/changelog.html Various closing boxes, added as a frame types.

1.2.3Oktober 07, 2014¶

Version

1.2.3Oktober 07, 2014

Changes

Framework version update to 5.4.5Changelog see: http://foundation.zurb.com/docs/changelog.html

1.2.2September 16, 2014¶

Version

1.2.2September 16, 2014

Changes

Fix Update-ScriptAll current values from the field 'imagecols' (columns) are now taken over by Foundation. (Must not be reset!)Supports TYPO3 version 6.2.0 - 6.2.99

1.2.1September 16, 2014¶

Version

1.2.1September 16, 2014

Changes

Missing documentation added again.New frame types ModalBox and DropDown added again.Supports TYPO3 version 6.2.0 - 6.2.99

1.2.0September 08, 2014¶

Version

1.2.0September 08, 2014

Changes

Image Crop fixed.Code structure for new rules optimized and adjusted.Supports TYPO3 version 6.2.0 - 6.2.99

1.1.0September 08, 2014¶

Version

1.1.0September 08, 2014

Changes

Incorrect settings ImageCols fixed. Please update scripts to perform !Image Crop:Function for image sections added.Supports TYPO3 version 6.2.0 - 6.2.99

1.0.1August 29, 2014¶

Version

1.0.1August 29, 2014

Changes

Detail and code optimizations for TYPO3 6.2.Supports TYPO3 version 6.2.2 - 6.2.99

1.0.0August 28, 2014¶

Version

1.0.0August 28, 2014

Changes

Released only for Version 6.2.x # Foundation Framework version 5.4.0 [http://foundation.zurb.com/docs/] # Full support adaptive image, with foundation library interchange via TypoScript source collection.Supports TYPO3 version 6.2.2 - 6.2.99

0.3.0August 25, 2014¶

Version

0.3.0August 25, 2014

Changes

Released for typo3 6.2 # Foundation Framework version update to 5.4.0 # Includes over 150 kick-ass commits # Adds and fixesSupports TYPO3 version 4.5.0 - 6.2.999

0.2.10August 25, 2014¶

Version

0.2.10August 25, 2014

Changes

Framework version update to 5.4.0 ## Includes over 150 kick-ass commits # Adds stacking option for button groups # Adds breakpont classes to icon-bar # Audit and simplify excess colors by changing to variables # Adds Multi-level off-canvas menuSupports TYPO3 version 4.7.0 - 6.1.99

0.2.9July 21, 2014¶

Version

0.2.9July 21, 2014

Changes

Framework version update to 5.3.1 Bug fixes and optimizations. Divider Wrap and ATagParams added as constant. - Fix for clearing issue on mobile where lightbox allows vertical scroll outside container - Fixes Reveal bug with modals locking when target isSupports TYPO3 version 4.7.0 - 6.1.99

0.2.8June 23, 2014¶

Version

0.2.8June 23, 2014

Changes

Framework version major update to 5.3.0 # Added new component - Switches # Added new component - Icon Bar # Added new component - Vertical Range Sliders # Added disabled state to range-sliders # Added accordion mixins # Added tons of other fixSupports TYPO3 version 4.7.0 - 6.1.99

0.2.7June 13, 2014¶

Version

0.2.7June 13, 2014

Changes

Fixed bug in Offcanvas wrap.Supports TYPO3 version 4.7.0 - 6.1.99

0.2.6June 06, 2014¶

Version

0.2.6June 06, 2014

Changes

Framework version update to 5.2.3 Bug fixes and optimizations. - Equalizer can now equalize when stacked, or in block grid - Accordion can now be spread across different parent containers - Adds accessibility classes - Joyride Threshold implemented and fSupports TYPO3 version 4.7.0 - 6.1.99

0.2.5May 18, 2014¶

Version

0.2.5May 18, 2014

Changes

Small error is eliminated, simultaneous use of Equalizer and Interchange.Supports TYPO3 version 4.7.0 - 6.1.99

0.2.4April 30, 2014¶

Version

0.2.4April 30, 2014

Changes

Small optimization for the content type "images". Unusable options removed.Supports TYPO3 version 4.7.0 - 6.1.99

0.2.3April 10, 2014¶

Version

0.2.3April 10, 2014

Changes

Foundatioin Update 5.2.2- April 3, 2014 Bug fixed and new Features. - Numerous fixes and changes to Orbit for performance and functionality - Equalizer now only calculates height for visible objects - Off- canvas objects now retain momentum scrolling onSupports TYPO3 version 4.7.0 - 6.1.99

0.2.2March 27, 2014¶

Version

0.2.2March 27, 2014

Changes

Documentation updated. Fixed some minor bugs.Supports TYPO3 version 4.7.0 - 6.1.99

0.2.1March 16, 2014¶

Version

0.2.1March 16, 2014

Changes

Foundatioin Update version to 5.2.1. - Fixed Orbit timer stoping after first slide - Fixes captions in clearing Viewer - Orbit Adds vertical scrolling on touch device - Corrected modal dialog z-indexSupports TYPO3 version 4.7.0 - 6.1.99

0.2.0March 16, 2014¶

Version

0.2.0March 16, 2014

Changes

Adaptive image sizes (Interchange) optimized for typo3. Image widths are automatically divided by column number. Usual breakpoints added. All breakpoints customizable via Contstants. Foundation version updated to 5.2.0.Supports TYPO3 version 4.7.0 - 6.1.99

0.1.5March 06, 2014¶

Version

0.1.5March 06, 2014

Changes

Optimized trigger for interchange responsive images. Library Pagination added. Minor optimizations.Supports TYPO3 version 4.7.0 - 6.1.99

0.1.4February 17, 2014¶

Version

0.1.4February 17, 2014

Changes

small error in the library off canvas adjusted. Manual added.Supports TYPO3 version 4.7.0 - 6.1.99

0.1.3February 17, 2014¶

Version

0.1.3February 17, 2014

Changes

small error in the library off canvas adjusted. Manual added.Supports TYPO3 version 4.7.0 - 6.1.99

0.1.2February 17, 2014¶

Version

0.1.2February 17, 2014

Changes

Functions added: Image processing - Interchange: uses media queries to dynamically load content responsive did is Appropriate for different users' browsers. Navigation - Off-canvas: menus are Positioned outside of the viewport and slide in When activatSupports TYPO3 version 4.7.0 - 6.1.99

0.1.1February 12, 2014¶

Version

0.1.1February 12, 2014

Changes

- ZURB Foundation added 5 version 5.1.1 - Optional libraries outsourced for navigation as static templates. (if required please add) - Configurations possible on ConstantsSupports TYPO3 version 4.7.0 - 6.1.99

0.1.0February 12, 2014¶

Version

0.1.0February 12, 2014

Changes

- ZURB Foundation 5 version 5.1.1 added - Optional libraries outsourced as static templates for navigation. (if required please add) Configurations on Constants possible. Example of use: page.10 <lib.off-canvas page.10.stdWrap.wrap = <section class="shSupports TYPO3 version 4.7.0 - 6.1.99

0.0.3February 12, 2014¶

Version

0.0.3February 12, 2014

Changes

small bug fixes and custom css optimization.Supports TYPO3 version 4.7.0 - 6.1.99

0.0.2February 11, 2014¶

Version

0.0.2February 11, 2014

Changes

small bug fixes.Supports TYPO3 version 4.7.0 - 6.1.99

0.0.1February 06, 2014¶

Version

0.0.1February 06, 2014

Changes

new zurb.foundation version 5Supports TYPO3 version 4.7.0 - 6.1.99

Foundation 5¶

Foundation 5¶

Table of Contents¶

What does it do?¶

Funktionsauswahl im Inhaltselement¶

Das Inhaltselement:¶

Bildeinstellungen¶

Bild-Slider (Orbit oder Wow-Slider)¶

¶

Sticky-Navigation (Magellan)¶

Tabs¶

Bild-/Text Ausrichtungen¶

¶

Ausgabebedingungen¶

Erweitert¶

Users manual¶

http://zurb.foundation.com¶

Libraries¶

Top Bar¶

Off Canvas¶

Side Nav¶

Sub Nav¶

Dropdown¶

Interchange¶

Pagination¶

Breadcrumbs¶

Orbit¶

Wow-Slider¶

Magellan¶

Tabs¶

Examples¶

An TScript Template exmple¶

TScript Template exmple for HTML Template below¶

HTML Template Example (index.html)¶

FAQ¶

Sponsor developments¶

ChangeLog¶

2.1.3September 04, 2015¶

2.1.2Juni 15, 2015¶

2.1.1März 03, 2015¶

2.1.0Februar 27, 2015¶

2.0.1Februar 08, 2015¶

2.0.0Januar 14, 2015¶

1.2.8November 01, 2014¶

1.2.7Oktober 30, 2014¶

1.2.6Oktober 30, 2014¶

1.2.5Oktober 28, 2014¶

1.2.4Oktober 26, 2014¶

1.2.3Oktober 07, 2014¶

1.2.2September 16, 2014¶

1.2.1September 16, 2014¶

1.2.0September 08, 2014¶

1.1.0September 08, 2014¶

1.0.1August 29, 2014¶

1.0.0August 28, 2014¶

0.3.0August 25, 2014¶

0.2.10August 25, 2014¶

0.2.9July 21, 2014¶

0.2.8June 23, 2014¶

0.2.7June 13, 2014¶

0.2.6June 06, 2014¶

0.2.5May 18, 2014¶

0.2.4April 30, 2014¶

0.2.3April 10, 2014¶

0.2.2March 27, 2014¶

0.2.1March 16, 2014¶

0.2.0March 16, 2014¶

0.1.5March 06, 2014¶

0.1.4February 17, 2014¶

0.1.3February 17, 2014¶

0.1.2February 17, 2014¶

0.1.1February 12, 2014¶

0.1.0February 12, 2014¶

0.0.3February 12, 2014¶

0.0.2February 11, 2014¶

0.0.1February 06, 2014¶

http://zurb.foundation.com ¶