.. include:: /Includes.rst.txt
.. _introduction:
============
Introduction
============
.. _what-does-it-do:
What does it do?
================
*fluid_styled_content* handles the rendering of TYPO3's default content elements
and comes bundled as part of the Core. These content elements are rendered using
the Fluid templating engine.
These content elements can be used as-is and can also be modified depending on your
requirements. You are not bound to using only these content elements. It is possible
to add new content elements to the existing set. This document details how to use,
adapt, enhance and create new content elements.
Optionally *fluid_styled_content* offers basic CSS that takes care of
positioning content according to fields chosen in the backend.
For example, if you create a content element of type
:guilabel:`Text with Images` with a centered headline, a subheader, some text
and an image with the position :guilabel:`in text, right`:
.. include:: /Images/AutomaticScreenshots/Introduction/BackendExample.rst.txt
The output of the HTML is rendered by the Fluid template
:file:`typo3/sysext/fluid_styled_content/Resources/Private/Templates/Textpic.html`
which in turn includes several partials.
See the following, shortened code example::
The HTML output then looks like this:
.. code-block:: html
A centered headline
A subheader
If the default CSS provided by this extension was also included, the output
could look like the following in the browser:
.. include:: /Images/ManualScreenshots/Introduction/ExampleOutput.rst.txt
.. _history:
A little bit of history
=======================
In early years, TYPO3's content elements were rendered by the static template called
*content (default)*. This was mainly based on font-tags for styling and tables for
positioning which was needed to achieve the visual constructions in old versions of web
browsers.
Some time later the extension *css_styled_content* was introduced, which focused on
reducing the amount of TypoScript and providing XHTML/HTML5 markup which could be styled
by Cascading Style Sheets (CSS), a style sheet language used for describing the look and
formatting of a document written in a markup language. Still this extension was heavily
based on TypoScript and did allow custom modifications up to some point.
Since the introduction of the Fluid templating engine, more websites are using this for
page templating. Newer TYPO3 CMS packages (extensions) are also using Fluid as their base
templating engine. The content elements which were provided with TYPO3 CMS by default were
still using TypoScript and some PHP code.
Since TYPO3 7.5 the default content elements are provided by the extension
*fluid_styled_content* and thus use Fluid as template engine. The main benefit being that
hardly any knowledge of TypoScript is now needed to make changes. Integrators can easily
exchange the base content element Fluid templates with their own. With Fluid, more complex
functionality that exceed the simple output of values has to be implemented with
ViewHelpers. Every ViewHelper has its own PHP class. Several basic ViewHelpers are
provided by Fluid. When using your own Fluid templates, developers can add extra
functionality with their own ViewHelpers.
