Hi everyone. While exploring the excellent new Canvas page builder, I realised the need for some components that provide layouts I can use in my landing pages. I build my themes from scratch, so using components from an existing theme didn't seem like a good fit.

Because I couldn't find any modules that provide the components I wanted, I made one 😄

The module includes the following components: Columns, Row, Grid, Container, Sized container, Expander, Tabs. Each one is explained on the module page. They utilise various props and slots of Canvas components, so they feel fully native to Drupal.

I've made them as nicely responsive as possible, so for example, a 4-column layout becomes 2 columns on smallish screens (e.g. iPads) and 1 column on small screens (phones).

I rarely use AI, and I really wanted these to be super simple and lightweight, so I coded them myself. They're almost entirely just twig (HTML) and CSS, and only 1 of the 7 layouts actually even ships any JavaScript (Tabs; and it's minimal).

It turns out that single-directory components (SDCs) like these can be used in more than just Canvas; they can be used directly in the theme without a page builder (e.g. by referencing them from the traditional twig templates), and the upcoming version 4 of the Gutenberg module will has first-class support for SDCs. For now they don't work with Layout Builder, but I'm not sure how much demand there is for it any more...

Oh and the each component is completely independent, so if you want to use just one, you can just copy it straight into your theme without even installing the module; that's the beauty of open source.

Let me know what you think, and if you have any requests 😊

Hi everyone. While exploring the excellent new Canvas page builder, I realised the need for some components that provide layouts I can use in my landing pages. I build my themes from scratch, so using components from an existing theme didn't seem like a good fit.

Because I couldn't find any modules that provide the components I wanted, I made one 😄

The module includes the following components: Columns, Row, Grid, Container, Sized container, Expander, Tabs. Each one is explained on the module page. They utilise various props and slots of Canvas components, so they feel fully native to Drupal.

I've made them as nicely responsive as possible, so for example, a 4-column layout becomes 2 columns on smallish screens (e.g. iPads) and 1 column on small screens (phones).

I rarely use AI, and I really wanted these to be super simple and lightweight, so I coded them myself. They're almost entirely just twig (HTML) and CSS, and only 1 of the 7 layouts actually even ships any JavaScript (Tabs; and it's minimal).

It turns out that single-directory components (SDCs) like these can be used in more than just Canvas; they can be used directly in the theme without a page builder (e.g. by referencing them from the traditional twig templates), and the upcoming version 4 of the Gutenberg module will has first-class support for SDCs. For now they don't work with Layout Builder, but I'm not sure how much demand there is for it any more...

Oh and the each component is completely independent, so if you want to use just one, you can just copy it straight into your theme without even installing the module; that's the beauty of open source.

Let me know what you think, and if you have any requests 😊

Drupal deserves to be way more popular than it is, given how much better it is for making sites than most other software out there. Most of the time when I mention it to clients (or random people I'm chatting to), they've never heard of it, and those that have tend to think it's difficult to use - which I think is kind of incorrect.

So I've decided to start making video shorts, and I'm starting with making them for people who are curious about Drupal, or haven't heard of it but who might benefit from using it over the other site building options.

If you were brand new to it, would this video help you get started with Drupal? And if I make the next few videos as intros to features (like how to get started making Views), is there anything I should do differently?