Chakra UI Crash Course

hi everyone welcome back to another for those who go video this channel is where we discuss and learn new skills around the topic of design and development if you want to grow your skills and learn new things that's coming up please like share and please do subscribe for more in this crash course video we'll be learning on how we can build user interface with chakra ui if you guys don't know about chakra ui here are some key things that you need to know uh to implement chakra ui in your upcoming projects so chakra ui is a great component library and it's built for react and that makes it easier to build the user interface of a website or an app as well in chakra ui each component is made accessible which follows up wei area guidelines which generally is a guidelines or for uh making uh the application accessible and which which follows the principles of creating uh the interface for disabled people and making ability to disable people to operate these kind of application and or signing and customization chakra uses emotion under the hood and it provides developer ability to style their components right inside of javascript with style prop and as you can see here we can just pass down star props to our div or our components inside of our components and we'll go through these and behind the scenes chocolate uses emotion and it also uses style system uh i have some somehow found some places where uh it uses style system but in some articles they were not mentioning about styles and systems at all but i hope it does um use style systems as well as far as i know and it also includes dark mode out of the box so we can just have our dark mode implementation just out of the box just a few lines of code and uh while building react app it's beneficial to take the advantages of the isolated ui development to speed up the process so add chakra uh uses utility props for styling will uh be making the use of udd props to make our interface of meetup.com so we'll be cloning the interface of meetup.com using chakra ui and as you can see here meetup.com is looks really simple and clear and easy to read we just cloned the interface of meetup.com and it would be hundred percent responsive as well so let's dive in in making the ui clone of meetup.com using chakra as we discussed before chakra ui uh is for react so we'll go ahead and inside of chakra ui documentation let's go to get started and um here we can see installation and we can see some of the libraries that can be copied here so let's go ahead and copy it for before we just paste everything here uh first of all we need to create a react app with create react app so i'll be just using create react app uh for now and um npx create direct tab and name it choco ui tutorial after the project is ready we can head on to city and our project name here and let's open up this in visual studio code and meanwhile we will also make sure that everything is copied all the name of the libraries and let's close it so let's let's see what do we have here we have a basic create react app so now let's bring up the terminal and paste it uh the command that we just copied from chakra ui documentation it says that our node version is incompatible so we will use the same version that's allocated here with nvm now let's again try to install it when everything is being downloaded for us we will create a new folder now and call it components and we'll be building our components inside of this and inside here we'll create some components needed first we also need uh is a folder for our assets so we will add assets and we will also add uh fonts here so i'll just bring in some assets needed and also create some components that's needed for us and also i'll just add up fonts and um uh after everything these three things once components has been created and assets has been added i will go ahead and set up a provider which is the next step that we need to do after all the components that ne that's needed has been made we will start with banner.jsx and banner.jsx is just the banner which includes uh the navigation and these are the first uh main fold that you see here up to our search button and also see what's happening here so uh before we start we need to i mean the react app with chakra ui provider so uh let's add our wrapper of chakra provider let's copy at our soccer provider and go to our app. or index.js let's paste in the chakra provider here and we will just don't need the report with vitals for now and wrap our component with chakra provider and we will just pass a custom theme inside there and we'll be obviously making our custom theme because chakra ui generally tells us to if we want to use our own color or own typography or own personal theme that's custom and that's particular to our template then use a custom theme so we'll be creating a custom theme inside of our src here so i will just create a new file and call it um extend theme and inside this x11 i will bring in all the fonts and colors fonts and font weight that we'll be using for to build a ui clone of meetup i will close this and we will hit save it says custom theme is not um defined so we will be importing custom theme inside of here uh let's hit save and if we take a look at the browser everything should be working fine and everything is working fine so after we have wrapped our app with chakra provider uh we will now need to implement some um pass down props to our components so uh let's start with our uh banner.jsx here so inside of our banner.jsx we will be first like creating a header and inside this here we will be using a box so if we search into our documentation here perks is generally just a div uh it renders a development so we'll be importing box from our tucker ui so let's copy it and let's paste it and the top part of our banner here and let's hit receive and we haven't really made the use of box so we will create a box and inside this box we will create uh two divs which would be this meetup div and other would consist of login and sign up so we'll start with this navigation here so um we'll just create a box for now and inside this box we will add some props like uh we will have two boxes so we will have one box and two box and then we will just add effects so it would be d for display and flex and um this should be an equal to align item center justify content to space between and margin left of six so if you go to our chakra ui and go to our search for margins and paddings it has a predefined margin for us so it would be like margin top margin right for mrme and if you need to like um style anything with props inside of chakra you can just go ahead and search for anything for example go to flex and you should see some uh styling that's needed for example fixed direction fix wrap click species flex grow fresh shrink and all of it necessary so these are just the pre-made styles uh we are passing down as a prop to box here so um and we will just add margin lift of six which is uh and margin right of six and inside of our box here we will be using another uh an image tag so we'll just import image from our chakra ui and inside this box we will add this particular image and and inside the image we will are not just inside the image and it should not be closed so i will just add image and inside this image we'll add a box size and box size is just an um just a like of attribute that helps us to size the box so box size and src of brand logo and uh and brand logo uh should be imported so i'll just add this would be a quick fix and import brand logo from assets and logo and after this has been imported let's change to this after this has been imported let's go to our alt attribute here and insert another box we will just add um a button so for that we will just need to import button there should not be a creation uh a double uh quotation there and inside this box we will uh import a button from chakra ui and add a button there and we will need a two button so as you can see here we need two buttons log in and sign up so we will be just adding two buttons here and one button will have padding right of three and color scheme we will be using gray of 600 which means that each it uses uh degree inside of our default theme so you can access the default theme from here default theme and as you can see here we have the gray of 100 200 300 which is our default theme so if we hit refresh we haven't really imported our banner yet so um and font size would be sm so font size is also defined uh not here but also inside of our documentation here which is typography and font size which is a default theme so we won't need to write this down so um i'll just added default theme and variant would be a link so let's add up another button here and for another button we will be adding a different color scheme and then we won't be having padding of write three and we will call it sign up now let's go ahead and import this banner inside of our app.js we will remove everything and we will also need to delete the css parts we really won't be needing them anymore after the banner has been imported we will um add a banner tag here and this would be an empty fragment for now so let's hit receive and it says index.css is missing so we have really deleted the file so let's delete this from here as well now everything is working fine let's hit on refresh and we can see here our meetup logo is here and login and sign up is not well aligned let's see why so let's go to banner so after making our fixes there let's go ahead and add our box after our header is made we will add our main punch line and let's call it the main punch line and which would be uh just the lines which is the main uh after the map bar here we have this dive in and here we go and an illustration here so let's go ahead and build that so inside here we will start with a box and inside that box we will add up our container and we will give some uh style props to our container of max width of container excel you can find it in the documentation for uh like search it for container so we haven't really imported container so let's go ahead and import container and after importing container let's go to our box here so um for our box here we will add up our display of flex an alarm center padding y of 20 and flex direction of row and inside here we will add another box and inside that box we will have a heading and inside this heading we'll just add another box and here we will have dive in and there are after this heading is closed we'll add another box with margin top of six and font weight and inside this box here we'll just add a couple of lines from our uh official website of meetup here container heading is not defined so let's import it we have the container imported but let's see why we misspelled it so let's copy and paste container and also heading it should be just one with and we will also add another box after we close this box here and inside this box we will add an image and it won't be just closing tag there so we'll be adding the width of 100 and also src of illustration which we will be importing and also an altex here let's close this box so there was a bit fixed for our nested box elements here so um if we see our ui our ui is uh looking pretty much decent and we won't be taking into consideration about this thick typography as i just knew it that it's graphic meetup which is uh seem a font weight of this but we just uh we won't be just diving into specific font widths now but both fonts are the same but anyway now let's move on to this another section here where we have also a container and inside that container we will add in some grids of three so let's go to our next container i mean um adding up next container which would be just three boxes so let's call it three boxes and inside here we will add up a container and container will have matched with off um container excel and margin top of thin and inside here we'll add some grid and uh grid will have a have a template columns of repeat one fraction unit i mean uh three one fraction unit and we will create three boxes inside here so basically what it will do is it will distribute uh the fraction unit to three of the boxes here so uh inside this div box here i will just add in the image and it should be image and the eye is not small so it would be image and the image would be with a 500 and border radius of lg which is a pre predefined styles which is default styles predefined so you can also search for uh border cells inside of documentation and we will add the src of image one here also give an alt attribute of image three uh this may not be a really uh good way of describing this image but we will just go with this alt attribute um for now but i recommend not to use these kind of words but explain what it is inside of the image so after adding this let's go to here and add some text here it looks like gradient image one is not um imported let's go ahead and import all the image which is one two and three because we have three um comma one fr which is three grid of one fr and let's place it right in here and for image two and uh we will import another thing would be grid after everything is uh imported let's make a replication of this boxes and let's use image two and industry there you can even uh make an uh a different object like structure to a different file and uh like loop it down over here but i've just decided to use everything static for now and as you can see here we have these grids aligned which is looking pretty decent we don't have any grid gaps here so we'll add make a new friend after the image add some carrot icon over here and do the other fixes so this would be this below after the image tag i'll just add another button here of the color scheme here and variant is just a link and an image tag there which imports right arrow we really haven't imported right arrow so let's import right arrow from assets and which is and this looks decent so now now uh let's move on to another section where we have um these tags here so uh for for that one we will create a new um container and call it pills so uh for now we'll just add a new section here with peels and for the pills we will obviously make the use of container and the container will have a max width of container excel and inside here we will just add a box and inside that box we will have a badge and another badge and another badge inside here so for this box i will just add a few lines of um props style props which would be direction of row display of flex and flex wrap would be wrap and justify content would be space between and let's also add some props to our badge here so for the badge i have added some props of border radius a padding of in x-axis of four padding y of two margin right margin bottom and text transform normal and color and background blue hundred so uh i will just add some text here of like um booster carrier now the patch is not imported so let's also import badge from chakra let's see the save and let's take a look at the browser as you can see here we can see our badge here so which is great now let's replicate the badge more and let's repeat it again and again let's also add some spaces and the y-axis of margin y thing and i will grab some patches that's needed and just add patches here so we will have a couple more of patches to fiddle around with so now our battery section looks decent but we have some uh font kind of thing here but we will stick with this for now so now let's move on to the last section of the header um which is on what you want to do and see what's happening we'll obviously uh be using uh grids for this one so let's go ahead and say add last header section and we will make a container and that container would be max width of container excel and a bit of margin top of 20 and let's add a grid here the grid could have a template columns of repeat 2 1 f r unit and add a gap of 6 inside this grid we will make a box inside this we will add a heading and the heading won't be have you won't be closing it so [Music] the heading would have edge h3 which renders it as h3 and give it a size of lg which is large and a bit of margin board of seven so i think we need to close this heading so i'll just add here and after closing this heading inside here so um of closing this particular heading here we'll add another box so this box will have a display of flex alarms center its direction of row and let's also give it a width of hundred and inside this box we'll add another box and let's call at a flex spaces of 50 and also give it a width of 100 and margin right of two and inside here we will have a form control which is needed for us in order to add foam fields inside here we will add a box and for that box we'll add a position of and add input tag and inside this input tag we will add some padding left a placeholder and type of text and width of 100 and let's also add another box inside after the input is closed and that box would is the poison absolute and that box would contain the svg of the icons which is this one and after and that's done we will move to um when the form control closes and inside this another form control here we will also grab the same thing that we did here which is flex basis off and let's also import input let's hit receive and let's take a look at the browser and give it a refresh it looks like string contains an invalid character let's take a look at what we did wrong after we have added two form fields here with the poison absolute of this icon we will now um add a button so for button we will just add a margin top five padding top padding bottom with a fond red color and background and font size of lg with some hover state like this and as you can see here we have the hover state underscore hover and opacity of 0.8 so after this is done we have um this box here which basically has all the pills so i will just grab all the boxes that we need so i mean all the badges that we need to fill up this particular box here and this box will have a heading and what you see what's happening and all the pills that has it which is the best of border radius and it will be like wrapped by a box and padding of x padding y margin right padding margin bottom collar text transform and background of blue so after this done let's check and everything looks working fine now let's go ahead and add this three section with grids so let's go to our next component here which is our how meetup works so let's go to it works so now inside this it works we will add some container with some grids and inside of our it works component i added a box and inside this box let's add a container and inside this container we will add um the max width of container axle and margin y of 20 and i have left out a code there and uh inside this container let's add a hidden and for our heading we will just add how meetup works let's grab it and this is whole meetup works there and let's add some star props to our heating as well and for our style props uh we align center as s3 and the size of lg and padding bar of of two and after the heading has been closed let's add another box and this box will be this text right here please meet new people and uh let's also grab in some style props to our box here of align center max width of 700 pixels x auto and padding bottom of thing let's hit save and if we look here we don't see it here because we haven't imported our component yet so uh let's go to apple js let's import our it works and let's also add it works down here and we need to also name this it works and let's go to our epochs here i still wonder why it creates any curly braces there but all container and heading is not important let's also import this and if we take a look at the browser here we have our our uh how meetup works and this text so uh we are making a good progress now let's move ahead and add some uh grids here so um inside it works i will just uh add some grids so inside this box we will have grid container and inside this grid we will add the template columns to repeat 3 1 fr and a gap of 6 and inside this grid we will make three boxes which is one box and two box and three blocks which generally says repeat three box with one fraction unit and if we hit on save then we should see everything working but we haven't imported grid so let's import grid as well and as you can see we have a there so inside uh that particular box i want to add in a few images heading and text so i'll just grab in some box element here and paste it right here and inside this box we have we have image with width of 100 box size of 160 pixels and this src is join group so uh we haven't really imported joint grip so i will just import all the three images that we need and down here i will also add other boxes that we need as well looks like couple of uh things are not imported let's go ahead and import it looks like everything is working fine let's go ahead and see it in the browser and as you can see here we have how meetup works and three um icons here which is uh similar to what we have here let's go ahead and add this button guy as well so uh in order to add that button we will create a new box before the container ends so create a new box inside this box i will just grab it and add some uh box style props to this one of align center margin top of 16 and hover it would be opacity of 0.8 and background of blue of 100 color of white on quite normal and size of medium and join meetup would be the call to action um what we have but it looks like button is not imported so let's also grab an button and as you can see here our it works section is also looks perfect now let's move on on to upcoming online events here we'll also distribute this but we won't be really making slider for this one just using grids and just flicks to align this to space between and some effects grids so now moving on to upcoming online events let's go to upcoming and inside upcoming we will firstly import our um the three images that we can see here uh which is autographql meetup and here here here so uh we will put everything here and we also need to import our box first of all and let's also add a margin top of 20 and inside this box i will add a couple of grids here first of all we need container let's add a container and the container would be max width of container excel so also let's add that style prop there and also we need a box and this box will also add some star props of margin bottom 7 and display flex and alarm center justify content space between so whatever comes in between here will align itself to uh justify uh i mean space between just file content so if it's a and b it would become same so let's um save it but i think we haven't exported upcomings yet so um inside of box one i will just add heading because we have a heading and a cg so uh also uh inside box two i'll just go ahead and add a link there so let's hit save and we have a heading and a link similar to what we have here heading and link so we don't see our component being loaded so let's go ahead and import upcomings inside of app.js so let's import upcomings let's grab it and paste it right here look like upcomings now let's add upcomings down here as well so let's go ahead and add import everything let's hit save and hitting a link looks like it's looking fine we have a space in between and two developments with the wrapper of this five flex alarm centers and got content space with me now let's move ahead with adding some uh of the sections down below for the six is down below i'll be just um walking through uh the boxes so for the boxes um what we have here is inside of our container i'll just bring on grid and inside this grid here um let's create a box or just grab a box that that is pre-made so i'll just add a box here now i'll just add three box for now and i'll come to this later on so um the place where we made our grid let's add template columns of four um repeat for one fr unit and give a give a gap of six after this has been done let's add all the boxes that we need inside here currently we just have one box so i will just add four box here so it would be a little bit of lengthy so let's go ahead and hit save looks like couple of things are yet needed to import and let's import create an image and it looks like everything is working fine so let's quickly go through the boxes that we created inside this grid so for the grid box uh we have added some comments you can also check the code down below so it has a width of 100 percent a line of left and position would be relative because we want something to be positioned absolute and we have the image right which is the big image right here it's pollution relative because this needs to be an absolute and we have a flex display and um align item center border radius of five background some font size margin and padding x and padding y and here we added our svg of online event so it would be this particular small guy here so um and we added some box for our dates give it a color width and margin top and heading with some flex align center and then it's not flex but align center um as h6 and also we added the image with uh the image src of segan which is the core author of this library and um let's hit save and let's take a look at the browser it looks decent so now let's move ahead with this part which is pretty much similar so i'll just go ahead and add um these boxes here so if you go to popular let's add uh some more imports that we need so i'll add all the bunch of imports that we'll be using uh because i want to move this video a little much faster and i'll also import this popular image uh and let's first start with the box element and inside this box element let's add a container and um for the box element let's add a bit of margin top and continue to be max width of container excel because we want to everything to be inside a container and let's also add a grid here and inside this grid we will repeat um three uh for our units to our and inside here we need three dips so um for now i'll just add three boxes so i'll grab in three boxes that we have and place it inside here so let's take a look at the boxes here so it's the same uh repeat three of one fr unit so if we take a look at the box we have a box which is just a div border of one pixel and border color and padding of 15 width of 100 and a line left inside this we have another box of image heading and a divider and also um these font weight and colors so um there's nothing specific new everything is this is order so we have uh all the style props added to these elements so let's take a look at what do we see here in the browser it looks like everything is matching so if we can see here we have popular groups and i think we have forgotten our heading so let's add a heading here so it would be right in here we'll just add popular groups and these boxes are just the divs of uh space between so uh it is out of the container so i'll just bring everything inside a container and format a bit hit save and take a look at the browser and everything looks decent and it's nearly similar all right so let's move on to this a particular section here and for this particular section i'll just add two images here and a div right here we just um grid css grids it looks like uh we will be using flex for now so i'll just stick with flex and let's take a look at the box that we have so we'll have just a three box here and just uh everything is inside a container so let's move on to connected uh and inside this connected we will just import box and wrap everything inside the box and give this box our margin of y access to 20 and inside this box i will um we need a container to everything hold everything in between and add a box inside our image and a box and inside that box an image and this would be uh position relative and i'll just grab in the container or just add a container here so inside this container we have a max width of container excel and inside here we will add another box and inside there there would be three blocks so a one box for our right image so i will just grab in the right image box and paste it right in here but looks like we have uh currently we just have one box here so i'll just add some star props of display flex and everything to space between and inside this box uh i've just added display of block so we can just write display block for now because i just added some media queries in advance so it would be a block and an image so this is currently just one box inside this flex wrapper and let's add another box here for another box we have stay connected which is a heading which adds like a h6 and it's wrapper is a box element which mx auto and lift of zero and we have a meetup logo and also uh takes off stay connected and we have an image and image here so uh i think we need a last box here so let's go ahead and add last box here let's format a bit and it looks like we haven't really imported these icons here so let's go ahead and import everything we need so let's hit receive and we also need our container and some images so let's add container and images inside of our imports and if we hit refresh not here but here i personally i was confused whether i was watching a live site of meetup but yeah generally we added a flex um to the parent and image of 260 with the src attribute and also we have another box here with the image and display can be just block so let's copy this because this is a responsive part which will be covering later now if we take a look here everything looks perfect so now uh let's move on to this particular section this particular section would be uh pretty much same that this is specifically i'm playing around and building around grids so i will just add stories section right here and grab everything of stories inside of our meetup here so it would be everything so i just wanted to like quickly move forward so this would be like a mid-equity which we'll be covering later so this would be vp3 1fr for now and we just added a container of um excel and then box with flex and space between whether we have the heading and some text right here and we also added some template columns and added uh three box inside there and inside this three box we added a link and wrapped it inside of image and box and heading and also give it a heading and also uh just a simple box here so this is just a reputation of this one and obviously we have our image which is portion relative and we have um i think this should be just image because um this is not like a relative element to be made so we can you know this for now and everything looks similar and everything is fine so now let's go ahead and add a footer so inside of our footer bottom i'll just go ahead and grab things that we need inside of our um further bottom i've added all the things that we need and we will gradually go through it so um we have a photo bottom and we have a box of our margin top and collar and background and we have a container where we have a box which is display flex and align item center and we have just have a hearing and a button which is this thing this guy right here and uh we have a divider and after the divider we have a box and we inside uh this parent div it's flex which flex direction row and alarms to top so inside this flex we have three boxes let's take a look at one of the box and this particular box right here is flex of one so that it expands everything from here to here so each of the boxes is flex one margin bottom zero which consists of um hitting of your account and these links which is just inside a list item so um in this follow-up right right here we have uh again which is flex of space between elena and center and we don't need this flex now and we have our links here which is one link to link and three link which which is four links of this instagram one two three four which wraps the svg icons and we have a blog box of d flex and after uh that's done i will just also add margin top of chair for this and and we have another box of flex for this one right here and it's just space between and we have an image tag of 128 of height and with um a height of 38 and with a 128 after this is done we have everything of flexbox here with just you know uh the link with flick strap no wrap and after this is done let's go ahead and format this and let's add a background image to here because as we can see here we have some kind of background there so to add a background i have already added background inside of our um assets so i'll just importing everything inside of assets so to add a background here we need to go to our main app.js file so inside app.js file i will just create a box and inside this box which would be position of absolute inside this box we will have everything uh from uh the components that we made and outside this position absolute box we will add our image box so um which generally is uh these things everything is position absolute with left 0 top 0 and right arrow and everything here is relative of top zero bottom zero right zero left zero and height of 100 v h and z index of minus one and we still need to import this image background let's go ahead and import this here also we need to import box and image we use from chocolate ui so let's go ahead and see it inside the browser and as you can see here our image has been added to the background but we do see some glitches like these image are actually positioned absolute but we just used it as a background image here so um everything looks fine but if we take a look at some responsiveness now let's go ahead and fix this responsiveness as we can see here in mobile devices it's a little bit messed up so it's simple to work with responsiveness inside of chakra so if you go to responsive styles then you can see here we have a couple of breakpoints that's ready for us which is sm md ld and excel and also in case of 2xl you can use it and you can also also i mean customize the breakpoints if you need which is all in the documentation so um and to write our responsive media queries in a sense we can have two options one is to use an object in task or to use an array syntax which is i guess it's somewhere here which is this the array syntax so i would rather prefer to go with the object syntax because it's uh easier to read and explicitly say space md lg sm on all stuff so let's go ahead and add some fixes to our um responsiveness here let's start with this banner so this banner would be our banner so inside of our banner let's go to the box um statement which is main punch line inside here we have flex direction of row and we want to change this particular thing to from row two columns when we reach a certain breakpoint and that would be a predefined breakpoint from this documentation so if we take a look here we have sm md lg and excel which are predefined so we'll be making the use of predefined breakpoints so for direction uh i will replace it with this object structure that we can see here and by taking a look at this object structure we can see that this sm is column and uh md size would be raw lg is row xl is raw and the base uh the smallest size which is the base size would be column let's hit save and if we take a look at the responsive part as you can see here it's becoming responsive so um this is fine for now let's move ahead to this particular section so to work with that particular section we obviously need um to um fiddle around the so inside this template columns we want to break this particular grid to a repeat of one inside of small devices so we'll add this which is in small repeat one of one fr unit and b should be one of one f r in medium size it would be repeat two one f r in large size it would be repeat two one f r in extra large it would be two one four so after that has been done if we take a look at our interface here it's working fine now let's move ahead to work with this so in order to add our fixes to this we have to add more fixes so let's go ahead to our portion here where it says what do what in a sense this one so it looks like we have added breakpoints here but it doesn't really seem to work because we haven't really um you know added the template columns so after this has been added this should work fine and it works because we just added repeat um one fr unit in small devices and we are looking in the small device so and we also added some of the changes inside here where um in the flex spaces we have the base of 100 and if it's a small device it's 100 percent and margin right in small device it would be zero which is added here to the box element as well so as you got the point it's just key value pairs with sm md lg excel and base and everything would be fine now let's move ahead to our meetup section and this is uh pretty straightforward so so inside this we have made the use of grids so inside that particular grid that we created which is um this we want to replace it with when it's a small device it's one of fr one fr medium three large three extra large three and base would be one so let's hit receive and um if you can look at the browser we have everything stacked on top of each other and we will also use the same to this one which is upcoming online events so uh we will also add the same changes like we did here which would be um just adding our repeat 2 1 fr to our upcoming so instead of upcoming we will go to the breakpoints that we have which is our breakpoint let's see which is this one let's replace it with key value pairs of these um style props and hit receive and if you take a look at this then it's damn easy to work with um this um object syntax for responsiveness now uh let's move on around this popular grips so go to popular and inside popular we will add the same thing that we did which is just uh switch template columns off to a different size in different devices and i'll just add these key value appears for now and it should work fine so okay let's come to this particular statement where uh i mean uh section where we have these three images so um for these images we will go to our it works part and inside not it works inside connected we need to go to uh the box where we have a display of um block right here and we will replace it with this statement and we will also do the same for another box which has the another image which is device left and device right let's hit save and let's take a look and as you can see here we don't have these mobile in smaller devices so that's what i was looking for so now let's move ahead to this particular section so stories of our uh meet up so let's go to stories and inside these stories we will just fiddle around template columns here so let's go to template columns part and we'll add some style props to with help of developers and as you can see everything is stacked and working fine as expected now the last thing is you need to do is these part where we have a flex of one pixel one and plex one will just add a flick spaces of hundred to each and or we we can just add um like change the display direction so for that we will just switch to our footer for the bottom and inside for the bottom we can go to our line here where we have a flex direction of row and we will change this to x direction of um column in small sizes and also change this margin bottom of um inside flex 1 margin bottom because we want a little bit of margin bottom when it's small size so we'll add this uh to all the elements that we have it look like um it's working fine just the last thing is responsive fixes for these two so for that i will just add flex direction of columns in small sizes for follow-up so flux direction of column and small sizes and row in large sizes and also make the changes to the space between these align items as well which would be just another items left when you have small sizes all right so lastly i want to add some spaces to our android app on the top of there so i'll just add uh asm often and in small devices we can have a small gap of here so um and it looks perfect uh as expected so to say so uh lastly let's move on to the last part which is the footer and we will just add a key value pairs of responsiveness of smmd lg excel here in small device just wrap the flex child and which should be decent for now it looks like everything is as expected and we have everything working as expected okay just exp accept except we have this section is not working as expected so let's take a quick fix on that one after adding all the necessary fixes and quickly going through the start props that we added to the components it the current site looks something like this which is as expected so uh which looks decent so yeah guys in this video we learned about building interfaces with chakra ui and we got uh quickly and just uh adding uh some snippets to some of the parts but i hope you got the point and you are quite familiar and confident enough to implement this in your next project if you guys want to learn more about design and development skills please like share and please do subscribe with a click down below and also please join our growing discord community server added in the description as well thanks a lot guys see you in the next one

Channel: For Those Who Code

Views: 38,441

Keywords: Chakra-ui, chakra-ui, chakra ui, Responsiveness, user interface, React, ui, ui clone

Id: s-bIsz-NR3c

Length: 59min 15sec (3555 seconds)

Published: Mon Aug 16 2021