/particle

A starter kit for using the prototyping tool, Pattern Lab, in tandem with a Drupal and Grav theme. Utilizes Webpack for all asset management.
  1. HTML 61.3%
  2. JavaScript 24.1%
  3. CSS 8.3%
  4. PHP 6.3%
HTML JavaScript CSS PHP
Switch branches/tags
Nothing to show
Find file
Clone or download

Clone with HTTPS

Use Git or checkout with SVN using the web URL.

Download ZIP

Launching GitHub Desktop...

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop...

If nothing happens, download GitHub Desktop and try again.

Launching Xcode...

If nothing happens, download Xcode and try again.

Launching Visual Studio...

If nothing happens, download the GitHub extension for Visual Studio and try again.

Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
apps Particle issue #259 - apps/drupal/particle.libraries.yml needs lots o… May 30, 2018
source Relative pathing url added to demonstration bg images. PR soon to sho… Jun 6, 2018
tools Design system contains helper functions, yeoman updated with proper t… Mar 30, 2018
.babelrc Babel moved to v7 beta, babel-core bridge is included for jest compat… Feb 28, 2018
.editorconfig Track editorconfig to make composer more standard Nov 13, 2017
.eslintignore update templates for particle Mar 27, 2018
.eslintrc.js rename all the things Mar 2, 2018
.gitignore Set NODE_ENV in PL via gulp, new package.json scripts Mar 3, 2018
.htaccess Create .htaccess so Pattern Info shows. Jan 31, 2017
.stylelintrc update iconfont setup for webpack 4 Feb 28, 2018
.travis.yml update travis to use npm@latest, and then npm ci Mar 28, 2018
.yo-rc.json Adding Yo Rc file Oct 10, 2016
LICENSE Update license to GPL2 and add in package.json Aug 5, 2017
README.md Add instructions for installing dependencies to README.me Jun 5, 2018
config.js Goodbye webpack gulp task. Now we simply write a single timestamp fil… Feb 27, 2018
contributing.md editorconfig notes in contributing.md, wording in readme to sound les… Nov 13, 2017
gulpfile.js Remove gulp watch from gulpfile.js Mar 27, 2018
jest.config.js Design system contains helper functions, yeoman updated with proper t… Mar 30, 2018
package-lock.json package-lock.json needed updating. Jun 7, 2018
package.json Merge in webpack-cli branch Jun 7, 2018
particle.yaml Update comment in particle.yaml config Dec 7, 2017
webpack.particle.dev.js Remove unneeded config. Jun 6, 2018
webpack.particle.prod.js Adding resolve-url-loader to Prod config Jun 7, 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 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.