PHPackages sitegeist/fluid-styleguide - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Templating & Views](/categories/templating) 4. / 5. sitegeist/fluid-styleguide ActiveTypo3-cms-extension[Templating & Views](/categories/templating) sitegeist/fluid-styleguide ========================== Living styleguide for Fluid Components 2.2.3(1mo ago)16227.4k↑12.1%19[6 issues](https://github.com/sitegeist/fluid-styleguide/issues)[12 PRs](https://github.com/sitegeist/fluid-styleguide/pulls)1GPL-3.0-or-laterPHPPHP ^8.2CI passing Since Sep 10Pushed 1mo ago11 watchersCompare [ Source](https://github.com/sitegeist/fluid-styleguide)[ Packagist](https://packagist.org/packages/sitegeist/fluid-styleguide)[ Docs](https://github.com/sitegeist/fluid-styleguide)[ RSS](/packages/sitegeist-fluid-styleguide/feed)WikiDiscussions master Synced 1mo ago READMEChangelog (10)Dependencies (14)Versions (61)Used By (1) Fluid Styleguide – Living Styleguide for TYPO3 ============================================== [](#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](https://fluidcomponents.sitegeist.de/fluid-styleguide/list)** Target Groups ------------- [](#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 -------- [](#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](https://github.com/sitegeist/fluid-components-linter) - basic skinning to fit the project's brand colors - zip download - easy and flexible configuration via [yaml file](./Documentation/ConfigurationReference.md) - live editing of example data \[BETA\] Getting Started --------------- [](#getting-started) Just follow these simple steps to get started with the styleguide: 1. Install Fluid Styleguide via composer: ``` composer require sitegeist/fluid-styleguide ``` or download the extension from TER: [TER: fluid\_styleguide](https://extensions.typo3.org/extension/fluid_styleguide/) 2. 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: 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`. 4. 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 for `MyExtension`, and extension key for `my_extension`. Adjust the paths to the assets according to your directory structure. 5. Start [building your own components](./Documentation/BuildingComponents.md) 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](https://typo3.slack.com/archives/ext-fluid_components). Documentation ------------- [](#documentation) - [Building Components with Fluid Styleguide](./Documentation/BuildingComponents.md) - [Styleguide Configuration Reference](./Documentation/ConfigurationReference.md) License ------- [](#license) This project is licensed under the GPL-3.0-or-later license. See the LICENSE file for details. The project includes third-party dependencies that are distributed under their respective open-source licenses: @sitegeist/vitesse — MIT License iframe-resizer — GPL-3.0 License All bundled assets remain subject to the licenses of their original authors. ### Health Score 64 — FairBetter than 99% of packages Maintenance82 Actively maintained with recent releases Popularity45 Moderate usage in the ecosystem Community30 Small or concentrated contributor base Maturity85 Battle-tested with a long release history Bus Factor1 Top contributor holds 65.7% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~82 days Recently: every ~132 days Total 30 Last Release 55d ago Major Versions 1.10.0 → 2.0.02021-09-10 PHP version history (3 changes)1.0.0PHP >=7.2.0 <8 2.0.0PHP >=7.4.0 2.1.2PHP ^8.2 ### Community Maintainers ![](https://www.gravatar.com/avatar/ca4eee1e54bccd482945cd03a170a3dfa0c4672c32d0a565dc1228a905a06c27?d=identicon)[s2b](/maintainers/s2b) ![](https://www.gravatar.com/avatar/51e0a02d8e12b73949ec858638aa7e295e103022cc5a879f86ac8532c2c170bd?d=identicon)[sitegeist](/maintainers/sitegeist) --- Top Contributors [![s2b](https://avatars.githubusercontent.com/u/458524?v=4)](https://github.com/s2b "s2b (201 commits)")[![ulrichmathes](https://avatars.githubusercontent.com/u/26324456?v=4)](https://github.com/ulrichmathes "ulrichmathes (49 commits)")[![lukasniestroj](https://avatars.githubusercontent.com/u/25104879?v=4)](https://github.com/lukasniestroj "lukasniestroj (11 commits)")[![Atomschinken](https://avatars.githubusercontent.com/u/3041069?v=4)](https://github.com/Atomschinken "Atomschinken (10 commits)")[![Jaervinen](https://avatars.githubusercontent.com/u/35760792?v=4)](https://github.com/Jaervinen "Jaervinen (9 commits)")[![sascha-egerer](https://avatars.githubusercontent.com/u/1651414?v=4)](https://github.com/sascha-egerer "sascha-egerer (6 commits)")[![georgringer](https://avatars.githubusercontent.com/u/1905663?v=4)](https://github.com/georgringer "georgringer (4 commits)")[![galoppi](https://avatars.githubusercontent.com/u/909832?v=4)](https://github.com/galoppi "galoppi (3 commits)")[![cvh-sitegeist](https://avatars.githubusercontent.com/u/157810693?v=4)](https://github.com/cvh-sitegeist "cvh-sitegeist (2 commits)")[![manuelselbach](https://avatars.githubusercontent.com/u/4679794?v=4)](https://github.com/manuelselbach "manuelselbach (2 commits)")[![infabo](https://avatars.githubusercontent.com/u/3999104?v=4)](https://github.com/infabo "infabo (1 commits)")[![OleksandrMatsko](https://avatars.githubusercontent.com/u/108868156?v=4)](https://github.com/OleksandrMatsko "OleksandrMatsko (1 commits)")[![Patrick84](https://avatars.githubusercontent.com/u/9886780?v=4)](https://github.com/Patrick84 "Patrick84 (1 commits)")[![rosty-matviiv](https://avatars.githubusercontent.com/u/50489886?v=4)](https://github.com/rosty-matviiv "rosty-matviiv (1 commits)")[![frankschoeler](https://avatars.githubusercontent.com/u/14331812?v=4)](https://github.com/frankschoeler "frankschoeler (1 commits)")[![Kanti](https://avatars.githubusercontent.com/u/471387?v=4)](https://github.com/Kanti "Kanti (1 commits)")[![Suranex](https://avatars.githubusercontent.com/u/5656537?v=4)](https://github.com/Suranex "Suranex (1 commits)")[![Tim-Obert](https://avatars.githubusercontent.com/u/45205076?v=4)](https://github.com/Tim-Obert "Tim-Obert (1 commits)")[![kitzberger](https://avatars.githubusercontent.com/u/1405149?v=4)](https://github.com/kitzberger "kitzberger (1 commits)") --- Tags componentsfluidfrontendhtmllivingstyleguidetemplatetypo3componentshtmltemplatetypo3styleguidetypo3-extensionfluidtypo3-fluidliving-styleguide ### Code Quality Code StylePHP\_CodeSniffer ### Embed Badge ![Health badge](/badges/sitegeist-fluid-styleguide/health.svg) ``` [![Health](https://phpackages.com/badges/sitegeist-fluid-styleguide/health.svg)](https://phpackages.com/packages/sitegeist-fluid-styleguide) ``` ### Alternatives [sitegeist/fluid-components Encapsulated frontend components with Fluid's ViewHelper syntax 55339.1k3](/packages/sitegeist-fluid-components)[phug/phug Pug (ex-Jade) facade engine for PHP, HTML template engine structured by indentation 67292.2k13](/packages/phug-phug)[t3brightside/microtemplate TYPO3 CMS template – sectioned one pager with light box like sub pages 171.4k1](/packages/t3brightside-microtemplate) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)