TYPO3 CMS Backend Styleguide

8.0.6 2017-02-22 16:37 UTC


TYPO3 68747470733a2f2f63646e2e7261776769742e636f6d2f37656c69782f5459504f332e434d532e5374796c6567756964652f6d61737465722f5265736f75726365732f5075626c69632f49636f6e732f6d6f64756c652e737667

Scrutinizer Code Quality

Code Coverage

Build Status

Welcome to the living Styleguide for TYPO3 CMS backend. Presents supported styles for TYPO3 backend modules.

Official repository for TYPO3 CMS extension "styleguide" with changelog.

Table of content

  1. Typography
  2. TCA / Records
  3. Trees
  4. Tab
  5. Tables
  6. Avatar
  7. Buttons
  8. Infobox
  9. FlashMessages / Notification
  10. Icons
  11. Debug
  12. Helpers


This Styleguide comes as a TYPO3 extension for the TYPO3 backend. It appears as backend module within the Help/Manuals navigation section.


With composer based TYPO3 installation add this Styleguide by running the following command on shell within project root (where the root composer.json file resides):

composer require 7elix/styleguide

Composer will automatically find, download and extract the appropriate version into extension manager. Activate Styleguide extension from TYPO3 backend in Extension Manager.

Hint: If helhum/typo3-console has been installed locally. Activate Styleguide extension on shell:

./typo3cms extension:install styleguide

TYPO3 Extension Repository

Head to TYPO3 backend > Extension Manager > Get Extensions. Search for and install extension key „styleguide“. Activate Styleguide extension within TYPO3 backend in Extension Manager.


Disclaimer: This styleguide does not look perfect - besides documentation the guide should also point out missing concepts and styles. Therefore every imperfect style also is a todo. The solution could be included in the TYPO3 CMS core at any stage.

Questions? - Maintained by Felix Kopp and contributors. Contact @7elix.

This guide is highly inspired by Bootstrap, Zurb Foundation and Pattern Lab.