Fluid Components is an extension for TYPO3 which puts frontend developers in a position to create encapsulated components in pure Fluid. By defining a clear interface (API) for the integration, frontend developers can implement components independent of backend developers. This boosts productivity and leads to a consistent look and feel across the whole project.
Fluid Styleguide is a design collaboration tool for TYPO3 projects. It supports frontend developers in creating reusable components and encourages effective communication across all project stakeholders.
The easiest and most recommended way to get started with Fluid Components is by installing Fluid Styleguide. It already includes Fluid Components, so there is no need to install it separately. It comes with a set of demo components you can experiment with.
If you want to use the components without the styleguide, you can do so as well.
via composer:
composer require sitegeist/fluid-styleguide
or download the extension from the TYPO3 Extension Repository:
Download from TERJust open the page /fluid-styleguide/
in your TYPO3 installation:
https://my-domain.tld/fluid-styleguide/
To add your own components to the styleguide, just follow these additional steps:
Make sure to define the component namespace in your ext_localconf.php:
$GLOBALS['TYPO3_CONF_VARS']['EXTCONF']['fluid_components']['namespaces']['VENDOR\\MyExtension\\Components'] = \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::extPath('my_extension', 'Resources/Private/Components');
Use your own vendor name for VENDOR
, extension name for MyExtension
, and extension key for my_extension
.
Create a styleguide configuration file in your extension or sitepackage to configure your frontend assets in the styleguide.
Configuration/Yaml/FluidStyleguide.yaml:
FluidStyleguide: ComponentAssets: Packages: 'Vendor\MyExtension\Components': Css: - 'EXT:my_extension/Resources/Public/Css/Main.min.css' Javascript: - 'EXT:my_extension/Resources/Public/Javascript/Main.min.js'
Use your own vendor name for VENDOR
, extension name for MyExtension
, and extension key for my_extension
. Adjust the
paths to the assets according to your directory structure.
Start building your own components using Fluid Components and fixture files:
Building Components with Fluid Styleguidevia composer:
composer require sitegeist/fluid-components
or download the extension from the TYPO3 Extension Repository:
Download from TERMake sure to define the component namespace in your ext_localconf.php:
$GLOBALS['TYPO3_CONF_VARS']['EXTCONF']['fluid_components']['namespaces']['VENDOR\\MyExtension\\Components'] = \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::extPath('my_extension', 'Resources/Private/Components');
Use your own vendor name for VENDOR
, extension name for MyExtension
, and extension key
for my_extension
.
Create your first component in EXT:my_extension/Resources/Private/Components/
by creating a directory MyComponent
containing a file MyComponent.html
.