@wingsuit-designsystem/create-wingsuit v0.2.9-alpha.2

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 @wingsuit-designsystem/wingsuit wingsuit

2. Then cd wingsuit/ and run:

   npm start

Quickstart B

1. Clone repository:

   git clone git@github.com:wingsuit-designsystem/wingsuit.git

2. Then cd wingsuit/wingsuit and run:

   npm install
   npm run setup
   npm start

Develop Wingsuit

1. Clone repository:

   git clone git@github.com:wingsuit-designsystem/wingsuit.git

2. Then cd wingsuit and run:

   fin up
   fin wingsuit/startup

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 )