• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

phase2/particle: A starter kit for using the prototyping tool, Pattern Lab, in t ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

phase2/particle

开源软件地址(OpenSource Url):

https://github.com/phase2/particle

开源编程语言(OpenSource Language):

Twig 47.2%

开源软件介绍(OpenSource Introduction):

Particle: A design system integrating to Pattern Lab and a Drupal 8 theme

GitHub (pre-)release Build Status Greenkeeper badge

Particle mascot: Astrogoat

Particle is an opinionated set of tools and examples to:

  1. Build an application-agnostic design system
  2. Apply that design system to a locally-served Pattern Lab for rapid prototyping
  3. Apply that design system to a Drupal theme

In depth documentation about frontend approach using this project at Phase2 Frontend Docs

Prerequisites

Step-by-step instructions to install all dependencies for OSX can be found in this Gist.

Provides

  • Drupal theme, Grav theme, and Pattern Lab app
  • Strict Atomic Design component structure
  • Webpack bundling of all CSS, javascript, font, and static image assets for multiple targets (Drupal theme, Grav theme, Pattern Lab)
  • Webpack Dev Server for local hosting and hot reloading of assets into Pattern Lab
  • Twig namespaced paths automatically added into Drupal theme and Pattern Lab config. Within any twig file, @atoms/thing.twig means the same thing to Drupal theme and Pattern Lab.
  • Iconfont auto-generation
  • Auto-linting against the AirBnB JavaScript Style Guide
  • All Webpack files are fully configurable
  • Simple Yeoman generator for Design System component creation

Quickstart

Particle builds design systems in dev mode for local hosting, or production mode for optimized asset generation.

Quickstart A

  1. Simply run:

    npm create @phase2/particle particle
  2. Then cd particle/ and run:

    npm start

Quickstart B

  1. Download the latest release
  2. Extract anywhere (i.e. this readme should be at any/where/particle/README.md)
  3. Within the extracted folder run:
npm install
npm run setup
npm start

Simply wait until the webpack bundle output appears then visit http://0.0.0.0:8080/app-pl/pl/ (or http://localhost:8080/app-pl/pl/) and start working.

That's it. For much greater detail on the frontend approach using this project, check out the Phase2 Frontend Docs.

Design System Naming

The Design System Source folder is named default ./source/default. It's handy in multi-design setups to name this per design system and post-fix apps with that design system name. For example, apps/drupal-default/ contains the implementation of the default source directory. These are intended to be updated by the needs of your project.




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
jamesward/gulp-starter发布时间:2022-06-21
下一篇:
tayfunerbilen/frontend-gulp: Bu repo, front-end işlerinize gulp ile başlamanı ...发布时间:2022-06-21
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap