Demo

Login with:
Username: demo
Password: demo

After login navigate to layout builder and start to build your page.

Prerequisites

Wingsuit Kickstarter is the fastest way to start with Wingsuit. The Kickstarter uses UI Patterns to map Patterns to Drupal and Acquia Blt for automation.

Installation

DDEV (recommend)

Create project dir

mkdir project_name
cd project_name
ddev config --project-type=drupal10 --docroot=docroot --create-docroot --database=mariadb:10.11 --php-version=8.3

Install the project

ddev composer create wingsuit-designsystem/wingsuit-kickstarter --stability dev --no-interaction
ddev init

Plain PHP

composer create-project wingsuit-designsystem/wingsuit-kickstarter wingsuit-kickstarter --stability dev --no-interaction
cd wingsuit-kickstarter
composer install

# Import database
drush sql:cli < dump/dump.sql
drush cr
drush cim

First steps

Open the page and login with:

Username: admin
Password: admin

After login, edit the front page and open the layout builder to add more blocks. Each block is mapped to a pattern (mostly molecules), each section is also a pattern. Click on configure in a section to see all settings you find in storybook.

Development

The kickstarter installs Wingsuit under docroot/themes/custom and generates all templates with yarn ws build drupal to docroot/themes/custom/wingsuit/dist/app-drupal (check blt/blt.yml to see the build process).

You can run webpack in watch mode with yarn ws dev drupal. (If your changes don't appear, you probably forgot to start yarn ws dev drupal).

The theme loads css, js and patterns from the dist folder, not from source folder.

You can configure the path of your dist folder. See Configuration details to configure the webpack part. Open "Wingsuit settings" under Configuration in Drupal and adjust the path to the dist folder.

Storybook

To edit your patterns, start storybook: yarn ws dev storybook.

Module overview

The following modules are used to make Wingsuit patterns available to Drupal: