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
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.
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>`_
Sticky-Navigation (Magellan) 7
`Users manual 11 <#__RefHeading__467_413120346>`_
`Libraries 12 <#__RefHeading__31507_818911409>`_
All settings are easily set in Constant Editor. 12
`Examples 27 <#__RefHeading__887_1470137876>`_
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.
Dropdown¶
We removed the various dropdowns within different UI elements for Foundation 5. Instead, we created a universal dropdown plugin that will attach dropdowns or popovers to whatever element you need.
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 .
Sponsor developments¶
Die Pflege und Weiterentwicklung dieser Extension kostet viel Zeit und Geduld. Viele weitere Foundation 5 Funktionen warten noch auf den Einbau.
Ziel ist es, verfügbare Foundation 5 Funktionen , so komfortabel wie möglich, in TYPO3 einzusetzen. Vorschläge für Verbesserungen sind immer willkommen.
Sponsoren können die Prioritäten für zügige Weiterentwicklungen fördern!Spezielle Wünsche (soweit sie dem Grundgedanken dieser Extension und Foundation 5 entsprechen) werden auf die ToDo gesetzt. Eine Garantie zur Umsetzung einzelner Wünsche kann jedoch nicht gegeben werden.
Möchtest Du Sponsor werden dann klicke hier:
:underline:`**Sponsor developments**
<https://www.paypal.com/cgi-
bin/webscr?cmd=_s-xclick&hosted_button_id=9MAPD65XBJXE6>`_
Alle Sponsoren werden (falls nicht ausdrücklich untersagt) namentlich gelistet.
Herzlichen Dank an:
Peter Kleinow, Dirk Grunenberg, Kim Rücker,
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