0.0.3 • Published 4 years ago
@wingsuit-designsystem/starterkit-wingsuit v0.0.3
Wingsuit: A design system integrating to Pattern Lab and Tailwind with Drupal.
Atomic Design + Tailwind + Patternlab 3 + UI Patterns
- Apply Tailwind Config to a locally-served Pattern Lab
- Create Twig Atomic Design Components
- Apply that design to Drupal with UI Patterns
Prerequisites
Provides
- Shows Tailwind classes/configuration inside Patternlab
- Strict Atomic Design for your UI Components
- Productivity tools:
- SVG Icons generation
- Define your image styles with a yml file and use this,
- LiveReload,
- Uses alpinejs for basic js operations.
- 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
Simply run:
npm create @wingsuitdesignsystem/wingsuit wingsuit
Then
cd wingsuit/
and run:npm|yarn start
Wingsuit is heavenly inspired by Particle from Phase2
Differences to Particle
- Wingsuit uses Tailwind instead of Bootstrap
- Uses Postcss instead of Sass
- Uses alpinejs instead of jQuery
- Uses UI Patterns instead of Presenter Templates (Presenter templates vs )