geek-rainer/geeky

在 particle Design System 工具之上构建的定制主题。

维护者

详情

gitlab.com/geek-rainer/geeky

主页

源代码

问题

文档

安装: 6

依赖项: 0

建议者: 0

安全: 0

星星: 0

分支: 0

类型:drupal-theme

dev-master 2019-03-15 14:16 UTC

Requires

GPL-2.0-or-later edf3ef40078cb68b13ab545d33aeec2efa4dc62c

  • Rainer Halbmann <rainer.woop@geeks4change.net>

This package is auto-updated.

Last update: 2024-09-15 15:10:55 UTC

README

GitHub (pre-)release Build Status Greenkeeper badge

![粒子吉祥物：Astrogoat](source/default/_patterns/01-atoms/image/demo/astrogoat.png?raw=true 'Astrogoat')

Particle 是一套有偏见的工具和示例，用于

  1. 构建一个与应用无关的 设计系统
  2. 将该设计系统应用于本地服务的 Pattern Lab 以实现快速原型设计
  3. 将该设计系统应用于 Drupal 主题

关于使用此项目进行前端方法的深入文档，请参阅 Phase2 前端文档

先决条件

在 Gist 中可以找到安装所有依赖项的步骤说明，适用于 OSX。

提供

  • Drupal 主题、Grav 主题和 Pattern Lab 应用
  • 严格的 原子设计 组件结构
  • 针对多个目标（Drupal 主题、Grav 主题、Pattern Lab）的所有 CSS、javascript、字体和静态图像资产的 Webpack 打包
  • Webpack Dev Server 用于本地托管和将资产热加载到 Pattern Lab
  • Twig 命名空间路径 自动添加到 Drupal 主题和 Pattern Lab 配置中。在任何 twig 文件中，@atoms/thing.twig 对 Drupal 主题和 Pattern Lab 都具有相同的意义。
  • Iconfont 自动生成
  • Bootstrap 4 集成，用于所有起始示例组件
  • 自动与 AirBnB JavaScript 风格指南 和合理的 Sass 标准进行代码检查
  • 所有 Webpack 和 Gulp 文件都完全可配置
  • 简单的 Yeoman 生成器用于设计系统组件创建

快速入门

Particle 以开发模式构建本地托管的设计系统，或以生产模式构建优化的资产生成。

快速入门 A

  1. 只需运行

    npm create @phase2/particle particle

  2. 然后 cd particle/ 并运行

    npm start

快速入门 B

  1. 下载最新版本
  2. 解压到任何位置（例如，本说明应位于 any/where/particle/README.md）
  3. 在解压的文件夹中运行
npm install
npm run setup
npm start

只需等待 Webpack 打包输出出现，然后访问 http://0.0.0.0:8080/pl（或 https://:8080/pl）并开始工作。

就这些。有关使用此项目进行前端方法的更多详细信息，请参阅 Phase2 前端文档。