Fluid Components and Fluid Styleguide – Component Driven Development with TYPO3

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.

Live Demo

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.

Live Demo

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