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配置參考