sitegeist / fluid-styleguide
Living styleguide for Fluid Components
Installs: 163 665
Dependents: 1
Suggesters: 0
Security: 0
Stars: 14
Watchers: 13
Forks: 16
Open Issues: 16
Type:typo3-cms-extension
Requires
- php: ^8.2
- colinodell/json5: ^2.1
- erusev/parsedown: ^1.7.4
- sitegeist/fluid-components: ^3.0 || dev-master
- typo3/cms-core: ^13.3 || ^12.4
Requires (Dev)
Suggests
- sitegeist/fluid-components-linter: Checks fluid components for code quality problems via CLI and in the styleguide
- dev-master
- 2.1.3
- 2.1.2
- 2.1.1
- 2.1.0
- 2.0.5
- 2.0.4
- 2.0.3
- 2.0.2
- 2.0.1
- 2.0.0
- 1.10.0
- 1.9.1
- 1.9.0
- 1.8.0
- 1.7.2
- 1.7.1
- 1.7.0
- 1.6.0
- 1.5.0
- 1.4.0
- 1.3.0
- 1.2.1
- 1.2.0
- 1.1.0
- 1.0.1
- 1.0.0
- dev-121-typo3-13-support
- dev-extension-version-2.1.1
- dev-release-version-2.1.0
- dev-task/typo3-12
- dev-task/typo312
- dev-dependabot/npm_and_yarn/webpack-5.76.1
- dev-dependabot/npm_and_yarn/minimist-1.2.8
- dev-dependabot/npm_and_yarn/json5-1.0.2
- dev-dependabot/npm_and_yarn/decode-uri-component-0.2.2
- dev-s2b-patch-2
- dev-dependabot/npm_and_yarn/loader-utils-1.4.2
- dev-bugfix/00000/fixCISetup
- dev-task/52479/expandDocumentationTab
- dev-task/72/inlineLanguageFiles
- dev-s2b-patch-1
- dev-task/addApplicationType
- dev-task/frontendUpdate
- dev-i40
- dev-task/featureList
- dev-release/typo311
- dev-feature/javaScriptPosition
- dev-task/icon
- dev-task/54191/assetViewhelper
- dev-feature/multipleRenderers
This package is auto-updated.
Last update: 2024-10-11 12:17:08 UTC
README
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.
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:
-
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
If you have any questions, need support or want to discuss components in TYPO3, feel free to join #ext-fluid_components.