Make Stylish Websites Simpler with Bootstrap 4, SASS & SCSS | Andrew Whitworth | Skillshare

Make Stylish Websites Simpler with Bootstrap 4, SASS & SCSS

Andrew Whitworth, Full Stack Web Developer

Make Stylish Websites Simpler with Bootstrap 4, SASS & SCSS

Andrew Whitworth, Full Stack Web Developer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
24 Lessons (2h 10m)
    • 1. Course Trailer

    • 2. What is Sass

    • 3. SASS vs CSS

    • 4. SASS vs SCSS

    • 5. Setting up VS Code

    • 6. Installing Koala

    • 7. Compiling with Koala

    • 8. Variables

    • 9. Nesting

    • 10. Extends

    • 11. Mixins - Part 1

    • 12. Mixins - Part 2

    • 13. Partials & Imports

    • 14. Bootstrap CSS - Traditional Setup

    • 15. Bootstrap SCSS - Advanced Setup

    • 16. Overriding Bootstrap

    • 17. Section Intro

    • 18. Comparing Bootstrap Versions (4.0, 4.2.1, 4.3.1, etc.)

    • 19. CDN vs SCSS

    • 20. Project Preview

    • 21. Project Setup

    • 22. Bootstrap SCSS project

    • 23. Bootstrap Utilities

    • 24. Scrollspy

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

**Take this class for free with Skillshare's offer of 2 free months!**

This course is a follow up to my popular beginners course "Build Beautiful Websites Faster and Easier Using Bootstrap 4". It is the next step in learning how to create beautiful stylish websites using advanced tools like SASS & SCSS.

So what is SASS & SCSS? SASS & SCSS are advanced versions of CSS which allow for cool features such as variables, mixins, extends, and much more. Basically, there are limitations to what CSS can do, but SASS & SCSS can help you take your CSS to the next level.

This course is a great introduction to SASS and SCSS (even if you aren't here for Bootstrap 4). First we will do a quick crash course on SASS and SCSS to bring you up to speed. Later In this course we will use the Bootstrap 4 source files and learn how to compile Bootstrap 4 SCSS into CSS. We will also learn how to quickly override the Bootstrap 4 colors using variables and other cool tricks along the way. 

This class is geared toward someone who wants to learn SASS and SCSS. It is also recommended that for the later part of the course you already know Bootstrap 4 either through my other course "Build Beautiful Websites Faster and Easier Using Bootstrap 4" or you learned it elsewhere and want to advance your Bootstrap 4 skills. Don’t worry if you aren’t familiar with SASS or SCSS that's what the first part of the course is for.

All you need is a text editor (we will use VS Code). Any other software that is required or recommended will be discussed in the class (all of which are free)

Course Goals

  • Learn SASS / SCSS
  • Learn how to use compile tools
  • Advance your Bootstrap 4 skills using overrides

Meet Your Teacher

Teacher Profile Image

Andrew Whitworth

Full Stack Web Developer


From an early age I showed an interest in computers and tech gadgets. One day my parents bought the family a computer. From that day forward, you could always find me in front of the computer. Later I learned how to take it apart, put it back together, and upgrade it along the way. When that wasn't enough I learned how to make websites early on. Fast forward 18 years and several college degrees later and you will still find me in front of a computer. Now days I build beautiful websites and programs which inspired me to teach others how to do the same.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.



1. Course Trailer: Hey, I'm injured and I'll be your instructor for this class. This is Apollo, my bootstrap four course that was featured here on Seo share as a staff pick. Now, if you're new to bootstrap for recommend, you take that course first. As it's a good beginners got, you can find a link to that course in description below. However, if you're ready to take your bootstrap four skills to the next level, then this is the course for you. So what we cover, we will cover advanced topics like sass and S E. S s. Along with advance compiling tools such as Kuala. We will also cover how overwrought Boot shop board and learn how to customise it with a more being set up. Now, if none of that makes any sense, don't worry. I will cover all that in step by step detail in the course. So what are you waiting for? Let's get started 2. What is Sass: in this video, we're going to talk about SAS. What ISS as have you ever heard of it before? Well, if you haven't Sass is a simple file type that allows you to write CSS in a special kind of way. Now it is a pre process file, which means that you run it through a special program called a pre Processor, and once you run it through that program, it'll export regular CSS. Now, right away, you may be noticing that there are brackets and semicolons missing in SAS. Some people call this a feature or benefit because it allows you to not have to type is much code. You simply leaves off the curly braces and semi colons. In fact, if you include them, it will start the air out or give you heirs. Now this is a basic SAS file. It looks very similar to CSS, so let's take a look at a more advanced SAS file and see some real differences. So this is a SAS file that are wrote for a project I was working on recently, and right away you'll notice there's some weird things going on here, like what are these? And what's a mixing. Well, these are called variables, and this is a mix in, and we'll cover these in the next. Several videos also cover some of the benefits. Right now, it just looks like some differences, you know, compared to CSS. And then we have some regular CSS that looks just the same. And then we have some more differences with the ampersand, and here's some more variables. So this is what Sass looks like now, after you run it through a pre processor, let's see what our CSS looks like right away. You can see the variables are gone. The mixing is gone, but it looks like regular CSS. It's a little more compacted or scrunched together, but that's pretty much regular CSS, and you'll see the variables are gone, and we'll talk about what all that means in a later video. But right now we're just getting used to sass versus CSS. So that's it. Now, in the next video, we're going to talk about some of the benefits to sass over regular CSS, and I'll see you there 3. SASS vs CSS: in this video, we're going to talk about the differences between sass and CSS. Some of those differences we've already discussed, such as the missing curly braces and semi colons that are present in regular CSS now, since you have to run SAS the reprieve process or program, what is the real benefit of doing all this extra work when I just write regular CSS? Well, some of those benefits are CSS commie long, messy, unorganized or even cluttered, even if you write it correctly and still in a mess, or at least cumbersome in multiple ways. Saskin help clean all that up, sometimes even lead to smaller CSS file sizes, meaning that your CSS will cause the page to load faster, which is what we want for all of our Indies er's now some of the other features of sass our variables mix ins extends imports and partials, and I know some of that may not make any sense right now, but we will cover all these features in additional separate videos. Now, take a look at some of these features and action. Let's look at our advanced SAS file, and here you will see some of those variables meaning that I can write a color primary stick in the color as the value and then reference in multiple places. And you say OK, but you're writing more code, Yes, but the benefit here is when I go to my regular CSS. If I wrote just regular playing the nella CSS, I have that referenced that color referenced 10 different times, and I would have to go change it. 10 different places. And I may even forget a place if I didn't search for it, and I was just trying to rely on looking through the file. Now some other benefits are, you know, mix ins and and allowing for additional features, and they basically allow you to write less code in certain ways, although you're writing more code in certain ways, like you know, Hey, I've got variables in this mixing feature. But when I get down here, I've referenced that variable once, and if I need to change the color, I just change it at the top. Or if I need to use that mix in, I can use it in various different places, such as right here. We're just calling and include and using the SM keyword or break point to target that whole mixing and it'll process all that stuff for us. It will do all of these additional features such a setting, the media query and on all that for us. So down here, it allowed for less typing. And if we wanted change those break points, we could change it One place and not multiple places. So these are just some of the benefits of using sass over regular CSS. Now, in the next video, we will talk about S C SS vs SAS. I'll see you there. 4. SASS vs SCSS: in the last video we compared, SAS to CIA says. And in this video, we're gonna compare sass to S C. S s Celester with the name SAS stands force and tactically awesome style sheets and S C SS stands for sassy CSS or sassy, cascading style sheets. So other than the name, what's different? Well, let's look at this SAS file here, and this is one that we're familiar with. There are no curly braces or semi colons. However, in S C SS, we have those curly braces and semicolons back. It looks very similar to our regular CSS. So what is it? Export? Well, main to exports, and it looks just like main one. So it doesn't really matter if you're using SAS or s CSS. You get the same result. And we can't even prove this by looking at our index dot html or index one, which is pulling in maine dot CSS an index to its pulling in Maine, too. CSS they look exactly identical. No difference. Another difference that you can do or see. Say we have some regular CSS. We're gonna copy this. We're gonna pace it into our s CSS file, and it works. No problem. Let's try to do the same thing. I guess I'll save that. So you can see. And let's try to do the same thing with styles, too. These exact same CSS rules and we're going to put them in SAS immediately. We see some red flags or heirs and that means we have to go through and delete all of these items. And that is because SAS uses indentation and s CSS uses curly braces and semi colons in fact, weaken, eliminate thes and just add spaces. And it would export the same exact thing. So I'm just going to do that and it would still look something like this. Now I haven't hooked it up, but it would export just like this regular CSS. So you don't really want to do that cause it looks terrible, but that's just a proof of how s CSS works. It's parsing or splitting based off the semi colons and the brackets where a SAS uses indentation and white spaces. So why choose one or the other? Will SAS is actually the original pre processed file for CSS, and then they later came out with S CSS and spoiler alert most people have switched to that . And Bootstrap for is one of those people they're using s CSS. And that is what will cover in this course. So we won't use ass. But I wanted to introduce you to it, so you'd know. And most people still reference it as, hey, we're using sass, But most of the time they're actually using s CSS. It's just a common kind of language jargon thing that happens in the tech space. So that is the difference between sass and S CSS. I'll see in the next video. 5. Setting up VS Code: in this video, we're going to get everything set up for visual studio code that includes installing it and setting up some extensions. So the first thing that we need to do is go to your browser and we're going to type in code dot visual studio dot com. If you leave off code, it's going to take you to another website, and we don't want that we're going to download for Mac. If you're on a PC, just follow the download instructions there. It should automatically detect your own windows. So we're gonna download and then we want to extract that and we can open it here. It's going to tell us that it was from the Internet and yes, we want to open it. We have our welcome screen. Let's make that a little bigger for you and we're going to close this and we want to open up the last item, which is our extensions, and we want to search for Live server and we want the 1st 1 and we can hit install. It's all there we want to reload to activate, and we want to search for another one and that is SAS and we want the 1st 1 This time we're gonna click, install there and then reload. And the next two are optional. And that is B s code hyphen icons and reload. And then we won't one more and again, this is optional intel. A sense for CSS. Install and reload. So there we are. We have these extensions installed again. Intel, a sense MBS code are optional. You will see me use those throughout the projects I just figured out, including because some people will ask. But the live server ancestor are required. Sass will give us our syntax highlighting so that you can see and distinguish the different colors. Other than that, that is it for our visual studio code set up I'll see in the next video. 6. Installing Koala: in this video, we're going to set up Koala. Koala is a tool that is going to allow us to compile or export our SAS and S E s s. So in order to get that we need to go to in our browser Kuala hyphen app dot com And here we will have a download option for Mac. If your own PC, it should come up a swell. If not, you can go to other systems. So we're going to download that and we're going to start it, drag it to our applications folder if it will cooperate and it's copying it over and now it's ready, can close this and eject that. Now if we go to our applications, there's Kuala. We've started it. It's verifying and you immediately see can't be open because it's from an undignified of developer. We say OK, and we can go down to our system preferences and we have to go to security and privacy and open Qala anyway. And there we go. Now, there are some other things that you can do, and that is you can basically click this town locket and change that you won't all developers all right, So this is Kuala and we're going to go to the settings tab. And under general, we want to uncheck, automatically compile files when project is added or reloaded. And then we also want to go to the SAS tab on the left and we want to turn off or uncheck source. Matt, And that is all we want to change for our default settings. So again, that was general automatically compile and SAS source map. So that is it for Kuala will be using it and you'll be getting familiar with it in the next several videos. I'll see you there. 7. Compiling with Koala: in this video, we're going to go over compiling with Kalala now on the right. I have visual studio code open with our project files. And if you haven't done that, you can just drag them from your desktop into your visual studio code, and it will bring this up right here. Now, Quale is over here, and we need to get those thes files into this project. So what we want to do is take an open, advanced starter files and drag number three and number four into Kuala and close that. So we're going to start with number three and we have our starter files Koala or three Kuala. And we have our styles dot s CSS. So this is what it looks like. Another fancy, and we want it to compile to CSS. So all we have to do is click on this and hit compile, give it a second, and it's generated. So that's what it looks like. Nothing fancy. Let's close this next. We want to look at and band set up and we have a s CSS folder so that we can add multiple s CSS files or even just more organization, and we want to export it to the CSS folder Right now, it's called main dot s CSS and won't change that in a minute. But let's go to Kuala and we're going to click on Heart s CSS. And it's pulling in any s s s. So if we have Mawr files, it would know that Hey, it's in the, you know, the S E s s folder or whatever folder it's in, no matter how deep it is, it goes through in, scans all of the fouls or follow directories and pulls him into Gwala. Now we're gonna hit, compile, but it's going to give us main dot CSS and we probably want to change that to maybe styles that CSS and we also wanted in this CSS folder. So we actually want to delete this, move it to the trash, and let's right click on the item and set output path. We want to go up a level. So Qala this number four here and we won't CSS or the CSS folder. We're going to type styles dot CSS or any, you know, name that you want to see us us to be and safe now it hasn't actually compiled it yet We're just telling it where to go. And now we can hit, compile, give it a second And it is now in our CSS folder. And anytime we make changes to this, it will automatically update. And that goes for this set up a swell. It's just that this is a little more organized and for advanced projects will really appreciate this because you may have multiple s CSS files and you just want to keep it nice and organized. So every time you hit, save it will automatically run and export it here. Now, if you wanted to see those and bring this in here and it's nothing fancy and here we go, it looks just like that. So Buser Kuala or number three and then the advance there both are the same CSS and S CSS. We've just basically looked at some different ways to organize the files. So that's it for this video. I'll see in the next one 8. Variables: in this video, We're going to talk about variables in R S, C SS. Now, the first thing we want to do is in our Qala. We want to right click and delete these old project files. Open up advanced starter files and Dragon number five and visual studio code under starter files. We won't number five, so we're gonna open that are in next file is just a little HTML file with styles dot CSS, which will generate in a minute. We have a div with the class of box and we have a paragraph with some text, so we're gonna close that. I just wanted you to see what's actually going on. And in our styles dot s c ss. We have our body with a background of orange and we have our farm family are font size and some other stuff here that's controlling their box. Now, if we want to, we can go ahead and you can come here and compile and Kuala but say it was minimized or in another screen. Once you've dragged it into the project or dragged it into Kuala that project file, then we were in our s CSS. You can just hit command or control s to save, and it'll automatically generate and spit that out. It's just we turned off that auto compiling when we drag, you know, that option here We turned off that automatically compiled because I don't always want to do that right away, so I can kind of walk you through things. So those are a couple of different options to spit out our ah CSS file. Now, if we want to bring it in to the browser, we can hit HTML and go live. And there we go. So I'm gonna bring this to the left, get it out of our way of her moment and let's go back to our styles. Dot s CSS now, Right now, we don't have any variables in the project or in this file, but we can create them. So we're gonna come to the top in, create some space, and we're gonna adds a primary, and our primary color is going to be orange and nothing's going to change until I actually put these variables in place. So I'm just not gonna worry about saving the file yet, So we got secondary and we want that to be white, and you have to have this dollar sign that indicates it's a variable. So dollar sign, Shadow hash 333 and font hyphen stack. And I'm just going to copy this all from right here and paste it there so have instead of having to type all of that and font sighs. 16 p x. All right, so nothing has changed. It's not really being implemented yet, but what we can do is we can take and replace are orange with, say, primary. And if you go to our styles, it doesn't really care. It's still spinning out the same thing. It's spitting out orange, and all of this will not really change. It's just here. We will have these variables that we can use, and it's not really a big deal here. But if we had a really big project or a big project file that we were starting, it would be very beneficial toe have variable so that we could change it in one place up here at the top than having to go everywhere and change wherever we placed orange and 10 different places. Now we're gonna also do that here with the font family. We're going to add font, hyphen, stack, And then we're going to change the font size to fund hyphen size. And you can name these whatever you want. I'm just trying to be explicit, so you know exactly what they are. And here we have white. We're going to call this secondary, and then this last one is going to be called Shadow. Now, this may not seem like a big benefit to you right now, but when you have again large files and large projects, this will be very beneficial. And so we look at our our styles dot CSS Nothing's changed. No surprise there. However, if we want to, we can change this to say, like, 36 for whatever reason, save that. And as soon as we saved it, it changed it in our styles dot CSS and you can see the change over here on the left. If you have that live server running, you'll see the automatic updates. So that is variables in R. S. C. SS. You can use them in multiple ways. You can even spread them across multiple files, and we'll get into that later. But for now, this is variables in our CSS. I'll see in the next video 9. Nesting: in this video, we're going to cover nesting now in Kuala. I've already removed all of our old project piles simply by right clicking on them and heading delete. So let's bring up our new files and let's drag over six. Now, before we generate that, let's go ahead and look into our files. So we're in starter vials. Six nesting and let's look at index dot html. It's gonna pull from styles. Dot s styles dot CSS will generate that in a minute. We have three paragraphs with paragraph, hyphen, text, paragraph, hyphen, text hyphen, sm and hyphen LG for large. So basically three different variants of the same thing. We also have B G hyphen success or background color success. MBG hyphen secondary MBG hyphen light. So in our styles dot s CSS we have our variables, Emery using them throughout the project. And so let's go ahead and generate that CSS file and sometimes it doesn't work. And there we go. So we have our style start CSS This what? It looks like our variables air stripped out and replaced with the colors in the appropriate places. No surprise there. Let's see what it looks like If we hit Go live on our index file and I'm gonna pull that in . So nothing fancy, nothing really aesthetic. But I just want to show you kind of what's going on in a simple example. So let's close our index file and go back to our styles. Dot s CSS Now there's a concept called nesting, and you see, we have a lot of repetition here and we don't want to repeat ourselves. So we have paragraph hyphen, text hyphen, sm, and what we can do is we can take this part and just strip that out. Come in paragraph text and use an ampersand or an and symbol and then paste the rest of it . And you say, Well, that's kind of weird, but what it's actually doing is it's going to nest these properties and only change. You know, the font size, the lawn height or whatever we want it to change. Just four paragraph hyphen, text hyphen, sm. Now we can do that again with large drag that here and come down the line ampersand and paste that Now let's go ahead and get rid of this. We don't need that. So that's our 1st 1 Let's save it. And Lou, what happens with our stalls dot CSS? Its nested and basically you can see we have paragraph, hyphen, text, paragraph, hyphen, text, hyphen, sm. So what's really cool about this is it's basically writing this part for us on this line in this line, and it's keeping it together with the other paragraph text, whereas before it was kind of separate. And it it's just cleaner or easier to read and keep everything together, especially if you have, like I said, bigger projects. So let's do the same thing with BEEGEES with all the BGS or background colors. So let's take a look at it again. So it looks like this, and we're going to turn it into something like this. Words nested. So this time we have BG is our main one, and it's BG success. So how do we do this one? Well, we're going to bring it into its own, so let's do something like this. Cut it, create some curly braces and then ampersand and paste. Let's do the same thing here. We actually need that hyphen because we're using it and ampersand, and you can name these whatever your you like in your own CSS, but this is what we're using here. So before we compile, let's delete all of that and save it doesn't look any different here other than the way we've kind of nested it. But check out what happened. It's all kind of tightly knit together. No, I didn't do the same effect here. Because BG is in its own second, you know, it doesn't have its own items here Now. If we have B G and say maybe some, you know, like a font size, you say, um, 16 pixels, then you'll notice it generates it and ness it. So that's kind of the difference between the two. So if there is no common item here, you know one property, then it's just like that. And that's kind of what we get now. I've had the live server running the whole time, and you've noticed nothing has changed over the over here on the left. It's just some syntax differences that were really updating, So it's really just our benefit for readability and also keeping everything together. So those were just some benefits of nesting. It's really quicker to write when you're calm, flying through this to just use the ampersand and and change whatever your differences are . So this is a quicker way to write as CSS with nesting. That's it for this video, and I'll see you in the next one. 10. Extends: in this video, we're going to talk about extend first, let's set up everything we have. Qala have removed everything else and let's go to our starter files and drag over number seven in the Marine visual studio Code Starter files number seven. Let's look at our index dot html. We have styles that CSS we knew the drill will create that a minute, but here we have several dibs with different classes and different names or colors. So alert primary danger, warning success and impose nothing fancy there. Let's go ahead and go to styles dot s CSS. And here we have our variables and colors. We're not using all of them yet. You'll see why in a minute and we have our background for our body and then we have a new alert. So the first ones created. Let's go ahead and generate this am so there we have our styles. Stop CSS without our variables, obviously, and let's see what it looks like if we have our live server running, so you can just do index and then hick alive. So this is what we're looking at. We don't have our other one jet will do that in just a second. So let's go back to our styles dot s CSS and we want to copy all of these alert items, but we want him to be like something like primary. And so if we won't weaken, copy all of this and paste it and we have the same thing as alert. But, you know, we could just change that color to say primary. Now that's fine and dandy, but we're repeating ourselves. And if we learning anything from nesting, we don't want to repeat ourselves. So let's delete all of this and then we can call this So if we save, obviously we have, you know, our foul. All of our properties are gone. Let's do at extend and then you tell it what class you want to extend or repeat. So we want to repeat her copy alert. All the features are copied. And if we remove the background color, we get same thing as alert. But obviously we want to have primary for a reason so we can do something like that. So now we have our background color of primary, and we have all of the features or attributes of alert without having to copy ourselves so that if we change alert to say, lower case didn't changes, both of them. So that's the benefit of alert. So let's go ahead and finish. You guessed it the rest of them. So we're gonna have danger and at extend dot alert and then background. Let's call this one danger and we're just referencing our colors up here Now, in order to save some time, we're gonna copy this instead of danger. And if you hit commander Control D you can tap that twice in an old highlight, Botham. So warning. All right. And then we won't to highlight that and call it success. And I spelled it wrong. And the reason it failed like that is because the variable not actually because of the class name just adds upon them and then highlight danger again. In this time, we won't info. Now that we finish those, let's go take a look at our style. Stop CSS And this is what it generates. Said generates all of this compacted Together we have alert primary danger, warning, success and impose. Since they all have the same properties, it kind of sticks them all together. This is a common practice with, you know, CSS. Nothing fancy there. But one thing that is doing is because we have these background color separate or, you know, in addition to its kind of sticking them separate. So that's what's going on. If we didn't have these background colors, it would not have these here and just leave it all together. So that's the benefit of Extend extending and not repeating yourself. That's it for this video. I'll see you in the next one. 11. Mixins - Part 1: in this video, we're gonna look at mix ins. We're in advanced starter files, eight mix ins. Let's bring our project into Kuala. So advanced started files eight mix ins and drag that over in here we have our s CSS files , but before we can Pollos to our CSS, let's have a look at our styles. That s CSS here we have primary colors at the orange. We have different colors, set two different variables and then we have our background or our body with different backgrounds at different media queries and break points set two different colors. And then down here we have our circle class with different media queries and the size of the circle changes based on the media query. So these are all things that were used to. The only thing that's different is unlike before where we would have to have our separate media queries all by themselves and then call our classes within those we get to have all of our media queries together specific to each class. So our circle gets our nest of media queries here, instead of having all those media queries listed down here at the bottom and then referencing those different break points that way. So this is a nice feature of STS s. You get your media queries all nested. That's a nice benefit. You could write it the other way, but it's not advised with all the nesting features. So let's go ahead and have a look at the project. Let's open up our index one Die html And of course, it hasn't loaded yet. We need to generate are CSS. So let's click on that and compile. And here it's loaded. So we have our different break points and I could turn on our window size so you can see the resolution that were at there goes a break point. There goes a break point. There's another one in her last one. So that is basically all rs CSS is doing. You're setting these colors for our different break points and setting our circle sizes. Two different sizes. I don't know if you caught it scaling as we went up our break points. So the problem with this if we go back to our styles that s CSS, is we have this media query in multiple places and that we really don't want to repeat ourselves. And if we have to change it, not that you would. But if you did have to change it, it would be difficult because you'd have it in multiple places. So, like many things with SCS s and says, we try not to repeat ourselves, and one of the ways we can do that is by using what's called a mix in. So how do we create a mix in? Well, let's go above our body and we'll start adding a mixing right here. So the sin taxes at mixing, and then you can call it whatever you want. You can literally call it anything. You just have to reference it as anything everywhere. We're not going to do that. So we're actually gonna call it something useful, respond hyphen, too Parentheses. And then this could be another variable of your choice. We're gonna call it break point. So dollars on break point and we want to have curly braces at the end, and then we won't at If dollars I'm break point equals, equals quote S M or small, so respond to break point, and sm can be whatever you would like. That is just what you have to reference everywhere, and you'll see what I mean as we go along. So curly braces and then we won't At Media Prince sees men hyphen width colon 5 76 p x and then we want curly braces. And then we have to reference our content so at content, and that is our first mixing with our first media query. So what we're gonna do is we're gonna have. If it's a break point of SM, then it's going to trigger this and her place, our code here. So before we do all that, let's go and Creed are mixing completely and we'll start by doing it like this just to save time. We can't have an extra. If so, it's going to be else. If and then our break point is going to be M. D. And then a resolution is going to be 7 68 p. X. I want a copy, this one, since it has our else if and then our next one's going to be LG and Excel are large. Resolution is 992 and our extra large is 1200. We can say that it's not being used yet, but let's break this down. Basically, we have. If it's an SM or small screen, it's gonna trigger this one. If it's a medium screen, it will replace it with this one and so on. So what? I mean by replace it well, here, we're going to replace this whole line right here, and we're going to replace it with at include and then respond to and then parentheses, single quotes S M. And our 1st 1 is replaced. Now, before we replace all of them, let's go and look at our styles. I did save this, so it should be updated. But as you can tell, nothing looks any different. We have our at media query or at media with men with of 5 76 p. X. So the when it's exported, it looks exactly the same to regular CSS. But for us in our styles dot in our s CSS, we don't have to repeat ourselves multiple times. So let's go ahead and finish this up. We'll copy this, paste it here, paste it here and here. So this is going to be medium large, an extra large, and we'll save that. And if we go back to our styles dot CSS. It looks the same, which is pretty cool, because what it's doing is it's taking any of this. It's basically taking this. Include, it says, respond to the Excel. It comes to our mixing it says respond to break point pulls in. This is the brake point that it's, you know, basically assigned to so says if the break point is equal to sm, replace it with this part of code right here and then the same thing for this one and the rest. So let's do this for our circle. We're going place thes So we have m d LG and Excel. Save that. And if we look at our styles dot CSS again, nothing has changed. So we can also test this by I'm gonna turn on our window size. We're gonna resize our window, can make sure everything still works properly, and it does. So that is the advantage of a mix in. It allows us to replace our code and not repeat ourselves in multiple places. Now, the one awesome benefit is if we wanted to change these resolutions at any time, we could just come right here, replace them with whatever we won't and they will update everywhere. So that's it for this video. In the next video, we'll take a look at another example of a mixing. I'll see you there. 12. Mixins - Part 2: in this video, we're gonna pick up where we left off in mix ins. So we're in advanced starter files, eight mix ins. We still have everything set up, including Kuala. Let's go and look at our styles to die s CSS And here you'll see we have a background color of orange in a box color of blue. We have those variables reference throughout our project and in our custom box we're going to create this border radius and a box shadow. So let's go ahead and generate that CSS. And then let's click on Index to and hate go live. So this is what we're looking at. And if we go back to our styles, too, we can improve on this with a mix in. So instead of always say, we have multiple boxes or whatever, we can replace this border radius and this box shadow with a mix in. So how do we do that? Go up here to our body, come down a little bit, add at mixing box and we're going to use variables as radius and shadow. Then we want curly braces and we won't border hyping radius set to are variable of radius in her box hyphen shadow, set to five p x five p x 10 p. Eggs and then our shadow variable. So there's are mixing. Now we just have to implement. It will go down here to these last two lines and delete those and all we have to do is say at include box 25% comma hash 333 and that'll be our shadow, color and safe. And everything looks the same, which it should be. So if you looked at our CSS, it looks just like what we had before, except for we're using our mix in. And if we had multiple boxes, we wouldn't be repeating ourselves. This is just another small example of how you can use a mix in other than just media queries. So that's it for mix ins. Hope he enjoyed it. I'll see in the next video 13. Partials & Imports: in this video, we're going to talk about partials and imports. We're in advanced starter files, partials and imports. Let's go and bring that into Kuala. So nine partials and imports track that over and here you will see all of our s CSS. Now, Qala does a nice feature of pulling in anything that is in a nested folder. So no matter how deep it is in the folder structure or folder tree, it'll still pull it in. So that's pretty cool. Now, why do we have so many files? What I've done has taken a previous example and broken it down into different components or parts. So we have our main dot s CSS, which will create in a minute. We have our mix ins, which is just media queries at different break points. And we have our variables, which are just different colors. And then we have a widgets file that has our body and different break points or media queries, and then a circle class with different break points and media queries to basically make it responsive and make that circle scale. So as you can see, we're using different colors and our mix ins so widgets is dependent upon mix ins and are variables, folder or file. So if we go back to Maine in order to bring all of this together, we can do at import single quotes, variables, semi colon and next we're going to do at import mix ins, semi colon in at import, single quotes, widgets, semi colon. And before we save, let's talk about what's going on. So here we have our imports. It's bringing all of this together. We have our variables. They need to come first because we may be using them in mix ins. Although we aren't in this project, it's good practice to put all your variables first and then your mix ins. And then you're any dependencies, which are things like our widgets, which are dependent on our mix ins and are variables that needs to come last. So why don't we go through this whole hassle? Why not just have it all in one file? Well, the nice thing about having it in different files is it keeps everything kind of together and compartmentalized. So we have all of our mix ins together, all of our variables together, and Oliver widgets together. So it makes it really easy to find what we need and change it in just that one place. And then we could use something like this main dot CSS to bring it all together and create an import. Now, one thing that we need to do is we need to change where all this is going to save, too. So let's change this by right clicking on it and set path or set output path to our CSS folder, and we're gonna call this one main dot CSS. Let's go and change these as well, and I believe this one is mix ins dot CSS. And this one is variables, not CSS. And this one is our widgets dot CSS. So we've changed everything to the CSS folder, and you're gonna say, Well, why do we have four different files? I thought we won't one CSS file, but we do, and we'll get to that in just a second. Let's go in. Compile these. Well, I'll save this and it'll automatically pile and name will need to compile the rest of these now right away. Widgets gives us an air because widgets is dependent on mix ins and variables, so it's not going to compile correctly gives us a bunch of garbage and some error codes will close that and we'll dress that in just a second. So this pulls in everything that we need. So we don't really need all these extra files. We really didn't want those to begin with. I was just wanting to put them all in one folder and show you kind of what's going on instead of having them in here and then us having toe delete them or whatever. So this is where we talk about partials. What the's actually are is by dividing up that long, you know, s CSS project into multiple compartmentalized files or components. Then we need to change the way that these air imported. So if we rename these with a leading underscore, then this is what's called a partial. So we'll change all of these except for Maine. So these Airil partials and they're all coming together in our main dot CSS. Now, if we refresh this in Kuala, you immediately see that we're left with Onley main dot s CSS, which is going to export to CSS folder main dot CSS. So we can actually delete these three right here. We don't need them. And now, if we deleted this one even you'll see that it will generate just the one, which is all that we need. So there's everything. That's how you do an import into one vial. This is how you create partials. Unless look at our final project, we need to change this to Main in a near file. I'll already have that corrected, so don't worry about that. But let's go ahead and hit. Go live. So here is our project, and it is just like before we have all of our different break points in our circle is re sizing. So there you go. That is partials and imports. It saves you a lot of time, and I'm sure you'll learn the benefits more when we get to Bootstrap. I'll see in the next video 14. Bootstrap CSS - Traditional Setup: in this video, we're going to cover a normal bootstrap set up with regular CSS and JavaScript. So let's walk through those examples now. So we're in advanced starter files. 10. Bootstrap, normal. So if you go to get bootstrap dot com now, make this larger so we can see it. Here you will be presented with different download options. If you scroll down a little bit, you'll see bootstrap CD in CSS only, and then all the javascript that it is needed. So the bootstrap, JavaScript and Papa J s and Jake weary. So all of those air right here and you can also get to him by going to download and then scrolling down a little bit and you'll see the bootstrap Cdn. And here's what we have. So let's bring over our files. If we're going to use the cdn, then you would do HTML. You know, it could be index dot html or whatever you wanna call it. I have this one labeled Cdn, so you'll know exactly what it is. And here we have the first part of it, which is our link tag, and that's pulling it right here. So that's what that is. and then down here at the bottom, we have all of our JavaScript, so you have to put the Popper Js and J Query. So it's Jake weary improper Js. And then it's the Java script from Bootstrap. So it goes. Here's our Jake weary. Here is our proper Js. And here is our boot, Shep JavaScript. So that's how you do it. If you're pulling everything from a cdn you can hit, go live on this and this is what you'll get. Everything's coming from the Cdn or the cloud, and you don't have to worry about any of the JavaScript files individually. Now, most of the time, you won't be dealing with this if you're wanting to override it or you won't those files locally. So if you're in that boat, then we'll close this and it would be something like this index dot html. Now, if we go live on that one big difference, our CSS is not coming through, nor is any of the JavaScript. Now we're still pulling in the JavaScript from the Cdn for J query dependency and popper Js , but notice we need to get the vendor files so bootstrap and our CSS will be local now. In order to do that, you need to come here, scroll up a little bit and you'll see compiled CSS and JavaScript. You would download that. Now get this down here, out of our way and you'll be presented with a zip file. And then the distribution voter wants you. Insipid. So that's what this is right here. And if we open it up, we have just our CSS and our javascript. So let's open up our advanced files. And here we have our starter files, and then we have 10 bootstrap, normal, and then we want to go into vendor and bootstrap, and then we have our to CSS and JavaScript files or folders. So it looks something like this just so you can kind of navigate through that. So what we're gonna do is we're going to copy those over, So I'm gonna go into my CSS folder, and you're just going to copy all of this now, If he didn't want all of it, the main one that you need is the CSS or the men ified CSS. For now, we're just gonna copy all of it, and I don't need that DEA store. It's giving me an issue. It's there we go and then out. Back up a level good or JavaScript Back up a level good or Java script in will copy all of this and pasted over. Now. If you really wanted to Onley get what you needed, then you just need the men ified version or the regular bootstrapped dot Js. So either one. But for now, we have everything that are bootstrap. Download files have all in our project, so they're right here. We have vendor bootstrap and then we have our CSS and our JavaScript so we can close this now and we can close. Get bootstrap dot com and this is from the Cdn, and this one is now working. If we reloaded, it's pulling all that in. So that's the basic set up. Let's go over what's actually going on. We have Here are link to our style sheet. It's in the vendor folder and then in the bootstrap folder and then in the CSS folder, and we're pulling in bootstrap dot men dot CSS. You can also pull in the non men ified version and then down the bottom. We're pulling in. Our vendor slash bootstraps last Js bootstrapped Ottman dot Js in the minute five versions or just taking out all the spaces and extra unnecessary characters. And then we have our own style sheet just to make it orange. And that's just to show you kind of linking it up with our own styles. Nothing larger elaborate. I just wanted to kind of show you that. Hey, this is where you would put it and then show it actually working. So that's it. That's our normal set up that we would normally have in the beginner course. Now, in the next video, we're going to dive into the S CSS and see what we have going on there. I'll see in the next video. 15. Bootstrap SCSS - Advanced Setup: in this video, we're going to look at the bootstrap for source files, which is basically the S CSS before it gets compiled to CSS, along with the job script. Now we're in advanced starter files. 11 bootstrap, underscore s CSS in there. You'll see we haven't compiled our CSS yet. And we have a single styles dot s CSS file, which is our own. Not much in there, though. And here we have vendor bootstrap, no CSS, no job script and no s CSS. So close. All that And this is what we're starting with. Now. If we go to get bootstrap, I'll go back here and well, click on download. Previously, we went to compiled CSS and JavaScript. Now you won't The source files, so just download source. So once you do that, you can get this. Is it file? I've already extracted it, so we'll open it up. And here you'll see we have all the different files that they used for the project a lot more than previously. This is the distribution file, which is just what we've extracted before in the previous video which saw the compiled CSS and JavaScript. And it's as you can see in that CSS and JavaScript folders here is the UN compiled JavaScript. We're not going to touch that, But we will touch the S CSS. And this is all of the different partials. And then the final export files that we will use in order drug, compile our own bootstraps. So we need to bring this into our project. So the first thing we are going to do is open up Advanced starter files 11 bootstrap, underscore s CSS go into our vendor folder going to bootstrap, and then we will go into our JavaScript. We want the disc folder and JavaScript and you can copy. You know what? Just to be different this time. Let's just copy these two. We really only need one of those. So it's bootstrap dot Js and bootstrapped up men dot Js. We're just copy those and we don't need the CSS. We need the S CSS. We're gonna copy all of this. And if you're on a Mac, you don't need that dot ds store, so copy everything else. So we have our as CSS folder. We're going to paste all of that in. It's gonna paste in all the partials and all the folders that have the mix ins and everything else. So we're gonna close this folder, which is our bootstrap source files, and we're going to come back and back all the way up till we get to this part. Here is 11. We need to go ahead and bring that over to koala. Don't worry about the JavaScript. In fact, you can remove that if you won't. And then I'm gonna close our advanced piles. So here we have our styles. This is our own. We can go ahead and change the help footpath and set that to our CSS folder. So you just go up a level and then we go to our CSS and this is going to be styles if I can type styles. Nazi SS. All right, so we've got that changed. And in fact, if you want, we can go ahead and compile that. And here you'll see it's just our background color. We are using a variable here, nothing special. It's just to show you our own CSS. Just something small to let you know it's working so we can close this. That's typical. This is what we're used to. But this is where things were going to get into a little bit of a different territory. So we have our vendor file or folder and then our bootstrap folder. And here we have our s CSS. Now, let's kind of go through this. We have our mix ins, there are a lot of them, and then we have these things called utilities, and there are a lot of those as well. And then we have all the base partials and then we have one called bootstrap grid. So we have bootstrapped hyphen grid. And this is just the grid. Close this for a second. And all it's pulling in is the functions variables, mix ins now notice it is using the folder path. So if you're using any kind of partials that Aaron folders, then you will have to show the path to get to those. But again, you don't need the underscores or the dot s CSS. So we have our mix ins here and then the grid and then utilities, and that's pretty much it. We'll come back to this one. But when you are looking at your files here in the distributed CSS, that's what this reboot stuff is, and that's where the grid comes in those air basically just resetting the defaults or just pulling in the grid. You'll see there is a big difference. There's not as much code those air, just the little bit of files that you can pull in. If you didn't want to pull in all of bootstrap, you can pull in those instead. So that's what this one is. And we can go on to the reboot, which is just pulling in functions, variables, mix ins and reboot, which again just resets all the browser CSS to some defaults that they've chosen. Now, if we go to our bootstrap dot s CSS, this is where we're going to see everything gets imported here. So we have our functions, and then our variables mix ins, reboot route, all that stuff. Everything comes here so pretty cool. But how do we compile all this? Well, let's close this up. So here's our CSS folder. This is what we had previously in our last example. It was already done for us, but we can go ahead and change the output for these. So this one's gonna be bootstrap hyphen grid de CSS. Let's set that output path to go up a level and then in our CSS. Now this is under the boot Shep folder, So boot strap hyphen grid dot CSS and this one's going to be called Reboot. So boot strap hyphen re boot dot CSS. You can call these whatever you want, but it's best to call them what they are. And then, of course, our main bootstrap file. So we'll go up a level good or CSS folder, and then it is bootstrap dot CSS. Now we can go ahead, and we've already compiled this one, which is our own, So we can go to Bootstrap Grid and I have this folder open so we can see it as it compiles . So there's the 1st 1 and then the reboot and then the bootstrap. Full bootstrap. So there we go. Let's have a look real quick. You'll see that here's the grid, and I'm just going to scroll down. There is quite a bit of code here, going to kind of scroll to the bottom. Sorry if it's going too fast, not really wanting you to read it, but here we have about 1400 lines of code just to give you an example of how many lines of code just the grid is. And then we can look at the reboot and it's significantly shorter. If we look here, you will see about 270 lines of code. And again, it's just really setting the base CSS for the browser. So as you can see, these air just stripped out versions of Bootstrap. So this bootstrap grid and the reboot and then we have, of course, all of our bootstrap files pulled in. And if we go to the bottom, we're looking at about 60 almost 6800 lines of code, so that's a lot of CSS. But that's just the beginning. You can customize this and pull in just what you won't, and that's what we'll do in the next video. But let's talk about now. We have all of our bootstrap compiled were not overriding anything, really, unless you're overriding it in your own styles. And that's what we typically did. When we had our own CSS, we could override things, but it wasn't quite the same. So if we look at index dot html here, we have our JavaScript at the bottom and It's still pulling in from the Cdn for Jake Weary and Papa J s. But we are using our men ified version. So it's this one right here in our JavaScript or are bootstrap fouls in the JavaScript voter. So we're sourcing that locally and then we have vendor bootstrap CSS. And this one's not the men if I because we haven't created that. But this is what we created right here. And that's what it's pulling in. So everything looks very similar to what we're used to when we're using just the normal bootstrap CSS that's distributed to us the compiled version. Now, if we want to go ahead and launch these, you can and this is what it looks like and then you can also in index to do the same thing . The only thing that has changed in this file is that we're pulling in everything for the JavaScript is all pulling him from the Cdn instead of pulling it in from the JavaScript folder here. But our bootstrap is still sourced locally, and that's what we've compound here. And then we, of course, we have our CSS in the same place, which is see no overriding anything after. So that's it for this video. I'll see you in the next one where we override some bootstrap classes. 16. Overriding Bootstrap: in this video, we're going to be overriding Bootstrap for using the source files or basically s CSS. We're in advanced starter files. 12. Overriding bootstrap. Let's bring that into Kuala starter files and drag that over. Let's go ahead and change the 1st 1 which is our own Set that output path to our CSS. We already have a file. So go ahead and override that one. Replace it. If it compiles again, it'll just be the same thing. No big deal. But we wanted it to go to the right place. So that's what it looks like. Close all of that. Now we want to get into wears bootstrap. How do we over at it? So we go to Bender, and then we go to Bootstrap and I have our Js file or JavaScript file in its bootstrap dot men dot Js. We don't need the rest of them, but we do have all of our s CSS from bootstrap. We do not need the bootstrap grid reboot. We will need this one, so we'll keep it. But these two we don't really need you can delete them or remove them from Kuala. However, we're not gonna come problem. So that's the bootstrap folder. Let's go ahead and dig into our custom. Bootstrap. We have custom underscore. Bootstrap folder. You can name that. Whatever you won't. You can also named this whatever you won't grant, you would have to change these in your index file. But again, these air Just what I'm naming them, so custom dot custom underscore. Bootstrap dot s CSS. Let's have a look. We have a lot of stuff coming it out and let's go ahead and get this one running. So index, start. And as you can see, it's going to pull from our vendor Fall folder and our custom bootstrap folder and custom Bootstrapped s CSS. So that's all fine. Then it's gonna pull in our background from our regular CSS. Now, JavaScript is pulling in from this folder right here, the men ified version. So just keep that in mind if you want to, you can have it pull in the JavaScript, all from the Cdn, but still use our regular CSS are custom bootstrap, CSS and our own CSS. That's the only thing that's changed. Here is just this one line this script tag for JavaScript. So use whichever one you won't. But the main thing is we're going to be overriding the's bootstrap classes, so we'll go back here. I will make this a little bit bigger and maybe even increased the sighs. There we go. So I'm gonna get this stuff out of the way, and the first thing we have is option A. We're going to comment. This are uncommon. This line. Save it. And magically, all of our bootstrap appears. Now it is pulling from this voter right here. So it's go up a level. That's what the dot, dot, dot slash So saying go out of this folder, go into the bootstrap folder, go into the S E SS and grab this bootstrapped a CSS file because that's where everything's being imported. So if you wanted to, you can do just that. And here's all the bootstrap, everything, all almost 6800 lines of code. Now that's nice. But the reason you're going through this extra step is probably to eliminate some of the bootstrap you don't need. So we can turn this off, are coming it out, and then we can go to Option B and Uncommon ent. Just the required stuff. Now these are required. You have toe have these. So functions, variables and mix ins are all required if you're going to use any of the optional stuff. So here we have thes items right here, and we can turn these on and off the different optional ones. So we have reviewed type images, code and grid. But the main one we need is the last one, which is our buttons. So we turned that on. We can actually turn all of this off and save that in. There you go. Now, if we look at our CSS well, see, it's rather short in comparison, dragging everything around. So it went from 6800 lines of code to about 405. Big difference. Now we'll comment this back out and go on to another example incoming these out. Now, this is where the fun part starts toe happen. So we know we have in a primary as a color so we can override these That's turned these on . So we have all bootstrap coming in. But we're changing one thing we want to change any time it references. Primary for a color, whether it be a button or a background or any of that stuff. We want it to be this blue. So there it is. We changed it. And any time you use primary again, it's going to be that way, and we can go and test that in our index file. And if we wanted to, we can add a class on this DIV of B G hyphen, primary and see It changed the background to that blue pretty cool simply by overriding what primary color actually is. Now if we want to, we can get more technical being comment this out. And here we have some advanced code. We have a themes, color map or a color map, and we're gonna uncommon this and we're gonna leave this line, commented out for the moment and go ahead and save that. So what we're doing here is we're using what's called a color map. We have theme colors were setting primary to purple and danger to pink. For whatever reason, you can choose whatever color you want there. Now, if you won't, we can uncommon this and save that. And now we have a border radius of 10 rim. It really changed those buttons. Now you may be one your Where did I get all of these different items? How do I know what overwrought? Well, it's pretty simple. Let's go into our bootstrap s CSS scroll down and there's this partial called variables. Open that and then let's close this. Get out of our way, and here you will see him in the scroll to the top. We have all kinds of colors, all kinds of variables. One thing I want to mention right up front is you'll notice we have these default items. Basically, here's the default. If no one's overriding it except the default. However, if someone's overriding it don't change what they've changed. So basically before, when you're using the regular CSS, you'll see where it says, Hey, this is important. You can't override it unless you use you know, exclamation point important here. It's totally different. It's like, yeah, right all you won't We won't mess with what you've basically written, so it's pretty cool. In that sense, it doesn't override your stuff. So here we can go through and look at just all kinds of stuff we can name. It blew into go purple, these air, the different colors that references Here is a color map so we can change this to this one To blue. If we change this one to Blue, I'll comment this out real quick and I'll call this blue. Then everywhere blue is referenced in the variables files, then it will override it to that blue color. So that's pretty cool. Now you can go on to scroll down and you'll see you can override spacers all kinds of stuff . I missed the color all here. This So this is where I got the color map for this theme here. This right here. So that's how I knew what to override and what to type in my custom CSS or s CSS. Now you can scroll down and you'll see we have a whole bunch stuff. You got the grid break points. You can change those. Just don't change it in the variables foul. Don't change any of the regular bootstrap stuff because it could cause problems for you later. If you ever wanted to go back, you would have to re download it or someone else was using the same project files. They may not know that you overrode anything, So that's why it's best practice to use your own import it, you know, create your own custom bootstrap file or s CSS and have fun. Here's our container wits, all kinds of stuff in here there's our border radius is So that's where I found that. And that's pretty much it. There are a ton of things that you can override and will be here all day. Let's do one last thing we can go to example three. And we're basically going to do the same thing. Except for instead of importing all of bootstrap, we're going to Onley import what's required. And then we need, of course, our buttons. So that is how you override the bootstrap classes and the different variables. You really won't need to do anything other than mess with the variables, but you may find other things that you want to override. You may also find that Hey, I won't. You know, buttons. I want utilities. I won't different features. You can customize bootstrap to whatever you won't and you don't have to use the colors. You don't have to use everything here. But this is what's nice about using the role s CSS. The UN compiled code it allows you to do a lot more customization before you ever compile it reduces your lines of code. Like I said before, you know something like 405 lines of code. That's a lot less than the 6800. So make bootstrap your own. Change it to whatever you would like. If you want to know more information, you can go to get bootstrap, and then you can go into the documentation. Here's an item for theme ing, and you can see this is the spiral structure I've already got just started with the foul structure. These are some of the different imports, so you can jump straight to here. And then we have the different variable defaults, the maps, the loops and all that stuff. So if you really wanted to get into it, I recommend you either go to the documentation or just start playing around in that variables foul. Hope you enjoyed it. I'll see in the next video 17. Section Intro: in this section, it will be an add on to the course. It is completely optional. This is an advanced section, and it's going to be covering some more advanced topics. But it's actually being released because someone asked for it. So bear in mind, there may not be as much editing involved, but I'm just trying to get this out to you so that you can enjoy it and learn some more advanced topics in Bootstrap. So join me and we're gonna complete a project together. We're going to talk about some advanced topics, and that's pretty much it I'll see in the next video. 18. Comparing Bootstrap Versions (4.0, 4.2.1, 4.3.1, etc.): in this video. We're going to talk about bootstrap versions now. You may already be familiar with version three if you're not. You know, this whole course was built on version four, but unfortunately, things don't sit still in Tech. They move very quickly, and all of a sudden you may find yourself out of date, and you can look by going to get bootstrap dot com and you'll see that version 4.3 point one is now out. And it may change by the time you actually get around the viewing. This The biggest thing is I wanted to show you how to keep up to date with all the versions that will be coming out over a period of time. So what, you conduce you can go to blog's, So get bootstrap dot com and then you click on Blawg, and here they will talk about the different changes, and they're very subtle. Sometimes it's just bug fixes. Sometimes it's major updates, Um, and that's what you kind of find here is like new features added and and things like that, and you can go through this and you can read it and you can play around with these classes , I won't be walking you through those because Al virtually in tech, this is kind of how things are. You have to learn to read and keep up with all this stuff. And it it could be a but a bit much to be honest, even for me. But here you will find a lot of the things that are changed or, as you see, fixed or improved and you can read those. And there's some pretty cool things, like the font size is changing and stuff like that based on your responsiveness of the website. So basically, at a 1200 break point, the fonts now going to scale MAWR, so those are some different things. That air in this version and you'll see when this originally came out was February 2019 and you can see down here all the different things. And then we have a previous version, and there's version 4.2 point one. All of this is fine. There's not a lot of changes, but I wanted to show you how to compare different versions. So here we're going to click download and we're going to click download this version the the 4.3 point one. So we're gonna download just the CSS. And I want you to put him on your desktop in a folder called Bootstrapped Versions. And then in there you'll have CSS and you'll have s C SS. Now, I've given you link somewhere around this video. I'll try to link this folder if it'll let me. And you can down just download the folder instead. But I want you to be able to do this. So all you're doing is you're downloading into a folder on your desktop or wherever you want to save it a CSS and S CSS. And you'll save that. So you'll save this in there and you'll save these in here in there as well. But under the SC SS and what you're gonna do is you're going to use the links provided, or you can navigate to yourself. So, like we got a bootstrap 4.0 point zero, and then we head down and it says head to the downloads page, and then you can download them here. And this is the older version, and the reason I want to do this is I want to show you how you can compare the actual code yourself. So once you get all those downloaded or if I'm able to link it up around this video, then you can download just that folder. So this is what we have after you've done. All that we have are CSS and all the different distribution. So 4.4 point 1.3 4.3 point one and then also you're s CSS. Now. I'll be honest with you. It's easier to deal with just the final version that they give you because there is a lot of material here on a lot of files to deal with. It gets to be a mess. So that's why I personally like to look through just the CSS that they give us or the final distribution. Something like this, and what we will do is we'll stop playing around with this folder and we will drag it into our visual studio code. So dragged that in. Let's make this bigger, and here you will see our folders, which are our CSS, and I think this is the easiest way to view it, so we'll deal with just the CSS. You can play around with the S C SS. If you go into you're different versions, so you'd have bootstrap you're gonna look at thes mix ins, all the things that say s CSS. You can look at those I'm not going to. I think if you want to, that is fine. But let's back out of these and let's have a look at what changed. So let's open this up. And we have a lot of different versions of are basically just the grid and stuff like that . Let's go straight to the bootstrap dot s the bootstrap dot CSS and will select for compare . And then we'll come in to say version 4.1 point three and we'll find the same thing and we'll right click and compare with selected So we'll click that. And now what we have is in collapse that outline you don't really need it. Well, basically, what we're doing is we're going to compare similar the way you've done in the course. You can do this for pretty much anything in visual studio code. That's why I love it so much. But we're gonna compared the bootstrap dot CSS for both versions, and he can close this. If you want to get a a little more room for you and everywhere that you see that there is a difference, then it will highlight it. And you can see what you're comparing right here the whole path. So, as you can see when you see something highlighted darker than the color, like dark red, that means that those were the two things that have changed. It first highlights the line, and then it highlights the two things that have changed. Now we start going through here, you'll see the differences. So this is a different version, and then you can see all the different changes on the right. So it looks like they took a bunch out coming up. And a lot of this is gonna be basically non isn't essential. It's not really that important. But if you want to do it, I want you to be able to see how to compare the different versions. Like take, for instance, online 50. They changed from this color to a color transparent, which they're referencing somewhere else, so they have a variable four transparent. Now, instead, a lot of this you can just skim right over but you'll see that subtle things have changed, and it's not big differences and when you're using it. But if you wanna start a study, you know CSS and see how some CSS is written or see how things have changed. This is a great resource, and you can do this all yourself and you can see they they took this line out right here and they changed this part right here. You can just start seeing what's changed, and it's very subtle. Ah, lot of these different things are settled. Nothing's changed through here and just keep scrolling. Oh, look, A big code block has been removed. Um, those They're basically changed code the k B D. Pre so different things. Some of the stuff I don't even know what it is. They changed. It looks like they took a lot of things for Web. Get out. I will say that which is most likely for a believe safari. So everything for the columns, the grid, all of the Web get stuff was removed the pre prefixes for Web kit or for safari. They were moved and you conceal of that. Now I'm not gonna go through all of this for you. I think you once I got you set up, you can kind of look through it yourself. But I just wanted to show you how you can compare different versions of bootstrap as faras bootstrap for and you can continue to use this skill when, say, bootstrap, Bob comes out whenever that will be, and it won't be any time soon. They're still going to stick with this. But, you know, maybe you're watching at a future time that it's closer to a release. Regardless, comparing the code can give you a little more insight as to what's going on under the hood . And it also can give you a great way to see How are you stalling your CSS? And, you know, there you go, That's that's pretty much it 19. CDN vs SCSS: in this video, we're going to talk about the bootstrap cdn versus SAS or a CSS. What am I even talking about? First of all, let's go to download here. You'll see where you can download the compiled CSS and JavaScript, and you can host it yourself on your own server or wherever you're hosting your project. Or you can download the source files customize, which is basically your S C SS. You can customize it similar to the way you've seen in the advanced section and then spit out your own CSS for Bootstrap and then hosted that way. Or you can skip all that and say, I just want someone else to host the bootstrap files and I'll link to them. And that's what a content delivery network is. Or a cdn. It's basically someone says, Hey, I have hosted this file and you can or these files, and you can reference I'm here and you don't have to do nothing but include them in your project. And all of a sudden it's magic and bootstrap starts working. You've seen this as we went through, and you'll see this in our next project. But I wanted to give you a big understanding of your different options of hosting personally. If it's a small website and it's maybe a single page website and it's nothing too complex, and I'm not gonna be doing a lot of bootstrap overrides, then I would use the bootstrap cdn. Now, if you are wanting to say, reduce the size of the footprint of how much CSS is because it's several 1000 lines of code . If you want to reduce that because it's server load time where you want to customize, then you would want to do this option. And so we're gonna make a little project where we're going to turn on or only include what we need. And what am I talking about? Well, when you have your CSS or your S E S s, you can reduce all that into just what you need. And so here's all the bootstrap s CSS, and you can see there are a lot of files and some of them you don't even need to include. And so those are the differences. Those your different options. You got the CD and you've got self hosting either the compiled CSS or do it yourself and in the next several videos. We're gonna be talking about doing it ourselves with the S C. SS. But I wanted to kind of explain all of that before we got there. I'll see in the next video. 20. Project Preview: in this video, I'm going to show you our next project. Now most of it is already complete. In fact, it's 100% complete. It's a template. You can take it and use it for anything that you won't. It's more of a proof of concept. And when I mean by that is we're not going to be touching much of the HTML. I'm just mainly going to show you the S CSS side of it and using some advanced bootstrap set up. Now let's see that website. So here we have it. It's nothing fancy, but you have a little bit of a scroll spy going on here as you scroll down and then we also have You can put the logo here if you won't or and here and then we have a blank spot for products again. This is a template. You can customize it. It's mainly just to get you into a project that we can play around with ds CSS. So right now this is all pre built. You have all this Laure Memphis, um, and cool things. So again, just a template. But there are a lot of things to do here. So I will see you in the next video where we will get started 21. Project Setup: in this video. We're going to get everything set up for our project. Now, somewhere around this video, you should see resource is and see Arslan files. Now, on the desktop I have are bootstrap versions that we downloaded in the previous one of the previous videos. So if you still have that, it will come in handy. If not, you'll have to go to get bootstrap dot com downloads And you want the source files, not the compiled version. So let's get started. We have our bootstrapped versions here already open, and we're going to go into the S E S s one and we're going to copy the bootstrap 4.3 point one. If you have a newer version, by all means, you can use that. And we want to create a new folder called Vendor and inside a vendor. We won't do put strip files. So now that we've done that, we can close Thies too, and drag our salon into our visual studio code. And let's go ahead and create. Here's a lot of it a lot going on. What we want to do is go into rs CSS create a new file called Custom underscore boot crap, the S CSS. And when we compile it, it's going to spit it out here. We're going to use Qala as well. So let's go and get that set up and I don't have it handy. So there it is, and we want to just drag in. We want to bring in just R s C SS folder. That's what we're going to be watching. Enclosed that. And then let's right click on this and set our output path to be our CSS folder. And we want that to be custom unscored, bootstrap, CSS. And for this one we wanted to be output bath CSS styles that CSS and you can override to replace the one that's there and even it refresh or m pile on the CSS and on the has CSS. Now we should have custom bootstrap dot CSS and our styles are all there as well, and that's pretty much it. In the next video, we're going to get into our bootstrap 4.3 point one and start digging into the actual S CSS . I'll see you there 22. Bootstrap SCSS project: in this video, we're going to dig into the S CSS and decide. How do we determine what to pull into our project? What CSS or S CSS files do we actually need? And that's kind of the whole task for this video. Let's go ahead and hit. Go live on index. Make sure you're on index. I ht male hit, Go live And there's our website. It looks terrible and it is basically your entire website. Without CSS, it's just HTML. Well, I take that back. There is some CSS. It's the this one right here, our styles that CSS the one that I've already created. But it's no bootstraps, bootstraps all gone. It stripped out of it. So this is what we're starting with. Doesn't look very appealing. And let's get that over here and let's get this over here. Now let's talk about this Bootstrap, these bootstrap vowels. Let's make this little bigger for the moment. Here is our custom bootstrap dot CSS This file right here This is going to be all of our bootstrap every time we compile, or every time we save or include things in our custom boots trip, it will spit out to our CSS, which is linked right here. So we're also linking are Java script all the way down at the bottom? We're we're bringing this in from the cdn. And remember off talked about the cdn. I think it's just easier to keep it separate. We're only going to focus on the T CSS. That's mostly what you're gonna want to change when you're doing this type of set up now for this project. I did have some styles that I created, but we aren't going to touch those. So let's close that. Let's go ahead and dig into our vendor folder. And here are a ton of files. Don't worry about what they all mean. Let's go straight for the S. E s s. Here you will see, we have alerts, badges, thes air, all partials. And if you took the advanced section, then you will know about partials. If not, ah, Holly recommend you go take that section. So basically what's happening here is you have all the different components. Just what they kind of component make everything into a component so that it's it's just buttons. It's just the cards. It's just the care cell and it keeps everything together so that it's easier to write the CSS or S CSS in this case. And then it all gets compiled on referenced into one bootstrap boulder or one bootstrap bile and see, you can see here we have functions, variables, mix ins. All of the bootstrap s CSS partials are now in this one Bile, if you just want the grid, here is just the grid. So that's kind of how it works. It's basically all these partials being fed into the different parts or components. So if you just wanted reboot, there's reboot. And if you want all of bootstrap, then this is it. So let's go and copy this. We're not going to use it, but here is all of the as CSS. So copy that, and then we can collapse this and we're going to go into custom. We're gonna paste it, and then we're going to comment it at all out. So command or control slash will comment that out. As you can see, this one's actually pretty important thes top three we have to have. They are required. So what we're going to do is we're going to add required online 39 and paste those three. And before I save, I'm going to show you as normal. I think you kind of like this, but I like it. It's going to show you As we start changing and adding the S e s s that we need, we're going to change this this project on the left live. It's gonna auto update because we have it running. If you don't have it running goed and get that running using your index dot html, you should be comfortable with that. All right, so let's go ahead and get started. I'm going to a NCAA meant this thes are required. It's in the documentation for bootstrap, but I'll go ahead and save you the trouble. It's required functions, variables and mix ins are always required when you're used in the basic s TSS. So we're gonna pull those in. But the problem is, if we save it, it's still not going to work. Its gonna give us an air, and that's because it doesn't know where these files live. So what we need to do is at import quotes, and we want to go into the dot, dot slash bender bootstrapped 3.1 and we won't s CSS. You can type these out, by the way. And then that is where we're going to stop. We're going to do functions. Let's call it that. And then we need our semicolon. It's going to continue to complain about the others. I am going to collapse this because we don't need it. We have everything right here. So let's copy these. This one we don't need. But we need to copy this path for each one of them. And there we go. So that is our required items. Nothing's changed so far. Let's continue at Well, let's just copy that whole path from here to here and we will delete this last bit. Then we'll copy this again and again. It's going to complain because we don't have anything. So let's start adding things. So functions. Let's include reboot that is basically going to give us our styling that we won't for our text and things like that. You're Briles Air has some default styling, and we're going to get rid of that with reboot. And then let's add, we need the grid because down here we have thes items are grid items So let's add Ingrid. There it is. Save that. And as you can see, this has now changed to a different size grid. Let's see what else we need. Well, we have images. We use some image properties or image fluid, so slash images and then we also need our utilities. That's a big one. So slash utilities and look at that. Things were really starting to come to life. Soon as I put in utilities, we had some things change a little bit. Are Senator spacing and all that stuff? If you If you go back to the bootstrap playground, you'll notice that I have it laid out. And it's things like the grid and utilities unnamed those that for a reason and components . So all those things are basically what you were pulling in is all the utilities. If we have a look here, if we go into utilities, see, here's all the utilities line background, borders, clear. Fix all those flex. Anything like that is all being pulled into this one. Utilities and warrior, including it in our project. So that's what's going on here. Well, here. So let's continue. We need let's say, nab our stuff So knave and knave bar And look at that. There's our nab bar. Now what? Some of this Laure me Epsom stuff it's not supposed to be showing. So we need to collapse that. So let's spring in transitions. And there we go. There is our wonderful transition. It hides those. What else do we need to bring in? Ah, our cards we need down through here somewhere is card, so slash card And there is our outline for our card. And it changed him formatting a little bit for us. Oh, yes. Look at that. Are transitions looking good? Okay, what's left? Well, we might need our table, so slash tables and I believe that is it for our s CSS. And if you're wondering how I know what is what I just started with the basics. And what I mean by that is each one of our items was basically pulling in all of our features. So I just went down list and I knew from the previous parts of our course what we basically needed we needed the reboot. We needed the images. We needed the grid. We needed our tables and so on. Now we're not finished, but we are finished with the S CSS. There's some things we need to check on and like getting the picture showing up and also getting our scrolls by working. But other than that art, our template is pretty much finished. The only reason I remembered which ones was because I did it before I showed the video or gave you the instructions on these. And so you will have to do some trial on air when you're doing this stuff yourself. But that is how you reduce your footprint. Let's look at our and custom CSS, and if we scroll down, it's still a lot. But it's a lot less than all of it. It's about half. We cut out about half, so there's only 4000 just under 5000 lines of code, and that's about as close as you can get it. If you ask me were really not using all that much, we left a lot out. Our tool tips are motels. We're not using any of that stuff, so that's how we leave it out, and a lot of this again will be trial on there. Let's finish this up in the next video, and I'll see there 23. Bootstrap Utilities: So after our last video, I realized that we could go even deeper with utilities and divided out what I'm talking about. So let's go into vendor and go into S C SS. And here are the utilities. Now, if you look here in bootstrap, we're bringing in just utilities, but weaken, dive deeper, weaken, take and go into our vendor, and we can go up to That's their own vendor, not our vendor, but we can go to utilities, and we could start looking through here and say, Oh, are we using that? You can look in your index file and say, Oh, no, I'm not using this. I'm not using this. So I've already went through that process of like, eliminating out what we don't need, so you don't have to do that. But if you're working on your own projects, we're gonna have to learn how to do that and just kind of turn off what you need. Our turn on what you need. Rather. So let's go back to our custom. Bootstrap. And we want to look here. We're just gonna grab that because we'll need that path. We're also gonna comment it out, and then we're going to add utilities Second spell. And then what we want to do is we want to take and add on Lee what we need. So let's go nested into that folder and grab. We need display. Well, first of all, let's save it without and see how bad it looks. Yeah, looks pretty bad. So we need that back. So it was just to show you how the layout is broken now, without our utilities, it really depends on it. But we don't have to import all of them weaken important. Just what we need And that 1st 1 is display. I'm gonna continue to save as we we g o and we'll see how things change. We definitely need flex. Things were starting to look a little better each time position. We also need spacing and things were still looking like they need some work, but they're coming around in The last one we need is text and things looked back to normal . Everything looks good. I don't see any issues. If we forgot something, then let me know. But I'm pretty sure that's all we need. And let's have a look at how much we saved on our code and we cut out about 500 lines of code 400 or 500 cause, remember I said it was about 4700 ish before we got done the last time, and we just cut out even more So sorry, I didn't realise it in last video. It was already kind of long anyway. But now you can see that you can really start to get nitty gritty as to what you can actually need to include. And if you want, you can go through here and you could see Okay, Yeah. What? We turned on display and blacks and position. And you can see you can go through the index file and look and see where we used, like, fixed top and stuff like that. So we needed to import position and a big woman was text we needed to import tax with white . So text white, We use that in just different things like that. We also used our spacing, which was a big one. It looks kind of a mess, but that's how they have it. And so you all you have to do is in port spacing, and you have all of those spacing Beecher's, so that's pretty much it for what all we can do with whittling down that utilities. And it doesn't have to be nearly as long or as big, and we cut out a whole portion of it. So that's just another example of how much you can do. I'll see in the next video. 24. Scrollspy: in this video, we're going to finish up our project, and the first thing I want to talk about is our background. This hero image right here was missing in the previous video because I had quickly changed this over and didn't link up the right picture. So in the source files that you get, it will automatically appear. Don't worry about it. It is this image right here from pixels. It is used in our styles. That s CSS in case you're curious under home. And that's where we're pulling that in. No need to worry about it. Everything is pretty much working, except for one thing. And that is our scroll spy. And I wanted to make a separate video so that you would know exactly what we're doing. So let's close all of our SCS says our vendor, all of that stuff. It's actually all in our in next html. So right here you will see our body. I'm going to close this, or I'm gonna uncommon this rather so command slash or control slash. And then we're going to commander control slash to comment that out. Save that. And there is our scroll spy. Now there's some CSS working in the styles dot s CSS if you want to go poking around. But mainly, what you need is a data scroll or data spy with a attributes sent the scroll, it's or data Spice that the scroll and our data target is set to the navigation bar, which is this idea right here. And then this data offset is how tall the actual minibar is so that when you go down, you account for that height. So that's pretty much it. You just include those three things and you will get your scroll spy. It's pretty simple. And there you go. That's pretty much it. I would be enjoyed this project. I hope you enjoyed the course. Please leave a review. I greatly appreciate it. Have a good one.