Fluid Components

Fluid Components for TYPO3 enables frontend developers to implement consistent web designs with reusable components. Fluid Styleguide provides a dedicated frontend workshop as well as a powerful collaboration tool for all project stakeholders.

Fluid Components

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.

Why should I use Fluid Components?

Presentational

Frontend developers can focus on how things work and look like in the frontend.

Encapsulated

Components don't have any side effects, so they can be tested and refactored without affecting other parts of the website.

Reuseable

The look and feel of the website gets more consistent because each component is only implemented once and gets reused across the whole website.

Logicless

Components are usually small and easy to understand because they don't contain complex logic. That makes onboarding of new team members very easy.

Clear Interface

The component defines its capabilities with an API definition. This way it is obvious what a certain component can and what it can't do which prevents misusage of design elements.

Enforce Guidelines

Corporate design guidelines as well as accessibility requirements must only be implemented once for each component and will then be respected across the whole website.

Fluid Styleguide

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.

Features

Visualization of Project Components

Fluid Styleguide visualizes the status quo of the frontend components of a project: Which components do already exist? Which have yet to be built?

Isolated Development of Components

Fluid Styleguide can serve as an independent frontend workshop. Components can be developed when the backend hasn't even started with the implementation.

Responsive Testing

Components can be tested in a configurable set of viewport sizes.

Integrated Documentation

Apart from the API documentation, each component can have its own documentation file which will be picked up and rendered in the styleguide automatically.

Live Editing

Components can be tested with edge cases (e. g. long words with many characters) that can be entered directly in the styleguide.

Zip Download

Components can be downloaded as zip file to transfer them to other projects.

Easy and Flexible Configuration

Fluid Styleguide can be configured easily in an intuitive yaml file.

Target Groups

Designers and Frontend Developers
can improve their development and QA workflows
Developers and Integrators
discuss and coordinate data structures and interfaces between the stacks
Project Managers and Product Owners
get an overview of the current state of the project's components
Clients
get more transparency of the project status

Get Started

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.

Fluid Styleguide
Fluid Components
Step 1
Install Fluid Styleguide
- +

via composer:

composer require sitegeist/fluid-styleguide

or download the extension from the TYPO3 Extension Repository:

Download from TER
Step 2
Test Demo Components
- +

Just 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:

Step 3
Configure Fluid Components
- +

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.

Step 4
Configure Frontend Assets
- +

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.

Step 5
Build Your Components
- +

Start building your own components using Fluid Components and fixture files:

Building Components with Fluid Styleguide
Step 1
Install Fluid Components
- +

via composer:

composer require sitegeist/fluid-components

or download the extension from the TYPO3 Extension Repository:

Download from TER
Step 2
Configure Fluid Components
- +

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.

Step 3
Build Your Components
- +

Create your first component in EXT:my_extension/Resources/Private/Components/ by creating a directory MyComponent containing a file MyComponent.html.

How do components look like? View Helper Reference

Dive In

Sponsors

SPIEGEL uses Fluid Components together with Fluid Styleguide as a collaboration tool for their UX and development teams. They sponsored and collaborated with +sitegeist on the Open Source development of Fluid Styleguide.
Sysmex uses Fluid Components to guarantee visual consistency across several TYPO3 websites. Components are developed and tested in the styleguide to ensure their reusability.

Career

Do you want to work on cool TYPO3 projects using Fluid Components and the styleguide? +sitegeist is always looking for talented TYPO3 developers to join our team.

Apply now

Get Coaching

+sitegeist offers individual TYPO3 coachings. Do you need support in implementing Component-Driven Development in your team? Feel free to get in contact with us.

Contact us