README

⚠️ 此项目已弃用。请使用 Alpaca 2.0 代替。

简介

Alpaca 设计系统组件库，旨在加快在 Magento 2 商店中处理设计流程，通过在简化的、前端开发者友好的环境中创建每个 UI 元素、模块和视图。

此组件库基于 Fractal.js 构建。

无需 Magento 2 经验即可使用此代码。

演示/预览

https://alpaca-components.now.sh/

安装

使用 yarn 安装依赖项
运行 gulp dev 以启动 Fractal.js 开发服务器
如果您想生成静态文件（例如部署它们），请运行 gulp

如何在 Alpaca 上创建组件库

仅需要在 Magento 外部工作。

将 package.json、gulpfile.js、.eslintignore、.eslintrc、.sass-lint.yml、.stylelintrc、.gitignore 文件复制粘贴到新项目
创建包含父组件库路径数组的 modules.json 文件。在大多数情况下，它看起来像这样
```
["../../snowdog/module-alpaca-components"]
```
根据 Alpaca 组件库的结构定制或添加新文件
运行 gulp dev

目录结构

components 目录是您将要导入到 Magento 2 主题中的。
docs 和 public 仅用于本地环境，您可以在那里找到示例图像、测试库、实用样式等。

核心概念

组件架构

组件分为 4 组

全局组件
- 包含其他组件可以在任何地方使用的代码，例如，排版、图标或 SASS 变量。
元素
- 最小的 UI 部分，例如，按钮
- 元素不能依赖于其他元素
- 元素不应有任何布局
模块
- 更复杂的 UI 部分，如搜索表单或页眉
- 将元素或模块组合在一起，添加布局和上下文
视图
- 将元素或模块组合在一起，添加最终布局和上下文
- 您应该能够将其展示给客户/产品经理，作为可使用商店的预览
- 您不应创建任何新的 UI 元素，所有内容都需要可重用。

命名

组名需要是复数
组件名需要是单数
组件名不应与任何项目或布局中的位置相关
- 坏：filters
- 好：dropdown-list 或 collapsible-list
避免使用 box、block、item、info、text、cms，特别是组合在一起，例如 info-box
避免以相似的方式命名两个组件，例如 cms-subcategories 和 cms-subcategory

颜色

默认情况下，Alpaca 组件使用最多 7 级灰度

SASS 变量命名

遵循类似 BEM 的命名约定，即当您的组件名称为 button 时，您正在创建一个用于 padding 的变量，则应该是 $button__padding。

与BEM相同，不允许构建如$button__icon__padding这样的结构，应该使用$button__icon-padding。

与伪类和伪选择器相关的变量应被视为BEM元素$button__color-hover。

此外，变量中允许使用BEM修饰符$button__padding--secondary，甚至可以叠加使用，如$button__padding--secondary--dark。

要针对特定断点应用变量，请在变量名末尾添加\@breakpoint，例如$button__padding\@medium。始终使用small、medium、large等来描述断点。

正确变量名的示例

$swatch__option-border
$swatch__option-border-color-hover

$swatch__option-image-height\@large

$swatch__option-size--small
$swatch__option-image-width--small
$swatch__option-image-width--small\@large

无障碍性

您可以通过运行gulp a11y来运行启用无障碍性测试的开发服务器。

如果在某些视图中没有无障碍性消息，请转到组件配置，并取消注释preview: '@docs-only-styles'

雪犬 / module-alpaca-components

维护者

详细信息