39. Setting up the widgets and talking breakpoints - Responsive CSS Tutorial

Key Takeaways

the Adobe XD for our widgets we have these sidebar widgets that we created here so we have the Dib class sidebar widget and we want to make them look a little bit like this so they have a really big thick border on them the color eye is not this dark gray it's a lighter gray than that I'll let you experiment a little bit or if you link to the Adobe XD file you should we will get the exact color that that is as well as the exact thickness I'm just gonna estimate it and hope for the best the one thing I'm a little bit worried about with our current layout though is this space is already pretty narrow here and it's gonna get a little bit tighter once we add that empty once we add the border and that's spacing inside of it so what I'm gonna do is I'm actually going to right now change the size of those before we get into those widgets because I am scared we're going to run out of room for them I just think it's gonna be a little bit too tight so here I'm gonna change this width down to a 70 and this one up to a 25 I don't know well might have to readjust again after but I think it's gonna help us out just by giving us a little bit of extra space there and now what I want you to do let's go all the way back to him and I'm gonna create a little comment here saying with jets and I want you to come down and style them as much as you can it's using a bunch of stuff we've already looked at so go ahead and try your best at least adding the border as well as that space on the inside and if you feel up to it also doing the typography once again I didn't give it to you here but we know what the fonts are you can adjust and play with the font size if you do look at the Adobe XD link you will be able to get the actual font size that was used but it will be in pixels from there so make sure you convert it over the rim if you're not sure how to do that you can watch when I do it because in just a few seconds after I give it to you I'll be doing it myself as usual we'll go try and do as much as you can and see if you can pull it off before I take over so I hope you have a lot of success now let's dive in and it's not just widgets it's my sidebar widget and the first thing we do is give it the border so I'm gonna give this 20 pixels solid and for the color I'm just guessing right now but I know it's a really light gray and I know ef ef ef is a light gray because I've been doing this for a long time so we can see that it's looking pretty good actually I'm happy with that now they're also stuck together so I'm going to add a margin bottom on this to help out a little bit so margin bottom I'm gonna try one em and see what it looks like and it's not bad it's probably a little bit too tight so let's boost that up to a two but before we go and look at it again you might be going with Kevin why are you using pixels here but em here borders are one of the few places where I have a habit of using pixels because a lot of the time we have a one pixel border maybe a two pixel border it's really rare that you're gonna a really big size on a border like this now as you can see here it has happened but it's not too much so I just fall in the habit of using pixels because one pixel in EM is just you know I'm not doing that if you'd rather set this because it's a bigger border in em or rehmat in em and that's what you did before then by all means go for it it would work beautifully as well and before we go and check it out though I'm also gonna add some padding and we'll try 1 mm of padding on that and that doesn't look too bad I'm pretty happy with how that looks but let's just see when we get to the smaller screens if we run into any problems this font size is gonna get smaller these are getting really really narrow but overall nothing's broken the image the titles are a little bit too big the images are really really small we're sort of running into two options now when we're making something responsive like this cuz it seemed to be working super well I think it's a large screen size it's exactly what I want it to look like so I don't want to modify it too much we sort of have two options one of them is to change our break point and if we do that we're gonna be going through and potentially changing it in multiple places I don't really feel like doing that because I don't want to have to reconfigure a whole bunch of things so another option we have is to come on this and actually make sure it can't get too small because right now what's happening is it's clearly just getting too small whereas these are working fine they're not ideal but they're working okay so I think that's what I'm going to do so if we come on to my widget let's go and find not my widget but my sidebar so here we had our main and our aside I think I'm gonna give this minimum width so I want it ideally to be that 25% but I also don't want it to get smaller than 250 pixels so well it's even too big I think then there's one disadvantage that when we do this and that's that that justify our justify content space between stops having enough of an effect on it because at one point when we lock in that size at one point they can actually hit each other because now that's locked in at that minimum size of 200 pixels which I think is roughly the right size is here it doesn't look super ridiculously small it's borderline maybe I could actually change this break point to be a little bit bigger but while we're here why don't we just come on the aside here and add a margin left of 1m to the whole thing which is not a lot of space but we don't want too much when we're at this really small screen size anyway so with the big sizes I think it's going to look pretty good and then we get smaller it's just gonna prevent the two columns from colliding into each other by having that 1m of space on the side there so now we get smaller again maybe this is a good point when we could be modifying the breakpoint on it if we really wanted to but I'm not in I'm not hating necessarily and there we go and this comes in under a really good discussion about when you want to have your breakpoints and it's really about adjusting to the layout and when things are working or not working so if you really don't like this you could come in and adjust your breakpoint at this point I'm gonna say it again I've said I've said this before I'm gonna keep saying it again breakpoints are not device specific they are layout specific when your layout is breaking when your layout is not looking good that's when you go ahead and create a new breakpoint or adjust a breakpoint that you already have it's about your layout it's not about what device it's looking at the hundreds maybe thousands of different phones now they all have a little bit of a different size there's so many tablets there's laptops and these little laptops and there's big laptops you don't know the device size somebody is on so don't worry about finding specific numbers to use and adjust it where your layout is working and just make it work at the different screen sizes however you can I'm pretty happy with this if somebody's happens to be here there might not be a million people with this device with on it but overall I think I'm happy with that and how the whole thing is working we could also allow this to get a little bit wider I just wanted to make sure that we're limiting the max width of it for some people who are doing this tutorial on a smaller screen they can see it reaching that maximum width I'm going to end this lesson here because I think we covered some easy things with our setting that up the last thing we're gonna do in the next one is finishing up everything in the sites we're gonna fix our titles we're gonna fix the order on this and the one forgotten element is our footer all the way at the bottom I think we can knock that out all over the park really really quickly so let's wrap this