Layout Demo: Coding Compositions

[00:00:00]
>> Sarah Drasner: All right, so let's go back to this CodePen that we were working on before during the five minute break. I added in a cursive font at the bottom and a little line here [LAUGH]. And I just wanted to add in some of the accent colors that we talked about before and change some of the body text from being dark black to one of the colors that we found before.

[00:00:22]
And then also, let's add in a logo using SVG. And so I'm gonna show you how we optimize an SVG and actually put it into the design as well. So the first kind of like low hanging fruit we've got, let's go back to our colors. I think this was the color that we had chosen for, I'm stuck in black and white right now.

[00:00:40]
This is the color that we had chosen for that accent. So let's grab this. I'm gonna go back to the layouts, and we're gonna add it as brand red, and, I need to add the hex in there. So let's grab brand red. And in terms of accent, what might be nice is, maybe if we do it for the sideline here, and we do it for the bottom, let's try that.

[00:01:17]
So we've got the sideline. I think we put it at the bottom here. Let's go, color, brandRed, and that turned red, but also the line did too. Why did the line turn red? Because actually if we look at the line here, what I did was I created an SVG and I stuck a line in it [LAUGH], [COUGH] just as simple as that.

[00:01:45]
What I did was I called the stroke currentColor camelCase. When I say current color on an SVG, it actually inherits the body color. So if you need to use an SVG icon system, and you need the SVG icons to pick up the color of whatever text is around it, this is how to do that.

[00:02:04]
That's how to make sure that you're dealing with SVG and it's not being styled in a different way. So it gets, if I stuck it in a different area, that line would turn black again, right? Cool, all right, let's go back to Photoshop. I'm gonna grab this darkest gray that we have here and I'm gonna use that for our text instead of just using black.

[00:02:28]
So in body I'll say color, and we'll add that in.
>> Sarah Drasner: So it should get a little bit darker. Maybe it's not dark enough though. So we could probably go a little bit lighter. Let's try this one.
>> Sarah Drasner: Is that a little bit lighter? Yeah, that's a little bit lighter.

[00:02:59]
So it's still high-contrast, but it's just slightly different tones, so it looks a little bit more natural or like something that's a little bit more intentional. Cool, I'm also gonna add that accent color at the bottom. So we'll use the brandRed. Since we're reusing it, we're gonna store it as a variable.

[00:03:17]
So that was the footer, right? Cool, and we'll go color, and we add brandRed. Save it out and then we see that accent. So it's not overwhelming, it's just little spots of color here and there and it kind of makes it a little bit, pop a little bit more, right?

[00:03:35]
It's not crazy or over the top but there's just like little bits. So the next thing we want here is if we look at our original thing that we were creating, we had a circle in the corner. So just for fun, let's go over to the Noun Project again.

[00:03:55]
>> Sarah Drasner: And I'm gonna actually write in, circle.
>> Sarah Drasner: So many to choose from. Actually any one of these would be really nice as a fake logo, let's keep looking.
>> Sarah Drasner: I kinda like that, that's like kinda a little bit more raw. That one's also quite nice. What do you think?

[00:04:23]
This one or this one? Okay, we'll do a raise of hands. For number one, raise your hand. Okay, for number two, raise your hand. I think number one wins. All right, so we're gonna get this SVG and pull it down. Then I'm gonna go into SVG OMG.
>> Sarah Drasner: And I'm going to say open SVG, go into my download folder, and we've got this circle in there.

[00:04:51]
I'm gonna open that up. And here is the image but it also gives me the mark up, that's pretty nice. Because what we can see is it's changing the amount of bytes from 876 to 701. That's not a lot because it's probably previously optimized. But sometimes you come in here and you bring an SVG and then it's like, saved like two mix, like some people just dumped all of illustrator in there or something.

[00:05:16]
[LAUGH] So sometimes the savings are quite big. So you can actually do a few different options here. You can say compare gzips, you can also prettify the markup. The difference for prettifying the markup is just basically minifying, concatenating kind of thing. If you have many, many different paths and you're just delivering that SVG and that's all you're doing, then don't petrify the markup.

[00:05:40]
But if you have many, many paths and you wanna grab an armada there or something, then you definitely want to prettify that markup so that you're not looking through something that looks like this. I mean, for this it's one path so it's not that big of a deal in order to find it.

[00:05:55]
Another thing that you might wanna know is, these Clean IDs will pull the IDs off if you're exporting from illustrator and you've named all of the layers very nicely so that you can go find them again, which you should if you're gonna animate, it will remove them. So in a situation like this where I'm just dropping it on the page, no big deal, but if you remove the, if you clean the IDs from something like that, that situation, you're gonna be like, where did all of my IDs that I spent so long carefully putting them on for?

[00:06:27]
We probably don't wanna remove the viewbox, because if we ever pull off the width and the height, we wanna be able to use the viewbox to kind of constrain and understand that sense of space. Things like round rewrite paths is really awesome for something like this where we just want it to be one big glob of thing.

[00:06:44]
Instead of it being many, many different paths it's gonna be all one path. But again, if you're animating, you probably, and let's say we had these three circles and we wanted them to all move away from each other, this would make them all one big path and you wouldn't be able to move them independently.

[00:07:01]
So those are some of, not all of the things to pay attention to and some of the choices that you'll make when you're working with this. So we'll download this, and then I'm gonna just open it in VS Code. If I'll open, and downloads, this one. And then I'll just grab this.

[00:07:26]
And I think you can drop it directly but I kinda like to look at it before I do. So here we go into our header. And I'm gonna drop in the SVG and maybe Tidy HTML. And I'm gonna say class logo.
>> Sarah Drasner: Cool, right now it's huge, right?

[00:07:52]
It's just like, I am gigantic! Because it doesn't have a width and a height on it to constraint it so, SVG's are awesome and they will fill up all the available space, and all the available space is a lot of space. So now we wanna constrain it down to what we want it to be.

[00:08:08]
And we can do that in the HTML or in the CSS. I'm gonna just do it in the CSS. So I'll go into the header and, actually let's just do logo outside and say, width is maybe 80 and height, we'll just start there, and height is 80. That's probably about, right?

[00:08:31]
But it's stacked to the side here. What we wanna do is we wanna absolutely position it to the side here. So one thing that if you don't know, this is a really important thing to know, is if I absolutely position an object on a page, it will go directly to that area on the page.

[00:08:48]
So if I say, top a 100, left a 100, it will find those coordinates on a page and go there. But if I have a containing unit around that thing, and I give that a position relative, and then make the object in that position absolute, it will find that position with, it will absolutely be positioned within the relative object.

[00:09:10]
So if I right now said right 0, top 0, it would go to the right top of the page. But if I make this header position relative. And that's a really important thing to know for making these kinds of designs because if you don't know that, it's really hard to position things properly.

[00:09:35]
It goes into all of these weird areas, and you're like why doesn't it go to the place that I want it to stick to? So I can say, right 0, top,
>> Sarah Drasner: 0, and let's check it out on the, cool, that's looking good. Maybe I wanna do top, like negative something, -20.

[00:10:03]
>> Sarah Drasner: No, that's too much. [LAUGH] I go back down to 10. And then I'm also going to make the fill of that area, that accent color. So I'll say path cuz that's what we have inside of there. And the fill is brandRed, right? With camelCase.
>> Sarah Drasner: Cool,
>> Sarah Drasner: Now we're cooking with gas and starting to look like a composition that I wouldn't hate [LAUGH].

[00:10:37]
And there's all sort of other things that we could do with this, right?