Sign inSign up

0xff/particle

By 0xff

•Updated almost 8 years ago

https://github.com/piccaso/particle/wiki

Image
0

1.4K

0xff/particle repository overview

⁠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

⁠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
  • Bootstrap 4 integration, used for all starting example components
  • Auto-linting against the AirBnB JavaScript Style Guide⁠ and sane Sass standards
  • All Webpack and Gulp 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 anywhere
  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/pl⁠ (or http://localhost:8080/pl⁠) and start working.

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

Tag summary

Content type

Image

Digest

Size

281.6 MB

Last updated

over 8 years ago

docker pull 0xff/particle