fluid styleguide

Fluid Style Guide - Living Styleguide para Typo3

O Fluid StyleGuide é uma ferramenta de colaboração de design para projetos de erro 3. Ele suporta desenvolvedores de front -end na criação de componentes reutilizáveis e incentiva a comunicação eficaz em todas as partes interessadas do projeto.

Experimente a demonstração ao vivo

Grupos -alvo

O Fluid Style Guide pode ser uma ferramenta útil para todas as partes interessadas do projeto:

• Designers e desenvolvedores de front -end podem melhorar seu desenvolvimento e fluxos de trabalho de controle de qualidade
• Frontend, back -end e integração discutem e coordenam estruturas de dados e interfaces entre as pilhas
• Gerentes de projeto e proprietários de produtos veem o estado atual dos componentes do projeto
• Os clientes obtêm mais transparência do status do projeto

Características

• visualização de componentes do projeto
• desenvolvimento isolado de componentes
• Teste responsivo
• Documentação de componentes integrados
• Suporte para vários idiomas
• Suporte para ativos de front -end fornecidos pelo coletor de ativos do Typo3
• mostra problemas de qualidade de código baseados em componentes de fluido-linter
• esfolar básica para se ajustar às cores da marca do projeto
• Download de Zip
• Configuração fácil e flexível via arquivo YAML
• Edição ao vivo de dados de exemplo [beta]

Começando

Basta seguir estas etapas simples para começar com o estilo de estilo:

1. Instale o fluido Styleguide

   via compositor:

    composer require sitegeist/fluid-styleguide
   

   Ou faça o download da extensão do TER:

   Ter: fluid_styleguide

2. Teste de estilo fluido com componentes de demonstração

   Basta abrir a página /fluid-styleguide/ em sua instalação de erro de digitação:

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

Para adicionar seus próprios componentes ao estilo de estilo, basta seguir estas etapas adicionais:

3. Configure componentes de fluido

   Certifique -se de definir o espaço para nome do componente em seu 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 seu próprio nome de fornecedor para VENDOR , o nome da extensão para MyExtension e a chave de extensão para my_extension .

4. Configure seus ativos de front -end

   Crie um arquivo de configuração do StyleGuide em sua extensão ou sitepackage.

   Configuração/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 seu próprio nome de fornecedor para VENDOR , o nome da extensão para MyExtension e a chave de extensão para my_extension . Ajuste os caminhos para os ativos de acordo com sua estrutura de diretório.

5. Comece a construir seus próprios componentes usando componentes de fluido e arquivos de acessórios

Se você tiver alguma dúvida, precisar de suporte ou deseja discutir componentes no Typo3, fique à vontade para participar do #Ext-Fluid_Components.

Documentação

• Componentes de construção com guia de estilo fluido
• Referência de configuração do StyleGuide