fluid styleguide

Fluid StyleGuide - typo3的Living styleguide

Fluid StyleGuide是用于Typo3项目的设计协作工具。它支持前端开发人员创建可重复使用的组件并鼓励所有项目利益相关者的有效沟通。

尝试现场演示

目标群体

对于所有项目利益相关者来说，Fluid StyleGuide可能是一个有用的工具：

• 设计师和前端开发人员可以改善其开发和质量检查工作流程
• 前端，后端和集成讨论和协调数据结构以及堆栈之间的界面
• 项目经理和产品所有者看到项目组件的当前状态
• 客户获得项目状态的透明度

特征

• 项目组件的可视化
• 组件的孤立发展
• 响应式测试
• 集成的组件文档
• 支持多种语言
• 支持Typo3资产收集器提供的前端资产
• 显示基于流体组件的代码质量问题
• 适合项目品牌颜色的基本皮肤
• zip下载
• 通过yaml文件简单且灵活的配置
• 示例数据的实时编辑[beta]

入门

只需按照以下简单的步骤开始使用StyleGuide：

1. 安装流体式指导

   通过作曲家：

    composer require sitegeist/fluid-styleguide
   

   或从TER下载扩展名：

   ter：fluid_styleguide

2. 用演示组件测试流体式指导

   只需在您的Typo3安装中打开页面/fluid-styleguide/

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

要将自己的组件添加到StyleGuide中，只需按照以下其他步骤：

3. 配置流体成分

   确保在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 ' );

   为VENDOR使用自己的供应商名称， MyExtension的扩展名和my_extension的扩展密钥。

4. 配置您的前端资产

   在扩展名或SitePackage中创建styleguide配置文件。

   配置/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 '

   为VENDOR使用自己的供应商名称， MyExtension的扩展名和my_extension的扩展密钥。根据您的目录结构调整到资产的路径。

5. 开始使用流体组件和固定文件构建自己的组件

如果您有任何疑问，需要支持或想讨论Typo3中的组件，请随时加入＃Ext-fluid_components。

文档

• 用流体式指导构建组件
• StyleGuide配置参考