How Drupal 10 will make you fall in love with Drupal theming

MIKE HERCHEL:
Hey, everybody. MidCamp. Woo! (CHEERING) Yeah. This is the second day. So this is how Drupal 10 will make you fall in love with Drupal theming. I am Mike Herchel, and this was last night, and I had a great time at the Cubs game. Thank you for all, all the organizers and everything, everybody who makes this camp happen. Chicago's been wonderful so far. I'm a senior front-end developer at AVB Digital. I live in Gainesville, Florida. I like hammocks, dogs, hiking, fast and accessible websites. So AVB Digital is a combination of Bixal and Vaultes, and I work at this company called Vaultes. But I'm leaving there. So if you're a front-end developer who is potentially looking to come in, it's a cool job. We're working on sba.gov. Come talk to me. We're gonna replace my position and I'm helping with that. Speaking of which, who here is a front-end developer? Who here is a back-end developer? Who here is hanging out? Yeah. I also wanna thank Pantheon. Pantheon is sponsoring me here as part of the Heroes program.

So making it possible by paying for my hotel and stuff like that. So thank you, Pantheon. So what we're gonna talk about today is, we already, of course, did the intro, but we're gonna talk about what the problem that we're solving is, and then we're gonna go into some of the solutions, like the starterkit theme, some default styling - that doesn't suck. New Twig features, single Directory Components, fixing some of those Drupal WFs that we all know and love. And then if you have any questions, this is a good place for that. So the problem is that Drupal front-end development takes a lot of Drupal-specific knowledge and the starting point to create that is really dated. It's kinda old. There's a very complex render system and there's kinda dragons lurking within the theming layer and I'm sure a lot of you kinda know that. And so if you're a front-end developer and you come into Drupal, you have your designs, you wanna write your HTML and CSS, but what really happens is you have to go through all these steps right here.

You have to enable Twig debug, find the right template and developer tools, find out where the template comes from, ask friends for help, copy a template from the system module, write CSS, figure out your build system, fix IE 11 if you're so unlucky to still support that, modify your template, preprocess, xdebug, ask friends for help again, accessibility, oh yada yada yada. And at the end of it, you're just kind of like, What is Drupal doing here? It's like, this should be like part of the documentation right here on how to theme Drupal. And we have a good set of tools to do that. (LAUGHTER) So I'm gonna start off with the starterkit theme. The starterkit theme is like, I think it came in like the late Drupal 9. And so starter kit is basically a command line tool that allows you to generate themes and it ships with currently just one default starterkit theme, and then contribute contributed projects can provide additional starterkit themes. It looks like this, you just run a command in this animated gif right here.

I'm typing extremely slow but you say "Generate a theme", and it does the theme. Let's wait for it here. (LAUGHS)

SPEAKER:
That was perfect for us.

MIKE HERCHEL:
Yes. Anyway, there we go. (CHUCKLES) And it generates a theme, right? The starterkit theme, like, what's the point of this? Why do we wanna use starterkit as opposed to classy? So ever since the classy theme came into Drupal, we haven't been able to modify it because really the markup of that theme is an API, and if we modify that in Drupal core, it could break something. If we change around a CSS class, if we, you know, nest an extra div, or something like that, that might break someone's subtheme. So we can't touch it. And that kinda stinks because starterkit is probably like about eight years old now. I mean, classy is about eight years old. So that's why instead of sub theming starterkit, instead of sub theming classy, you generate a new theme from starterkit. Right now starterkit is very, very close to classy. So this is in Drupal core. When when you generate it, it doesn't look pretty. It looks very much like classy, but it has all your templates that you can modify, but you're thinking to yourself like, "Well, there's so much to do for this website." And we wanna fix a lot of that.

We wanna make default menus and default accessible drop-down menus within the starterkit theme. We want the Tabs styling to already be there. We wanna do things like the little preview, the bar that shows up when you're previewing your node, that everybody forgets to style, your messages styling. All this type of stuff that when you're doing a design, you don't wanna have to work extra for this. So we wanna give this to you for free and we're continuing to work on that. I have a issue to do the menu, but right now we're stuck on some tests and that'll go in at some point soon. Upcoming in this. We have a wish list. We want example code. You know who here is familiar with Drupal behaviors? Probably a couple of us, but several of us are probably not. And it would be really nice if we had an example JavaScript file in there that showed what Drupal behaviors are and how they work. Maybe even a build system like SASS or postCSS or something like that. And then more additional starterkit themes.

Right now, the Olivero theme does not officially support sub theming, although it's totally possible, but we don't officially support it because we might make changes and we don't wanna be on the hook for breaking anything that if you have a subtheme of Olivero. But there's an issue and the code is totally working, it needs just a little bit of work to be able to clone Olivero and, you know, call it whatever the heck you want. And at that point, it's your code. you can modify it to your heart's delight and you're good to go. Drupal 10 has a lot of new templating features, new Twig stuff coming in. And one of the things that I'm really, really excited about is easier Twig debugging. Who, like, one of the toughest things for a new front-end developer coming into Drupal is to be able to refresh your page and see their changes and tweak. In order to do that, you have to number one, search on Google and hope to God that you can find the correct code snippet to copy and paste into your development.services.yml.

And then you have to go into your settings.php, you have to add, I don't know, four or five different lines to number one, disabled caches, number two, point your settings.php to use that development.services.yml. And that's all well and good until you update Drupal and it overwrites that development.services.yml. And this is really confusing and it makes you, it makes you really, really hate your life for a little bit, you know. Matt Glaman and I, mostly Matt Glaman. I'm kinda forcing him to do the work. He's been working on this. I'm gonna show you where it's at right now because I'm really, really excited about it. So that's something else. So as it stands right now, and this is gonna change later today. You'll go into performance. We might change that to performance and developer settings. And then right below where you aggregate your CSS, you're gonna have these little checkboxes that when checked, these are gonna be checked by default here, and you're gonna enable, you're just gonna be able to check these boxes that will enable your Twig development mode, and you're also gonna be able to check a box right here to disable your cache.

And as soon as you check this, you can go in and you can see that it's outputting your HTML. And if you modify your Twig templates, it will automatically reload. Question from Chris.

CHRIS:
(INAUDIBLE)

MIKE HERCHEL:
That is not yet in Drupal core. So there's a possibility we can make 10.1, but it's a really, really tight timeline, the alpha is due either this week or next week. And we might be able to maybe slip into a later alpha. I'm not quite sure how that works, but I'm gonna be pushing my core committer of choice really, really hard to do this. (CHUCKLES) Because this is just one of those things that as a newbie front-end developer just makes you, like, really dislike Drupal. Yeah. So exciting stuff. (LAUGHS) (AUDIENCE CLAPPING) Thank you. Thank you. So a problem that you have is you always kind of wonder, like, "Should I move logic into the Twig template? Should I put it in PHP? How do I do it?" You know, if you're a front-end developer and you're new to Drupal, you might not know PHP very well, you might not know which hook to use, and stuff like that. You have to understand what a render array is, how to use render arrays, maybe. This should really be a lot easier. So new to Drupal 10 - and this is in Drupal core - is the add_suggestion filter.

So this is a Twig filter that you can go use today if you're on Drupal 10. And what you can do is, it just adds a template suggestion and points it to a field template. So you can see the example right here, I have my node.html.twig, and I have content.body, I just put add_suggestion('details'). And then it looks for a field--details.html.twig. This is so awesome because, number one, you don't have to do any type of theme hooks, you don't have to do your suggestions. And you also don't have to create, you know, you might have multiple fields using this field-dash details, you don't have to create multiple templates. And so this is super cool. But what if you wanna customize, if you wanna say add some CSS classes here, you can also chain this together with some new filters that are already in Drupal core but for 10.1, 10.1 is slated to be released this June. So you can use the add class or set attribute filters and you can set your CSS classes and or set attributes. And it works as you would expect it, and it's awesome.

This is gonna save people time, it's gonna save people money, it's gonna save people headaches, and I'm super, super excited that we got that in. Something that's not yet in Drupal core and we're trying to figure out how we wanna do this is like, do some type of value filter or something. Like, what if you want an image, you have an image field, but you just want the image outputted? Or what if you want, you know, I have a link and I just want the link outputted? And it gets more complicated. What if I want to add a CSS class on the image tag? Like, how complicated is that? We've all probably done like where you're doing chains and Twig and you're drilling down, and it's complicated, and you're like, "WTF, Drupal? Like why is this so difficult?" You know? Something else that you may or may not have run into, that's another Drupal WTF, is when you're looking at your Twig output and you're seeing which templates are being loaded, sometimes you don't see all the templates there. And that especially happens in views.

So like if you're doing your template, your Twig debugging, where you're actually seeing which templates, your template suggestions, and your source code, and you look at views, you don't see all the options. You have to know that you can do views-view--your view name--your display name. You have to know that it doesn't show here. So there's an issue here that we need like a lot of testing on. It probably needs to be rerolled at this point. This is not yet in Drupal core, but we want, it needs some work and we wanna make this happen. Something that I'm super excited about that is in Drupal core is a new output for the dump command. Is everybody familiar with the Twig dump command? So traditionally you can do Twig dump and like dump some variables, and of course, it gives you a white screen of death. We've probably all seen this and it's a memory issue, right? Within Twig, I think 9.4 or 9.5, dump works a little bit different, where well actually it's a wrapper for Symfony VarDumper, and it enables you to kind of drill down into your variables that are available.

It replaces things like Kint. Kint is great, but it takes a number of steps to install and it has dependencies. Xdebug is is my tool of choice, but you have to know how to set it up and that can be difficult. I'm gonna demo this right here. So let's look at, so this is my Florida Drupalcamp website right here running on my local computer. And I'm going to, see which... Yeah. So let's open up... Session teaser. So this is my... Like each one of these, like, little open and closing claps accordion details, elements is this session teaser right here. So what I'm gonna do in here is I'm gonna type in dump, I'm gonna save it, refresh. (GIGGLES) Am I? Yeah, right. Hit hard refresh. And there we go. So let me zoom in so you can kinda see how this works. And it just gives you this. So previous to this, you would get a white screen of death, of course. But you can look at your attributes object. You can dive down into your node object. There's your node object, your content array, all that type of stuff.

And of course, you can just do like, say, like dump your node. So this is all in Drupal core right now. And this is making new front-end developers' lives a lot easier. And I'm really, really excited about this. And I use this on a day-to-day basis when I'm not doing, when I don't have a need for Xdebug or something like that. Live demo. Well, anyway, that's awesome. Let me, hold on, let me do something really quick. (AUDIENCE CLAPPING) Thank you. Thank you. (LAUGHTER) Fixing stuff on the fly. So something that's really complicated for new front-end developers is how do you know where your JavaScript is coming from? How do you know where your CSS is coming from? And like if you look at Florida, the Florida Drupal camp website or this file right here, we have the template in one place. We have the CSS or the SASS in another place. If there's JavaScript, that's in a whole nother directory. And then on top of all that, we have to edit our library's file and we have to kind. Of hook it all together here.

And that's a real pain in the butt, like you have to, it requires that Drupal-specific knowledge that is just like a little, little complicated. And it's just something that if you're used to it, you're used to it but if you're not used to it, you're like, what the heck is going on here? So we're working on a number of different things. One issue that is close to being ready is being able to load CSS and JavaScript directly from a template using attached CSS or attached JavaScript right here. You can see what the syntax is gonna look like. And this is not yet in Drupal core. Hopefully, I'll go in for 10.2. It will not likely make it into 10.1. And this will enable you to not have to create a library. Which is super neat. And what I'm really excited about - I talked a little bit about this yesterday in the lightning talks - is single directory components. Single directory components, like componentize, I don't know, web development, it's very popular in the JavaScript ecosystem. If y'all have done any type of view react or anything like that, you might have worked with something like this or single file components.

And it's really, really nice and it enables you to jump around between your files, all the, like, in one place. You know, you're either in one directory or one file. And it just like, it makes things easier to maintain, it makes things easier to discover. It also makes things easier to build. Componentizing your code is really nice 'cause it also makes it easier to delete, you know. I don't know if y'all have ever heard the phrase like 'good code is easy to delete', you know. And the example I showed you on the Florida Drupalcamp website earlier, in order to delete that component, I would have to delete, number one, the template, I would have to bounce to a different directory, delete the SASS, bounce to a different directory, delete any JavaScript, and then go into that libraries file. So let's, before we applaud this, hold on, hold on. Hold your horses. (CHUCKLES) Let's just look at what this' gonna look like right here. So, earlier I showed you this node--session--teaser. Alright, session teaser, right here.

So I have a branch right here where I'm converting this into single directory components. Yeah. Wait. I'm in the wrong tab here. I know, right? But I'm not good at it.

SPEAKER:
(INAUDIBLE)

MIKE HERCHEL:
I know, right? That's good enough, right? Good. So now, let me show you what the component looks like right here. So single directory component exists in your theme or modules components directory. And you'll have a directory in there per component, right? So right now I only have one component, it's called details. And so my details Twig looks very similar to what you were looking at earlier, but it doesn't have any type of Drupal-specific, I don't know, you know, where you're modifying classes or anything like that. The SASS is very similar except for like I'm importing a variable from up above. CSS, there is the CSS. And then we have the metadata file. So I'm gonna walk through this just a little bit right here. So the only thing that's mandatory here. Is the name field at the top. And there's other fields in here, a status, machine name and stuff. And then you can define your schema. If you're in a theme, you don't have to define your schema but it's highly recommended. If you're in a module, the schema does need to be defined.

If you're in a theme, you can only override other components if you have a schema defined. And within a theme, you can put something in your info.yml file to enforce schemas that you have to create a schema. So like you can see right here like I am, I'm passing through the attributes, object, which is, you know, like the attributes that Drupal injects onto the wrapper, like, you know, any CSS classes that are added through preprocess roll attributes, etcetera, etcetera. I'm passing through my content array, which is everything that I have added under the manage display tab. I have classes, I have a couple specific things that I will show you, and then I have slots. Slots are basically the same thing as Twig blocks. Let me show you how we invoke this. In the template that you were looking at earlier, now what we're doing is we're embedding, we're using a Twig embed. You can also use a Twig include right here. But Twig embeds allow you to use Twig blocks. So that's why we're using a block here.

So you can see I'm kind of modifying the classes array up here and I have like, you know, if it's unpublished, I put node unpublished. And then the syntax here is where you have your theme or module name, right? Key name, and then you have a colon and then you have your component name right there. And this works with emojis. I checked it. If you wanna do emoji names. And then I'm passing in various values right here, and then I have my Twig blocks down here. And it works exactly like you would expect it to work. Let me share this for you. So let me clear the air, refresh. Alright. So it's working the way you'd expect it. But let's look at the markup. There's a couple of cool things in here. You can see right here. You can see there's... Let me go into a dark mode here. You can see right here, it says 'component start', and it shows you the component that's being loaded, which is pretty cool. And it gives you a little random emoji. And a random emoji is actually really useful because in the real world, you might have nested components.

And so it allows you to quickly identify it and say like, "Hey, this is, you know, this component." And then there's other components nested in there. And this is like, such a cool thing. The single directory components is basically led by this amazing former coworker, (MUMBLES) Mateu Bosch. And he will be at Drupalcamp Pittsburgh and will be talking about this. So if you see him, you gotta like give him high fives and be like, "You are awesome." Because he basically did all this, and I was kinda there on the side helping him. So this is super cool. Components will integrate directly into tools like Storybook. There is additional tools that have deeper Drupal integration. So like you can either, within your story... Like if you're familiar with what Storybook is, is basically a component library. And you can have Storybook actually use Drupal's render pipeline. There's a module called CL server that does that, and it's super, super cool. For those people that use design systems, or like a large system, this is gonna be a real game changer.

And I'm super excited about that. So now we can applaud. (AUDIENCE CLAPPING) Question.

SPEAKER:
(INAUDIBLE)

MIKE HERCHEL:
No. So... Yeah. So let me make sure I understand your question properly. So you're asking about like past (UNKNOWN) like gulp and grunt, is this gonna replace that? No, like if you're using SASS or postCSS, you still need to compile that. What this will do is this bypasses the need to create a library for this. So like let's say you're creating a component and you have your Twig file, but your Twig file has a CS file and JavaScript file and it's all in the same directory, along with the metadata file. Drupal will automatically discover the JavaScript and CSS files if they have the same name. If you have multiple ones, you can add that to your metadata file and it will load that wherever the components are being loaded. But you still have to have gulp or whatever the heck you're using for that. Cool. So I'm super excited about that. Something else... How are we doing on time, by the way?

SPEAKER:
You're 30 minutes in so (INAUDIBLE)

MIKE HERCHEL:
Cool. It's an hour long? (MURMURING AND LAUGHTER) I'm gonna start typing really slow.

SPEAKER:
(INAUDIBLE)

MIKE HERCHEL:
I know. Something I'm really passionate about is modern CSS in core... Let me take a drink of water since I'm going into marathon here. So I'm wearing this cool CSS shirt that looks like the kiss logo 'cause I'm passionate about this. So the current state of Drupal core CSS is not, it's all over the place, really. There's a lot of floats, there is very little modern CSS. And we're working on changing that. We're modernizing the current core CSS where with Drupal 10, we no longer support Internet Explorer 11. You can clap for that one. (CLAPPING) That enables us to do so many things, mostly through CSS custom properties, aka CSS variables. And if you're a CSS nerd, you are hopefully all over that because it's an amazing thing. So within Drupal core, we wanna, of course, modernize. We're working to modernize the CSS. We're using a lot of CSS custom properties right now. I'm gonna show you some of that. We wanna use modern components and we have a responsive views grid, which I'm gonna show.

So some of the work that we've already done is responsive views grid, the settings tray, aka the off-canvas menu. You know, like if you're using Layout Builder, you hit a button and it slides out. In Drupal 9, a lot of the little components in there, the styles would leak into and it would, like, really pollute everything. So if you had like drop-down menus in there, it was a really bad experience. Did you have a question?

SPEAKER:
Yeah. (INAUDIBLE)

MIKE HERCHEL:
Yeah, I can show you... In Drupal 10, it's gonna be a lot easier, but you do need to qualify it with a specific selector. But it used to be a lot worse in Drupal 9 and we modernized it and I'll talk a little bit about that. So we're also gonna talk about Drupal displace, which I'll explain what that is if you're not familiar with it. And we have color changing in Olivero. All this is right in core, right now. So the first thing that I'm really, really excited about is the responsive grid in Drupal core. So I have a demo for this right now. So who here, like, if you've gone into... In Drupal 9 and before... Of course, I have to resume this (UNKNOWN). In Drupal 9 and before you go into views where you create your format, let me show you what this looks like. Grid View. You change your format in here and then you would have you have the option for grid, responsive grid, well, responsive grid's a new one, but in Drupal 9, you just have the option for grid. But what happens, the markup that it generates, it wraps every single row in a div, and then floats it.

And because every single row is wrapped in a div, that means that it can't be responsive, it can't reflow. If you have four items wrapped in a div, that fourth item can't wrap onto the next line at smaller widths. And it's like such a pain to do it. So we added this new thing called Responsive Grid and it's super neat. And it gives you these options right here. And you know how normally, if you're doing responsive design and you wanna kind of set up a grid, you might say like, "Alright, well, small widths I want one item width, medium widths, I want three item widths, large width, I want like, five across or something like that. That gets really complicated especially in the UI, to decide. So we ended up doing this like really, really cool CSS grid technique and I'll explain that in a little bit. Where instead of defining all that, you say, I want a maximum number of say 5 or 6 across. But then each item, I don't want it to go under 100 pixels or 200 pixels. And then you define your little gutter in between that.

And then the browser automatically, without any type of JavaScript or anything, as it gets smaller, it will just reflow and resize and it's really, really neat, and you can kind of see these settings right there. So this is currently in Drupal 10. We can start using it today. Go ahead.

SPEAKER:
(INAUDIBLE)

MIKE HERCHEL:
It is not a container query. And so, I wrote, I got super nerdy about this because I figured this out while I was doing work on Olivero theme and I was like, "I don't think anyone's done this before." And I wrote this cool CSS tricks article. Herschel grid. I didn't know what to call it. An auto-filling CSS grid with maximum columns with minimum size. And I wrote this article and it was so cool. And I got like all these comments and it made me, like, really happy. My favorite comment is this one right here, "Thankyouuu". (CHUCKLES). But I have a CodePen. And if you're a CSS nerd like me, you can read this and you can figure out, oops, you can figure out the theory behind it. And then I have like a little CodePen right here that, you know, if I open this up... How do I edit on CodePen? You can kind of see it. So I can drag this. And you can see everything kinda changed right here. There's JavaScript over here on the right, but that's just to update the number of the pixels and to give you a little bit of feedback, you can see how it reflows.

It's pretty cool. So of course that is in Drupal core. So like let's say I want a maximum of, I don't know, 27 columns, minimum cell grid, 100. So we can't fit 27 items in a row here. We can only fit as many as it says right here. Looks like we have about 8. As I resize right here, you can see the numbers on the top. It's they're kind of slowing down. So that's something that, in every project I've been a part of, I've written something similar to this, you know, 'cause everybody wants a grid, and now Drupal gives it to us for free and it's gonna save people a lot of time and I'm super, super stoked about that. Thank you. (AUDIENCE CLAPPING) This is the CSS right here. You can see, it relies very heavily on. A lot of calc and a lot of custom CSS properties. And it looks kind of complicated here but once you get the general gist of it, which if you read the article, it's not as complicated as you think. So this is the off-canvas dialogue. That you were asking about earlier. The off-canvas dialogue has traditionally been a real pain in the ass.

And Drupal 9, like, if you ever use the quick edit module and then you wanna edit your menu, everything looks really, really screwy because these are supposed to be drop buttons up here on the right-hand side. And then you'll have like weird things like this where the text is kind of offset. And all that's caused by styles from your front-end theme leaking into the sidebar. Because Drupal 9 has to support Internet Explorer 11, Drupal 10 does not. With Drupal 10, we can use this new property called all : and a value for it called revert ; So the all : property in CSS will mean all properties that apply to this element. Ever. Like, you know, everything from display to background to everything. And then the revert ; keyword basically says revert it back to the browser's default. So if I say all ; revert ; that will take all the properties and then revert it back to default. And then, so that resets it to the beginning and then you can apply your styles. So what this effectively does is it removes any leaking styles leaking in.

We also use a new, I guess this is a pseudo-class called : where : where is really neat because it removes CSS specificity of everything that's in the parentheses. So like you can see, like, beyond that, I'm using like, you know, I wanna reset everything except for anything inside svgs, there's the ck-reset, all that type of stuff, there's a little data (UNKNOWN). But normally if I don't use that : where pseudo-class, all those would kind of like add to the specificity, and then when you're trying to override it, you have to type in this really, really long CSS selector and you're like, you don't know exactly what you have to type, and it's really, really confusing. So : where it allows us to fix that. And when you're overriding this, what you would need to do, you see this ID up here where it says drupal-off-canvas-wrapper, if you put that in your CSS and then just put your selector after that, it will work. It will just work exactly the way you think it should work. You don't have to use importance or anything like that.

And it's really, really neat. Within the Drupal off-canvas wrapper, we're making heavy use of CSS custom properties, aka CSS variables. So you can see that we have these defined right here. So also like, a front-end theme can override these or an admin team can override these. So let's say like you wanna change the background of your off-canvas to pink, you can just override one of these colors right here, assuming you use that selector and it will just work. And then within the individual styles for the components within the off-canvas, we're using these custom properties pretty heavily. And so as a CSS person, or as a theme, or maybe you're creating an admin theme, you can override the stuff really, really easy and make it your own without having to be all hacky about it, which you really had to do in Drupal 9. And so I'm really, I'm really excited about it. I worked really, really hard on this. I had like 60 commits or something in the merge request for this, but it was just like one of those things that I was like so focused 'cause I was making so much progress and I was like, "I hate the way this currently is I'm just gonna rip it all out and redo it." And it ended up getting in and I'm super, super excited about that.

Thank you. (AUDIENCE CLAPPING) You go ahead (UNKNOWN)

SPEAKER:
You said (INAUDIBLE)

MIKE HERCHEL:
So yeah, it will override, it will override everything that's except for the stuff that's in the node. You see where I say like node svg, and all that type of stuff? So when you say CSS resets, can you give me an example?

SPEAKER:
Like when you (INAUDIBLE) a lot of times you import a reset CSS that changes everything to make sure that everything is anti-aliasing.

MIKE HERCHEL:
It'll definitely override all that.

SPEAKER:
OK.

MIKE HERCHEL:
But you can always like reapply, you know, apply that under a more specific selector. It should probably be like a little bit of a pain to do. But honestly, modern browsers, in my opinion, don't have as much of a need for like the traditional normalized CSS that we did back in the day when we were supporting i.e., and like older versions of Firefox and Safari and all that. Modern browsers are pretty consistent now with the occasional like WTF within Safari. Go ahead.

SPEAKER:
If you are using like a utility (INAUDIBLE) like in this case you probably have to apply custom filter.

MIKE HERCHEL:
Yeah. Yeah. Yeah. It will definitely override your Tailwind CSS. There might be, if you're using Tailwind CSS, I'm willing to bet there's some type of configuration within your config file that you can maybe specify, like a prefix selector or something like that that you might be able to get in there. But yeah, it totally will override that. And that's by design too. Like if you, if you're doing a front-end theme with Tailwind, you typically don't wanna override that off-canvas. You know, because a lot of people don't even use the off-canvas, and then as soon as you override styles into off-canvas, you have to account for a lot. There's things like autocomplete and if the dropdown comes into autocomplete, those need to be styled. The focus styles for the autocomplete, the little spinny gif for the autocomplete. All this stuff needed to be done and your front-end styles, you don't wanna screw that up. So like you need to be very explicit when you're overriding these off-canvas styles. And that's by design.

So who here - and I'm not expecting a lot of hands, but who here is familiar with Drupal Displace for what it is? This is pretty cool. I'm gonna teach you something. So you know how if you have a fixed header, I'm going to demo this Olivera right here. So you have, let's say, a fixed header up here that stays put, right? But how does it know how far it should be from the top, you know? Because I'm using position fixed here. And it needs to know that it's say, OK, 49 pixels when the toolbar is up there. Or it could be like 79 pixels if the shortcut bar is open. But you might close the shortcut bar and all this type of stuff. It's really, really hard to manage. What if I install a module that has a custom toolbar that's really thick, like Gin toolbar or something like that? This is what Drupal Displace does and it just doesn't do it from the top, it does it from the right and from the left and from the bottom. So if I have the settings tray come out, like we need to, and you're positioning something against the right hand of the screen, you need to worry about that.

But it also needs to support right-to-left languages. I don't know if you, like, Arabic reads from the right-hand side to the left-hand side. So we need to account for that. Drupal Displace is a JavaScript utility that basically, if you have like a toolbar, you add a CS... or you add a HTML attribute, I think it's like Drupal -display-left, or something. And what the JavaScript will look at all that and it will say like, "Alright, well we need to account for this." And you know. And then in Drupal 9, if you wanted to get those values, you had to run, you had to run, you had to run like a little bit of JavaScript that says like calculate offset, and then you could use that calculated offset to inject inline styles. And it worked pretty well, but it was a little bit of a pain in the butt because you had to run JavaScript and like, you know, if and when, don't use JavaScript, because things can jump around as JavaScript is being loaded and stuff. So we ended up modifying that to inject CSS variables here.

So let me make this bigger so you and I can both see right here. So there should be a Drupal Displace offset tab, 79 pixels. So this is a custom CSS property aka access variable. And you can see as I start changing stuff, that's gonna change. So now we're at 39 pixels. So the Drupal Displace will update the HTML attribute with how much space is up there. And within your CSS, all you need to do is just know that this CSS variable exists and you need to call it. And at that point, so if you're doing a position fix thing, you don't need to start looking at CSS classes or anything like that, 'cause that gets hacky. You can just look at this and it just works, and it just works really well. And it's just like another thing that I'm just super excited about. So I guess I have some extra slides in here. So previously we would do things like this and all that and yeah. So this is what the syntax would look like right here. You would set your CSS variable, you would set your top value to look for that CSS custom property.

And if that CSS custom property doesn't exist, then you just default it to zero, and it just goes all the way to the top. And that's just something that's nice and handy to know. So something else that's new to Drupal 10 is color changing and the Oliviero theme. So y'all probably have seen like the Bartek theme and the Bartek theme had integrations with the color module. The color module was a very, very old way to change colors and it was really difficult to work with. And the color module has been ripped out of core and made part of contrib now, but we still wanted in Drupal core to be able to change colors because this is the default theme for Drupal core, it kinda makes sense. So we have that in for Drupal 10 now. And so you go into your theme settings and at the bottom right here, you can see we have some preset defaults in here, and then we can, of course, we can just set our own default or our own color, you know, like, I wanna make this a little hot or pink here. So just drag it up here.

And this works once again through the magic of CSS variables. So if we look, if we inspect it up here, you're gonna see we're using HSL color notation. So HSL stands for hue, saturation, and lightness. And we have, for various components, and our various color schemes, we have the saturation and lightness kind of hardcoded. And so the only thing that you're changing when you're actually dragging around that color picker is you're changing the hue. And so you can see by changing the pink, we have various different shades of pink that automatically get generated and that gets generated through CSS variables and a little bit of PHP in the background that converts that hex to HSL. And this is something that modern CMSs pretty much need, and you wanna customize it a little bit. And so that's in, and that's pretty cool. That's modern and I'm happy about that. So we're nearing the end of the presentation. I want you all to come down to Florida Drupalcamp, which is in February. And I said this yesterday, but like, the weather in Orlando beats the pants off of Chicago weather in February.

It's always exactly 72 degrees. We have the sun out, there's birds chirping, and like Mickey Mouse running around. It's pretty awesome.

SPEAKER:
(INAUDIBLE)

MIKE HERCHEL:
(CHUCKLES) I know, right? That's a good joke, and a very sad joke. But so we have the dates already kind of locked in. And I mentioned this yesterday. But we didn't realize in previous years, we were scheduled on the same weekend as the Daytona 500, which is not a big deal except for the fact that it really jacked up all the airfare prices. And so we pushed it back a week so we're not competing with that on airfare and hotels and stuff. So now it should be a little sigf... It should be significantly less expensive for you to get down to beautiful Orlando. Thank you. (CLAPPING) And if y'all have any follow-up questions or anything like that, like that, now would be a good time. Start with Chris, and then we'll work our way over.

CHRIS:
(INAUDIBLE)

MIKE HERCHEL:
Yes.

CHRIS:
How much work would it be if you wanted to add a different kind of button next to the close button of the (INAUDIBLE) and does your current rework support something like that?

MIKE HERCHEL:
Like from a CSS standpoint, you could pretty much do it. Like the off-canvas dialog uses jQuery UI in there. And so there's like a lot of funky CSS classes up, and I'm sure you've kind of seen this up in the header, you know, like there's UI dash this, UI dash that. I would really say like Drupal core jQuery UI is a really old technology but it's embedded pretty deeply in Drupal core and there's some issues to rip that out. But I would say like, try to go with jQuery UI way to do that. And if not, you can write your own custom JavaScript like, I mean, it should be pretty straightforward to write a little bit of JavaScript to insert that in there. And then you can style it. When you style it, you're gonna have to use that Drupal off-canvas wrapper selector. But the good thing is you're not gonna have styles leaking in to modify that. We had another question.

SPEAKER:
Yeah. I was about to ask (INAUDIBLE)

MIKE HERCHEL:
Yep. Yep. We have a change record about Drupal Displace with a bunch of in there. There was another question somewhere in the back.

SPEAKER:
(INAUDIBLE)

MIKE HERCHEL:
So in my opinion, I'm not a big fan of using, like, bootstrap grids, and like all these grid systems were really, really useful before CSS grid. CSS grid is really widely supported right now. And in my opinion, it's easier. It's easier than Flexbox. If y'all don't know CSS grid, it's easier than floating. Like you can just say, "I want a grid, I want three items across and I want a gap." And it just kind of works. I personally don't think there is a, there's not as much of a use case for things like Bootstrap grid and or Tailwind grid unless you're getting that for free, and that's what your developers know. Like there's nothing wrong with it, but you don't need it, you know? And I do like Tailwind and Bootstrap gives us a lot for free. Like Tailwind is really nice to work with. But there's also a lot of things that are just not needed. Any other questions? Go ahead, (UNKNOWN).

SPEAKER:
Is there anything special about the Storybook to get that working or do you just do it like you would?

MIKE HERCHEL:
Yeah. So the question is, how do we get components working with Storybook, right? So Drupal.org. So as part of getting single directory into core, they made us write documentation. (CHUCKLES) So we have a lot of documentation, Some of it is in a work in progress. But at the end of it, I added this page that says modules that extend single directory components. And there is a module that is built by Matteu called CL Server. And CL Server basically integrates in single directory components with Storybook. And there's a link to a repo here. Storybook Drupal Addons. So there is a Storybook Drupal Addon, and that's like a plugin for Storybook that Matteu did the majority of work on here on GitHub, under Lullaby. And he has instructions on how to do this. And then you can of course, like look at this tutorial, and things like that. So I have not personally done this, but I know that my friends at Lullaby are using this. Any other questions? Alright. Well, thank you, everybody.

(CLAPPING)