DEPRECATION WARNING

This documentation is not using the current rendering mechanism and will be deleted by December 31st, 2020. 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

img-1 img-2 Foundation 5

Extension Key: df_foundation5

Language: en, de

Version: 2.x.x

Keywords: responsive design template

Copyright 2006-2015, Detlef Fluess, <info@2-ad.de>

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

Top Bar 12

Off Canvas 13

Side Nav 14

Sub Nav 15

Dropdown 16

Interchange 17

Pagination 18

Breadcrumbs 19

Orbit 20

Wow-Slider 23

Magellan 25

Tabs 26

`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)

img-3

Abbildung 1: Aktualisierungsscript aufrufen

img-4 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

img-5

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

img-6

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”)

img-7

img-8

Tabs

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

img-10

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)

img-11

img-12 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:

img-13

Ausgabebedingungen

img-14

Erweitert

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

Beispiel:

img-15

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.

img-16

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.

img-17

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.

img-18

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!

img-21

Orbit

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

img-24

img-25

img-26

Wow-Slider

img-27 img-28 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.

img-29

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.

img-30

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