Creating a magazine layout with CSS

Key Takeaways

foreign [Music] foreign [Music] foreign [Music] [Music] [Music] [Music] foreign [Music] [Music] foreign [Music] foreign [Music] [Music] foreign foreign [Music] [Music] [Music] foreign [Music] [Music] [Music] foreign [Music] hello everybody and thank you for coming and joining me today looks like my mic is working that's a good thing I never know when I do these live streams I always come on it's not working so so good a good start to this Friday stream looks like actually I don't know how many people are here I closed my other thing but you'll notice There It Is I've set up a little thing here this was a little bit by accident but we're going to treat this stream as a 300 subscriber celebration and we'll see if we can get there on this stream or not because there's the live sub count oh so close so we'll see if we can make it today like Americans Travis why would I not like Americans I have I have friends in the states I never I never generalize you know there's nice people all over the world attachment Studios you're going to be that you're going to wait for it to get to to get closer and then you you'll click it at the the last second I should have I didn't get a sound effect I should have come up with a I could have a little celebration sound effect but see if I can just do one thing while I'm you know what anyway how are you guys well I figure this out how's everyone doing how are you doing today I hope you're doing good um oh you know what I think I have it opened what I'm looking for I just minimized it there it is cool a lot of people here it's exciting So yeah thank you guys all for coming I think it's gonna be a lot of fun um I didn't have a video up yesterday because I've ran into some issues and they said let's do a live stream today instead and normally if you don't already know I normally live stream on Twitch I'm live every single Monday or yeah pretty much every single Monday unless it's a holiday or something uh last week I was also live on Tuesday I did two live stream or this week this is my third live stream this week my goodness um so yeah I'm I'm live streaming primarily on Twitch but every now and then we do these Special YouTube ones uh instead so here we want we want a q a we could do a little I don't know how long what I planned to do is gonna take so we could we could do a little q a at the end um these YouTube streams tend to turn into q and A's usually foreign [Music] the chat is just flying by I'm gonna have trouble keeping up with you guys today Muhammad you don't know how to use flexbox and Grid in my website I'm going to be using a little bit I don't know if I'm going to be using either one today actually but I do have plans on having more content on that type of stuff so foreign your favorite YouTuber thank you very much only 28 to go I guess doing this people see the the little look at that it's flying by it won't be long Edward Thompson you loved the episode on 3dfx with CSS only I did too that was a really fun one for me uh I learned a lot on that one it was great having that with um with Amit and we have some more stuff planned and actually I'm planning on doing more collaborative efforts because uh last Tuesday I had Adam Argyle on um we just sort of talked about CSS this was on Twitch on Twitch I had Adam on uh which I will be taking and turning into some YouTube content so if you missed it no problem don't worry about it but we're going to be doing some coding stuff together too he's going to teach me some some fun stuff because as much as you guys like to call me I see it all the time like in comments and and on Twitter um people calling me the king of CSS I'm so far from the king of CSS there's so many people that know more about it than I do um and you know I think I'm a good communicator of how it works and I I I think I I know my way around it but you know I don't mind Guru or Sensei and stuff like that I think I'm I'm decent with it but there's a lot of other really good people too and King sort of puts me on top and I don't think I'm on top I just think I'm one of many who uh know about it can we do Turing complete machine in CS can you do Turing complete in it you know Luke Kleins thank you very much I will have a beer on you definitely thank you actually if you don't know I also make my own beer I just kicked another one yesterday so looking forward to trying that one out today it's Friday so the end of the day we can relax with the beer Vince having code recorder I have talked to her um when I did talk to her she was really busy so I should get back in touch with her but I know she's working on her course right now courses are so much where I should be working on my course right now but instead we're here doing a live stream but courses are ridiculous amount of work but I'll get back in touch with her because yes I would love to do something with code reporter yeah the quality of the stream is amazing glad to hear that I'm happy that it's good um lacked deep Singh should we use media queries with flexbox or Flex rap both seem to it depends on the situation and what you're trying to achieve I've used both it really depends and if one works and it's doing the job stick with it if you try one and it doesn't do exactly what you're after then try the other one or just use grid do I have a c I don't know who said it the chat is going so fast a CSS roadmap question mark um CSS roadmap I don't have one I hear a lot about the idea of a CSS roadmap my issue with depends what you want to do but I guess at one point I should sit down and think about it Paras so okay I might end up answering this multiple times so I'm going to keep the question the answer to my question very short uh what do I think of Tailwind CSS um so I yeah I'm not gonna Deep dive it I've talked about it a lot I understand why other people like it and it's not for me I think that's the easiest solution or easiest answer to give CSS demystified someone is asking about it it will be relaunching very very soon uh in maybe two weeks or so I'm gonna be opening the doors to it so keep your eyes peeled the best way to know is if you're on my newsletter but I'll make sure to post on Twitter and here on YouTube as well when it does Gotham Jane do I prefer web dev node or python um yeah we'll go with web dev because that's all I know all right yeah I see I mean sorry if I miss any comments or anything I'm not I'm used to being on Twitch where the chat is a little slower paced um so if I miss anything I do apologize uh but I'm going to would you like to post [Music] yeah we have some Flex boxing grid stuff coming up uh Miracle gaming all right I'm mad thank you very much for the Super Chat appreciate it and it was Luke before right Luke thank you very much as well I think I said it but then it got distracted as the chat moved by so thank you both very much for the super chats super generous of you um do I have a favorite CSS framework just writing my own CSS is my favorite way of doing it um neurotronic Esports do I typically use CSS or SAS I typically if it's my own projects I use SAS more often the new SAS course launch date I'm not giving a date until it's ready to go because I have seen Vince a few people asking about it now so I'm working on a SAS course it's taking longer than planned my kids are coming my kids school year is about to finish which is going to slow me anymore um so um no promises when it's done then people will know when it's gonna launch kefir how good am I at back end I am not good I'm very very terrible I I just don't touch it it scares me uh how do you keep up with new things in CSS design uh experimental CSS properties do you keep in touch how do you keep up um so keeping track of things I'll use a lot of can I use Pavan thank you very much for the Super Chat as well um thank you very much for providing valuable content no problem at all uh uh yeah so keeping up with CSS is pretty easy when that's your primary job so it makes my you know that's what I do now is I teach people about CSS so I can literally devote parts of my day to that and a large part of it is through things like CSS tricks Twitter and seeing what people are talking about I follow a lot of people who are actively working or involved on creating these things and helping push the spec ahead so they're always talking about it so that always helps too um there's yeah CSS tricks newsletter is a good place or just yes tricks in general and then I also whenever I'm researching anything I'm usually on the MDM so I'm learning about something I want to make sure I'm saying all the right things when I'm planning out content and then I end up on rabbit holes and I start clicking on links that of things and then I just go deeper and deeper and then all of a sudden I found out find a property I've never heard of um and especially if I see a property in the MDM that has a little experimental they have the little Beaker thing next to it I dive in there and try and see um what it's all about um but I try and keep my ear to the floor as much as possible that's not the expression there's an expression about keeping your ear open that I can't think of but I it's just you know that's what I live and breed these days so it's a bit easier the do you have a plate oh I just the chat just left I someone was asking me at a playlist for CSS um like to start I have a really old uh one it's on my home page that's like the beginner pot like it's HTML and CSS for beginners I think that's a good start uh it's a little bit old now just because I made it four or five years ago so it is a little bit old but I think it's still a really good series that goes into the very basics of CSS from there I I have less of a path on my content here sadly um how do we create skeleton loading I do have that in my list of things Paras so one day I'll have a tutorial on it um but it might be a little while right a couple more questions and then I'm gonna jump in Kathy or I already answered that I'm terrible at back end uh What uh what will CSS look like five years from now on very good question I'm very excited to find out uh we're gonna have a lot more power and a lot more control and it's gonna be a little bit more complex than it is now but um we were talking a bit about that with Adam Argyle because he's if you don't know Adam Argyle he's on the Chrome team he's like their CSS evangelist for Chrome and so he knows like everything that's up and coming um and what they're working on and everything so um there's some really exciting things on the way and some of it does add complexity but hopefully it's not just for complexity's sake it should be to solve problems that people are having um but yeah star Ash old viewer but new subscriber that's all right you don't I mean if people don't want to subscribe you don't have to subscribe but I do appreciate it but it's more of a vanity stat here on YouTube than anything else think and re-watch a CSS series from scratch and maybe one day I could I have to it's a lot of work to um to really go through the whole thing but um we're almost at 300 we're getting there guys pretty close we're pretty close to 300. all right so we're gonna jump in I am going to do some Advanced anime I keep saying it and then you guys distract me Miracle gaming I will be doing some animation stuff coming up Advanced animations are not for me this is what one of the reasons I like not I don't like people saying I'm the king of CSS Advanced animations is not who I am I do layout and typography and the fundamentals of CSS and understanding plexbox and grid and that's my that's my jam um animations really good animations 10 like it depends what type of advanced animations you mean keyframes I can do stuff with we're going to be diving into that on YouTube next month maybe um but yeah I when it gets into svgs and stuff like that it's it's tough you pull the account yeah this is the counter there is like YouTube actually finally added one I think they saw people were using third-party services so in your analytics now you can actually get a real-time sub count so it's just pretty cool HTML or css or HTML books the only CSS HTML book I ever read is in my background somewhere there on my shelf uh which is the classic um HTML and CSS one I just I don't know if I haven't read it in years and I don't know if it's out of date um and I would say if you're looking for newer books there's a list apart but I don't or a book apart I should say I don't know if they have anything that's really like HTML CSS um specific or not Mario amit's in the house he can help with animations yeah so and I I think me and I would have already agreed that we're going to be doing some more stuff together so uh once we get around to that that will be the the collabs I do with with Amit will be helping with the advanced animations foreign yeah if you can do some advanced stuff with svgs you are a wizard and you should definitely let us know how you do it two more to go guys two more subs and we're there three oh somebody unsubscribed that's all right what plant is that it's a there's a name for it but I don't remember and it's also a fake plant because I'm in my basement my counters for me says two nine nine nine nine nine oh there we go it just rolled over thank you all we made it now somebody's gonna unsubscribe right and it's gonna go back down all right so we hit 300 we might as well get started with what I wanted to do uh so let me just move this over to here and we'll push this to go to my screen haha there we go we don't need to keep the chat there I'm gonna move the chat to this side here um I guess we don't need the counter anymore since we hit it so let me turn off the counter there we go we don't need that and um so yeah thank you all we made it a basement must be chilly no it's my where I live houses the basements don't get too cold I have heating too so thank you guys yeah that's exciting um Nora I noticed you made a more JavaScript tutorials one to two years ago am I planning more in the future it's as I make JavaScript tutorials when I find like I did the intersection Observer series because I started learning about them and I dove into them and started using them for a project I was working on I'm like I should teach this um I haven't been doing a lot of stuff lately so with JavaScript so that's why there hasn't been too many tutorials on it fun gamer excited about Windows 11. it looks like Windows is trying to be a little too iosy for my taste but it looks kind of nice so we'll give it a chance um all right so yeah this is I found this and it looked kind of cool and I wanted to try and make it into a website so that's what we're going to be doing uh is trying to make this layout which is a magazine layout and I have a specific things that I want to focus on um so this is on behance I'll throw this in there in full credit this is by let's credit uh I hope I said his name right but he made this layout I thought it looked pretty cool so I want to make it um thank you everybody for your subscription uh your congratulations I do appreciate it um g g b day thank you very much for the Super Chat super nice of you um so what are we gonna do let's move this on over to here and I did we're not using the same image I don't have his images so I found a picture we're gonna use and we should have vs code right here with nothing in it we're gonna start from a a blank slate to make this uh so obviously we need an index.html and yeah I need a few more to catch PewDiePie I don't think we'll be getting there especially not when you're just talking about CSS uh style.css um so let's whoa we're in the style.css file save that and let's do this um and let's come here and do a link CSS there we go so we should be let's just make sure this is working um I think I can do this right open with live server and just to make sure this is working body [Music] background is red ah perfect okay so everything is hooked up and working properly so we're ready to start working on it and I sort of want to focus on a couple of different things for this I want to focus the picture we can bring in afterward um I and I sort of want to see I don't know if my resolution of my screen is gonna be big enough to make this work is sort of like a spread that we can then change at responsive sizes but I sort of want to focus on the the right hand side for now on this layout and then maybe afterward we could squeeze the other thing in if we have time and all of that foreign slowed down a little bit now which makes it easier for me if ever people you guys have questions it might I might not get to them right away as I'm writing code but um you know you can ask stuff anyway this music is um I'm allowed to play it on my stream red is I think it's the shortest you know it's only three characters and it just comes to mind really fast so um all right so what do we need for I'm I don't have a picture it would be nice if I had an SVG for those glasses we're going to focus on like the text here so let's just say we have uh I guess it's in should we do it let's just do I mean it's sort of an article so you know what article we might as well um I don't know if we need the main man whatever I'm Gonna Leave It um so the article has an H1 which will be chip kid we need some lorem we have this underneath so that's gonna be a paragraph that paragraph should have a class on it actually uh so let's just call it subtitle or no it's um this hmm is it a subtitle or is it a lead I'm really going in the magazine I think that would be considered the lead so the lead is always like the first paragraph on a magazine article that's a little bit bigger um that tries to get you to read that so you know what you're going into so we'll call that the lead we'll just do like a lorem 10. it's not very many words um this will be all with alarm and then we get these paragraphs here and there's a block quote that's in there too so let's start we need two columns let's just do a um let's just call it um do I call it columns do I call it we'll call it uh article article body article body is going to have P times three that looks like three paragraphs maybe four but we'll do p times you know we'll do p times four uh with lorem they're pretty long 45 I don't know we can always play around with that a little bit and after the third paragraph we'll throw a block code in here too block quote of lorem one two ten let's just say there we go I think that's all we really need I'm not putting page numbers on the bottom you want me to I guess we can do that um as I said should we look at how I can do that image too okay I'm not going to do the glasses image across the top but why don't we just from the very beginning try and make it look sort of magaziney and then we can see how we could actually get this to work at small screen sizes too um so let's just throw now this is making me think yeah let's throw an image here and I'll just call it um article will be uh I mean image not the best names in the world but whatever image and I already have a picture to use and we'll just put for the where's my alt let's turn word wrap on my ALT can be a man wearing glasses in the sun uh whatever man wearing glasses should be fine I actually found out I have an issue on my own site um that we need to look at [Music] all right let's just see what's happening in the chat before I keep going I'm not planning on doing the glasses if I have time maybe I could I could uh we can make an SVG out of that they're not very hard to make by the looks of it but it's a subtitle the lead is the yeah whatever I guess it yeah but this isn't the lead really isn't the lead usually like it's a like I guess it is a subtitle no they accept cookies anyway there we go I've accepted the cookies cookie Banners are like the bane of my exist like of web development in general these days I think um no I'm not gonna make them Pages flip Muhammad we're just gonna do Straight CSS for this one um because I don't think it's me very complicated I wanted something to be fun and um not too hard to do so we're just gonna go with regular CSS uh and I tend to do that for if I do a bigger project on YouTube which I know it's been a really long time and people have been asking me for something bigger I do have something cool coming next week actually um though we're not writing any CSS in that one um but yeah next big project I do will have sass in it uh you know we need some fonts here I don't know what font that is but let's see if we can find fonts.google.com um so it's a sauce era for sure we're gonna have two fonts um so the main body font like I'm looking here which is not the biggest can I zoom in on this I don't know how behance works I can't seem to zoom in on it but if I just make it bigger it looks like a regular sort of saucerative this one's like a more narrow one the letters are very squished um and a bit more squared off so we definitely have two different fonts coming in here I'm not going to try and match them perfectly but we could do they can open saws I think for this one so or do we have is open source variable let's see if we can use just variable fonts because it makes life oh Oswald might be perfect for that one so we're definitely going to grab Oswald this for the okay I always show the string just if you're going to use one of the open um one of the variable fonts from Google just select two Styles doesn't matter which all right the easiest thing to do is choose the light one and the Bold one um and we only have a weight we only have the weight axis that we can play with as a variable font here um so if they had the italic one I would take those but I'm not going to use italic anyway so we'll just take those and I'll explain why you take the the smallest and the biggest one in a second um so that one's good let's go back to my fonts only variable and uh not Railway not rudebook uh Carla hibu what's Hebrew I've never seen Hebrew doesn't look bad we'll go with Hebrew I like the name uh so again I'm going to take the the latest one and I'm going to go all the way and take the biggest one and now let's go and get this so we have both of them in there Hebrew and Oswald good okay so we'll grab that we'll drop that in up here uh let's just call this uh chip kid I guess um and then we need these two guys right here so we'll copy those guys we only need a few things actually before I get to my body even um let's do our root I'll set up a few custom properties so we'll have let me just okay let's just do it let's just come on come on there we go okay so here we'll have my Hebrew is my body so font family body um and then here we'll do fun family heading and we can do that then my colors I think there's only two colors right we're gonna have color primary I'm just gonna just in case I decide we'll do that hsl uh you know what I'm gonna do yellow or GB what's yellow in in HEX red no is it zero zero ffff is that yellow probably not no not even close whoops what's yellow oh ffff and then the zeros that's okay um okay so let's just do FF so it's pure yellow and then I'm gonna switch that to an hsl [Music] there we go uh so that's my yellow and then my color neutral is it worth doing whatever I'm still gonna do it the 900 is hsl um it doesn't matter so zero zero percent zero percent is black and then my oh look vs code doesn't notice the new syntax uh neutral 100 will be hsl zero zero percent one hundred percent not 10 100. the new syntax for hsl and RGB you do not need commas on anymore so uh so you know what let's be consistent it's annoying though that um vs code hasn't caught up with that you probably have an extension that can do it for us um and I guess some people are asking about font sizes and stuff so um and clamp I could see the title here so let's say font size um title or XL we'll call it XL is we could you like this could be I like doing clamp for these types of things where it's a really big font size this is we have to play with it so I don't know but let's say the smallest is three Ram then we can do a one Ram plus 10 VH and then we can say that the biggest is I guess it looks pretty big and we'll see if that works from there font size um so 400 for me is my body size so we'll just say it's 1.125 REM because that's not a bad font size to have um so my font size 500 whoops 500. [Music] I don't know why font sizes I always go from Big to small but for my colors I usually go from anyway it doesn't matter uh font size 500 is sort of my subtitle I guess uh whatever 1.5 Ram I don't have a lot to do here so I'm not setting up like a proper typography system font size 600 will be my block quote uh we'll just say that's a two RAM and we'll play with it from there one reason I really like doing them here is if we decide that we need some break points or to change these we can do that in a media query which is really nice foreign let's just see what's [Music] Vince Minnie asks if you're using SAS is it better to use SAS variables for color or custom properties I like custom properties for everything these days um I do have a video somewhere on YouTube where I look at how I use a SAS map to give to create my custom properties for me uh I like custom properties a lot just because you have a lot more control over them like they're they're custom they're still variables within the browser so it just leaves a lot of doors open uh for different theming and different things that you can do it's maybe less important for colors but there's so many cool things coming to colors too that are down the road for SAS like mixing colors that you could do with custom properties so I think getting used to using custom properties is is always a good thing even if you're using SAS hsl is nice because you just get control over it so like this is my yellow and if I need a brighter yellow or if I need it like a less bright yellow I can just play with the saturation I can go closer you know wash it out or if I need it you know I can go closer to White by increasing the brightness or I can go closer to Black by decreasing the brightness and then you know you don't have to worry about like with RGB or hex you're just I don't know it's it's hard to to do that stuff no I'm not cloning the image uh this picture is not going to happen with with CSS I have an image that I actually used because that would be really hard uh the next thing I do want to do I don't need a proper reset do I let's just do a body H1 H2 H3 block quote block quote uh margin of zero padding of zero I don't know if it does does block Quotes come with padding on them I'm not sure anyway I'm just going to reset all of it um is there anything else I want to do as a reset normally I would bring in a bigger reset but we don't have too much images um display walk and Max width 100 it's a pretty stand I don't remember all the stuff I include in a reset because I never write resets every time I just always copy and paste them and or use like a starting repo template that I can just reuse every time so I don't have to read so I'm trying to remember all the things that I might want to reset [Music] um we'll stick with that and see if we have to change anything else you could make this image in SVG if you wanted to but that I'm not gonna we're not even gonna try um so okay before we do anything else let's just say H1 uh or actually I don't even have an H2 I just thought of that so whatever each one um font family is my font family heading there we go oh come on vs code don't do that to me usually if you choose from here there we go um actually let's just come up body um plant family here too font family is my font family body then we want to have my font size is my uh font size 400. the what else do we need you know what I decided using Justified text which makes it look nice we'll see if we can get the Justified text to look good we might uh I should have thought of that ahead of time but that's okay Francesco I could do that as the reset um I just I don't know oh you know what I forgot the most important one uh I don't know if we're gonna need a pseudo element but just in case we do uh before and my star after box sizing border box never ever leave home without that um should you preview your page before making more changes you should pre I don't have anything to preview yet though so like right now I'm just setting up the basics so I don't need to preview my page I will once I start doing layout 100 I'll be looking at it um I had my uh we called it lead even if it's not actually a proper lead uh font fam actually you know what I'll do let's just do each one got lead and it was my block quote so again this isn't like you could even have a utility class to set that if you wanted to um which would be perfectly fine um I know I'm not the biggest fan of Tailwind but I am a fan of utility classes just in a little bit more limited fashion than Tailwind does it yeah I had a business card stuck to the bottom of my glass there for the electrician I recently needed hmm double decker coach yeah no I agree I don't know I'm gonna see it I might if we have time for it um I might grab a JS library or something to do justify text because normally on the web you do not do Justified text Muhammad do I know Dev Ed I know him I've talked well talked I've talked online with him um I don't know if what would happen I know he was thinking of moving to Canada at one point so we were chatting a bit about that and what it's like to live here I don't know if I guess kovid got in the way of that or is he here and I just don't know it sure I haven't watched a Dev Ed video in a long time actually I should see what he's up to these days um H1 lead block quote uh okay now I guess we should look at what my page looks like uh so let's pull it up um okay so what do we need to do obviously we need to so actually let's do this and where do we put my design so I can see it okay how did I do this again I had my article and then my image whoopsy Doodles we don't need to open that uh I'm Gonna Leave the I don't like leaving it off screen we'll just do it really small like that for the moment um okay so we are doing responsive so there's a few things that are important oh I forgot to show you the fonts ha and okay before I go any further if you get the variable fonts off of Google to actually give yourself access to all of them and instead of having to select every single one of them here this only works if it's a variable font don't do this if it's a regular font you have the 100 900 you just put two dots there and that means you have access to the whole range of them so just like that we have access to all the font weights and you can see doing that actually switched this back over to the 400 from the 300 so that makes life a little bit easier um actually another thing okay we'll do it make each one now H1 font we'll do my font size first we'll see what that looks like is my font size XL and then we also had the um text transform of upper case and just go in and moves you on over there and see what that gives us that's not terrible it's not quite the font family I wanted did I declare my font family I did is that really the right one is that Oswald I thought it was more compressed anyway we'll stick with it um I guess all of these they all looked oh no my lead wasn't using it um so here what we could say is font weight let's see what the 900 gives us we'll go with that so actually the font doesn't look big enough that's a c that's as big as it's getting and if we make this smaller let's just see if the clamp is working here so the clamp's working so the small size is it doesn't look too bad um line height font size line height of whoops line height of one and actually my body here lets us do a line height of 1.6 um so here are my font size XL we can make the bigger size of this get bigger than 7 rim that that looks like we'll be getting to a better size of the large screen size so ideally what's going to happen I think this image is actually perfect right there um so actually I like that the image is touching the edge of the viewport but I don't really want anything else here to touch the edge so there's a couple different ways we could do that one way is just to wrap everything in a div um which probably makes the most sense to be honest um there's a few different ways we could do it I'm going to show because this is just like a really not realistic example of something you would necessarily be doing um we'll do it the the cheating way so we're not changing the HTML it's not cheating at all but article star not uh an image we could do um padding of two Ram for zero two Ram we could do that I don't know if I like that but we could do that um so it's adding padding to the left and the right of everything like all the direct children except for the image so this is getting padding left and right this is getting padding left and right and this big block is getting padding left and right again not an ideal solution probably but it works in a way so that's okay uh the other thing we want to do on the article so we can say article is a display of grid which is going to work where am I missing after my H1 uh low list height whoops line height and I have another typo somewhere 41 ah thank you ah thank you very much that looks much more like the font I was expecting to have thank you very much Urban uh badge guy oh a few people mentioned it thank you guys everyone who mentioned it I appreciate it Let's Line 54. oh this so it's any direct child so this like if you just do this it's any direct child of your article so if I do that my image gets the padding and then my image also won't touch the side because it's getting the padding on the left and the right so by saying all direct children but not my image or uh no yeah this is actually a better use case for not I was thinking we could use the is selector as well but I don't think the is selector makes a lot of sense there you know what the lead doesn't use this font so I'm going to take that off here and I'm gonna move the font weight up here I think that makes more sense let's turn formatting on because that's going to help me out a little there we go okay that's better um so there we go all right so I'm going to use a grid for my main layout and I'm just declaring it here so if we have collapsing margins or anything like that um it's going to work all the time but then we can do an app media [Music] screen uh whatever I'm lazy with my media queries I don't bother most of the time um at media Min width 40m um if you want to know why I use M you can follow me on Twitter I went on a big rant about it the other day I will I'm planning a video though on it specifically um we can do grid template columns actually I'm trying to think if this is going to be the best thing to do but let's just say 1fr 1fr whoops I'm so used to sass guys I'm nesting my media queries that I do this all the time article I forgot to get my selector in there and then grid template columns 1fr 1fr40 m is going to be too narrow [Music] um and then we could actually use this same selector so actually let's just take my media query down uh we could use that same selector and I could even do it here I guess but um I want grid column of 2 over negative one okay okay so um okay and then for my image then I need my image to go from the top to the bottom which actually gives me a little bit of a problem if I want to use grid now that I think about it um because of how well actually maybe it's okay let's try um I don't know if this is gonna work uh or I'm just doing article just because I I didn't give it a class um grid Row one over three is that gonna work oh um and then height 100 percent object object fit cover let's see if this works you know what I have another solution that might actually work oh that worked cool okay there we go um so at the small screens it sort of just makes sense we have it like this then we're gonna get to the bigger screens and the layout breaks across two and then what's going to happen is when the layout gets to an even bigger size at one point this text should be able to fall into like our two column oh look at that they added like a little swipey thing in Firefox when you're in the touch mode or maybe that's always been there I don't know I'm not always in touch mode um but this text here I want it to switch um to being two columns so to be able to do that what we want to do let's go see how I did this in my HTML so here I'd made my article body and I did this on purpose so what I want to do for the article body is we'll do it here just in case we need a media query but I don't think we do so we have my DOT article body and we're gonna say that it has columns of two but say they're we want them to be 40 ch and this is one of those underused CSS properties so let's see if this works it's not working why am I not getting caught oh there it is it is it's just my 40 CH is too big cool nice so I think a few things I want to change so let's change this 40 to a 30. so there we go we got two columns ha great um so this side ah that is working perfect 30 is a nice number so you can see there we have my two columns um so here it's one it breaks into two because there's enough room for it goes back to one because there's nine it's almost like a container query but not quite um and then we get to back to our two columns and that's looking pretty cool actually I like that um the order I think it doesn't matter actually uh yeah so one thing that's important to see someone mention the object that worked um this is only like it's it's really specific how this is set up because I said that the image had to go from column one to three a row one to three let's turn on my article grid um the reason I was like oh this might not work is because you can't because I didn't declare my rose I'm it's implicit rows it's not explicit row so I didn't say I I have rows they're just automatically being generated I couldn't actually use the negative number just tell it to start at the bottom the negative numbers in Grid if you want to use them to say like this is the start and that's the end they only work if you've declared your grid template columns or grid template rows um but I knew I had three just because I know I had one for this I knew I had one for that and I had one for the whole body so I knew that there was three lines so we have one two three and then four at the bottom so I said that height 100 is important because if not the image isn't going to grow the image would actually just stay at its normal size it just has that space to live so I'm saying the height is also 100 and then the object fit cover allows it to be cropped um similar to a background image the other thing that's important on that is what else is important on that I guess that's it the other solution I was thinking is if that didn't work I could use position absolute but that I don't know if it would work absolute position with grid is amazing um it's really cool but I I try to avoid absolute positioning when possible um another thing in this layout actually I just thought of is the gap was really big so when you do use columns you can use a gap it looked really big but I think the problem is if I follow how big they ah had it it's not going to get big enough but we're gonna change this here um let's do this I mean really it's a magazine layout they would be equal size but maybe we want to throw a min max on that first one so the min min max can I do a 50 as the min and then a Max of I'm just gonna try a number and see what it looks like I'm worried it's going to break everything oh the 50 is going to be too big because of the padding and stuff oh maybe it's just too big in general or is that min max see I don't with min max this might have to be can't I do that or is the minimum it's doing the percentages the Mac uh so if I did like now it's not going to work the way I want it to you could probably do it oh wait it's not like that that's why maybe it would work 30 let's try again and what did I say let's destroy 30 Ram that might work better it is working better Kevin you got to get these things right so maybe that's a little bit nicer uh maybe we could actually bump that to 40. and 40. um so it just means that really big screen sizes at one point like this guy doesn't keep increasing in size so here oh that's a problem see now what it's it's using it's using the 40 as the minimum in this case instead of the 40 percent um so instead of a min max actually here I could say use whichever is smaller let's just do a Min use whichever is smaller is 40 whoopsie Doodles my USB drive disconnected and reconnected 40 which is smaller forty percent or 40 rim that will probably make more sense so now it's is it 40 or 40 REM is smaller so that's what I wanted so not a min max I just wanted them in so now it's at 40 because 40 is smaller than 40 Ram but then once the image gets to 40 Ram it locks into a certain size I think that works better and this is more for websites and not print so we don't really get that two page layout I just think this overall looks a little bit better I'm also going to do another thing here which is my article body is going to have a Max Max width on it as well Max width of we have two columns so two columns we could probably go as big as 80 CH and I like CH and we can go bigger than that 120. let's see what that looks like are we hitting the maximum 100 maybe I like CH when it that looks pretty good like a maximum I like CH just because it's going to react to the font size um so for that it's good so if I change the font or the font size in here it would react to that because the CH character is character it's literally characters um it's an estimation it's based roughly on the letter zero some fonts it's not included I think if it's not I think if the font doesn't have the information it even goes to an M anyway maybe someone might correct me on that though I could be wrong uh um this is I see somebody asking those grid lines are from the this is Firefox so if you're in Firefox and you can do the same in Chrome you go to layout and then you get like a grid overlay uh which is the greatest thing in the world if you're using grid uh Chrome also has one now as well there's also in Firefox there's a flex inspector I'm not using flex but there is a flex inspector and there is one coming to Chrome um I think it might be in Canary right now there's a flex inspector even in Chrome the full version now I know there's like Dev tools with it um they added more Dev tools to chromes flexbox stuff anyway um let me just see what else is happening in the chat before we keep on going I'll make my face a little bigger oh there's we're still we're over 300 we did it guys there we go you can turn that off again um it seems Gap is not supported in so far it is it's it's supported in Safari now or did I know they had an issue with 14.1 and I think things rolled back a little bit because there's bugs but as far as I know it's available um in safari [Music] um foreign [Music] [Laughter] has it already the flexbox one that's good I just wish the the flex I still prefer the flex inspector in Firefox because it shows you some stuff that the Chrome one doesn't but I really like those little buttons that the Chrome one gives you where you can change your alignment really easily that's super cool uh yeah really nice I use I'm always I'm primarily in Firefox so sometimes I don't notice when new stuff comes to Chrome doesn't it let's go check out Chrome and we'll do a little let's find a window I can open okay let's do here pull this over let's go to codepen I know there is an inspector I just don't know if it's this it's not the same anyway that's a secret project I'm working on uh let's just do um div times three with lorem five and then here let's just say body display Flex and then let's go back to this one see no not that one there we go that one um let's go see inspect uh what do we get what's new go away where's my uh this is good old okay let's inspect U there we go so we get the little Flex thing here so there is some sort of I knew this so this is cool where you can like change how the flex Direction you can change the wrap no wrap so like this is really really cool um the only thing I don't think it has is do you have a grid overlay oh it has flexbox overlays too so we do have some flexbox overlays as well which this one's on this is all the stuff from codepen though so we're getting a big mess of stuff in here um so I don't I'm sure the one I'm actually using is in there somewhere is it this no there you can see there this is all like flexbox visualizations it doesn't have the same as Firefox definitely has more information on like how the sizes are being calculated and stuff though but that the little um where is it or we're just on it on the Styles this little thing is so cool I love this so much all right little side tangent we can leave that um okay next thing I want to do is I want to fix one thing that's a little actually that shouldn't be happening why do I still have margins I must have made a typo somewhere else because I still have margins on everything um because you know one thing that is a little bit annoying with columns is you get this with your if you have margins on because this paragraph is starting here this has a margin on the top but then like this is the middle of the paragraph so there's no margin in the middle of a paragraph So if you're using margin top on stuff you get problems like this so um whoops we don't want to do that I can close this and we can shrink this back down there we go uh this one problem with the mobile one is you have to shrink this down first and then you can shrink this down okay so uh what did I say we wanted to do I just got completely distracted oh the margins what I put margin zero I must have made a typo oh I did body but I didn't do my paragraphs paragraph there we go um and then I I got this from Andy Bell and I really like it so I'm gonna use it here uh we'll do it before my H1 for my body utility classes I guess here uh we'll just call it flow and then we do flow uh flow uh margin top of a margin top flow select all the direct children um and actually this is one uh where I always did it as not um first child right no I didn't do that I did plus plus people want me to do the the not first child this just is lower specificity um and there's even a way now we can instead of anyway there's ways of doing it on the not selector one to lower the specificity now but I'm just gonna stick with this uh we'll say margin top and I'll do color on it too so we can see what this is actually doing but margin top will be 1M and it's really handy doing this with a VAR uh we'll call it flow spacer comma 1M so the default is going to be 1M because this is an undefined custom property so the default is 1M but if you need to overwrite it somewhere you can overwrite it and I said we'd add a color red there so let's just say color red because what I'm going to do is start by coming in and on my article body we can add flow so it's like document flow and you can see it's selected everything except the first paragraph in there so by selecting everything except the first paragraph that means they all get the margin top now we don't want them to be red so we leave that off and they all get the margins on them um so I can actually come in my article and add a um class is equal to flow here too then we get um because this it is set to when M it's going to follow the font size um so if you find it too big in some places you can always modify that a little bit um and you know there's nothing stopping you from doing other stuff too and the reason doing margin top instead of margin bottom you could set up something similar using margin bottoms if you preferred where you're just this is nice because it's no specificity with this so the not selector would use would bump the specificity a little bit um but you could do like Star whoops if you prefer using margin bottom on stuff you could do a star not um uh last child and so you could do that and use margin bottom instead if you prefer that um but I'll go with this again it's lower specificity so it yeah it's called the lobotomized owl and it this has the only so flow does have specificity to it but this has none and so the advantage with that is uh it's just easier to override if you need to for something but again we have the flow spacer that we can also modify so just to show you actually why the flow spacer is cool is I can use the same one everywhere but then I could come on my article and say that my flow spacer is three or four M let's make it gigantic and then uh oh that's my whole article so there it's doing it for everything let's save there I could do it just on my article body and say that my flow spacer here is for M and it's going to overwrite it only in this area and everywhere else is still using that default value so that's why it's kind of cool to do it that way and again that was I got that from Andy Bell he uses it quite a bit and I thought it was a good idea so I started using it um yeah we're not going to justify the text because it's not going to look good but so far so good that's there my spacing's okay we're just going to come and say that my lead lead has a font size of font size 500 I think oops you need a DOT at the beginning there we go that looks better at this also we can throw a Max width on here Max Max width of like 20 ch oh that's way too small 35. um I did notice in the original I'm maybe that's too short now I did notice in the original um article let's go see if I can find my original picture I lost it did I close it oh no it's here um the that looking