Drupal Kickstarter

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

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

cd wingsuit-kickstarter
./vendor/bin/blt source:build:settings
./vendor/bin/blt setup

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:

components: Registers folders of components defined by your theme or module as Twig namespaces.
ui_patterns: Does the mapping magic.
ui_patterns_layout_builder: To use UI Patterns with Layout Builder.
ui_patterns_settings: Make patterns configurable.
ui_patterns_field_formatter: Map Patterns to fields.
wingsuit_companion. Locate templates inside the wingsuit dist folder.