fluid styleguide

Guía de estilo fluido: guía de estilo de vida para TIPO3

Fluid Style Guide es una herramienta de colaboración de diseño para proyectos TIPO3. Apoya a los desarrolladores de frontend en la creación de componentes reutilizables y fomenta una comunicación efectiva en todos los interesados del proyecto.

Prueba la demostración en vivo

Grupos objetivo

Fluid Style Guide puede ser una herramienta útil para todas las partes interesadas del proyecto:

• Los diseñadores y los desarrolladores frontend pueden mejorar su desarrollo y los flujos de trabajo de control de calidad
• Frontend, backend e integración discuten y coordinan estructuras e interfaces de datos entre las pilas
• Los gerentes de proyecto y los propietarios de productos ven el estado actual de los componentes del proyecto
• Los clientes obtienen más transparencia del estado del proyecto

Características

• Visualización de componentes del proyecto
• Desarrollo aislado de componentes
• prueba receptiva
• documentación de componentes integrados
• Soporte para múltiples idiomas
• Soporte para los activos frontend proporcionados por el coleccionista de activos de Typo3
• Muestra problemas de calidad del código basados en componentes fluidos-linter
• Skinning básico para adaptarse a los colores de la marca del proyecto
• descarga zip
• Configuración fácil y flexible a través del archivo YAML
• Edición en vivo de datos de ejemplo [beta]

Empezando

Simplemente siga estos simples pasos para comenzar con la guía de estilo:

1. Instale la guía de estilo de fluido

   Vía compositor:

    composer require sitegeist/fluid-styleguide
   

   o descargue la extensión de TER:

   Ter: fluid_styleguide

2. Prueba de guía de estilo fluido con componentes de demostración

   Simplemente abra la página /fluid-styleguide/ en su instalación TIPO3:

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

Para agregar sus propios componentes a la guía de estilo, simplemente siga estos pasos adicionales:

3. Configurar componentes fluidos

   Asegúrese de definir el espacio de nombres de los componentes en su 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 el nombre de su propio proveedor para VENDOR , el nombre de la extensión para MyExtension y la clave de extensión para my_extension .

4. Configure sus activos frontend

   Cree un archivo de configuración de SyleGuide en su extensión o sitePackage.

   Configuración/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 '

   Use el nombre de su propio proveedor para VENDOR , el nombre de la extensión para MyExtension y la clave de extensión para my_extension . Ajuste las rutas a los activos de acuerdo con la estructura de su directorio.

5. Comience a construir sus propios componentes utilizando componentes de fluido y archivos de accesorios

Si tiene alguna pregunta, necesita apoyo o desea discutir componentes en TIPO3, no dude en unirse a #Ext-Fluid_Components.

Documentación

• Construir componentes con guía de estilo fluido
• Referencia de configuración de guía de estilo