Creating a theme with the Theme Generator

[Music] there are a lot of great tools in the drupal community that make drupal development easier like composer and drush and drupal console and for the theming world the theme generator is what helps us get started on creating a theme more quickly so just to clear up some confusion the theme generator does not provide a fully styled theme and it is not a front-end framework like bootstrap or foundation instead it creates an environment with all the essential tools needed for a modern and best practice theming this will alleviate some of the tedious setup when creating a new theme so more time and energy can be spent on creating new features instead of setup these are some of the frontend tools we use at mediacurrent we like to use component based theming we like pattern lab we love sas image compression linting and what these tools do is really helps with consistency among projects since we've been using the theme generator at mediacurrent with new projects it's easy to jump in and know where to find everything and what commands to run so let's get started before following along be sure to check the documentation for the latest commands just to make sure there's been no updates since the time of this recording and the time that you're watching it the technology world moves very quickly and before you know it commands will change or dependencies will change so just before you proceed make sure you check out the theme generator documentation on github so i'm going to create a custom directory and that's not required but it's going to help me organize my custom themes inside of that custom directory i'm going to create a new directory for my theme and i'm going to call it nitflex theme and that's just to play on the netflix name it's just for pretend all right so to use a theme generator we are going to use the command line i like to use the terminal that's built into vs code but you can use your favorite command line interface so if you haven't used the command line yet it's worth learning some basic commands just to get started because modern front-end development typically requires at least some basic command line usage so i'm going to use the command line to navigate to my new theme directory so i can run a theme generator so i'm going to do ls dash al and that will list all the files in my path and format them nicely so i can find my themes folder and now that i found my themes folder i'm going to cd to change directory to the theme folder and then i'm going to see what's in here and then cd to my theme folder all right so now that we're in our theme directory we can go ahead and start using the theme generator so before i do that i'm going to run this command that will install the latest stable version of node and using nbm to create an nbmrc file so this isn't required but it helps us again with being consistent among projects so again we don't have to set this up manually each time we move to another project okay so now we can actually run the theme generator and you will be taken through a series of questions to set up your theme so the first thing is a human readable name which just what do you want to call your theme the next thing is the machine name which should be the same thing that you name that theme folder a description of your theme and don't worry you can change any of these when you're done later if you decide to and we're going to pick our base theme so here we only see two options they're both from drupal core i'm going to pick stable but again you can change this later if you want and maybe read up on which theme would be best for you as a starter theme okay and then should we ignore our compiled files i am going to say yes the short version of why i like to choose yes here is that it keeps my git repository clean of my compiled files so we're not committing things like footer.css and footer css this also makes it easier for my team to review my code the theme generator readme has more information on that so if if you're not sure maybe read up on that if not go ahead and choose no our next question is if we want to generate any starter components and just for fun i'm going to choose all of them and i see this warning here about slick but i'm going to skip that for now and worry about that if i do decide to actually use the carousel okay so let's check this out if you watched the last video on how to create a theme without the theme generator you saw we added most of these files manually now we have our info files and our library file generated at a really good starting point now we can use commands like npm run build and npm run watch to compile our theme with sas and one of the coolest features is now we have pattern lab and can use a component based workflow out of the box we are going to learn a lot of great stuff about sas npm and pattern lab more throughout the series but for now this shows you how to get a theme started using the theme generator okay and the very last thing we're going to do for now is go ahead and enable our theme in drupal so let's go back to our drupal site go to appearance and our new theme should be at the bottom so let's install and set as default all right let's go back to our site and since the theme is not styled yet this is exactly what i want to see if you still see the default bartik theme you may need to clear your caches so let's go to configuration performance and while we're in here let's turn off aggregation of css and javascript files i'm only going to turn this off for development so i don't have to clear my caches so much but we do want this on a production site alright so let's clear our caches and head back to their drupal site now i have the tools to get started with theming next we just need to plan out our theme

Channel: Mediacurrent

Views: 1,628

Rating: 5 out of 5

Keywords: Drupal Theming

Id: 9FWYslLnfH8

Length: 6min 58sec (418 seconds)

Published: Wed Sep 30 2020