A starter kit for using the prototyping tool, Pattern Lab, in tandem with a Drupal and Grav theme. Utilizes Webpack for all asset management.
Clone or download
Permalink
Failed to load latest commit information.
apps Change absolute paths into relative paths for the library assets of t… Nov 7, 2018
source/default Fix remaining accessibility issues (#463) Nov 6, 2018
tools Drupal/Grav now read twig from dist/. source/ no longer needs to go t… Nov 5, 2018
.browserslistrc Polyfill fix for also development, browserslist revamp Sep 12, 2018
.editorconfig Track editorconfig to make composer more standard Nov 13, 2017
.eslintignore multi design system cleanup (#445) Oct 25, 2018
.eslintrc.js N design systems (#434) Oct 23, 2018
.gitignore N design systems (#434) Oct 23, 2018
.huskyrc Another ugly commit. Jun 19, 2018
.prettierignore multi design system cleanup (#445) Oct 25, 2018
.prettierrc.js Set prettier to es5 trailing commas to bring back node 6 compat Aug 30, 2018
.stylelintignore multi design system cleanup (#445) Oct 25, 2018
.stylelintrc Stylelint performance improvements by moving to standalone .stylelint… Jun 19, 2018
.travis.yml Enable artifacts for deploy. Sep 15, 2018
.yo-rc.json fmt ran Aug 28, 2018
LICENSE Update license to GPL2 and add in package.json Aug 5, 2017
README.md Update file path to astrogoat image on readme file (#468) Nov 7, 2018
babel.config.js N design systems (#434) Oct 23, 2018
composer.json N design systems (#434) Oct 23, 2018
composer.lock N design systems (#434) Oct 23, 2018
contributing.md N design systems (#434) Oct 23, 2018
gulpfile.js Drupal/Grav now read twig from dist/. source/ no longer needs to go t… Nov 5, 2018
jest.config.js multi design system cleanup (#445) Oct 25, 2018
package-lock.json Update packakge.json to version 10.2.0 (#464) Nov 6, 2018
package.json Update packakge.json to version 10.2.0 (#464) Nov 6, 2018
particle.js Drupal/Grav now read twig from dist/. source/ no longer needs to go t… Nov 5, 2018
particle.root.config.js Drupal/Grav now read twig from dist/. source/ no longer needs to go t… Nov 5, 2018
particle.yaml Update comment in particle.yaml config Dec 7, 2017
webpack.particle.js Drupal/Grav now read twig from dist/. source/ no longer needs to go t… Nov 5, 2018

README.md

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
  • 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 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/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.