After login navigate to layout builder and start to build your page.
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
Open the page and login with:
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.
configure in a section to see all settings you find in storybook.
The kickstarter installs Wingsuit under
docroot/themes/custom and generates all templates with
yarn ws build drupal to
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
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.
To edit your patterns, start storybook:
yarn ws dev storybook.
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