Bootstrap 5 and SASS : Theming tips and tricks

bootstrap file was released a few weeks back in this tutorial i'll be teaching you some theming tips and tricks uh using bootstrap and sas now what is bootstrap bootstrap is the most popular css framework for building websites bootstrap speeds up development for your sites now the disadvantage of using bootstrap is that the ui of the components is average looking now what is sas sas is a css preprocessor language it has features like ability to write functions and variables it's used for styling complex designs now using bootstrap and sas we can create above average ui designs and have better control and management of our style sheets in in the app and hopefully you know you will find some very good useful tips and tricks in this tutorial so what we're going to be building today is this simple holiday website now as you can see it's got a header and a main body and so in the header we have a sort of a curvature to the bottom edge now it's not a normal straight edge it's also got a background image and also a two color gradient which is transparent as you can see it says it's a blue and a green in the content area we have a transparent background which is also a green color and the there are blue buttons and so the the blue is the primary color and the green is the secondary color now what we're going to do is uh with sas we're going to change the variables to change the colors and that will uh give us control over theming and then the look and feel of the website so this should be a very good exercise okay let's dive into some code okay um what i'm looking at here is the is the code for uh define in the primary and secondary color so as you can see the primary is blue and the secondary is bright green okay now if i change this to a gray color save that there you go it's it's changed uh as you can see though the content area is gray now uh but the primary color of the the buttons and the gradient on the left hand side is still blue so we change one color and and it's changed the look and feel to the side so if i change that to a green let's just see that you see the buttons have changed the green and also the the the header gradient on the left hand side is green um let's just take you to just see an orange let's see what an orange looks like orange and let's have another sign let me see the sign okay so it's uh it's given so as we're changing the variables it's giving it uh watching the color it's giving a different look and feel to it and that's the power of sas and how useful it is in theming okay let's start diving into the new features of uh bootstrap five now one of the main differences is it's they've dropped jquery in favor of javascript they've added css custom properties which is basically variables that you can use in your css stylesheet you create the variables and you can use the australia style sheet also there is something called the utilities api now utilities api is it's like a toolkit that you can use throughout your website and the way you use it is like you you define a class and that class would be associated with the property so here w is associated with and then you can have an array of values uh that you can give like 25 50 75 100 and it will be associated with the percentage of that value like 25 50 so you can give any set of values depending on how you want to customize your site and you can create these utilities for virtually any sort of property also they made some changes to the grid system they've added extra extra large break point also they made some changes to how the gutter sizing is done it's now it's done through the utilities where you can define the array of values on how to apply the the gutter spacing so which is quite handy for this tutorial we'll be coding in visual code and visual code has many features as like a built-in web server which makes the coding much easier you can go to their website cold dot visual studio dot com slash download and you should be able to get different versions and you should be able to download it from there second thing that you need is node.js node.js allows you to install all sorts of plugins and libraries uh for your projects including bootstrap you can go to their website which is node.js dot org slash en slash download and you should be able to get the particular download for your particular os once you have installed a node.js and visual code we can start coding to start our project we need to create a folder so i'm going to go to the desktop and create a new folder called holiday site and press enter and i'm going to go into visual code and select open folder now we're not doing open file we're doing open folder and then select our holiday site and that should open our folder and in the left-hand toolbar we should see the holiday site folder and we should be able to create new files with your folder in place now we should be able to create a new html file for our project uh so if you go next to your folder name this should be a little icon for new file if you click on that and then just type in index.html and you should get a blank page okay now you can type in exclamation shift an exclamation mark and press tab and you should get a blank html markup and if you go under body and just type in hello and save okay now we've saved it now we want we want to test this out on our server now vs code comes with a web server and usually it's pretty loaded but you can go to the extensions icon on the left on the left hand side you click on extensions and just type in live server okay so it will it will tell you if you if you select it it will say for me i've already installed it but if if it wasn't installed it would say give you the option to install so if you don't have live server then install it now now i want to close this extensions tab and get rid of this extensions sidebar so click on the explorer okay now that we have our server set up we should be able to test it now with our test html page so if i go to index.html and right click on it and i should get an option to open with live server so i'm going to open this page in the live server so if i click ok it should open up a page on the right hand side in the browser okay so it's opened up my index.html and it says the word hello now if i change where say add some extra texture how are you and click save and you see that it has updated the page okay so that's working okay the next step would be to initialize our holiday site folder to to make it into a a node.js application to do that we need to go to terminal and create a new terminal window now you see a new terminal window here i can enlarge it okay so you notice that we're in the directory of our holiday site so the command that we need to type in is npm init minus y now this would initialize it as a nodejs application okay so it's done all that okay next we're gonna install a bootstrap okay let me just make some space here okay now i'm gonna go back to the terminal and type in npm boot in sorry in npm install boot strap at next and also dash dash save now that should install bootstrap now if i just bring back the sidebar okay now under my folder now i've got if i go into the package.json i should have new entry there for bootstrap so that means the bootstrap module is loaded now the last thing that we need to install is a module called node sas now this will allow us to convert our sas files into css so uh to work with a bootstrap sas files we need this uh to convert okay so back to our terminal screen and we go type in npm install okay and press enter this may take a few minutes depending on how fast your machine is okay it's loaded now we go back into a sidebar and click on refresh and open up nodes modules okay we would see a lot of um other directions which we don't need to be concerned about what we need to be concerned about is the bootstrap directory if you go there okay so under the bootstrap directory we need to drill down into the scss directory here you will find all the bootstrap sass files they're the configuration files that you need to do your theming now if we go down we're concerned with two particular files and they are the bootstrap dot scss and underscore variables dot scss okay i just wanted to uh show you that but we're not going to do anything with that at the moment so if you go back to the top and collapse all the folders then you don't you know you you don't you want to remove all the clutter now we should be able to go back into the package.json okay now we've got node sas loaded as well so that's a good thing okay next thing is we need to tell our application to convert our sas files into css files now in order to do that we need to put in a configuration under the scripts okay so we need to go to the end of the line where it says test echo you go right at the end of that line put in a comma press enter and open inverted commas and put in scss close inverted commas and it's a colon and space open inverted commas again and it's node dash sas then space dash dash watch space s sorry not except dot forward slash scss space dash o space dot forward slash and it's css so what we say here is run this command node says we needed to watch this directory s css and whatever we find in that directory we need to output it that's the dash o to the css directory so whenever you make changes to the sas files it will automatically detect the changes and convert it for us so that's done okay now we made the changes to our package.json we need to save it now so control save control save okay now we mentioned in the configuration that we needed two directories s css and css directory so now what we need to do is go to the sidebar where our directories are and you always make sure you collapse all the data so you know where you are so now we know we're in the root so we click on a new folder and we say scss press enter okay so then you click away from there and then click on new folder again and we say s c s s c s s sorry css okay so now we have two folders that we just created so css and s css okay so when we run this command it should shouldn't give any errors so we can create a dummy okay under scss we can create a [Music] blank starship so we just call it main dot scss so we so we need to give it this name main dot sc sc css sorry okay press enter okay now that we have created our main dot scss file we can test out our sas utility so we go into the terminal window and run oops sorry npm run scss okay now if i press enter okay so you get this this message saying that node says so it's running this command now so now if i go back into my main dot scss file and put in a simple style sheet body and curly brackets press enter background color i want to give it a red and press save so now what it's saying is it's it's written a css file to that directory so it's it's it's renderman.css file to css directory save we go into the css directory and we have a we created our starship here okay so every time we make changes to the main dots scss file and save it we will get a new version of main.css now the next part of the problem is to link the main.css to our index.html and that's what we're going to do now so if i go into the index.html and under the head put a link to the css so the directory is the path is dot slash css forward slash main dot css so we're linking the main.css internet into a html and we save it okay if i bring the browser up now you'll see that uh website has got a red background now if i go into the main. scss file and change it again just to test that it's working so go change the background to a green and save okay so that's changed now you would have also saw that uh there there was a message that it's saved the main.css day so it's always good to have a little peek on the terminal screen just to make sure there's no errors there okay next we're going to go back into the index.html and just make some changes here in the title and get rid of this and we're gonna put in a sort of a simple structure header main and footer so it's header tab and footer okay okay now we're gonna add a navigation bar in under the header now what we can do is uh go and i'm gonna what i'm gonna do is go into the bootstrap documentation for version 5 and that's that's the full url and on the sidebar i've got components i'll click on components and i go down you know when i'm in that bar okay i'm gonna mark up for a nap bar now there's quite a few markups and what we're looking for is a very basic one i'm not too sure that no we don't want that one you just want a very basic one okay i think right i think this this is the one okay so i'm gonna be using this simple navigation bar and we're going to add the background image to this and well it's not going to function like this because we're not adding the javascript on this particular project but it will be responsive but it will it won't slide out like this um okay so just gonna copy the markup so just click on that copy i'm just going to place it under my header and paste press save and so i've got i've got the mark up there okay so so at the moment we got the markup for the navigation but there's no styling to it so the next thing that we need to do is bring in a bootstrap into our project and use the bootstrap modules to style our navigation bar okay that's what we're gonna do next so we go into the sidebar and select nodes modules directory and expand it out and we should see bootstrap down the list missed it okay so you see bootstrap and you open up bootstrap then you have three directories there this dist js and scss we need scss so expand that out okay then we need to within that directory we need to go right near the bottom and we will see bootstrap.scss now there's there's one called bootstrap.css we don't want css we want s css okay so inside there you will see all the modules that you need for the uh the bootstrap the full version so uh what we're gonna do is we're gonna copy this and we're going to take out things that we don't need i mean there's an awful lot of things that we're not going to use like tables and transitions and i think we're not going to just drop down then there's breadcrumbs by imagination but there's an awful lot of things that we don't need so we need to copy it onto the root directory of our project okay so if i right click on that copy okay and then if i go right to the top and click on collapse on the on the folder on my folder bar and so if i do collapse then i'll close everything and come to the root so i need to right click and paste okay so and i'll just give it a rename it to right click and rename and i'll just give it a call it custom bootstrap okay then let's okay so we renamed it now we need to do some cleaning so we need to get rid of things that we don't need okay i'm gonna go through this list so we need all the functions these are sort of uh basic requirements you need functions variables mixings and utilities now uh the root and reboot you need that that's a basic css styling that you need as i want to delete type i don't need images i need containers let me just bring that up i need grid i don't need tables for this project i don't need forms i need buttons but i need transitions drop down i don't need drop down button group with only button group i need nav bar i need card breadcrumb i don't need i don't need pagination badge johnny patch alert i don't need a lot don't need progress don't need list group don't need clothes i need toast model tool tape our carousels businesses i don't need all this okay so then help us i don't need helpers okay and i need utilities i'm gonna use the utilities so uh so if i just save okay so i'm just gonna save that now now we've got a simplified uh bootstrap configuration now one thing that we need to do is we need to move the custom bootstrap dot scss into the scss directory so we just drag it in there say move okay so now the next thing we need to do is go back into the package.json now we're going to change this assass utility setting okay we told the sas to watch this particular directory for sas files and convert it to uh css and put it into this directory so we need to now specifically say that we need sas to look at main.scss because we've got two files in there so it's going to get confused so we're just going to put in slash main dot scss so save that okay so once that's saved right we uh we go back into the main.scss and we need to just put a space there we just get rid of that okay so now we put in import import um very commerce and it's gonna bring in a custom bootstrap custom underscore boot strap and then press enter and save okay now we're gonna go back into the terminal and run the sass so it's uh npm run scss so uh just to let you know that there's gonna be some errors there we know and i'll just go through that with you okay so okay i'm just gonna make some changes for the error to come up so if i do a um okay i need to put a semicolon there and also just put in a simple styling body and background color just save okay so we've got the error now i just want to maximize that okay so what it's saying is it's uh far to import not found or uh readable so it's trying to look for this this file functions right now it's looking in custody it's found custom [Music] bootstrap.css and online 11 it there it has a reference to a file called functions so if i go into customs and um just summon customs bootstrap and looking at line 11. and it's saying it's trying to find this function okay the reason why it's not found that particular functions file is because we copied the bootstrap.scss file content from the modules bootstrap s css so we copied it from here so this file name is referring to local to that directory so what we need to do is we need to we're in here at the moment so we need to go back one directly and point it to uh the scss directory in the bootstrap okay so what we need to do is dot dot forward slash uh it's node underscore modules for slash boot strap for slash and scss and forward slash now when i say this we should get a another error message saying they can't find this so it shouldn't say can't run function so if i do save okay now it's saying it's a different error message so you got to be aware of the error message that is coming up so now it's saying formatted error file to import not found or un readable so now the file name is variables on line 12 so line 12 is that so i'm going to do the same thing again copy the same part copy paste on there and say now it should come up with mixings so we've got mixed in so i'm gonna do that save so it's coming up with utility so we need to just keep pasting that same directory because we know we're doing the right thing so all of them and okay and okay so now i shouldn't give any errors okay so we know bootstrap is loaded now because the menu bar has been styled and like i said it's not going to have the sliding menu so it's the this button is not going to work it's always going to display vertically on smaller screens and if you enlarge it it will have full length okay so uh one more thing that we need to be well it's more of a tip that we we can when we want to run the scss script we can go to npm scripts at the bottom here and we can run the script from there the next thing that we need to do is we need to copy the variables dots scsa scss file from the bootstrap directory so we go back into the bootstrap directory and i'm going to scss and if we go down right to the bottom for variables right click copy and and we need to just copy it inside or just just right click and paste it on the sidebar somewhere okay so and i just move it into the s css and say move so that way i know that it's it's inside that directory sometimes it's a bit confusing where you paste it okay so i'm going to rename that to oops rename to custom just click away so we've got custom variables now so we need to link that into main scss so i will add import let's save okay so we haven't had any errors in here so um so if i go into variables and this is where booster has all his settings for [Music] the colors it's got thin colors for primary secondary and all the other ui components uh it's got it's got different [Music] shades of all the colors and these are variables that you put into that you use in the assess files so it's got some gradient functions there and these are like spaces for your [Music] columns it's got link colors and it's got uh this is the breakpoints for your responsive uh grid so it's got extra small small medium large extra large so these are the break 0.576 pixels or small 7 6 8 for large medium and 9.2 for large so you can change these to your preference so if you if you want to change the medium size to 800 then you just change it here um so you also got the container widths uh yeah oops we've gone faster so you've got the container with it's got the grid columns so you know border radius border shadow some animation stuff there so it's got an awful lot of things that you can control so button import form elements so you can customize virtually anything to your preference by just by changing a few variables from here now if i go back and up let's just pick something from the top okay um so we just let's say we want the background to be blue okay so by go into my main dot says css and we change that to blue and save so the background has changed to blue so uh so if i go back into variables so virtually you can use all these variables in your css um and you can overwrite this so that's what we're gonna be doing before we do anything else let's do some cleanup on our markup okay i'm just going to go back to the header sorry the net bar and i'm gonna take out the nav bar the the button okay this is this is the markup for the button because we're not gonna use the button let me just go back okay we're not gonna use this button because it doesn't work because we did not load the the javascript and we're not going to do it for this project so i'm going to take this out and there is a there is a link to it and there's a button so i'm just going to take both of them out save okay just have a look at the markup i mean the browser so refresh okay the button's gone now okay next thing that we need is a picture for our background okay so what i'm gonna do is i'm gonna go to a website called pixels.com and okay and i'm gonna in the search bar i'm gonna type in archie a-r-c-h-i-e okay and press enter okay now i'm gonna click on users now because it's a particular photographer that i'm after so it's [Music] in our mirror okay so if you click on archie and these are all his photographs so i need to find one right at the end so if i go all the way down to the bottom okay and there is a photograph of this man standing in front of the mountain okay so this is going to be the photography that we're going to be using so if i do free download so it's downloaded okay so i'm going to go back in and go back into visual code and go and open open file right now i'm going to go [Music] to my downloads folder and okay this is the this is the file that we just downloaded man wearing white shirt okay so i'm just going to drag that into my sidebar that's the easiest way and you can bring in files i guess i'll close that okay now what i need to do is need to right click and rename and we'll rename it to header image press enter okay so so we got the file in there okay so now we need to go back into main.scss now that we got the image downloaded and renamed now we can attach it to the the navbar now we want to attach it to the navbar so let me just quickly check the the markup so it should be in that bar i just want to check okay so the glass is in there bar yeah sorry okay so now that we've got the image downloaded and renamed we can we need to attach it to the nav bar now so the class of this is the map i think it's nav by should be never so going to target the so yep that's it's the nav navbar okay so done that okay so i can just add it there dot bar url is url let's head image oh so i think it should be dot dot okay so we've got the image in there now okay because i didn't didn't put the because we're in scss directory we need to go one back one directory because it's in the root so so i just uh because we placed in the boot we had to put in extra bit okay so we're also gonna make the height give it a height of 300 pixels okay and yeah now the image is around let me just see the image of the image is quite it's quite a large image i think it's something like 400 4 000 pixel wide or something like that something very large let me just check the size the image is there okay the size is thousand four by four thousand okay so okay so it's it's a very large image and it's it's uh placed it right on the top and we not uh it's not gonna you know we're only seeing like a small portion of it okay so what we need to do is we need to position it center center so uh background position i want center center that okay so it's centered the image right so now we need to resize it so that it fits the whole the header so so we need a background background size right and we need cover so that should resize it okay so so it's resized it zoomed out and it's fit the whole header so that's uh that's what we want okay so the next thing we're going to be doing is adding a gradient to our nab bar which is going to be from the left to the right is a it's going to be a primary color on the left and it gradually goes into a secondary color which is agreeing okay so we're going to be working with the custom variables now so just notice there's an error there i think uh see what we've done is we've uh included the custom variables after all the bootstrap modules were loaded now for testing purposes that i was okay but we have to get rid of this error we need to include that inside the boost custom bootstrap file so so i need to delete that let's save okay then go into bootstrap custom bootstrap and we need to just expand the step okay so this is here it's loading the the variables from the nodes modules bootstrap scss directory so we need to we can just comment that out so that we can we know uh we changed it and below it just gonna put in import and inverted commas and it's going to be custom first variables okay there's no errors now okay so so we go back into uh main.css okay so we're gonna add a gradient now okay so uh before we do that we go and we look inside go back into the variables again okay so we need to find there is a go control fine and okay i think and type in gradient and we want to search for it so it's found it's not that one yeah so it's it's found this at line two to nine so in this section here okay so there is a [Music] a variable for gradient okay which outputs this property this css property so what we're gonna do is we we're gonna just copy that okay and we're gonna bring it into the we're gonna we're gonna use we're gonna use that but we're gonna call it something else we're gonna call it uh header gradient okay now we're gonna change okay this this gradient properties it's uh it's producing a gradient of 180 degrees now we want 90 degrees and we want to know 90 degrees that's what we want okay we're gonna change that to uh primary color and we're gonna change that to second [Music] okay so this in the gradient property you have um you know the format you give a degree you get a given angle of what how the gradient should flow you can give it an angle so it flows in a diagonal way or 90 degrees is horizontal and the rgb color is a transparency color so you can say this is blue then the the 0.5 stays have a transparency or opacity of 0.5 so it's transparent so it's the same with the secondary color so so we got two colors with opacity okay now we're gonna use that in our nap bar right so before we do that we don't want the background image so that we know what we're doing okay so it's background just one background and we're just gonna put in the header header gradient variable okay so let's see what that brings okay so now we've got a primary color and secondary gradient so the gradient has worked now if i go into custom we want to go into custom variables okay if we're going to custom variables now i should be able to see okay around about 9 600. this is where we've defined what color we want to use for primary and secondary so the second tree is a gray 600 so if i change that to a green and do a save so we have a transparent background with blue to a green okay so this should be um so if i go back to my main. css and we change that to a one so it's gone like so the opacity is working so if i change that to a nine so it becomes uh darker so so it's the same with this i change that to one so it's it's uh it's very faint okay so if i change that to a9 b okay so so so the transparency is working so change that to a five and change that to a five okay so so we know that's working now we need to put the image back up so we will uh cut that out and just cut it out and put it at the top okay now we're gonna put the image back here so i can do a comma and url and brackets and it's dot dot slash header dash image dot jpg okay so that if i do a save yeah so the image is back up now so let me just write down now i moved the background styling to the top because otherwise these uh the image sizing positioning won't apply so you have to apply after the the image has been set okay so i can just uh have a little okay what what we can do now is we can play around with uh the gradient now in the gradient you have uh basically in this you got i think one two three four sections the the the first section is the the angle then then there's uh another section for the first color and then another section for the second color and uh okay i think so so yeah sorry it's three sections so the angle the primary color and the secondary color now and inside the that is a transparent color because we're applying an opacity to that so what i'm going to do is what else what what we can do is we can also specify the percentage of color that we want like for the primary color say i want uh the percentage where the the uh the color should end so if i say two percent so i want it to start from two percent and also i want the second direct color to put a space there because i think i've got to be aware of the open brackets so i'll put in a uh let's say 60 let's just see what that what that brings okay so it's so if i change that to well i didn't say okay okay so it's it's sort of you you got larger percentage there and smaller percentage there so and what else i can do is so that's sort of sixty percent and that is two percent sort of thing okay so what else i can do is like i want to make this lighter so that i want to decrease the opacity so if i play around with this say i want to so that's become a bit more clearer so i can increase that to three so i can yeah i put 335 and that might be okay so yeah so it's got a sort of a more of a clearer transparent green there so it's not it's not uh it's not that sort of fuzzy so so it's much clearer okay so so that's uh so you you can play around with the opacity and the the gradient uh percentage of how much you want so this the first primary color is like two percent and the rest is sixty percent so it starts from sixty percent and okay next you're gonna add in the the curved border that's gonna go at the bottom edge now the way we're gonna do this is to add a clip path is like a vector vector path now um you can use this graphics package or you can go online and i found this clip path generator so if you do google search on clip path generator and you get this benetfili.com clippy if you click on there and i just lodge logit okay you've got this canvas where you draw your shapes so so this whenever you move this the the path path will change so so the green coordinates so if you watch the green when i pull the green point and the green number changes so if you pull the yellow the yellow number changes so these are these are the the coordinates of uh the points so what we need is a curve so before we do that i'm going to make this as big as possible now you say 2000 okay the largest is um width is 1084 so i just make that 100 we just want a small height okay so we need to find a curve and i think this is the best one eclipse because there's no other one there's a circle don't want circle yeah eclipse so with eclipse so so you can adjust the height radius and the width radius so what i've found is if i drag it to the far left corner and give it 100 uh radius horizontally then if i take it to 50 and you can see where the coordinates say so when i take it to 50 then from there i just give it a 100 height so we got 100 width and height for this and now if i uh pull it up okay so this is the curve that we want now we can just copy this copy so but you can play around with different uh different shapes and and see well you can have different effects so i'll just so i just right click this again and copy so this is what we're going to use in our css style okay so i go back into my holiday and i just there you go that's perfect okay next we need to revisit that menu bar okay so we we need to move this up uh to the top so what we need to do little good let's go back into the markup okay so it's the markup is okay so it's a nap bar with a container fluid okay um what we can do is we can make this a flex box and then move it align it to the top so and if i go back into the variables i can quickly show [Music] all right [Music] hmm i think he's in okay so we can look into the utility mr see [Music] [Music] eternities because if there's any flex box in here let me see find flexbox thanks flex direction okay we we found okay in the utilities there is a flex uh classes that we can add so so there is a flex so let's not flex there flex direction flick scroll blank shrink so to add a flex we just do um we just add a relax this one's a property okay next direction and we want that we want to say okay so i think it's display display okay okay so yes so so we can give a [Music] display property and give it a flex i think it's flex there so yeah so so so here you're using a class d and it'll be a dash and flex so that's so so you put the class and the values would be uh separate by a dash so d dash flex should give us a flex element then then we also need to align it flex alignment right flex and if i go down reflects direction flex alignment next next alignment line okay flex items and start okay so line items start so line items dash start should be okay so so it's uh go back and go back to my close all this i go into index like this okay so if i do so we want display flex and then we want uh align items start and see that that's okay so if i do save deflects a line d flex alone items start so if i do refresh okay so so it's moved it up okay so that's that's working all right so the next thing okay let's add a background image here now so i go back and domain.css what's this main.css okay we i'm gonna just add background image right so and background background image and it's url and we're just gonna add the header image to there as well uh just to be easy um because it's a large image it will it will be just right for this yeah ideally we need a new image of clouds but as this is a big image i can get the the clouds to appear um in full width and without showing anything else so if i just say okay so i've got the cloud okay so it's it's forward so i've got cloud there in the background okay so so to recap what i just done on the uh navbar i've added the the deep the display flex and alliance start now uh the on the bootstrap site if you go to uh the the menu and on the on the side menu you should have utilities and under utilities you got all these different classes that you can use directly on a html element so we just use the flex element so the way we use the flex element is you know with a d flex and then that will give it a flex uh display flex then you can use the different types of flex inline this is for small so for different break points as well uh so you would give deep flex you know you can give these type of combinations of flex elements so here it's saying display flex flex roll so this is a flex roll and the items are just placed normally and in the second one is flex roll reverse so the flow is left to right here is right to left so uh yeah so you can um if you go to utilities and flex you can find more about it and if you and there's also utilities and borders you find about borders then i think there's no imagine some padding somewhere with all spacing vertically display node interactions position shadows sizing spacing okay so these are all the utility classes that you can use and and that's what we just used okay let's add some content okay okay let's add some content now uh let me just go into the index.html and we're going to add some content and just minimize that so i know where i am okay so i'm um [Music] okay okay all right so i'm going to have add some content now i'm going to give that class a container plus equals container okay and we would want to also give it um then we'll leave it for now but we may need to say we want to keep the text as white because um so that there is a there is a class so you can do that text right okay so okay so next we're going to have a h2 switch to tab and start your adventure here now next i'm gonna have a p element and then put some lowering text refresh i guess i got some text there that can have a look at so now uh okay so where are we okay so we're here now what we also can do is we can add some uh margins uh okay so we can have some top bottom margins you using utility classes so it's margin top and dash and we will say we want five and margin margin bottom dash five so this should give some margin at top and bottom okay so if i do save okay so it's given margin the top and bottom okay i just added some paddings as well so uh so what if i inspect it so it's uh we're going to the elements uh computed all right so it's given uh a padding of 48 and margin of 48 and left right 16. so the when it's a point you know it has different spacing and so one uh one so the there is a set range from one to five so depending on that range you can you can change in the utilities so i just wanted to show that it's working there okay so next what we need is to uh the container max with at the moment let me just see okay so this we're gonna make this on 800 and currently it's let me see the max the width so this is computed okay so acts like this where's the whites okay so we're looking at one thousand two hundred okay so so the you know it's it's growing to whatever the full width is on it for that break point so what we need to do we need to choose we need to change the container widths to 800 for anything larger than medium screens or from medium sized screens okay so so we need to visit the constant variables and we need to look for a container with [Music] container okay so we're gonna pass it grid container right printing max width okay so this is what we need all right if i change that to 800 change that to 800 change that to 800 change all to 800 and all right save it and now if i enlarge it okay so this is it's it's changed for larger screens for smaller screens so it's it's resizing then it fixes that uh let's see if that's what we want okay next we're going to add in a row of uh with glass and i'm gonna say column uh because what we're gonna do is we're gonna be adding some cards three cards okay so column and we want these cards to uh be full full width on smaller screens okay so um so let's right now this i'm going to go into bootstrap now let me just say that in case right i'm going to go into bootstrap and i'm gonna go into the menu and i'm gonna go into components and i'm gonna look for card right now i need a basic card okay that's not with the weather button is one sound i mean there's one right button okay this this would do right so i'm gonna copy this could be the markup for this so it's got a little header and it's got a button there and some text area there we're gonna have three of these okay so i'm gonna copy that and just paste it in there and just so that okay so all right let's let's do some styling for this um so we've got some text there so now to this we're gonna give it a background a secondary color green okay so so we can use the i think it's the bg [Music] background color which is um you can give primary or secondary so in your themes uh the theme in colors you can use a bg dash primary secondary and various other theming color that yeah so i'm going to use the second color here which should be a green so i'm going to also give the bg there as well the main container so i can so just give it uh pg dash second daily so do that so the whole thing is uh green now so what i can do is i'm gonna have give a transparency to this color so what i need to do is go into variables all right now i'm gonna do a little trick with all right with the colors right now i've got um so i've got a so i've got a color definitions here so i'm going to add a green with a for sure for opacity okay so this is gonna be a color with an opacity so i'm gonna give it let me see um rgba and it's and it's gonna be the same green but it's uh i'm sure this is going to work but let me just see okay so that with [Music] so this is going to be rgb with a green with an opacity of uh 0.3 so green opacity so i'm going to add that color to the primary secondary secondary is a digitalness so i've got primary secondary right now i can add a variable for a new theme so i can just put put the last secondary and i say up for opacity and we say and we defined it as secondary and this green opacity i think is let me just go out back up so we've given you a screen up so it's going to be a green [Music] dash i just checked that green up meanwhile so i need to add that as well here so we'll go over i bought yes so so if i go back into the html now we gonna we're gonna put in that new theme here so it's background secondary up and background secondary up so for opacity so that should okay so that's given an opacity there okay so expand it up so it's giving an opacity right so i want to make it uh a bit more a bit more lighter so if i go back in i mean add a bit more contrast to it so what i can do is i can change the opacity to say four let's just see what that happens okay so yeah i think that that looks a little bit better all right so what i can do is add in another three boxes there three cards right so just do copy paste so say have three constant okay so it's if i go so i need to additionally so we need to give it full width on only on small screens and uh put it on uh three three cards and on a row and other other larger screen so i need to go into the html and just gonna add common body i think so secondly okay so i'm gonna add so what i need to do is add a coral small so that it's it's only full length or full width for small skin screens but fit three cards on our own larger screen so so i need to go back in and put it in color for the cards called sm here and replace it and [Music] is okay so now it looks much better so i've got three in a row for uh for some large screens and smaller screens and it will go full length here let me just see okay so so let's add some uh margins and padding to the card okay so let me see uh what was that to go to there and [Music] let's just see what that looks like okay so that's [Music] now we need to give that to all of them okay so then now we need to give it got a gx g x one see what that looks like okay so it's given the cutter edges over one unit uh so this is looking better so let's maximize that so so yep the menu is currently correct place and we've got the cards all lined up and it's resizing properly just i'm gonna add in uh some text so i think uh make make it sort of complete that's a feature so um special population popular location and let's just add some text and [Music] let's locations and specialties so i think that's yep so that's a fully functional website so it looks okay okay let's test out that theming um okay go back into variable so uh let me let's just change the theme in colors and see if that's working i think it might be broken let me just see okay so theming so if i change secondary color to red okay so the gradient on the header has changed ah okay so that's the primary color in the blue and that's the second color is red now that should be also be secondary color so it hasn't changed that so what the problem is i think look at the secondary so this is using class secondary up okay so that is okay so all right that's that should be the secondary array i think what i need to do is just put in dollar on we need to wear rgb rgba and we need secondary color and we need to give an opacity of what was your percentage minute zero four zero four okay so that's okay so secondary up okay so i need to change that as well that should be it's not green up i need secondary up and down okay so that's then left a point that should yeah that that's much better okay so that's if i do full screen okay i've got blue primary secondary and the continuous secondary and the buttons is primary blue alright so so if i change the to a gray 600 and i change that to the blue so all right okay so that's the gray yeah gray buttons and gray gradient so i'm going to change that to a orange yep change the orange there orange buttons and full size so uh so i i just created a new theme there and i just created a secondary color with an opacity so so if i wanted to primary or pass with opacity i just create another one called primary dash up and just put into an rgb function with an opacity and that will uh give it a opaque opacity color okay so that's that's that's how you do theming in the bootstrap sas so so it's much better than the using the standard version of bootstrap uh you got so much functionality and features to customize it the way you want it and this is just touching the tip of the iceberg so hope you enjoyed it thank you very much you

Channel: ui-code-tv

Views: 6,957

Rating: 4.3939395 out of 5

Keywords:

Id: siHIdLVtBtI

Length: 105min 18sec (6318 seconds)

Published: Mon Aug 17 2020