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.
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
- visualization of project components
- isolated development of components
- responsive testing
- integrated component documentation
- zip download
- easy and flexible configuration via yaml file
- live editing of example data [BETA]
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:
-
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'] = \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::extPath('my_extension', 'Resources/Private/Components');
Use your own vendor name for
VENDOR
, extension name forMyExtension
, and extension key formy_extension
. -
Configure your frontend assets
Create a styleguide configuration file in your extension or sitepackage.
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 forMyExtension
, and extension key formy_extension
. Adjust the paths to the assets according to your directory structure. -
Start building your own components using Fluid Components and fixture files