Description
Drupal's Core Single Directory Components coupled with Storybook can provide a great basis for Design Systems in Drupal. Then using utility css frameworks like the powerful Tailwind CSS, and an easy and light weight Javascript framework like Alpine JS can greatly enhance front end workflow for Drupal by further sprucing up the use of Single Directory Components and Storybook. The combination of all these technologies give a WOW factor to your frontend Drupal setup. In this detailed tutorial the following topics are being covered.
SETUP A NEW DRUPAL THEME with Tailwind CSS and Alpine Js.
SETUP Storybook.
CREATE SDC components and show them in Storybook.
Use Drupal site building techniques to render Drupal structure in single directory components
This demo was recorded on the occasion of Global Contribution Day 2025 dated 25th January, and part of the aim of this was to contribute this theme to drupal.org. Therefore the whole team at Drupak has been in active development further improving the theme which was created as part of this tutorial. The theme already has been on drupal.org and named as Tailpine while the first release is still being awaited. This theme will have many great features and will be setup automatically with Storybook, Tailwind, Alpine JS support as a result of installing it after composer download. The goal is to make it a goto theme for Tailwind CSS based projects in Drupal.
https://www.drupal.org/project/tailpine
You may contact the trainer in this video via his Linkedin Profile https://www.linkedin.com/in/syed-muhammad-azmat-shah-b1273a40/
#drupal #drupaltraining #storybook #tailwindcss #alpinejs #drupak #pakistan #design #designsystems #designsystem
SETUP A NEW DRUPAL THEME with Tailwind CSS and Alpine Js.
SETUP Storybook.
CREATE SDC components and show them in Storybook.
Use Drupal site building techniques to render Drupal structure in single directory components
This demo was recorded on the occasion of Global Contribution Day 2025 dated 25th January, and part of the aim of this was to contribute this theme to drupal.org. Therefore the whole team at Drupak has been in active development further improving the theme which was created as part of this tutorial. The theme already has been on drupal.org and named as Tailpine while the first release is still being awaited. This theme will have many great features and will be setup automatically with Storybook, Tailwind, Alpine JS support as a result of installing it after composer download. The goal is to make it a goto theme for Tailwind CSS based projects in Drupal.
https://www.drupal.org/project/tailpine
You may contact the trainer in this video via his Linkedin Profile https://www.linkedin.com/in/syed-muhammad-azmat-shah-b1273a40/
#drupal #drupaltraining #storybook #tailwindcss #alpinejs #drupak #pakistan #design #designsystems #designsystem
Default Thumbnail
Medium Thumbnail
High Thumbnail
Standard Thumbnail
Max Resolution Thumbnail
Video ID
Gu-mXaUhXqI
Playlists
Channel