README

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

介绍

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

此组件库基于 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'

snowdog / module-alpaca-ui-components

维护者

详细信息