React.JS - Introduction to SASS, Bootstrap Themes, React Icons and Google Fonts

okay so a couple things that I want to talk about we'll just call this react miscellaneous tidbits um and probably something you guys have seen up into this point uh which you might have wondered what is uh SAS you guys might have heard of SAS um it's kind of a modified updated CSS and so you know CSS has been around really since the 90s and I don't think SAS has been around quite as long um SAS stands for uh as you can kind of see here syntactically awesome style sheets and when we've used bootstrap you might have uh seen a little bit of sass kind of if you're looking at the bootstrap Docs just about every page at the bottom of the bootstrap docs like if you go to just about anything um let's just pick on I don't know the nav bar you kind of go to the bottom you kind of see that there's these variables and that is really um what SAS allows us to do along with other things not just variables in our CSS but that's that's kind of like the main way I've used it um so so SAS allows us to kind of upgrade our style sheets to have variables in them and uh you know I thought I'd kind of do a quick demo of how you might work with SAS and and even with bootstrap work with SAS um and so here's a you know a bootstrap site that that I coded up uh last week and I'll go ahead and stop that from running now on npm if we search for SAS uh we can bring it in with an npm command so it's a dependency um that we can install uh uh with npm so that'll be kind of like the first step npm I SAS and kind of like throughout the history like when you're looking at the file extension like one of the one of the weird things is it used to have a DOT SAS file extension s-a-s-s and now it's not uh you'll notice that the file extension for a CSS page with SAS is s CSS um and so um that's going to be kind of the direction that we go we're just going to install SAS as I've just done here and that's going to allow us to create an scss uh file and so I'll go ahead and create a new now I have this components folder it doesn't look like anything's in there it looks like everything's right here so right in the root here I'll call this app Dot scss you can kind of see the the icon there um and so uh what what you can do now is create variables and then reuse those variables and so it kind of helps you uh with your CSS uh keep it clean a little bit and again bootstrap uses this um let me take a look at something here I also want to install the bootstrap npm eye bootstrap so I think up until this point on here I was kind of bringing in bootstrap on my index if I recall properly and there's my bootstrap that I was just kind of hard coding in I'm going to take that out and if I take that out of course of course none of my bootstrap styling will be there anymore uh uh it's funny when you expect something to break and it doesn't oh wait a second there's my there's my what did I just delete let me bring that back in oh that was my icons I deleted the icons I'll keep the icons and delete that and delete that and refresh okay so my bootstrap is kind of taken out um on the app.js just like we would import our CSS I'm going to import my scss okay and I'm going to bring in bootstrap again you could do this different ways as we've demonstrated I'm going to bring in bootstrap kind of here with the import okay so I'm going to bring in with the import command now if I kind of go back that brings bootstrap in another way so we kind of mentioned these variables so I'm going to set some variables um and this is this can be done the way that you can create variables is with the dollar sign um and cut you well we can take a look at the docs and you can kind of see this but here is creating a a variable called font stack uh helvetica would be your kind of like your font uh face and then here is using the variable right so creating the variable first with a dollar sign and then using it with the dollar sign um so maybe you know to do something kind of simple we'll just create uh a variable called you know primary color and then just do something like Orange uh and then we can just background uh and so we can have a CSS Rule Body background color primary color okay so this is just I'm just trying to like spin up like a very basic s CSS file here's a demonstration of creating a variable here's a demonstration of using that variable and you can see the basics of it um with this you can get into changing like the primary colors and bootstrap and changing the secondary colors and you know changing you know for example this button is a success button right it's button success well what color is button success well it depends on your your SAS variables right if you actually get into here you can see here the class of buttons success it's actually well it's being set by a scss file right so you can kind of see down here built into bootstrap you see some SAS going on just in the inspect tool so we get the uh the color of button success from the SAS file uh let's see foreign again what this allows us to do is kind of to take these different bootstrap classes and change what is considered uh uh the the primary color secondary color and so on and so forth um and so I think if I just come into here and just change this as primary I'm going to kind of come into here and change my button to be a button primary and set a button now typically button primary we know is blue and so what I'm trying to do is I'm trying to change the primary color from Blue to Orange and I think that's what I need to do but with CSS it's things are always overriding one another so that's always kind of like the challenge here is figuring out well there you go right so it's actually quite simple to kind of say okay well we know uh the colors and the different variables here there's a primary color there's a secondary color there's a success there's an info there's a warning a danger a light and a dark like these are very standard things that we use all throughout bootstrap and so with SAS it's actually pretty easy just come in here and say okay well I don't want no longer want my primary to be blue I want my primary to be orange and I want my secondary to be green and I you know want to change these things uh notice I don't really need the background color of primary anymore literally just change the variable here and we got that to work so that's cool so um we'll do more with SAS uh as we go but I just wanted to introduce SAS I wanted to introduce SAS as a way to have CSS with variables and at least you guys have seen it now right because we've kind of glossed over it so far and we didn't really need it up until this point but you know at least we've now seen it and to be honest with you I don't know you know as a technology you know I'm just being honest it's out there I don't know how in demand it is I don't know how popular it is like bootstrap uses it but you can get by without using it um I don't really know like how important it is for you guys to like learn in depth learn SAS but at least be introduced to it right so that's all I wanted to do um you know and you can kind of come in here and just using this technique of like learning what are the built-in variables and we now know how to modify those variables you can kind of change each variable and customize it completely from the ground up um however um you know people have already done that and so you might have come across this site before um called boot Swatch remember there are there's a difference between themes and templates right there's a difference between themes and templates themes are just like colors and fonts that you'll your site will use templates are you know like the pictures are provided there's mock-up content you know so so templates are what we were using a lot for our midterms versus this these are themes themes are just preset fonts and preset colors for bootstrap and so there's a one site and there are many sites uh other sites with bootstrap themes and we can kind of take a look at these different themes um and so this is a way to very easily very easily you know if you if you don't want to start from a template to get a certain kind of look and feel for your site and so I'm going to show you how to use one of these themes um on your react sites and so I kind of like this sketchy just because it's uh I don't know it's it's clearly not something you would lose use for a live site so I'm going to use this uh sketchy theme on my to-do app uh I'm gonna bring it in uh with a couple more Imports now there's actually you know in order to do this I needed to install SAS and I've done that I needed to install bootstrap and I've done that but there's one more dependency that I need and that's the boot Swatch dependency so I'm going to stop my server from running control C I'm going to do mpm I boot swatch okay and that's going to allow me to use these different boot Swatch themes on this site and so this is actually pretty simple to do now uh where I'm going to in this order I'm going to kind of comment out my primary thing here I'm going to bring in so here's kind of the here's kind of the import from the notes okay so here's here's the basic idea you're going to import boots watch dist and then here we're going to put the name of the theme well you just kind of you go here and you pick you pick the theme obviously we could choose space lab we could choose Vapor I mean it doesn't really matter so I'll choose Vapor since I'm here and again this kind of changes your primary colors your background colors your fonts this changes everything about the theme of your site so I'm going to bring in Vapor so all I'm going to do is in between those put in Vapor here and there's actually two Imports that I'll bring in thank you one is for variables and this other one is just import this boot Swatch and that's pretty simple and so if I go back to my react app and I boot it back up npm start so instead of you know manually going through and like customizing all the primary colors all the secondary colors and kind of creating it from scratch you know creating all your fonts we can instead use one of these themes and there you go now is that exactly what I want probably not but that's that's the idea of a theme that's a start right we're changing the look and feel of our of our site kind of has this glowing effect whether you like it or not completely up to you and so this is really easy right using this SAS and then using some themes uh didn't have to write any CSS here right just brought some stuff in and that's great um and then the last kind of thing that I wanted to show you um is uh Google fonts have we talked about Google fonts in this class we've done we've used Google fonts like on the midterm at least right so you've used Google fonts in the past so I just wanted to show how to kind of bring in some Google fonts actually quite easy when you're using these import statements uh so let's go to Google fonts the great thing about Google fonts is they're free and fonts aren't always free and so this is a large collection of free fonts that are out on the web and Google makes them available to you to to kind of import and so we're going to click on fonts we're going to find a font that I want to use so here doesn't really matter much so I'm just going to choose this font here Rubik and then what you do is you kind of you have to select the font weight so a font will kind of have like a standard regular font weight and then they'll have something maybe a little bit more bold or a little bit less bold this one doesn't have any of that it just really has the standard font weight which is considered 400 so let's go ahead and click the plus button and then you got to click to kind of view the selected families that'll open up the sidebar and there's a lot of different ways that you can bring these in and so I'm going to bring these in using an import statement and you can kind of see down here where I'm going to copy this import statement I can actually copy this whole line here with the import and I'm going to paste it and delete what I don't need obviously I don't need the style tag I don't need the closing style tag okay so that allows me to import the font however you still have to use the font right because you import a font now keep in mind it's CSS so you always have to worry about like conflicting right so kind of looking here my font is already set somewhere um you know from my theme obviously right that font was set from a theme so if I inspect somewhere in here I can see the font family if I scroll and that's not always the first thing that you see okay so here's my font family this is coming from an s from a SAS file it says font family is a variable if I hover you can see this is like a you can see the font family there and the pop-up and the tool tip this is lato l-a-t-o right and that's coming from a body selector that this is being set so I'm gonna have to override that right with my font that I chose from Google fonts now here you could see how to apply the font family and it needs a quote so it's font hyphen family Rubik Bray paint and there's spaces here and anytime there's spaces you need the quotes uh and there's a fallback of cursive so I'm going to copy that and what I'm going to do is I'm just going to put that on my H1 so since I set my CSS rules down here uh this this should use my Google font uh and H1 should be a more specific selector than body and keep in mind over here I believe I have an H1 that's saying to do so that should change my font of my H1 if if I've done this correctly and there you go now I'm using that terrible looking font but the job is done cool so again just kind of want to keep this one a little bit quicker uh and show you some sass show you some variables in SAS show you how to do some themes and some Google fonts and that's kind of it nope I lied there's one more thing in the notes one more thing in the notes um we use bootstrap icons uh which are great and if you remember um bootstrap icons uh were we hard-coded the uh the CDN for the bootstrap icons I'm going to take that out and that will obviously get rid of my bootstrap icons here um there is another icon pack that is really nice in react and it's just called react icons you know oh my gosh okay there's font awesome icons there's bootstrap icons there's react icons how many icon packs are there well the thing about react icons is that it's a very um it's a very large library that includes other libraries and so inside of react icons what you'll find are all the bootstrap icons if you want the bootstrap icons you have them inside of react icons if you want the final some icons here's all your font awesome icons if you want hero icons what are hero icons I don't know let's look these are a bunch of hero icons so the reason why I think react icons are awesome is because they're inclusive of all these other libraries and so react icons to install them npm I react icons so we need to install the dependency so let's let's start by installing the dependency and PM I for install react hyphen icons and so now if I look for the trash can I get all these different trash cans so what trash can do we want man we've got lots of options uh um let's go with uh b i trash now what's interesting is it should I don't know what what pack it is so bi so bootstrap is not bi ah box icons so bi is box icons and if I kind of there's my bi trash okay so now to use that icon we need to import bi trash from react bi so let's copy this let's go to my app.js I think I copied that copied the clipboard and let's paste now the icon name we said was bi trash capital b capital T so icon name is bi trash all right and then that allows us to now have an element called bi trash so uh we need to find our button that was putting the delete button this was right here here's our button and here was our icon that is a bootstrap icon that we deleted so now we have bi trash it's its own element and voila let's spin it back up npm start and we should get our new icon foreign maybe I like my old Icon better um well cool so that's that's about all I wanted to to show here now you know just one little side bit anyone know what's going on with my background gradient why is my gradient going like repeating yeah that's right it's because it's a background image if we inspect on the body we have a linear gradient as a background image and that background the repeat when you have a background image the default is for that to repeat so we might turn that off in our scss we'll go into our body it's a background repeat no repeat going back to the early days of CSS okay and what you then have is a background color so you're going to get the one gradient and what you don't you know this is backwards what you want to do is you want to have a background color that kind of matches this blue color down at the bottom um so what I need to find out is what is that blue color that's at the bottom and it kind of it must be this shade right here I believe that is the correct shade so I'm going to change my background color to be this shade right here and I think that's going to be the end of the gradient shade so I'm just basically going to change my background color to be like whatever it fades into and I believe it's this color right here so let's kind of uh set the background color to be that piece right there see if that matches there we go and that that great that you know still not exactly what I want you want to set that gradient to be larger maybe set the the body to have 100 viewport height whatever you may want um but that kind of fixes that that's how you fix that problem all right odds and ends um that these are all little tidbits that you could add to your projects right none of this is required but but just all things to consider

Channel: Evan Gudmestad

Views: 549

Keywords:

Id: hOWkM1gKIzw

Length: 31min 24sec (1884 seconds)

Published: Fri Dec 09 2022