How to Create a Website - Complete workflow | Part 05: Typography & Buttons

Key Takeaways

hi everybody and welcome to the next video in this series in this video we are going to be looking at doing all the typography and the buttons normally I would have done this stuff before the header and the hero area that I'd started working on already but I think it's more fun to sort of see it all come to life with the you know parts of it already done now we can really bring in star bringing in the fonts and making it look a lot better and it's more you know I'm you're watching me do this I want to make it as visually pleasing as possible for you guys now which order you do it in doesn't really matter but just to let you know normally I would have probably done those the other way but this just seemed to make more sense enough of me rambling around let's get started and actually start putting all of this together now so I mentioned we're focusing on mobile first so the typography might have some changes to it later on once I start working on the larger size but for now where I'm going to do is make a new file I'm going to you save this in my base and I'm gonna call this one type type type type type type I'm gonna call it type just because I already have a typography file and I don't really want to mess them mix those up they probably should be the other way around well type save that go to my main SAS and I want to import that import base slash type so let's go over there I'm not gonna be working on the header or the hero so I can close those I might be jumping in here a little bit I'm not sure yet so for the type I have already have the body style set up I did that way back actually I did that off video but I didn't mention it a little while ago if we go to the vendor and normalize right at the top is there where they set up their fonts so I set up a little mix in for my fonts and I use that to set up for just Roboto that we're gonna be using and a basic line height so that part of its already been but we definitely have some other stuff that we need to change here so I'm gonna close that down so one thing I'm going to do is I always like sort of doing a bit of a reset on my margins and everything because they're always kind of awkward so let's just do it two h2 h3 h4 h5 h6 I don't think I'm actually going to use all of those but whoops I don't need those and what I want to do is just do a margin I want the 0 on the top 0 on the left and right and something like 0.75 M is usually a nice little default that I go with not having any on the top does make my life a lot easier so I'm sort of doing a reset on that and then at the same time what I like doing is having my h1 last child and I'm going to copy this two three four whoops four five six I think I need seven of them paragraph so I have an h2 h3 h4 h5 five my h6 and my paragraph and what I like doing with this is I like saying that there margin is zero so we don't actually see a big change or any change come up right away on that but what this is doing is it's saying that the if I have say five paragraphs in a row the last paragraph it's not gonna have any merchant bottom on it or if I have an h1 and it is it's always if it's the last child that it will not have any margin on the bottom of it and for me that's important and the reason I like last child and not last of type you know if we look here at this h1 just for fun if I did last cuz people mix up last child and last of type sometimes last of type so if I do last of type and I only have one h1 well that means that there's no margin on that but I want this to have a margin so it's only going to look at it if it's the last child in something so here this paragraph it's not the last child so it's keeping a margin on the bottom which is important where as we come down to these ones here just if I do an inspector over here this paragraph has it and then this peril it's not the last child again do we have a paragraph somewhere that is a last child my call to action and now they're all ending with buttons sales points should yeah but I don't have any text in it great I didn't do my text but it's just say you can see the image I have my h2 you can see that there is a margin on the bottom and then my paragraph has no margin on it if we go and look at the box model there's no margin on that paragraph so it's just just stop some strange spacing things from showing up I'm getting extra spacing whoops I didn't want to close that so I find this just is a nice little tip or trick or whatever you want to call it that might make your lives a little bit better down the road okay so now I do want to get into styling things a little bit more now one thing with the design this heading was bigger than the rest of it so this I have all of these including this one here and including this one here is H ones but this H one and this one have a special clasp on it to make them bigger than everything else so this is sort of the standard h1 the other thing we'll see yeah so that's my standard h1 anyway it will look like that so I'm going to set I'm going to look at this one to set it up so my age having this weird delay going on today here h1 I want my font size we'll stick with something like 2m we'll try to Remy I should say which shouldn't really change it the line height is definitely way off which is normal because it's a larger font size we'll attack that in a second font size is okay font weight should be 300 we want it to be light or what am i doing it should be font super and again that's something that I set up when let's go look at it in my type oh I thought I called that typography but I only called it type so I have to type files whoops I was sure I called that one typography okay I should have called this one typography then I said it was gonna be more organized in this and I wanted to call that one typography and I sort of screwed it up well we'll fix it now save as type our graphi save we will look inside my base here type can be deleted and last but not least we need to come into my main dot sass and just update that so it's importing the right file type auger fee that makes more sense I'm happy I didn't screw that up actually okay so super duper that's all looking fine so in my whoops I just closed it in my type I have my font light font normal font bold and font black I'll set up for my weights there so I can just use font light for my fonts wait there we go um and I definitely need to into the line height line height well what if we do like a 1 it's probably a bit too close 1.15 that looks ok I know it looks really messy down here right now it's all gonna get fixed up in due course but it looks ok so this one here though obviously needs to look a little bit different if we go and we look at the original design that font size is a lot bigger and I don't have them one of this is the only thing I have but the font size is you know this is small this one's a lot bigger so that one header text I think your title large so title large dot title large font size we'll go with three rim for now because it should be bigger good good good font weight is going to be font bold to even font black and the span will be font weight of font light there we go that's what I was after is all of them all caps actually all of them are all caps so we need a tips not that we need a text transform up upper case let's just make that just want to make sure that looks okay that's not too bad should next level always be on the same line no that should be fine maybe should this be a display:block no cuz that's gonna look weird it's some of the breakpoints that's just gonna be super strange so we're not going to do that we're gonna leave that as it was cool okay good so take your up to the next level this font size here too is a little bit small paragraphs should be font size 1.2 rim oh wait no that one's again that one's different right that one's bigger than all the other text whoops I think I also gave that its own class right text intro cool I don't usually have so much time between the projects and usually you sort of powering away at them text intro and we'll bring that down okay paste okay cool I'm actually gonna go back to my base for a second just I put this at 95 I think I'm gonna do 90 yeah I like that better just a little bit more space on the sides it was getting really tight on the edges there and now it's just a question of those buttons looking a little bit better those buttons do look kind of ugly so for the buttons as you might guess they get their own sass file and in this case it's going to go in the components oh I did a save as whoops new save there we go sass components buttons dot sass so if you haven't used sass before you're probably seeing a little bit of what I'm doing a screenshot you've probably seen a little bit of the the cool power of it right now right where you can do a lot of these really nice things we're just organizing your sass or your CSS becomes easier because you're not scrolling through this big giant file you're just picking out the little pieces you want so for our buttons there's a few different things we want to do right our buttons had within our buttons have our buttons have a few different classes that we we played around with so we had our basic button class where I use this to set up the padding all the time Oh point seven M 2.5 am I always go with a lot more padding oops and they get that padding to work proper I do need to also do a display:inline-block [Music] are these not buttons I did it again I didn't import it so come up to here again this wouldn't normally happen if you were doing sass through the command line one of the problems with the pre approach is you is this did it but you would also have to import it properly components add import / buttons there we go my buttons are working properly now sweet buttons so and they're not always you know they can't go next to each other they just look kind of weird now because the padding is so big but they don't have a background on them that's okay another thing I usually like to do is text transform uppercase for my buttons actually since I'm doing this a nice thing you can do text transform and [Music] text decoration and then so it's a cool thing you can do with sass you know with the indenting I have my text and then it's a text transform and a text decoration so a nice little trick there if you didn't know about that I think that's all I need okay so now we have our different buttons so we had the button primary so the background on this will be my accent color let's see that click in just one of those not the primary a secondary primary BT and modifier classes get the devil there we go and I want a color of whoops text in verse in verse I have my button secondary which will have a background of no not a background I'll have a border of two pixels solid white no text in verse the main reason I'm doing this for my button is the color will be the same as the border and that way if I ever change the text in verse color it will also change the border color at the same time color is text in verse don't forget the dollar sign for the variable awesome possum because this is setup with a border and this one's not using a border it actually sticks out a little bit so one way to not have that stick out a little bit is just a port a border of two pixels solid accent and then that should make them exactly the same size Coolio um is there anything else I need to do on those they look okay except they're stuck together which is obviously really ugly like this they're okay but when so I'm happy you actually with what they look like that I need to I'm gonna put a hover effect on them but they look nice but now they're stuck together so I can prevent that from happening actually and another little thing we can do so it's a button I want to do button not last of type margin-bottom one in too much point 6m that looks better so I'm saying this is just taking a button so button not the last button if I have a lot of buttons not the last button we'll get a margin on it all the other buttons we'll get a margin on the bottom so we can separate my buttons will that cause no it won't cause any problems I don't think super so it looks good that looks good let's give these a pepper effect so my button primary which is this one here we'll give that one so and hover and focus we will give it a background of darken we will darken my accent color by how much 15% so you can see it there clicking in it's getting darker when I go on top I'm tabbing through right now and you can see it gets darker this is something to assess which is super handy and nice and makes life a lot easier so we'll stick with that and I'm actually no the second everyone is different so here we want to do and hover and focus we will do a background of text in verse as maybe being I should done white anyway text inverse and the color will have to change to Lois primary text primary text primary did I not call it text primary do-do-do-do-do type use the colors whoops oh I did text main I keep screwing that up today text I used up whoops sorry sorry sorry where are we buttons I used to always use primary and I've been using main lately but I'm not used to the change yet there we go okay super so that's working and it's looking good and that section is pretty much done we do need to change some colors my text color is should be the little that blue actually I'm using text in verse before that I'm using anything else but ideally that blue color would be my my default color so on my base let's come up and to say body color is text for rain whoops and I made a mistake on my colors may normalize buttons to power colors my text main should be my main color yeah there we go that's better good good good so that's looking nice I'm happy that that I'm trying to see oh my H twos need to be fixed up I didn't do a lot of type stuff on these for now we'll just worry about the h2 and I think that will be it for this video cool so let's go and check out what do my h2s look like there are all caps they're bold let's zoom in a little bit on that my age shoes they're all caps they're bold I have some letter spacing on them and they're not super gigantic okay cool they're actually pretty small so for that we will come to here h2 font size will be something like 1.2 R M maybe the text transform is uppercase my letter spacing will be something like 1 point 5 pixels line height is something like 1 just so you know if ever you're doing stuff with all capped X Y or all capped X line height should be a lot smaller you can almost always just set it to like 1 if you're getting two really big font sizes it's actually getting it was smaller than 1 because Alltech all caps don't have like uppercase or a little like J's and G's and Q's that go down underneath you can really pull those a lot closer together if not they look weird they look like they're too far apart let's just make this even like two for my letter spacing on that yeah cool I only have that one luckily I've actually set it up because I have others that should be over here that I didn't get around to doing so that looks pretty good I think that's it for the typography guys and thank you so much for watching this friend of the video I hope you liked it if you did like it hit the little thumbs up so I know you did if you haven't already subscribed subscribe so you don't miss any other videos in this series or whatever comes after this series and thanks again for watching take it easy