Hugo Compile SCSS and SASS to CSS Full Course

1. Introduction: Hi, my name is Sean and welcome to my compiling CSS and S with Hugo course. Before completing this course, it's assumed you've got some basic knowledge on using Hugo if you need any help. There's a link in the resources section below to my getting started with Hugo introduction course. In this course, I'm using Bootstrap five as a CSS framework. After completing this course, you could apply the skills learned to any other CSS framework or your own custom code project. One focuses on the following topics, NPM packages, compiling CSS and S to CSS. Creating browser prefixes with autoprefixer, removing unused CSS classes with purged CSS. Using bootstrap browser list file to replicate their own browser support. Selectively importing bootstrap source to minimize the size of the file. Customizing bootstrap via their variables. And creating custom CSS utility classes with bootstraps utility API. In project two, you get to implement the skills you've learned in project one, along with your own creativity. You'll be modifying a website template that I've provided. I'll be there to help you along the way. Just post a link to your work in the project section. I'm constantly updating this course as Hugo and Bootstrap evolve. You can be sure you're getting the most up to date information. I'm so glad you've chosen to take my course. I can't wait to see a progress along the way. 2. Project 1: Welcome to project one. Project one is a skill based project and then the skills you've learning, project one will be used creatively in project two. Before we get started with project one, let's look at the prerequisites of this course. You'll need a working knowledge of Hugo, just the basics. If you have any difficulties, you can refer to my Hugo and Bootstrap introduction course. There's a link in the resources section. You'll need to have Hugo installed locally. You can learn this in my introduction course. You'll also need to have nos installed, and that includes NPM, that's an integral part of this course. Again, you can refer to the intro course. You need to have visual studio code or a code editor which you are familiar with, installed. I'll be teaching you the course via visual studio code, but you are welcome to use your own. If you need any help installing it, just click on the link to my introduction course and I'll show you how to install everything that you ever need for Hugo. Project one is a skills based project and be working on all of these skills that are listed here and I talked about in the introduction, it's really important when you finish project one or if you have any difficulties along the way, you upload a copy of your work in the project section. The way to do that is you need to use a cloud service, such as Dropbox Cloud or One Drive, or Google Drive or any other Cloud service to provide a link to your work. I can then never look at your work and provide feedback if you've got any difficulties along the way. I'll see you in the next class. 3. Download template: This lesson, you can download the zip file for less than three in the resources section. I'll then go through a quick unpacking of the template and I'll explain every section. If you've completed my intro to Hugo and Bootstrap course, you'll understand the template completely. I'm providing this explanation for those who haven't done my introduction course or haven't done it for some time. If you've got any questions, make sure you check out my introduction to Hugo course. I'll leave a link to that in the resources section, under lesson three. Let's have a quick look at the template we're going to be working with. You can find these files in the resources section. For lesson three, you need to download the zip folder and then extract it. Once you've extracted it, you'll have what I've got here. If you write click, you can open with VS code. Then once we're in VS code, if we open up a new terminal and type in Hugo server, we can then have a look at the template, you can control click on that link. If we inspect the page, look inside the head, we can see that the CSS file is coming off a CDN content delivery network. And it's downloading the Bootstrap CSS file that hasn't been modified at all, it's just using all the Bootstrap defaults. Then if we scroll down to the bottom of the body, you'll see that the JS file, again, it's the full JS file and it's coming from the CDN. Now that we're in VS code, I'll give you a quick overview of how the template works. If you do have any trouble with any of these concepts, please have a look at my Hugo introduction course. You'll see the link to that down in the resources section. Archetypes is for setting up a new page. Whenever you run Hugo new Hugo will use the data in archetypes to generate a new page. The content for your pages is stored in the content folder. There is two types of index Dodd being marked down, index dot D with an underscore is for a list page. In this case this index dot MDs for the home page. But if you go into the products folder, we've got a bunch of child pages here. Our underscore index dot MD is a list template which lists all of these products. And I'll show you what list templates are in a second. Whereas this index dot MDs is the normal single page. We're not using data in this project. If you were to display information pulled out of a data file, you'd store it in here. Layouts here are defaults, base of is for the entire page. All the different HTML components, we've got partials and blocks. Blocks are controlled from at a page level. This is our block here, the main block for our single page. Partials are pulled in from the partials folder. If we're using an underscore index dot d, we'll be using a list template. If it's a standard index dot d or any other file, we'll be using our single template. Here are all our partials. In this course, we'll be working on the script footer. We'll be overriding the CDN Javascript file. We'll also, in the head, we'll be overriding the CSS CDN Bootstrap file with our own. We've got a results folder which is generated by Hugo. You don't have to worry about that. There is a static folder, We've got a CSS file there, and we've got a JS file. In this course will be getting rid of this CSS file and putting it into an Assets folder so we can build it through CSS or SS. So, if you have any questions about what any of that does, please have a look at my Hugo introductory course, otherwise we'll get started. 4. Intro to NPM and Node.js: In this lesson, we're initializing your Hugo project as an NPM project, thus creating a package Json file. We're then going to install Bootstrap as an NPM dependency. That is, we'll be downloading Bootstrap from the NPM registry, installing it into the node modules folder. And then in later lesson, we'll be accessing Bootstrap source files. We're going to be setting up our project so it's ready to accept NPM packages. You must have Nots installed in the NPM Package Manager. You can install both of those at once just by installing notes. If you haven't already done that, it's really important. You see my Hugo introduction course, and the first Leslie is all about downloading all of the software packages that you need, be ready to go. What you have to do is start a new terminal and run the command NPM. Now if this doesn't work, it's more than likely because you haven't got NPM installed, go back to that other course and follow those instructions. When you run this, the first thing it does is it asks you for a name for the package. Now if you're going to be publishing to NPM, you need to put an at sign at the start and the name of your NPM user name. But we're not going to be publishing to NPM, we're just using this to download packages. You can probably accept the default if you want, which if you've already saved your project to get it will probably pull that in for you. Otherwise you can just give it a name such as Hugo SCSS would do the trick or course Hugo SCSS. Then I ask you for a version. Normally I will start with 0.0 0.1 But that doesn't really matter at this stage unless you're using some version management tool description, again, we're not publishing the NPM. It isn't overly important, but you can always provide a description if you wish. Entry point doesn't really apply to what we're doing here because it's not a true NPM package. We don't need a test command. Again, if you've got a Git repository set up, you will pull that in. Again, it's not that important because we're not publishing keywords. Doesn't really matter. Author, you can set it up if you wish and license. Now I've got that package JSON package Jason. If you look in there, you'll see all the data that you just put in. What this is for is for managing packages. The first package we're going to install is Bootstrap. The way you do that, you write NPM and then install Bootstrap. Before I enter, I'll just show you how this works by looking it up on the NPM registry. I've gone to pms.com I'm going to search for Bootstrap. We've got their Bootstrap version five. We've got a command here for installing this particular NPM package, which is quite handy if you're a beginner. They've also linked to their Github repository, which was where all this code is pulled from. Then we've got to link to their homepage seeking access to documentations. Got some interesting stats. You'll see they've got 3.5 million downloads every week. That lets you know that it is actually a very popular package and it's one that's currently being downloaded. You know, it hasn't gone stale. We're in version 5.1 0.3 version five is definitely what you want. You can see the last published was a month ago. At least you know that it's being currently developed and it hasn't gone stale. We've got some basic docs here, but I do recommend you use a link to their website. We hit Enter and it's going to download from the NPM registry. And it's installed. Let's have a look at our package Json file again, We'll close the terminal, you'll see we've got a dependency there of Bootstrap. If we look over in our project, under node modules, see we've not only installed bootstrap, but also there's a folder at poperjS. What that is, it's actually a peer dependency of Bootstrap. It's an additional library into Javascript library that Bootstrap Javascript depends on. We haven't just installed Bootstrap, we've also installed some dependencies at the same time, if we go into Bootstraps package Json and have a look through there, you'll see there's a peer dependency of Pops, and that's why that's installed automatically. For us, that's only if you've got node JS version seven or higher, which is probably the case. There's one last thing you'll have to do, that's if you're using Git to save the progress, you'll have to go into your Git and ignore the node modules fold because currently Git wants to commit 472 files there. The files have just been downloaded into node modules. You don't want to upload them to your Git repository and I'll show you why in a second. We'll go into our Git ignore. We'll add a new line node, underscore modules. Finish it with the slash, save that. You'll see it's just gone down to the three files that I'm currently working on. But I'm not going to include git in this particular course just to keep things simple. Now if you were to save this project to get the contents of the node modules folder would not be saved to your Get or Github repository. Just to show you how that works, say we were to delete the node modules folder and that's to emulate downloading this project from Get. I'll show you how we can then install everything with one command. I've limited the node modules folder, so you've just downloaded this project off your get account. All you have to do is run NPM install. It then looks to your package dot json file and it installs everything in there in our package dot json file as we just discussed. We've got Bootstrap. As you can see, it's installed two packages, and that's Bootstrap and pops. That's why you do not commit the contents of this node modules folder to get because it will fill up your get account really quick. We have to ignore that folder and then if you've downloaded your project of Get, you've just got to run NPM install and you're good to go. There we have it. We've installed Bootstrap as a NPM dependency. We're ready to get started. 5. Set up NPM scripts: In this lesson, we'll be setting up some NPM commands. The reason we're doing this is so we can quickly run different hugo commands. We're going to create some complex hugo commands. You're probably not going to want to type into the command line. If you go into your package on file, you'll see we have a test script. Now what we're going to do to start with is we're going to create a dev script. You must put a comma after that. Then we're going to create a build script. We'll walk on those two first and then we'll add a few more. In terms of dev, you know you have to run Hugo server in order to run the automatic reloading server. There's a few extra things we can add to that. The first one is GC and that's for garbage collection. When you close that server, it will remove any unused files. The next one we're going to do is disable fast render. Actually put capitals at the start of every word except for the first one. That means every time you save a file, your entire site is reloaded, so you guaranteed to have the most up to date version of your site. The next thing we'll do is the build script. This time we're just going to run the Hugo command. We're going to add GC for garbage collection. This time we're going to also clean the folder that we're using for building. It's going to be built to a public folder. We want to make sure that's completely empty so there are no stale files in there from previous versions of the website. We'll run clean destination D with just a capital D Only the next thing we'll do is unify to try and shrink that HTML file minify. We'll save that and we'll check them out. You'll see at the bottom if using VS code there's a section called NPM scripts. And this is really handy. These two scripts that we've just written and now available here, if you hold your mouse over them, you'll be able to see the actual command that you've written and they line up. We'll try the dev want to start with play. It's running it in the terminal, you can see it's built the files, it hasn't done any cleaning with garbage collection. It gives you the address. You can click that to open up in the browser. Now that we're on the website, we'll write and click, and we'll view the source and you'll see how there's lots of white space in between all the lines. Let's go back to VS code and we'll try and run the production script. The first thing we'll do is we'll either hit control C or hit the bin. Then we'll build. This isn't going to run a server, it's just going to write the files to disk. We'll then go into the public folder. We'll check out our index, Html. You'll see how he goes, remove all that white space because they're running the minify command. There's one more thing you have to do and you can see gets, trying to pull in all these files that we've just created. We'll have to ignore those files if you're using Git for version management. And to back up your work, you just got to add public. And you see it's gone down from 29 down to two. We're only pushing the two files we're working on to get that. If you're using you don't have to do for this course, that's really important. I'll add some more scripts to our package, Jason. The next one we'll add is render that as Hugo runs, it will render all of those files to the disc so that we can inspect them if we need to, we'll copy and paste the contents of the dev script. The one important thing we have to add that a render to disc because we're working off the disk. We also need to make sure we clean the destination directory before that happens. Must put a comma after your second command. Now for render, we'll make that render dev because we're running as a development server. We'll then create one of these but for production, so we can test out what the website will be like in production. But with a development server, we'll put a render dev and we'll change this one to Render Prod for production. We going to make a couple of changes. The first one we have to do is we've got to tell it that it's going to be a production server. We're going to do environment space production that will mimic what your website will be like when you actually run the build. For example, you might have a few scripts that only run in production. Or some things that might be unified, for example, with Javascript or SCSS. The next thing you have to add is Unify. That's only for your HTML. You also have to be able to run a dev server, but for files which have dates in the future. And also for files or pages which are marked as drafts. We'll copy and paste our dev script and paste it below, we'll call that dev colon drafts. Then we're going to add two options. The first one will be build future capital and build drafts. I don't like using these two options for production because I think it's a bit misleading because that's not what's going to happen on the server. But I do like to use it for the Dev server. There's one last command will you put in? And that's for PM, is really tricky to use when it comes to updating your packages. But there is a program you can install that's kind of graphical and it makes it really easy. Open new terminal and run NPM install NPM or hyphen check, it'll tell you it's installed eight packages and that's because they're dependencies of NPM check. If you have look in your non modules folder, you'll see it's starting to get a bit full. But the main one we actually installed was NPM check. But there's many others that dependencies of NPM check. Then we'll go a and a new line and we PM check you could write update but that might be misleading. It's actually updating with NPM. I just call it NPM check. I know exactly what I'm doing. Put in a column and then some inverted commas. And the command we're going to run, NPM check, you have to run, that's for updating, otherwise you won't get that option when you click on it. We can test that out by clicking on PM check, It's telling us that Irving is up to date. And that's because we just installed Bootstrap. But if you do have packages out of date, it will give you a list of packages that can be updated. We'll run a quick test of the render command. We'll do render dev to start with, you'll see it's building Hugo, but it's also rendering to disk. If we go up into our public folder, they're all the files that are being used on the local host website. If we look at our index HL, you'll see lots of space. I'll close that. I'll do render production. If you look really carefully, you'll see environment's production instead of development. And here's all our files here, but they're also visible on the library load server. If we open up index dot HTML, you'll see that there is not all, but most of the white space has been removed to keep the file size down. So let's sit for this lesson. I'll see you in the next one. 6. Add hugo as dependency: In this lesson we're going to add some more NPM packages. And we're doing that so we can add hugo as an NPM dependency. That will mean whoever works on the project or wherever you work on the project, whether it's on a different computer, you'll be using the same version of Hugo. It will work on any platform, whether it's Linux, Mac, or Windows. Hugo will download in the format necessary for that platform. We're going to install two NPM packages. Open new terminal. We'll type in NPM install. The first one is Hugo installer. Second one is by the same author and it's in make sure you get all these names spot on because if you miss spell them, you could download something which you don't want. Let's have a quick look at our package Json file. You'll see under dependencies, we now have each pin and Hugo install. The easiest way to get Hugo installer to work is go up to your dependency section. Put a after it on a new line, put in a new section called other dependencies makes you use a capital D for dependencies. We then put a colon and some curly braces on a new line, Inverted commas typing Hugo, then a colon. Then you have to provide the latest version. You go to type it exactly as Hugo has it on their website. I'm going to run a search for Hugo version. Then I'll go to the Github page. You see the current version, when this lesson has been recorded is 0.89 0.4 We'll type that in exactly without the V butts. 0.89 0.4 You don't need a after that line or after the braces because they're the last in their respective sections. Then we'll go to our script. We'll put a final script in here called post install. Now post install, your second last script, post install will run. After NPM install has run, we'll put a colon in. And then to invented commas. And we're going to run Hugo installer, which is what we just installed. For version we will use other dependencies hugo. And that will refer down to this section we've just created. So you can update hugo down here. Then we will tell it to install the extended version that installs the fold on Linux and Mac board on Windows. It doesn't. It's really important you need that for what we're going to go through in this lesson with CSS and as building. We have to tell Hugo installer where we want files to go that have downloaded the Hugo executable file. We'll specify destination, then we're going to installed in node underscore modules. In Hugo you should probably be telling get not to upload the node modules folder. You'll get ignore file, you don't have to worry about your hugo file being uploaded. We'll save that. If we run the command NPM install, hugo will be and it will depend on your system and it will be saved into the node modules folder. Let's go ahead and do that. Run NPM install, it's going through and checking, it's now downloading the hugo binary on Windows, it's going to be a C file. Let's go and have a look. Now, in our node modules folder, we're looking for node modules. Hugo we've got in and then we've got Hugo. And you'll see there we've got Hugo Doc. If you were running Macolinux, you'd have an executable file to suit your system. That's great. But our commands here are all about hugo server or hugo. They're not pointing to that file. And we're trying to set up our scripts so the cross platform or platform independent, We have to add some extra to that we'll do. I'm going to click before hugo. Each time I'm going to hold down the Alt button, that means I can edit them all at the same time. I'm going to run Exec bin. Exec bin, which is another package that we just downloaded. I'm going to tell exec bin to look inside node modules Shinhugo. Then we need a show exact bin is cross platform, it's platform independent. It will run the file hugo file, depending on whatever system you're on. Let's save that and run one of our scripts down here. And give it a go. So it looks like it's working really well. It's using the Hugo extended version which we requested was downloaded. You can see exec bins running the Hugo executable out of known modules. Hugo, Hugo. Or if you're on Macolinux won't be, which is great. So that's it for this lesson. I'll see in the next lesson where we start building with CSS. And as 7. Import and compile bootstrap styles: In this lesson, we're going to import the bootstrap CSS source files from the bootstrap NPN package. Then we're going to compile them to CSS so they can be used in a browser. What we're going to be doing, if you look in your layout folder, in the partials and the head partial, you'll see that the Bootstrap CSS is being pulled from a CDN server or content delivery network. It's downloading Bootstrap version 5.1 0.3 That's a fault CSS file with all the Bootstrap defaults in there. Your primary color is going to be blue, Your secondary color is going to be gray. Nothing's been customized. It includes everything. That's quite a large file. What we're going to do is we're going to pull in the Bootstrap CSS from the NPM package. And then in a further lesson, we're going to be customizing it and also removing parts, We don't need to do this. What we'll do is we'll go back into the root of the project. We'll make a new folder called Assets. This is a folder that Hugo works with. Then inside they will make a folder called CSS. They will make a file in there called Mass. What we now have to do is import the Bootstrap CSS from the MPM package. We're going to run import and then put a inverted comer in. We're looking for bootstraps. Bootstraps. That's going to be relative to the node modules folder. Make sure you put a cold at the end. We'll look for that. We'll go into the Nodemodules folder, and then we'll go down to Bootstrap. Then we're looking into the CSS. This is a source, has compiled CSS which we don't want. We want the source. We're going into the SCSS folder and you'll see at the bottom we have a bootstrap CSS file. That's what we're going to be pulling in from inside that file. All of these files are imported that parts ready to go. Now we've got to set up Hugo so that it uses liss to run this SCSS file. Currently, nothing's actually going to happen with this file, it's just sitting there going back into the head layouts, Partials, head, we'll comment out this line control KC to comment it out. We'll leave it there, but just in case we need it for testing. Later on we're going to try to do this as simple as possible. To start with put in two K braces and we'll create a new variable called CSS, because we're declaring it, we have to use colon enter. We're going to run resources, get resources, get grabs a resource. The path we're going to provide is relative to the assets folder. We go back to our Assets folder, you'll see it's assets, SS, SS, I'll type that in mass. That's how we access the file. The next thing we do is we have to actually compile what's in that file. Because the browser, I'll just say this, the browser doesn't know what to do with that. Plus, those files exist in the NPM folder and the browser won't be able to access them. Hugo will not be providing those files. We're going to pull them in and process them. We need to do, put it in a pipe, which is the key above. Enter the backslash, shift backslash to get a pipe. And we're going to run two CSS. It's capital CSS that will work on its own without any options. But it doesn't know where to find this bootstrap, folded boto fold. It doesn't know that it needs to look in the node modules folder. The configuration is going to be provided as an object. But in Go and here go, that's called a dict or dictionary. We put in some brackets, rewrite then our first configuration item and our first in this report in time will be include paths. When you specify the include paths, they need to be provided an array. The reason that being is because you can provide multiple include paths. An array is the perfect way to do that. Open and close our brackets and we type in Slice, in Go and in Hugo Slice is what you use for arrays, we're going to be providing one item. So it is a little bit strange for an array, but you can add more if need be. We're going to provide node underscore modules as the path that needs to be included. Then what we have to do is provide a link for the browser. If we type in a link, colon provides a style link, we'll get rid of that file. We'll put in our curly braces. We will refer to the CSS variable that we just created, L permalink with capital R and capital. Then you've got to close your le braces. Hugo will provide a link to this file that has been generated via this variable Rel permalink, or relative permalink means it won't include the domain, part of the domain with that link. Let's save that and check it out. Then we'll control click the link and we'll check it in the browser. We'll right click and inspect. We'll go to the head. First you'll see there's a link to Cssmin. That's this bootstrap file. That's actually, this file converted into a CSS file through this variable. If we go to the Sources tab and then open up the SCSS folder, we can view the contents of the file that has just been generated. You'll see it's pretty much exactly the same as the Bootstrap CSS that you can get off the CDN or you can even download off the Bootstrap website. There are a lot of advantages. We can modify all of this information, plus a lot more through variables. We can also remove parts that we don't want. We can even go as far as removing unused parts of the file compared to the tags that we've requested in the HTML of our website. If you can get the Bootstrap CSS to show up in the SCSS folder in your main SS, you're ready to move on to the next lesson. 8. Add development and production parameters: In the last lesson, we set up the SCSS compiling. Now we need to create some parameters for both production and development environments so that the CSS compiler behaves differently whether we're using a development server or we're building hugo Four production. In the resource section, you'll see a link to this page. It's the Hugo pipes, CSS and page the number of options that we can pass when we're compiling. First I'm going look at transpiler. By default Hugo currently uses Lipsas. We're going to set that up so that it forces Hugo to use Lipsas. Just in case Hugo does get upgraded to dartsas. In the future, we won't have any breaking changes. We're going to look at output style. The default is nested, which is great for when we're developing. But we also want it to be compressed if it's for production to reduce size. We're going to look at enabling sauce maps for development. We've already looked at includes parts for node modules. Let's get to it. If you go into the layouts folder and then the partials folder and he Html highlight everything you've provided to two CSS. All the options you've provided which is currently just the include pass option, highlight that and cut it with control X or command X. Instead of that, we'll provide a variable we'll call that opts for options to CSS. Let's now declare that variable and create the options we'll put into curly braces. We'll type in opt to CSS because we're declaring it. We have to use coal and inter. We'll then create a dictionary which is an object for our options. First one we'll do is transpiler. The transpiler we're going to use is Lisa. The reason we're locking that in is there is going to be some point in the future where Hugo will upgrade to dart As and we don't want any breaking changes. We'll then declare output style by default. Output style is nested, which is great for development, but we want to use compressed for production. We're currently looking at our production options. Then we've got our final one, include Pass, which you can just paste in if you want. That's going to be a slice and we've got node modules. All right, so that's our production values. You can then copy that and make a new line. And we're going to use an if statement if that's if equals O environment with a capital E development. If we're in the development environment, we put an tag in inside here. We're going to tab in and then paste what we've just written, but you have to remove that column. Super important. We're now going to remove output style compressed because we want to use the default of nested. But we're going to enable source maps, so such as singular, there's no source at the end of it, it's just source with an on the ES. Then map with capital and capital. We're going to use the option of true. You don't need to use inverted commas around true because it is a Boolen. It's either true or false, No inverted commas required. Let's save that and let's give it a go. I'll start with the dev script, then we will control click and open it up in the browser. Then we'll right click and inspect. We'll go to Sources and open up CSS Mass. If you scroll to the bottom, you'll see there's a link to the source map which we've generated, which is great for debugging. Let's give the production script to go. Now we'll do control C to quit, and then Y, otherwise you can just use the in the trash can to kill the terminal. We'll then run the production. For this, we'll have to use the Render command. Render Production Control click. Then you can write, Click and inspect, go to Sources and then CSS and may not CSS. You'll see that it's been minified or compressed. So we've got to remove all the white spaces. It's on one big long line. If you're right to the end, there is no link to a source map, which is great for production. We don't want that. There's extra files written, and source maps aren't really useful for production. Plus it means Allah can't sneak in and see exactly how our code is being written. It makes it a little bit harder for other people to pull our code apart, but not impossible if you can get the dev and production scripts to work and you've got munification, you've got no source maps on your production, on your dev. You've non unified code, and you've got a source map. You're ready to move on to the next step, we'll see in the next lesson. 9. Fingerprint, cache busting and security: In this lesson, we're going to be fingerprinting the CSS output. We're going to be applying a check sum, a hash to the file. That means that whenever we update the file, it will be directing the browser to the newest form of that file. There'll be no confusion with the browser caching old versions of the file. You can also use fingerprinting for security purposes, but we won't be going into the implementation of that in this course. Your final link to this page in the resources section on the Hugo Pipes page for fingerprinting and SRI. Now if you're using fingerprinting purely for busting to make sure that the most up to date version of the file is being requested by the browser. If you've constantly got new versions of the page evolving and you want to make sure the browser looks for the newest version, you should probably use MD five. Md five is going to be a bit shorter. However, if you're trying to secure your website with CSP, which isn't something that I'll be going into in this course, You may want to use a high level encryption such as S HA 384. Let's get to it. We're going to be going through this process here in our project on our line with the CSS variable. We using resources do get to get the file out of the resources folder. We then running it through two CSS to process it. We're then going to run another command. We'll instead of pipe with shift back, the command is fingerprint. The option we're going to use is MD five. And that says to keep the file name a bit shorter because it will be using a hash at the end of the file name. If you are using CSP for security reasons, you may not want to use MD five, you can just keep it at the default. In that case, you would just get rid of that altogether. We're going to use MD five just to keep our file name short. We're then going to go down into our tag down here. The file name that's generated by a fingerprint will automatically be pulled into the link. For integrity, we need to put in an integrity tag for that. We'll use some curly braces and it's going to be CSS, which is the same variable used for our file link, but it's going to be data with a Capital D integrity. Then we'll do a space and close our Ur braces. We'll save that and we'll have a look. Then if we have a look in the source, go down to the link, you'll see that the file names changed. It's got the first part main, but then they have included a hash that's an MD five. Has then in the integrity tag, it's got MD five and it's got a key that can be used to cross check that this is actually the correct file, but we're not going to be using CSP and going into how to configure that with hitters, because that's a whole different topic. If you've been able to generate a hashed file and generate your integrity tag, you're ready to move on to the next lesson. 10. PostCSS and Autoprefixer: Now we're going to install two more NPM packages, that's post CSS and Autoprefixer. The reason we're using them is because when you run the Bootstrap CSS source from their NPM package, they don't provide prefixes for older browsers. It is something that Bootstrap does when they offer their precompiled CSS source. We're going to do the exact same process so that the file that we're outputting has got the same compatibility with older browsers as Bootstraps precompiled CSS. So if you look at the Bootstrap docs page for Bill Tools, it's more about building a version of the CSS file which matches theirs exactly, but they're using SAS to compile, which we're doing. Then they're going to run Autoprefixer. What we're going to do, we're actually going to copy Bootstrap browser list file so that we support the exact same browsers that Bootstrap supports when you download their default CSS file from their website. Before we start looking at how to implement post CSS and auto prefix. So we're going to need a file to define which browsers we're trying to target in terms of prefixing. Before we continue, we're going to head over to Bootstraps Github page. You can find that by looking in the resources section for the link. Or you can do a Google search for Bootstrap Github. Head over to the page, and then you scroll down and look for browsers list dot browsers list dot. The easiest way to get ahold of it is just to copy the content of that file, then head into the root of your project, Make a new file call browsers list R, and then inside that file, pasting the information from Bootstrap skew hub page. This file will tell Autoprefixer what prefixes it needs to create. A lot of older browsers require different prefixes on the CSS classes, not so common on modern browsers. By defining which browsers we're targeting, we're using the default list from Bootstrap. Here, we're avoiding adding excessive amounts of classes. For example, we're not going to be providing Internet Explorer prefixes. We're back on the Hugo page under Hugo parts for post CSS, and you'll find a link for this in the resources section. If you have a quick read, you'll see you need to have post SS CLI, and you also need to have post CSS, and you need to have autoprefixer. Now, Hugo suggests that you install them globally. I recommend you install them in the environment. We're going to go back and we're going to add some more NPM packages, open up a new terminal, then run NPM install. First one was post CSS, then post CSS CLI, and then Autoprefixer. We requested three packages, 39 have been installed because there's lots of dependencies. We requested three packages. 54 have been installed because there are lots of dependencies. If you open your package Jason, you'll see we've got our dependencies listed here and they've been added. Then reading through the docs, you'll see that we have to use resources postSS, there is a shortcut around that, but you can remove the resources part and then you can lower case the. Let's give that a go Go into layouts, partials, and head. Then at the end of our CSS string just before fingerprint, we'll put in another pipe. And then we'll run posts for our options. We'll go back to the doc. We now need to create a configuration file for post CSS. Post CSS will automatically look for this configuration file in the root of the project. We'll create a file on the root of the project and we'll call it post Css config. First thing we have to do is port autoprefixer as a plug in, we'll run constant autoprefixer equals require open bracket, two inverted commas and autoprefixer actually put a semicolon at the end. We then need to run exports. We'll do module exports equals open bracket. We'll declare the plug ins colon and we'll do a square bracket. This is where it starts getting tricky. We go back to our Hugo script, we'll notice that post CSS is being run all the time, both in development and in production. The easiest way to set it to only run in production is not through this part here in Hugo, but through JS. It's much easier to overwrite it for testing. You'll see we can access the Hugo environment. Let's go back. We access the Hugo's environment with process. This is upper case Hugo underscore environment. We're looking for three equals for an exact replica of what's been written. And that's development. There is a, you may have a few different production environments. When it comes to development, you've probably only got the one which is when you're testing with the library load server. Then we're going to put in a question mark. If it is development, we're going to return null, but actually going to be returning some arrays. We'll put null inside some square brackets. The next line we'll put in a column. And this can all be done on one line, but we're separating it to make it easier on this line. These are the plug ins that will run when it's not development. We're going to return Autoprefixer and we'll add another plug in in the next lesson. Because we've provided the values that return as a arrays, we need the individual strings, not the array of strings. To extract the strings from the arrays were put in three dots, the start of that line. And then when this line is run, it will either provide the array with null inside or it will provide the array with auto prefixer. We'll be deconstructing that array into individual strings because of the three dots. It should work. We'll save that. We'll run the Dev server, we'll test it out with the original Dev server. First to check how many prefixes are currently present. And they're prefixes that are built into Bootstrap. That's part of normalized dots. We'll run the Dev server, we'll control click the link makes you refresh. After you've reloaded, the server won't refresh automatically on the first load. Then check your sources. Going to CSS and Main. And we'll do a control look for web kit. You'll see there's 40 present. These come by default with normalized CSS. Normalized CSS is a HTML file which has been written to make all of the elements across lots of different browsers look the same. Normalized CSS overrides browser defaults in a way that all of the browsers look somewhat the same. Bootstraps use this, and they've done a bit of work on it as well. And they've included it as part of Bootstrap. That's what those 40 webkit classes are from. Let's now close that process. We'll run render production. That's in a production environment which mimics what happens when you build. You'll see their environment is production. Let's control, click the link. Then we'll go into Sources and CSS and Main, and we'll do Control and webkit. You'll see the 99 classes present there. Auto prefix has added those 99 classes based on the browsers list file. If you look in the root direct, you'll see B browsers list RC based on these browsers that Bootstrap has specified, they're the web It prefixes that are required for those browsers that will be the older browsers amongst this list, generally not the newer ones. You can modify this list if you're specifying some more older browsers than what are present here. You will get more prefixes. But there are some CSS attributes that have been used in the current version of Bootstrap, Bootstrap five, which, even with prefixes, won't work in older browsers, you have to be careful. This file will be producing a CSS file, which Bootstrap supports. To be careful, you don't push things too far or you might not get the results here after. If you can produce a CSS file with 99 or thereabouts prefixes in the production environment, you can run your development environment, the dev server, and you've got 40 webkit prefixes. That means you're correctly using Autoprefixer and you're ready to move on to the next lesson. Seeing the next lesson. 11. PurgeCSS: Now that we've set up Hugo to compile the bootstrap CSS source to a CSS file that meets the same specifications as bootstraps available CSS file, which is for download on their website. We're now going to use a package called CSS to remove unused CSS classes. To reduce the size of the file, we need to install the purge CSS program. If you do a search for NPM and purge CSS, you come about this page here which is installed with NPM or NPM install and then per CSS. But don't get confused because this particular package will not work with post CSS and Hugo. What you need is the following plug in and I'll put the command for it in the resources section for this lesson. This is a version of Per CSS which works as a plug in for post CSS. Once we've installed it, we can run it with this Javascript code here. Let's go ahead and we'll copy and paste that command, and we'll run it in our project. We'll open up a new terminal. We'll paste in that code that's installed. Let's now go ahead and write the code in our post Css configs file. We'll start with this text here, we'll copy that. Then we'll paste that text below the auto prefix align top of the page. Now to keep things simpler down here as you saw, we copied and pasted the open and closing brackets to run the auto prefix. To plug in up the top where it's being defined. We'll do that for pergSS as well. What we'll need to do is we can get rid of this line completely and it's associated brackets. And then we will get rid of the word per CSS. We'll bring that up. We can use Alt Shift to reformat everything that looks a lot ne. We'll then the source onto a new line. And we'll bring that closing square bracket onto a new line as well. We'll change the source folder to layouts. That's where our HTML lives. The double star refers to any folder in layouts, or it can even be no folder in layouts. If we haven't got new folders, then do a comma and new line and we'll put in some inverted commas and we'll do content star, star, star, Dod. That will refer to any of the markdown files if they're in a folder or not inside content. Now that's only going to be providing HTL CSS classes to poss that have been explicitly written into markdown through HTML tags. It's Pss will not know about any HTL tags that are produced through markdown. Now that we've set that up, what we can do is go there. It says autoprefixer. We'll put in a comma and then we'll run the purge. The CSS constant, which will refer back up here. We pull in the plug in and then we're running it with these settings. Let's give that a go. We'll save our configuration. We have to run the product, render production to check it work. Then we'll control click the link or open your browser. If you've already got it running, refresh your page, we'll right click, we'll inspect. Then we'll go to the three dots. And we're going to go to more tools. And we're going to run coverage. Coverage will appear at the bottom. You've got to reload. You can do control R or command R, or you can hit Reload button, Then reload your site. And it keeps track of how much of the resources have been used. For example, the Javascript file, 65% of the Bootstrap Javascript file is unused. You can ignore the library load because that's from Hugo. But the main SS, it's saying 47% is unused. Let's just do a check in a minute. We'll compare that with the dev script where none of these plug ins are running. But we'll do a quick check that all the pages are working. Before we continue, we've run into our first problem, That's the pagination. Pagination wasn't provided through the HTML file, it was provided through a Hugo built in template. Let's go back to the project quick and have a look at that. A quick recap in case you the last course, so you can see exactly how that works. If you go into layouts and default, then list Html. You'll see at the bottom, we're pulling in Hugo's internal pagination template. Go back to the website and we inspect. And we'll look at what classes are being used. We'll actually right click on the broken navigation and inspect that. We've got a few classes. We've got pagination, default page item disabled, page item active. And then we've got page link that's for every link that's been provided. Let's now go back to purge CSS, the configuration, and set it up so that it white lists these CSS classes. If you go to the Pss docs page, purge Css.com and op link in the resources section, we go on to safe listing. You'll see there's a few ways we can provide this information to purge CSS. There's a standard safe list where you can put a list of classes in or we can do is where we can provide standard deep and greedy forms. There's some examples here. If you look at greedy, that's quite useful for us because it will use the text you provided. It will also have classes either side of it. These examples are using the text at the end of the class. If we get rid of that dollar sign and put a carrot, which is shift six, the start, we'll be using the text at the start of the string and these are re jx commands. Let's go into our configure and we'll set that up, copy and paste this safe list configuration. We'll go back into our projects and set it up. We'll put a comma at the end of the content section. We'll paste in what we've got off the docs will delete what's inside deep and standard and also inside greedy. For now, we'll comment out standard and deep because we're not going to use them. Let's just write a quick list of all of the classes that we're trying to target. These are all our classes. Let's write some rejects. We'll start with the first two. If we do a slash and then a carrot, which is shift six and then pagination, it will pick up pagination default as well. Then we'll put that on a new line to make things a bit easier to read. Put a final slash and then a comma for our next rejects Carrot. Carrot matches this text to the start of the string. It will not match anything before the word pagination, but it will match things after it because we're using greedy. You'll then match page that will pick up all of these classes down here. Let's delete our notes. We'll save that, we'll check the site. It's looking great. We've got our disabled links to previous pages in the first page, which is disabled because we're already on the first page. We've got the current page which is highlighted blue. We've got the second page and we've got the next page and last page links there which are all working. Great. Let's do a quick comparison now to see how much file size we're really saved. What we're going to do is turn off purge CSS. I'll put it onto its own line, and then I'll comment it out with a double and save that. Then we'll go back to the browser and we'll inspect and we'll refresh. I'm looking at 165 kilobytes and 96% unused. Then I'll re enable purge CSS. We'll refresh with control or command R, We've got 13 kilobytes and only 58% unused. That's quite a big reduction if you've managed to get up to this stage where you've enabled per CSS and you've reduced your file size substantially, and under the coverage section, you've got a much smaller percentage which is unused and you've managed to get your pagination working. You're ready to move on to the next lesson. See there. 12. Create SCSS partial: Now that we've finished writing our code for the compilation of the SCSS source, we're now going to move all of that script to a partial so it can be re, used for importing other SCSS files. That way we don't have to copy and paste our code. We can just call the partial multiple times with different parameters. The first thing we have to do to create our partial is it into the head and find the code that we want to move. All this section here is going to be moved into a partial. We'll cut that code, then we'll go back into our partials folder. We'll make a new file. We'll call it lib sa hl. The reason I call it libsas is because in our configuration we're forcing Hugo Che Lipsas which is currently the default. But that may change and we don't want breaking changes. We'll save that here. We're targeting the file. I'm going to highlight that and control or command X to cut it and replace it with a dot. And we'll save the file. Then we're going to set up, call our partial so that the file that we're trying to retrieve is the context of the partial. We go back to our head, put in the two brackets, and we'll run the function called partial. The partial will be, as you don't need to put HTML in, then after the libsas, normally for a partial you'd put in a full stop. You're providing the entire context of your Hugo project to the partial. But in this case, we're going to paste in the name of the file. Now for example, we wanted to create a Vendors CS file. We'll go back into our assets and CSS and we'll make a new file, and we'll call it vendors. Then it's as easy as making a new partial. We could even copy and paste that one. We'll change main to vendor CSS. Say we were to pull in some third party plug ins. We could run their code in the vendors file if we want to split it up and keep the file size down to decrease our page load time due to files loading simultaneously. That's a great way to do it for now. I'm going to comment that out. To comment Hugo tags we put in slash star and then a star slash. Because I'm not using that file currently. Let's run it and check it works. It looks like it's working well. Just go and inspect our sources. Everything is still getting pulled in as we wished. If you've managed to still generate the CSS even after placing your code into a partial, you're ready to move on to the next lesson. 13. Selective imports: So we finish dealing with the NPM packages and the script. We're now to look at how to only import the parts of the Bootstrap source that we require. This will substantially reduce the file size, and it's in some ways better than Perd CSS. But there are obviously things that Perd CSS does that you can't do through selective importing. I'll start this lesson on the Bootstrap Five Docs website and I'll put the link for this particular page. In the resources section, we're going to customize and Sas. We've currently got our project set up to import the entire Bootstrap project, but the focus of this lesson is creating a lean import. We're just importing the parts of Bootstrap that we want for our website. That's option A. We're going to look at option B. And that's how we only include parts of Bootstrap. You'll see here they've broken it down into chunks. But if you read the text very carefully, you have to actually include everything you want. And they're only including parts of it here for you. What we're going to do, we're going to dive into the Bootstrap package and have a look at all the different parts that are imported. And set up our own main SS file to only import the parts of Bootstrap that we require. We'll start off by copying and pasting everything that's here. Then we'll open up the Assets folder and CSS and the main CSS. And you'll see originally we're importing the whole Bootstrap project. We'll just comment that out for now as it's a good reference. Then we'll paste in the text that we just copied off the Bootstrap website. Check the reference above, you'll see we've got bootstraps. Bootstraps here. In the examples provided you've got node modules, we'll have to remove that node modules part at the start. You can do them all at once just by highlighting it and then right click and change all occurrences. And we'll remove that, that's ready to go. However, we haven't included all of the Bootstrap components yet. We'll save our file and then we'll go and check out what Bootstrap has in their projects. We'll open up node modules, a few look through, find Bootstrap. We're looking in the CSS folders like here. Bootstrapssn' navigate to this original file, bootstrapsS. That's right at the bottom. This is a few other files. We've got utilities, reboot, and grid in there. Optional imports. People who don't want to use the whole Bootstrap library. They'll probably just import, for example, the grid or the reboot. If we're looking here, you'll see all of the components. We're going to highlight all of those. Copy them. Then we'll close the Node Modules folder because it's always big and bulky. Head back in here and we'll paste them down the bottom. And then we'll figure out what we have and don't have. We've got functions at the top so we can remove that. We've got variables and mix ins. We haven't got utilities yet, then all of these right down to the bottom. We haven't imported them. We now have a bit of a problem. That is that we need to set up the path because currently these links are relative to the bootstrap folder in the node modules folder, whereas our import links here are relative to our file. What we'll do is we'll highlight all of these. Cut them, and then we'll paste them in here. We'll have to highlight the first part of the URL. And then hold down the old key and click at the start of these imports and paste it in. Another way you could do it is you could highlight everything there, just the ones you haven't got, the full URL and cut them. Make a new file, paste it in there, Go back, highlight the part you need to add. Copy it. Then you could highlight this part of the code, right click and change all occurrences. Use your arrow key and paste it in. Save you a lot of time. Then we'll cut that. Close the file. And paste it in. We're nearly there. The next thing we have to do is we'll create a file for the default variable overrides and we'll create a file for additional custom code. We go back into our SCSS folder and we'll make a new file. Now files that aren't meant to be imported directly, we use underscores. We're going to do underscore custom variables, CSS, underscore custom CSS. Then we'll go back into our main and we'll put a import link to it. You don't need the underscore hover when you're running an import, we're going to do variables you don't need the CSS. It resolves that automatically. We must put the colon at the end. Then we'll scroll down to the bottom. Step five, we'll do a import and it's going to be custom CSS. Going to put a column and we'll just fix up that name of that file ended up with an underscore. All right. We'll say that we'll run it, we'll check it all works. And then we'll go back and we'll start disabling some parts of Bootstrap to help make it more lean and really import the parts we need. This, however, isn't as good as the previous step. We purged CSS. You've got to run both of these things together to really get a small file. We'll run out dev script, The page is still working. Quick look at it, we can see we've got the navbar images cards, we've got pagination. These are some of the things we have to make sure we don't remove. Let's go through our list. We can't remove any of the configuration items in one to four we can sit going through the components. You need to have root and reboot more than likely. Type in images, can containers and grid, we're not using tables, we can comment that out. You can actually highlight a few things. New control K C or command C in VS code. We'll need buttons. We'll highlight transitions, Dropdowns. Button group, we'll need nav, navbar, and card. We're not using accordion or bread crumbs. Control KC to comment those out, we're alert or progress group, close, toast, modal tool tip, pop over carousel, spinners off canvas or placeholders control KC to get rid of those. We'll keep helpers API on there. We'll save that and we'll go and check our site. You've got to very carefully go through your whole site and make sure that none of the CSS for your site has been broken by what you've just done. It's a bit of a labor intensive process, but every time you restrict the CSS imports or change or purged CSS configuration, it's really important you double check if you haven't broken the site, everything's looking great. If you've managed to reduce your bootstrap CSS import to only a few components that you require and you haven't broken the CSS for your website, you're ready to move on to the next step and you're doing really well with the project. 14. Custom SCSS variables: We're now going to look at customizing the Bootstrap CSS file that's been outputted so that it's got things such as colors, sizes, style shadows that match the way we want our website to look. By default, Bootstrap is quite generic, and there are lots of websites out there that use the Bootstrap defaults. We're looking at changing those, but without creating additional CSS that will ultimately create larger files for your website. We're going to actually change the Bootstrap source so that what is output is different. But we're doing it without touching the files in the node modules folder. Just creating our own variables file. Let's start this lesson on the same bootstrap doc page as the previous one. The page we've completed everything in the file structure and importing section. We're now on to variable defaults. And it says that every as variable in Bootstrap includes the exclamation default flag. If you remove that, you can override that default with your own variable without modifying bootstrap source codes. You don't have to modify bootstrap source code. You don't have to double up with your own CSS to overwrite it either. We can actually modify bootstrap source code via our own variables. Bootstrap gets installed into the non modules folder. We don't modify anything in there at all, we just provide our own variables. As we're importing Bootstrap, you'll find a complete list of Bootstraps variables in the underscore variables SS file. We're going to check that in a minute because that's where we're going to copy and paste them from. You need to import bootstraps functions, which we have, then we've already set up our own file for this section. Here what we'll do is we'll jump in and check out the bootstrap variable CSS file. And then we'll start theming our website via variables. The first example, we'll copy and paste the variables that Bootstrap has provided for us for the background color and the text color for body. Before we dive into the node modules folder, we'll open up our custom variables folder and we'll paste these in. We're theming it with a black background and a very dark text color. We're always going to keep that, but we'll just save it and we'll have a look. It's obviously worked. It's not the best idea, but at least we know that it does work. Let's go back now and let's have a re theming our website more to our own liking. Told us delete those completely and save it. As you can see, it sprung back to the original default colors. I'm going to go down to the Node Modules, folder it into Bootstrap and then open up the variabless. This is where we find all the default variables. The first thing we'll do is we'll go down and find the variables for the text color and the background color. After you've looked through this a few times, you'll start to remember the location of everything. All the common variables here. We've got the body background, body color, and text line. We'll just copy those first two. Here's the catch. I'm just going to paste those in. Here's our first problem. If I save this, the SCSS compiler live Sas will not know what white means and it won't know what grain 900 means. The reason it won't know is because at this point the only thing that's been imported is functions. It hasn't imported any of those color variables that we can see here. I'll just save that. It's throwing an error and it says undefined variable white. If I comment that out and save it throws a different error which is undefined variable gray, 900. What we have to do, this goes against the grain of what the SCSS docs recommend. If you're not sure what the SCSS docs are, it's slang do com in there, you'll find all the docs for running CSS and As it's commonly called as. But if you look at the docs, by default every page actually defaults to CSS. For example, we'll go into one of the pages, it's already on SCSS. We can change it to SS, but it defaults to SCSS because SCSS actually become more popular. That's because SSS is actually written just like CSS with a few minor differences that's out of the scope of this class. To fix our problem, we have to go into variables and we have to find the white variable and the grain 100 variable. And we have to declare those variables before we're modifying. These classes, what we'll do is we'll put in a few blank lines. Go back into Variables, and we'll scroll back up. Some people copy and paste the whole file, but it's a bit excessive. We'll copy and paste in our grays up the top. We can leave them with the default tags if we want because we're not modifying them. And then we'll go down and find our colors. Here are the basic colors. Paste those in. I'd say there's a high chance you'll need to have the colors mapped to primary and secondary and so on. So we might as well put those in. Well, right. It you have to make sure you keep the order the same as well. Because here primary refers to blue and then blue is declared here. Now we're going to remove default instead of white, we'll change it to light, which is a much softer color for the background body color is currently on gray 900. Recon, we'll try it on gray 800 instead. We'll save that, we'll check it. It's looking great. Our text color is a lot softer. Backgrounds. A slide off white. If we inspect and go to, you'll see color is a variable. Bs, body color, background color is BS, body BG. We'll click on that, you'll see there's a gray 800. If we look for body background, it's actually an IGB, but that's our light color there. That's working Well, let's go through now and we'll change our primary color to something a bit more palatable. It's very common that people use this blue color. We then might go through and we'll change the appearance of our cards as well. The easiest way to do it is we'll get rid of blue. We can actually just choose one of these colors. This is the most basic way. Then I'll show you a more advanced way. We don't want to be blue anymore. We want it to be, for example, orange. We're just typing the variable orange because it's already been declared up here. We'll save that change. Our secondary might make 700 a little bit darker. Just be careful. But because our button text is also a gray, we don't want to clash. Our primaries now become orange. And everywhere we've used primary for any of our elements, it's now changed throughout the whole site, which is way easier than overriding the CSS. We'll then go in and change our cards. We'll go into our variables file the bootstrap file out of the MPM package. We'll do control and we'll look for card. We're now at the card section. We'll highlight all of that. And we're going to be careful because it's referring to other variables and that's going to cause an error. We'll copy and paste it. We'll go back to our custom variables. We'll try and keep things in the same order. We will have to find spacer border width complicated. As you can see, this is why some people just copy and paste the whole file. What we're really worried about, however I'd like to change the radius, we going to card border radius, it uses border radius. One way of doing it is that can actually delete parts. So we don't want to modify to say I just wanted to change border radius. Might change the thickness of the border as well. I'll delete the top three. We'll leave the color for now. We'll change the radius. I'll delete the rest of those just to keep things simple. We've got a few variables here, we've got border radius and border width. We'll just save that. You'll see it's going to throw an error. We'll go back into our variables file and we'll search for border width and border radius. The easiest way to do it is to scroll back to the top control border width. We've got border width of one. The easiest way to change is just put in a value of two P x three Px and so on. Then we've got border radius. I'll copy all of those in, I'll put it above the cards. Say for example, I want to change my border radius. First of all, get rid of default. I might change it to, say, for example, to give it a small radius. Our border width that's currently at one pixel, might change that to two P X. And we'll save that, we'll check it out. Now we've got our two pixel wide border and we've got our tight radius. If we right click and inspect and go to the card tag, you'll see the border radius of 0.2 m, which is a really tight border radius. Then border 22 pixel thick border. That's done exactly as we asked. If you scroll down to the bottom of pretty much every section of the bootstrap docs, it actually tells you which as variables you can override to customize, it's really handy. Let's say for example, you wanted to have a two pixel border on your cards, but you wanted everything with a border to be two pixels. That's really easy. We'll just leave it at the border width default. You could even comment that out because we're not overriding it. We then go back up to border width, which we didn't copy and paste. We'll go find border width again, make sure you're looking for the first instance. We'll go back up to the first. So we'll copy and paste border width, make sure it's in the right order. Then we'll change that two. Now every single item on your website which has a border, we'll now have a width of two. And we'll still got a border width of two. Last thing we have to do is we'll look at colors and we'll look at changing colors. Not using bootstraps, default colors before we changed primary to orange. And that was using a built in orange. There's two ways we can do this. First of all, we'll look at modifying orange. We'll take out the default flag in VS code. It's quite easy, you just hover over the little swatch that it gives you. Then we can make some changes. So we wanted to bring some more red into it. We can drag up, it's not really an orange anymore that's changed then it's more of a sunburst. We'll save that. Now, orange is turned into more of a sunburst red. The other way we can do it, I'm just going to comment out that orange won't comment it out because it may be required down the track. I'll just control Ed to bring it back. The other thing we can do, instead of using a variable here, we can actually put in a hash and then a color. For example, if we just start with white for example, then hover over. We can then come in there and customize to whatever color. Where. After it's totally up to us, I'm thinking I might go for a nice deep blue. Well, you be careful with blues because there on so many bootstrap websites, we'll save that. That's our primary. I do recommend, if possible, you map them to color variables. That way you can use them further down in your code. But anyway, this is one way of doing it. Then we'll check it out. There's our deep blue being reproduced throughout the site. If you've managed to override bootstrap variables and you successfully change some components in the site through the different methods that I've shown you, you're ready to move on to the next lesson. 15. Custom utility classes: Now we're going to look at making our own utility classes. That is, classes just like the ones we use that are part of bootstrap. But we're going to make our own ones because sometimes bootstrap just isn't quite enough. There's an API, a system that's built into Bootstrap which enables us to make our own classes quite easily. We're going to start this lesson again on a Bootstrap Do page. We're now looking at the utility API that's in the utility section under API on the Bootstrap five. Do we use the utility API to generate our own utility classes? Utility classes are the classes that we use with Bootstrap. The two things are required when you're creating our own classes are the property you're targeting and the values that you're giving to it. If you scroll down, the first example is quite simple. We have a property of opacity. We have values of 025507500, and we've assigned values of 0.25 0.5 0.75 0.1 You're probably not going to use 100 unless you're trying to override something that's already transparent. If we use a value of 25, for example, which will be opacity 25, we opacity of 0.25 That's quite transparent. Now you might be thinking that's quite a long word. You've got to type every time and it's probably not necessary. And that's when you can add class. The next example we're providing a class of O and that's the letter, the number zero and we've got our same values. And then outputs 02550 and so on. We have shortened down with the custom class. We're still targeting opacity, but now we've got a custom class. These are a little bit tricky to implement. We'll go through the states later. If you scroll down to the bottom under using the API, there's an example here. We need to have imported functions and variables, and utilities. After you've imported utilities, we can perform a map. Merge with our own utilities map. That's going to be the one map. Ultimately, we'll copy and paste this example of how to use it. Well, then go into the assets and SCSS in Maine. We'll go underneath where we've imported utilities. We'll rearrange this in a minute. We'll just get everything working. We'll paste that in. Then we'll go back to our capacity. We'll use it on with the custom class. We'll copy just the section with opacity including its required brackets. We'll copy that. Then we'll get rid of the cursor section, make sure you're selecting the correct brackets when you do it. We'll paste that in O Shift to Reformat. We'll save that. We'll then add the class to the image on our website. We'll, we'll use probably opacity of 0.75 For now, go into layouts and index HTML. We'll look for our image and we'll go to classes and we'll put in 75 save. Then we'll run the Dev server. Our image is much more transparent than it used to be. If we inspect it, we can see that class over here saying the class creates an opacity of 0.75 But we can do better than that because the next thing on our bootstrapped docs is states. We've looked at property and class, now we're looking at the state, and for example, Hova, this is useful. What we'll do is we'll copy and paste this example. Just the opacity part. We could even just copy and paste the Hova line if you wanted to. Then we'll go back into mains, highlight the existing code. We could probably just add the extra line, but paste in our new code format. It will now create the original opacity tags of 25, 50 and so on. We'll also have a Hova state option. Will save that. We'll go a rid of a peek into the CSS and we'll check it out. Before we do that, there's an example here. I've got opacity, but you're also going to get these opacity, opacity 25 as well as the Hova states, we've got a class of opacity. I think we might leave opacity as a class name. A little bit easy to remember. If you're going through a website you haven't seen for a while, it's probably a little bit easier to jog your memory. We got the site, we'll inspect, go into sources, open up the SCSS folder. I'm already at that point you can do control and type in opacity. Then you'll see we've got opacity zero, which is opacity of zero. Then we've got opacity zero. Hob, not very useful, zero, but for example 25 and then 25 Hoa. We can set an object so that as the mouse goes over it, it becomes more transparent. Let's keep that a go. We'll go back into the index Html. This time we'll do opacity 75, hover. And we'll save that. Then as you mouse over, we get the opacity effect. Let's go to our cards and we'll set it so that all of the cards have that effect. I'm just going to remove that effect from the hero image because I don't think it's very appropriate. Do control X. I'll then scroll down to our cards, to the image. We'll go to the class and we'll paste that in. This is going to be applied to all the cards because we're ranging over the cards from the parameters. If you haven't done my introduction course, I'll just show you very quickly. We're going to content and then indexd. You'll see the cards here and we've set up, every dash is a new card, and that data is looped over it's card, one card two, card three, producing three cards out of one card worth of HTML. We'll save that, then you can see when you mouse over them, we get the hover effect. If you're able to create your own utility classes, especially using a state that's a great one to really bring boots travel to a new level, then you're done with this lesson. 16. Project 1 Conclusion: Congratulations on making it to the end of project one. A sure has a lot to take in. Remember to share a link with your work in the project section so I can have a look at your work in project two. 17. Project 2: Welcome to project two. Project two is a creative project. You need to style the landing or home page and the about page using the following techniques. Modify bootstrap variables. I provided a video lesson on how to go about this. You do it through the SCSS file. You've also got to change Bootstrap CSS utility classes in the HTML of the singlet and the index dot HTML templates. The singlet Html file is for the about page, and the index HTL file is for the home or landing page. You've also got to create your own new utility classes using the Bootstrap utility API. For example, on a Hoa, I provided a video lesson on how to go about this. I've also provided some links to some example styling ideas in the resources section under project two. I really look forward to seeing your work in your own project. Make sure you share the link. You can use services such as Cloud, Dropbox, One Drive, or Google Drive, and share a link to the folder that has your work in it. I can't wait to provide you guys with some feedback. 18. Project 2 Conclusion: Congratulations on making it this far and to the end of project two. Remember, if you haven't already upload a link to your work in the project section so I can give you some feedback. Thanks for taking this course. It's been great working with you. I'm always uploading new courses on static web design, Hugo and Bootstrap. I'll see you on my next course.