fluid styleguide

Fluid StyleGuide - Living StyleGuide for typo3

Fluid StyleGuide est un outil de collaboration de conception pour les projets Typo3. Il soutient les développeurs de frontend dans la création de composants réutilisables et encourage une communication efficace entre toutes les parties prenantes du projet.

Essayez la démo en direct

Groupes cibles

Fluid StyleGuide peut être un outil utile pour toutes les parties prenantes du projet:

• Les concepteurs et les développeurs de frontend peuvent améliorer leur développement et les workflows QA
• Frontend, backend et intégration Discuter et coordonner les structures de données et les interfaces entre les piles
• Les chefs de projet et les propriétaires de produits voient l'état actuel des composants du projet
• Les clients obtiennent plus de transparence du statut du projet

Caractéristiques

• Visualisation des composants du projet
• Développement isolé des composants
• tests réactifs
• Documentation des composants intégrés
• Prise en charge de plusieurs langues
• Prise en charge des actifs frontend fournis par le collecteur d'actifs de Typo3
• affiche des problèmes de qualité de code basés sur des components fluides-lignes
• Skinning de base pour s'adapter aux couleurs de la marque du projet
• Téléchargement de zip
• Configuration facile et flexible via le fichier yaml
• Édition en direct d'exemples de données [bêta]

Commencer

Suivez simplement ces étapes simples pour commencer avec le style de style:

1. Installer Fluid StyleGuide

   via le compositeur:

    composer require sitegeist/fluid-styleguide
   

   ou téléchargez l'extension depuis Ter:

   Ter: fluid_styleguide

2. Tester un guide de style fluide avec des composants de démonstration

   Ouvrez simplement la page /fluid-styleguide/ dans votre installation Typo3:

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

Pour ajouter vos propres composants à STYLEGUIDE, suivez simplement ces étapes supplémentaires:

3. Configurer les composants fluides

   Assurez-vous de définir l'espace de noms des composants dans votre 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 ' );

   Utilisez votre propre nom de fournisseur pour VENDOR , le nom d'extension pour MyExtension et la clé d'extension pour my_extension .

4. Configurez vos actifs de frontend

   Créez un fichier de configuration StyleGuide dans votre extension ou SitePackage.

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

   Utilisez votre propre nom de fournisseur pour VENDOR , le nom d'extension pour MyExtension et la clé d'extension pour my_extension . Ajustez les chemins aux actifs en fonction de votre structure de répertoire.

5. Commencez à construire vos propres composants à l'aide de composants fluides et de fichiers de luminaire

Si vous avez des questions, avez besoin d'un support ou si vous souhaitez discuter des composants de Typo3, n'hésitez pas à rejoindre # ext-fluid_components.

Documentation

• Construction de composants avec un style de style fluide
• Référence de configuration de style