fluid styleguide Download - fluid styleguide Source code download

fluid styleguide

Third-party components

2.1.3 Compatibility with TYPO3 13

Download

Fluid Styleguide – Living Styleguide for TYPO3

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.

Try the live demo

Target Groups

Fluid Styleguide can be a useful tool for all project stakeholders:

designers and frontend developers can improve their development and QA workflows
frontend, backend and integration discuss and coordinate data structures and interfaces between the stacks
project managers and product owners see the current state of the project's components
clients get more transparency of the project status

Features

visualization of project components
isolated development of components
responsive testing
integrated component documentation
support for multiple languages
support for frontend assets provided by TYPO3's asset collector
shows code quality problems based on fluid-components-linter
basic skinning to fit the project's brand colors
zip download
easy and flexible configuration via yaml file
live editing of example data [BETA]

Getting Started

Just follow these simple steps to get started with the styleguide:

Install Fluid Styleguide

via composer:
```
 composer require sitegeist/fluid-styleguide
```
or download the extension from TER:

TER: fluid_styleguide
Test Fluid Styleguide with 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:

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'] =
    TYPO3CMSCoreUtilityExtensionManagementUtility::extPath('my_extension', 'Resources/Private/Components');

Use your own vendor name for VENDOR, extension name for MyExtension, and extension key for my_extension.

Configure your frontend assets

Create a styleguide configuration file in your extension or sitepackage.

Configuration/Yaml/FluidStyleguide.yaml:

FluidStyleguide:
    ComponentAssets:
        Packages:
            'VendorMyExtensionComponents':
                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.