So what we can try and do is go to our picker and let's just try putting these directly into our input, and you'll see that the color is not translating over either. Let's inspect it and you'll see that we are using on the input, okay we've killed our borders which we want, I'm not seeing the font. Okay let's select the same date because that could be part of the reason, okay that looks different to me. That is interesting I wonder why that is not working, let's go and inspect our element in our page and see what we get. I believe I can inspect this and see what they are using for a font, it looks like they are using roboto condensed and they are using bold, okay so that is exactly what we used. Okay that's looking pretty close, obviously the font is looking pretty different. ![]() Now, let's go back to our application and see what we've got, and let's compare it to our design. Now we can use this where ever we want, because I'm pretty sure that we are going to be using this in several different places. Now I want to put this in a variable so let's just cut that and let's say color-gray-one.Īnd then let's go back to our base.scss and at the top by the other two color variables let's say color-gray-one: #444. So let's go in to picker.scss and let's say color: #444. So what I'm going to do is give it a color now, because the design date looks a little grayer then the black we are using in our app. I'm going to go back to this tab and you can kind of see that we've styled this now and it looks really nice, it looks almost identical to what we have in the design. If we go to our tab that is inspecting it you will see that its above 50px and then we can just throw our generate button right here. So let's go ahead and give it a padding bottom of 50px, now the reason we're doing this is because when we put the button in, the way its going to align on our grid is going to be right up to this gold line so we just want to throw 50px so it throws it above Let's just put it to 700 or bold for now, and we'll fix that later on if it's not looking like our design at the end of the app, and with Roboto Condensed it looks like we are using it correctly.Īnyway, thats how you do that. So let's just put 100 for the font weight and then let's go and see if it changes, huh it doesn't look like it changed to me. So I'm going to save it and alright it looks the same to me, and that is because it is the same thing. I'm just going to put bold and I haven't saved it yet I want to see if it changes. Because you'll see in our index.html that we are saying 700, when you say bold in SCSS that's just translating to 700, so if you put 700 thats going to be the same thing. ![]() So let's go ahead and go to picker, and let's put a font on our picker so let's say font-family: "Roboto Condensed" and then let's say font-weight: bold or you can just say 700 or what ever it was. Sweet so we have all of our fonts, we've got some font sizes on these and it should be good. Okay, so now go back to embed and let's copy this link.Īnd then let's replace this one in our index.html with it Now if we need more we can come back here. In our application we have some bolded fonts, if we don't customize it we're going to get all these thin looking fonts so let's go in here and hit customize, and let's select bold and that should be good. It's called Alegraya we are going to be using this one as well, so let's throw that in.Īnd then let's customize these, you'll see that there is a customize tab. ![]() Now were going to be coming back here, I think I remember the other font as well so let's just do it now as well. Okay, that's a really clean font because we're going to be using that as well. So what I want to do is in google fonts before we copy this link let's just search in here for that font. Now remember that we are using another font which is Montserrat in one of our styles here, and if you go to our index.html you'll see we have an import to that. ![]() And I think that's the exact one used in the birthday count count down if I remember from the first time recording it. So I want to use Roboto condensed, so let's select this one. Now what I want to do is put in a custom font, so go ahead and go to google fonts and then in here we want to basically select one of these fonts. So that's the same thing except for with SCSS we can just nest that in there and make it nice, which makes it more condensed and readable code, so that looks really good.
0 Comments
Leave a Reply. |