 All right. Good morning. It's 10 30. So I'm going to go ahead and get started here Welcome everyone. This is one theme to rule them all using starter kits to accelerate your theme development and reduce technical debt Quick show of hands. Who here is using Drupal 10? Excellent. Who here has used starter kit? Many fewer people have you actually used it just playing around or used it for actual development stuff? I guess I should ask as raise your hand if you've actually used it for real development stuff Not just tinkering. Okay far fewer The only theme that I know of right now that implements any of the starter kit stuff is the core starter kit tool or the sort core starter kit theme So the the this is still something that's fairly new even though. It's been around in core for a bit My name is Andy bloom. I work at lullabot. I'm a senior front-end developer Based in the US in the state of Ohio if you're familiar with the general shape of the United States I live a little bit below the one that looks like a mitten and is surrounded by all the water I Am a subsystem maintainer for Olivero along with my cursor and a number of other people and I'm also the maintainer of the UI kit theme Which is a theme based on a component framework similar to bootstrap or foundation If you'd like to follow me on any of the social media all of the things that I am a member of are in social links in the header of my website I am also I had dressed for the occasion this morning But it's really hot in here because there's so many bodies in here now and there were so many here for the previous session I was also the day one winner of the Drupal 10 days of Drupal 10 meme contest And they sent me this lovely very cozy sweatshirt And in the spirit of Drupal 10 and the meme party I have put many in here But before we get into the talk, I want to give you a bit of a timeline on When I submitted the session and where we are today and what's happened kind of in that period of time So in August of 2022 I started working on Olivero to implement starter kit with Olivero so that people could use it as its own starter kit And then build on top of Olivero One of the things we decided to do with Olivero After seeing what had happened to Bartek was to try to dissuade people from using it as a base theme When people started using Bartek as a base theme Everything about it kind of became an API and people were relying on it and it had to be backwards compatible And so if you ever tried to put in a Views the views grid. It's not the same as CSS grid right for Bartek until that was added to views later and everything had to stay just the way it was as CSS was in 7 whatever year Bartek was and CSS has progressed quite a ways since then and So we didn't want Olivero to be locked in time to what the state of CSS was When we got it into core at the end of Drupal 9 So we started implementing starter kit and then the work stalled around Christmas of 2022 on tests And then in April I had submitted this session thinking hey We can talk about this and get people involved in it and maybe get these tests unblocked and get Olivero Done and that'd be great and then in May this session was selected and confirmed and then in June in Pittsburgh Drupal con There was a ticket opens to kind of refactor how starter kit was designed Which is cool, but it really meant that what I had submitted was gonna have to change and then on contrib day We started working on that refactoring and then the work stalled again in June So now there's two tickets for two different versions of starter kit both of them Stalled and now here. We are October 19th today the work that stalled on June 18th Almost got unstalled before this session, which meant would have been a really fun time redoing these slides so the state of theming and creating a new theme Before starter kit was kind of a choose your own adventure task You had for the most part three options you could start from scratch You could use a base theme or you could do some kind of DIY copy-and-paste method and that copy and paste is the one that I know I used for most of my career building new themes If you're starting from scratch It's great. You do have a lot of freedom for greenfield development if you decide. Hey, I'd like to try out a new bundler I've never tried webpack before maybe we can do webpack. Maybe we can try Veet You know, we've been doing stuff in sass But now we'd like to move to post CSS starting from scratch is a great option because there's nothing they're limiting you You have no constraints. You can choose whatever you want to do starting from scratch But there are some cons which is there's a lack of scaffolding You don't have any support to really boost you into the theme development and you're going to spend time redeveloping Stuff you've already done before you may want that freedom to do new bundlers new tools new whatever But you may wish I now I need to go back and remember what were all of my regions and how did I have my all these? Accessibility features I built in so starting from scratch has its pros, but it has its cons Another option is to use a base theme And so for many people classy was the one everybody everybody loved the fact that oh everything comes with always nice default classes And I can just target those and I don't have to add my own And it brought along its own pros your dev time speeds up with a base team base theme You get to inherit things like CSS and JavaScript you get to inherit templates you get to inherit the themes screenshot with some Advanced tinkering you can inherit block placement and templates you can inherit theme settings You can hear it the break points and the libraries and hook functionality There are some things that don't inherit like the logo and favicon or the regions Color module support when that was still a thing that was in core or if you were base theming a core theme You didn't hear it the core version And then our third option for creating a New theme if you didn't want to start from scratch or use the base theming was to have some custom advanced copy and paste functionality And this also speeds up your time with some basic scaffolding and you do have control of the source theme It's not quite as easy as using a base theme is in base theming. You just declare a sub theme and you're done You do have to go in and you have to copy all the files over and you have to do You know some search and replace to replace file names and hook names and all that kind of stuff and One of the biggest downsides of this was there really wasn't a community standard way to do this And so if you look at contrib themes, I'm thinking specifically of starter kit and foundation right now We both both of these themes have their own Implementation of this in UI kit We wrote a composer script to do this and in foundation They've got a PHP script or a dress command or something like that that does their version of this So there's no community standard way to do this until now Starter. Yeah, thank you. Thank you. That was excellent. I loved that Starter kit was added as an experimental feature in Drupal 9.3. It's been around a while And then it reached stable in 10.0 and 10 to comes out this winter, right? So, I mean, it's it's been around a bit But like I said at the start, I don't know of any themes that are actually using the theme generation tool other than the core starter kit theme Radix, I'm hearing from the front row So the starter kit and theme generation tool There is a difference between the two of them starter kit is the name of the theme that's in core and the theme Generation tool is actually the script that's running from a PHP class But it brings along some great stuff It brings along your CSS and your JavaScript and your libraries and templates and theme settings and hook functionality And I can hear some of you right now going hold up How is this different from sub theming? And so I submit a dramatic reenactment We have someone coming in that wants to use the Olivero drop-down menus and so I like that I will just make a new sub theme and so you start talking about this and Somewhere along the line myself or my cursor maybe says Olivero doesn't support sub theming And I like well sure it does everything supports sub theming I just put base theme Olivero in there and then we say yeah It it does you could technically base the sub theme Olivero But now your theme is going to break if we ever make a change to something you're relying on You should just follow this guide that he has about copying Olivero and making your own version of it instead Which is a brand new version of that advanced copy and paste. It's not the same as UI kits. It's not the same as foundations It's its own here's how to do this And they say okay, that's great, but I really wish this was easier and so now it is with starter kit so To fully understand the difference. Let's look at them kind of more in depth With sub theming your New theme is perpetually connected to the current state of its base theme If you make a change to the base theme CSS that will get inherited by default in your new theme If that's not something you wish to inherit It's now your job to correct that and to go back and say it. Nope. I like the way it was. I've got to override this thing I've inherited changes to those base themes then can cause unintended side effects in their sub themes and That's okay, right? This might be a solution for you if you're working on a suite of sites and For the most part they're all going to be the same and you really only need very minor tweaks This could be a very good solution for you if you're building a suite of sites for a university if you're building a Suite of sites for a government agency or something like that a sub theme might be a great solution for you Because you want to be able to say for the most part these themes should all be very much the same and when we Make the sub themes inherit new stuff We'll just handle that because we'd rather have to do very minor overrides rarely rather than a bunch of maintenance on a bunch of different themes starter kit on the other hand is a snapshot in time of whatever your source theme is and so as you maintain your starter kit theme You can have a version 1.0 and if you make a new Sub theme for lack of a better term if you make a new theme from that as its starter kit at version 1.0 That's now its starting point. So you get to just a snapshot in time and you're basically forking your theme And then later when you have 1.1 You can make a new sub theme or a new Descendant theme and 1.2 again If you choose to inherit new stuff You then have to go back to the source theme and get it if you're tracking that source theme and you want changes there You need to go pull that yourself But you don't inherit new things by default. So your theme will never break if the source theme makes a change This is a good option for building new themes with just some boilerplate in the way in place And then you can diverge from there if you're going to build a bunch of sites that all have very similar Foundations, but then go very different directions. This is a good solution for you. So what starter kit good for? What features do you always put in your themes if you're starting from scratch if you're doing a base theme if you're doing your advanced copy and paste What features think right now what features do you always start with do you always use the same build tooling? Are you always doing the same sass setup the same post CSS setup Babel webpack any of those? Do you bring in the same libraries? Do you have some upstream third-party dependency that you always depend on? Do you have a design system that you need to pull in and inherit from are you always using the same regions? Are you always doing the same template customizations? Do you always have the same kind of hooks that you're putting in there if you have those things and that you do in every single theme? You have the beginnings of what would make a good starter kit theme Remember the starter kit isn't what you're going to install at the end of the day for your client It is just your foundation and then you say give me all of that. Let me start from it in a very simple way So how does it work? Well the easiest way you just add starter kit true to your info yaml file if you do that to any theme today It is now a starter kit theme that works There are some problems starter kit was designed Kind of as a a one-use tool that eventually was thought of hey, this could be something the community want to use Optionally, you can also add a new class to your theme called starter kit that implements the starter kit interface This is fully optional, but that starter kit interface then gets to define a post process method Where you can do any customized functionality where you get to tack on your own bits of stuff to the end of the script That's copying over that that theme Once you've done that you run a PHP script on your command line, which is PHP core scripts Drupal generate theme you give it the custom themes machine name and then Optionally some additional flags to give it a human readable name a description a path and then declaring what starter kit It's going to use if you don't provide name It will just give it the human readable name matching the theme name the machine name If you don't give it a description, it just doesn't get one if you don't provide a path It defaults to just themes so if you like to keep your theme separate in custom and contrib You may want to override that the themes custom and if you don't provide a starter kit source It defaults to cores starter kit theme Once it does that it opens up the generate theme command in the Drupal core directory and runs the execute function And so quick show of hands how many front-end developers are in here right now. I apologize Under the hood what's happening that script is going to duplicate It's going to copy recursively the entire file structure of the theme and move it to a temporary directory in that temporary directory is where it makes all of its modifications and then eventually we'll move it back into your Project directory where you've either defined what theme what directory you want it to be in or in the themes directory While it's modifying it the things that happen right now the version of starter kit that's in core right now It renames all of your YAML files libraries YAML info YAML starter kit YAML It's using a regex to find everything that is machine name star YAML It renames your dot theme file It will edit your info YAML file very lightly It doesn't do everything that you would probably expect it to do And it renames all of your hook names because your hook names have to all start with the project name and Then it will also edit the names of your the references to your libraries and all of your twig files So wherever you're calling attached library wherever it finds the source themes machine name It'll put in your new themes machine name and Then it's going to check Does this starter kit theme implement the starter kit class and if it does does it have a post-process method and if it does run that and Then it's all on you whatever you've written in there. That's when your stuff gets to run pretty cool How does this help with technical debt? You may be asking I'm not gonna go super in depth that because the technical debt that you encounter is probably specific to the kind of stuff that you've Been doing but one thing that the starter kit tool does do is it will tag your new theme with the source themes version It's gonna look into that info YAML for the version number and it's going to copy that over if it's a stable number That's all it does it says the source themes machine name colon and then the version number if it's a dev version So if your starter kit is at 1.0.0 dash dev It will detect that dash dev and try Try to find out. What's the commit number of this current source theme? I Tried to make this happen testing out so I can make sure I got a real thing I was unable to get that commit number to ever appear What will most likely happen is you'll get your source machine name unknown version It doesn't even give you the 1.0.0 dash dev unknown version. It just says unknown This is something we could maybe fix down the line So I mentioned we were doing this in Olivero that we started this work. What's that look like? Well, there's currently a merge request open number 29 96 You can go and look at it if you'd like there's a bunch of changes But there's really only two that really matter for anybody in this room. The rest of them are all the test coverage The first one is the absolute you must do add starter kit true to Olivero info YAML Then the second one is adding in that starter kit interface If you look at the number of lines added, this is 241 lines of PHP code and the front-end developers in the room That may not be super comfortable with PHP or going. That's it. I'm out Most of the stuff that we've done in this 241 lines is should be part of whatever the new version of starter kit will be But I want to walk you through just this post-process function post-process is going to call with a couple of parameters you get your working directory. That's just a Reference to it's either a reference or a string to wherever that temporary directory is where we're currently modifying the theme we get a string of the machine name and the Theme name that's your new themes Should have looked at this before it started, but yes, I think that's the the source It's either the source themes machine name theme name human readable name or it's the the new themes machine name theme name I apologize for the ambiguity on that Secondly, we're going to an update theme info Which is just a function where I've pulled out some stuff to move it elsewhere so that we can kind of just follow What's this post-process doing the theme info is going to fix a Update theme info function here is fixing a couple of issues with starter starter kit right now It does not unset starter kit So if you make a new theme using the starter kit tool It's going to duplicate that starter kit true key into your new themes info yaml That may or may not be a problem, but it does mean that every starter kit theme you make is also itself a starter kit theme We also unset the Package key because if we're duplicating olivero the package is core and your new custom theme is not a core theme So we want to make sure we pull that out and then we're also changing the version to 1.0.0 Because by default it's going to inherit whatever that is for olivero It is the all caps string version which is just inheriting cores version number You probably don't want your theme to have its version number change when cores does The next one we do is a remove deleteable files function And earlier we've defined it an array of Pads that we want to delete Olivero has a test directory We don't need to copy that over for people that want to duplicate olivero So we mark that as deleteable and we let the the functionality here delete it We also have a source starter kit PHP file, which is where we've implemented that starter kit interface class We delete that so that new themes made from olivero as a starter kit aren't automatically themselves starter kits We also get rid of olivero's post update PHP and we get rid of olivero's read me because we have a different file That we want to make the read me once a new file or a new theme has been made from olivero Then we do some find and replace Gets a little tricky in there But because what we're doing is we're taking olivero as the machine name all lowercase And olivero as the human readable name title case and That's not always the only two places you see that because what you will see is the machine name moved from snake case with underscores separating your words into Pascal case if it's ever in a class So we need to be very careful as we start renaming things So we are replacing the Pascal case machine name in classes We're replacing the snake case machine name everywhere and we're replacing the title case theme name everywhere The last thing that we do this will always have to be in olivero is getting the build files because what it's gonna Do is go and grab course package json and get the ability for you to edit the CSS or the post CSS files And rebuild those for your new theme So this is what we're doing in olivero with the currently existing starter kit And as I mentioned in Pittsburgh This issue was opened up that it's just too difficult We should not be expecting all front-end developers to be PHP experts having to write object-oriented PHP so that they can just make a new theme and Override and do some custom functionality. So this popped up if you're interested in this issue the Node ID is in the bottom three three six four eight eight five So what does a reimagined starter kit look like? Well, like most of the configuration we do in themes I think a YAML file is probably a pretty good idea This is what the starter kit themes YAML would look like we just make a new starter kit theme starter kit YAML And we let it handle some of those things that you would expect to see in a proper starter kit script If you want to delete stuff you can just list some pads there Right now. We're trying to make it so that you could even do globs in those pads if you wanted to So if you know you want to delete all of my PHP in this one folder, but leave the folder you should be able to manage that So a list of files to delete The no edit key is going to be files that you don't want us to find and replace strings in the contents of No rename is going to be the files. You don't want us to do find and replace in the titles of the files And then the info is going to be a way to override any info that you have in your source theme So Olivero for example declares a bunch of regions if we for whatever reason said people don't want the sidebar region ever That it's something that people do us never will want. It's only a core thing We could technically get rid of that from our regions and overwrite a new set of regions for Olivero We're not going to do that just as an example But here we've got hidden null because the starter kit theme if you open core is always there But it's never something you can select So hidden is set to true there so that you can't see it on the appearance Page we're going to unset that so when you make a new theme you don't go wondering why it hasn't appeared yet Starter kit we remove and then we set the version instead of being the core version to be 1.0.0 What would that look like for Olivero this next screenshot is faked in dev tools so ignore the fact that there are four line number twos But we would be deleting the test folder the starter kit php Olivero post updates the read me and the the starter kit yaml file We would assume that people Duplicating Olivero don't want to further duplicate it later if you do great But now you know how to do it by yourself and you can add that back in No edit. We don't want people to edit the Starter kit markdown file because it's got the contents of what we're going to put into the read me We don't have anything we don't want to rename and then we'll unset package unset starter kit and set version to 1.0.0 So am I doing on time Dave? What time are we done in here? Oh, wow. Well, there's still some stuff that needs work Currently we are blocked on two things dependency evaluations for symphony finder and file system Both of those tools are currently in the core dev package But people that are building themes and that may want to build starter kits We'll need those tools to exist in core for them And we don't want to make people have to require core dev and that also means they don't come in the tar ball installations This is something that at least in my opinion. I think we need to move into core So we need finder and file system So we currently have blocks on that those as being core dependencies We'll likely need edits to tests both for starter kit as well as for Olivero once that's in there And then the next steps would be to update contrib themes to be using the starter kit To let them implement their own copy and paste functionality and at long last have a custom. I'm sorry a standard Way for contrib themes to do starter kit stuff So it's a very quick presentation There's not a ton of super in-depth stuff But if you would like to join us for contrib opportunities, there is mentored contribution tomorrow If you are a first-timer you have missed all of the first-time contributor workshops But you are still welcome to attend the mentored contribution and then general contrib is ongoing all week long So thank you I do appreciate feedback So if you take a moment to fill out the general conference survey as well as the feedback for This talk that would be great and at this time I'd be happy to take all of your questions If you have a question raise your hand and I've got a microphone. I'll get started in the back here If anyone has a question We got one in the middle here. Yep. Thank you for your presentation Um What's with uh configuration? um if I um Copy this to my own theme it has to be renamed and does um The theme generator provide this functionality at this time No, the only thing it's going to do is rename your info files your dot theme file and the contents of those as well as library references It's a very basic very, you know, uh rudimentary script right now Once we get the updates in though, it's going to do that find and replace We're using the symphony finder component to look for what are all of the files that have machine name in them that have Theme name in them and then rename those And then it's also going to look into all the file contents find all the files that have machine name in them And so as long as your config is properly namespaced It should get updated and then be also properly namespaced for the new theme Hi. Thank you. Uh, what if I make Backfix in my Base theme my starter key theme and I wanted to propagate to all the generated themes Can I? You can so that's that's the point of the version numbering in the In the generator key of the new theme it will say What was the current state of the source theme when this one was created? But there's no connection between them. There's no way to Automatically propagate that at least using the starter kit tool itself. You could potentially build something if you wanted to But right now the idea is that You know the state of the starter kit when you started so if you know that there was a bug A really nasty security bug for whatever reason in your starter kit That you need to fix you can look in all of your starter kit themes and say oh Well, this one was created before this fix this one this one this one And so you know which themes at least you need to go double check on Dave up here in the front. We've got two So by the issue of security bugs if there is now a security bug in olivero, for example, and my Copied version is behind this would Drupal also detect this and maybe show me a notice that my copied version might have a security bug in there That's a great idea and would be a very welcome Issue ticket. I believe it would be the kind of thing to really I'm trying to think of the name of the project that the new like core announcements thing It would be a great use for that to say, you know To be able to scan your code base and detect themes that were generated with olivero before a certain version number And say hey, there was a security update in olivero You should check make sure this isn't existing in your own code base as of right now That's not a thing that exists, but it would be a very good idea. I like that. Hey, hi Great work. Thank you for all the work you've put into it I had a minor issue Regarding using starter kit. The problem was that In radix, I tried to create a let's say radix a starter kit I wanted to use that as the starting point, you know Because radix is a base theme it inherits and creates the whole sub theme general sub theme The problem was when you are trying to create a sub theme you pass a flag called sub theme and then name of your sub theme So for instance dash dash sub theme olivero, for instance, you know, so or any other Theme that you have as you want to use as the source So the problem was that My own radix Sub theme Was inside another theme. So I needed to pass a path instead of a theme name You've got your starter kit nested inside of radix, you know, so that's yeah So that's that's a common pattern right now for the themes that are implementing their own version of starter kit um it Correct me if i'm wrong, but that nested version probably has In some way edited the dot info yaml file title. Yeah, so Drupal doesn't actually know about that theme because it doesn't scan for that info file pattern, whatever it is And so you can't use that Little piece as its own starter kit. You could in theory Go into the post process and just wipe everything away and bring in everything from your new directory But at that point you're kind of fighting against the tool Yeah, what I did is like a cheat, you know, so I have a custom drosh comments, you know that copies the starter kit Out inside the themes directory So it's available there and then run the script right and then remove the starter kit from there So it seems a step extra But we could have just passed a path or at least have the possibility or an option to Flag a path instead of just a machine name Yes, um I don't know I would be willing to hear if people other people have this same kind of use case where you want to have A theme nested inside the other one and use that if that's a common use case That's something that we can certainly open a ticket on and work on in core But I don't I don't think that's a pattern that we want to continue. I don't have a great reason for it It just feels icky to me at the moment Uh, the reason is that some themes are based themes. So the the starter kit in that case The sub theme that will be generated needs to inherit it. You know inherit a lot of uh tweak templates You know any other right libraries and all that so you don't want to completely copy paste an exact Theme the way that oliver or does I guess you are copying exactly what is so rated radix is designed to be a base theme Why would you not want to copy over everything from radix? What's the the purpose for a separate thing inside it? This is an opinionated theme of course at the end of the day But the reason is that you just want to maybe Copy or edit a block out of a tweak not the whole thing. So you don't want to Bring all the materials over, you know and have a lot of files that are never being used. For instance, we have a Forum tweak files, but your website never has a forum right, but do you really need a forum that tweak file in your theme The the best way in my opinion to move forward on that would just be to Put the starter kit true key into the radix theme get rid of the starter kit directory And let people who are using it as the source theme decide what they do and don't want to keep Because the existence of a forums twig file Even if you don't use forums, it doesn't matter, right? There's no there's no reason that you shouldn't have a twig file that's never used besides the fact that it's just there taking up space Yeah, that's really I disagree to be honest, you know, so I rather have my active theme clean, you know and just borrow what I need Right, but if people are wanting to Use radix as a starter kit Is it up to you to decide What things they do and don't need I mean they can copy over everything in the first place Which is what the starter kit tool that's neonated theme, of course, you know, otherwise, uh, I'm not saying this is the standard way going forward, so Right if they want to use radix as a base theme There's nothing that precludes them from also doing that you can have A theme be both a base theme and a starter kit source theme It could be either and I would say that it is the job of the theme developer for radix or uik or whatever to Make it fit as many use cases as it can and then when people want to use it as a source theme Then they can clean it up and whatever best suits them Yeah, okay. Thanks. Yeah Hi, so I understand that you don't want your um team to Have like changes when your base team changes suddenly But what if you're like depending on the bootstrap theme And you want to start, you know upgrading the bootstrap version I don't really Know how this works when you use that as a likely start So if your if your source theme has dependencies If your source theme has dependencies declared Those dependencies will just be copied over When we duplicate the either the info file or in the libraries.yml file So if there are dependencies that will continue to exist Yeah Okay, so then your created theme Just depends on like the dependencies of the starter kit theme and then your bootstrap would be updated Correct. Okay. Yeah, so if if for example, you wanted to create a starter kit theme for your own use That is using bootstrap as a base theme And then you can use the sub theme of bootstrap as a starter kit And then your next theme will also use bootstrap as its own base theme It's just a one-to-one copy and paste. The only thing we're changing is all the references to the source themes human readable name and theme name Okay, thanks So Andy if people have more questions they want to ask where would they go? If you have more questions about starter kit The issue queue in core there is a starter kit component. You can find me on slack. I don't think there's a starter kit Channel we could make one if there's a ton of discussion around this Otherwise, I would probably say The front end channel Is probably the best case so, yeah And will you be at the contribution room? I will be in the general contribution room. Yes. If this gets unblocked I'll be working on this otherwise. I'll be working on project browser, but if you have questions you can find me there Thanks for coming. Thank you