@wingsuit-designsystem/tools v0.0.19-dev

Wingsuit: A design system integrating to Pattern Lab and Tailwind with Drupal.

Atomic Design + Tailwind + Patternlab 3 + UI Patterns

1. Apply Tailwind Config to a locally-served Pattern Lab
2. Create Twig Atomic Design Components
3. Apply that design to Drupal with UI Patterns

Prerequisites

• Node ^8, ^10
• NPM ^5, ^6
• PHP ^7.0.0

Provides

1. Shows Tailwind classes/configuration inside Patternlab
2. Strict Atomic Design for your UI Components
3. Productivity tools:
   1. SVG Icons generation
   2. Define your image styles with a yml file and use this,
   3. LiveReload,
4. Uses alpinejs for basic js operations.
5. Uses vue.js for larger Javascript

Quickstart

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

Quickstart A

1. Simply run:

   npm create @wingsuitdesignsystem/wingsuit wingsuit

2. Then cd wingsuit/ and run:

   npm|yarn start

Wingsuit is heavenly inspired by Particle from Phase2

Differences to Particle

1. Wingsuit uses Tailwind instead of Bootstrap
2. Uses Postcss instead of Sass
3. Uses alpinejs instead of jQuery
4. Uses UI Patterns instead of Presenter Templates (Presenter templates vs )