Foundation framework
Start Icon

Foundation framework

Classification

t3foundation

Version

main

Language

en

Description

Integration of Zurb Foundation CSS framework for TYPO3 websites. This extension is optimised for Start TYPO3 Responsive.

Keywords

typo3, start, responsive, foundation, grid, layout

Copyright

2016-2023

Authors

Liss Dunphy (verdigado eG), Dirk Wildt (Die Netzmacher, verdigado eG)

Email

https://wildt.at.die-netzmacher.de

License

This document is published under the Open Publication License available from http://www.opencontent.org/openpub/

Rendered

Tue, 29 Apr 2025 20:21:17 +0000

The content of this document is related to TYPO3, a GNU/GPL CMS/Framework available from www.typo3.org.

Table of Contents

What does it do?

t3foundation makes the Foundation framework (zurb) [#] available for other extensions.

Content Elements

It extends content elements with some responsive features

Plugins

It extends TYPO3 with three additional plugins

  • a simple responsive gallery
  • a simple responsive slider
  • a simple responsive video

SCSS

A SCSS compiler enables developers to control css properties by TypoScript constants.

Teamplay

"TYPO3 Start responsive!" [#] has integrated the Foundation framework. You can launch a ready-to-use website with "Launch TYPO3 Start!" [#]

Footnotes
[1]
https://get.foundation/
[2]
https://extensions.typo3.org/extension/start/
[3]
https://extensions.typo3.org/extension/launchstart/

What do you need?

  • A TYPO3 installation only. The installation can be empty.

TYPO3 Versions

  • TYPO3 10.4

Audience

  • TYPO3 agencies
  • TYPO3 administrators
  • TYPO3 developers

Screenshots

Please refer to Users.

Content element with tab [Responsive]

Content element with tab [Responsive]

Content Element

Content elements get the additional tab [Responsive].

There are some features for controlling the display of the contenet element depending on the properties of the display of the user.

See illustration above.

Simple responsive gallery

Simple responsive gallery

Lightbox

Lightbox

Simple responsive slider

Simple responsive slider

Slider

Simple responsive slider.

See illustration above.

Simple responsive video

Desktop: Simple responsive video

Smartphone: Simple responsive video

Smartphone: Simple responsive video

Video

Simple responsive video.

See illustration above.

Installation

  • Install and enable the extension with the Extension Manager.
  • Include the static template "t3foundation".

Setup

Please use the Constant Editor. See categories: [FOUNDATION ...]

Developers

Table of Contents

SCSS

  • t3foundation will compile your extension's SCSS files. But not only that.
  • t3foundation integrates your TYPO3 constants into your SCSS files!

Sample

// EXT:my_ext/Configuration/TypoScript/constants.typoscript
plugin.my_ext.background-color = #DEDEDE
plugin.my_ext.font-famliy      = Sans, Arial, Courier
...

// EXT:my_ext/Configuration/TypoScript/setup.typoscript
lib.scssVariables.background-color = {$plugin.my_ext.background-color}
lib.scssVariables.font-famliy      = {$plugin.my_ext.font-famliy}
...
Copied! 
// EXT:my_ext/Resources/Public/Scss/_variables.scss
$background-color = #FFFFFF !default
$font-famliy      = Courier, Arial !default 
...
Copied!

Workflow

  • t3foundation compiles the SCSS files.
  • If there is a lib.scssVariables array in the TypoScript setup, t3foundation will take each element and replace its value in an SCSS file if there is a variable with the same name and a value marked !default.
  • Pay attention to unique variables in your SCSS files. If you have defined a variable twice, the value substitution may not be correct.

Foundation variables

If you want to familiarize yourself with the variables of Foundation, please search for !default in EXT:t3foundation/Resources/Public/Scss/foundation-6.7.4/.

Sitemap

Index