fluid styleguide

Fluid StyleGuide - Living StyleGuide für Tippulse3

Fluid StyleGuide ist ein Tool für Tippfehler für Typo3 -Projekte. Es unterstützt Frontend -Entwickler bei der Erstellung wiederverwendbarer Komponenten und fördert eine wirksame Kommunikation in allen Projektstakeholdern.

Probieren Sie die Live -Demo

Zielgruppen

Fluid StyleGuide kann ein nützliches Werkzeug für alle Projektstakeholder sein:

• Designer und Frontend -Entwickler können ihre Entwicklungs- und QS -Workflows verbessern
• Frontend, Backend und Integration diskutieren und koordinieren Datenstrukturen und Schnittstellen zwischen den Stapeln
• Projektmanager und Produktbesitzer sehen den aktuellen Stand der Komponenten des Projekts
• Kunden erhalten mehr Transparenz des Projektstatus

Merkmale

• Visualisierung von Projektkomponenten
• Isolierte Entwicklung von Komponenten
• Reaktionstests
• Integrierte Komponentendokumentation
• Unterstützung für mehrere Sprachen
• Unterstützung für Frontend -Vermögenswerte, die vom Asset Collector von TYPO3 bereitgestellt werden
• Zeigt Codequalitätsprobleme auf der Grundlage von Fluid-Komponenten-L. an
• Basic Skinning für die Markenfarben des Projekts entspricht
• ZIP -Download
• Einfache und flexible Konfiguration über YAML -Datei
• Live -Bearbeitung von Beispieldaten [Beta]

Erste Schritte

Befolgen Sie einfach diese einfachen Schritte, um mit der StyleGuide zu beginnen:

1. Installieren Sie Fluid StyleGuide

   über Komponist:

    composer require sitegeist/fluid-styleguide
   

   oder laden Sie die Erweiterung von ter herunter:

   Ter: fluid_styleguide

2. Testen Sie Fluid StyleGuide mit Demo -Komponenten

   Öffnen Sie einfach die Seite /fluid-styleguide/ in Ihrer TYPO3-Installation:

    https://my-domain.tld/fluid-styleguide/
   

Um dem StyleGuide Ihre eigenen Komponenten hinzuzufügen, befolgen Sie einfach die folgenden Schritte:

3. Konfigurieren von Flüssigkeitskomponenten

   Stellen Sie sicher, dass Sie den Komponenten -Namespace in Ihrem ext_localconf.php definieren:

    $ GLOBALS [ ' TYPO3_CONF_VARS ' ][ ' EXTCONF ' ][ ' fluid_components ' ][ ' namespaces ' ][ ' VENDOR \ MyExtension \ Components ' ] =
        TYPO3  CMS  Core  Utility ExtensionManagementUtility:: extPath ( ' my_extension ' , ' Resources/Private/Components ' );

   Verwenden Sie Ihren eigenen Lieferantenamen für VENDOR , den Erweiterungsnamen für MyExtension und Erweiterungsschlüssel für my_extension .

4. Konfigurieren Sie Ihre Frontend -Assets

   Erstellen Sie eine StyleGuide -Konfigurationsdatei in Ihrer Erweiterung oder SitePackage.

   Konfiguration/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 '

   Verwenden Sie Ihren eigenen Lieferantenamen für VENDOR , den Erweiterungsnamen für MyExtension und Erweiterungsschlüssel für my_extension . Passen Sie die Pfade an das Vermögen gemäß Ihrer Verzeichnisstruktur an.

5. Erstellen Sie Ihre eigenen Komponenten mit Flüssigkeitskomponenten und Fixture -Dateien

Wenn Sie Fragen haben, Unterstützung benötigen oder Komponenten in typo3 diskutieren möchten, können Sie sich gerne #ext-fluid_components anschließen.

Dokumentation

• Baukomponenten mit Flüssigkeitsstilguide
• StyleGuide -Konfigurationsreferenz