Style Guide Overview

[00:00:00]
>> All right, fantastic, so, let's get started and make some code. So, let me show you the website, this is the website. Once again, projects.css.education and we are going to start down here at the bottom, there is a project listing. And we are going to start with project 1, style guide, columns, and cover.

[00:00:24]
Let me click on that link, this is our first challenge that I'm gonna give you here. So, if you click on the screenshot, you can zoom in and so forth, I'm gonna leave mine like this. So, let's talk about what you see here. Anybody make any comment about what you see here for the style guide?

[00:00:42]
Comments about what do you expect the HTML is going to look like, comments about how what kind of styles you think you might be putting in place here? Comments about things you don't understand how to Jen manage to get that blank thing done.
>> There's like consistent color scheme.

[00:01:00]
>> There is absolutely a consistent color scheme and where does that color scheme?
>> It's a handful of the colors that are spelled out in the boxes.
>> Yeah, those boxes that are up there on the top, those are the colors that we're going to be using for the website.

[00:01:15]
Notice that we have like a pop of blue there. Pop, great home and garden television kind of word. And we've got a lot of neutrals in there, right? So for those of you who are thinking about color and how to put it on the page, those things like blue might wind up being a call to action kind of thing.

[00:01:32]
You really draw your eye as opposed to the rest of the coffee colors that are Kind of beige, right? Okay, Anna, do you have an observation?
>> You've got multiple aspects of styling to your header column.
>> Yeah, so are there any of those there that you wonder about or?

[00:01:52]
>> I mean, I glanced ahead at the take home portion.
>> Okay.
>> So I know there's some fun stuff going on with that kind of I don't know what you would call the effect on your style guide.
>> Yeah, the word under style guide.
>> There's some fun stuff going on there.

[00:02:08]
>> Yeah, that's kind of awesome. We need to look into how that's gonna work. Jace, you got an observation?
>> Well, she stole mine, so thank you.
>> Sorry.
>> [LAUGH]
>> Okay, fantastic.
>> I take it back. You can have it.
>> No, can we partner on that one?

[00:02:21]
>> Sure, yeah.
>> Yeah. The style guide was a really nice highlight.
>> You like that? Okay, great, yeah. Rox?
>> I'm just gonna look at how you have your colors on there, they're all like, same shape, same size, like same distance, they're perfect.
>> Yeah, how did I do that magic?

[00:02:39]
That's a great question. Wonderful thing to wonder about. Ben, what you got?
>> For me, I hesitate to reveal my ignorance perhaps but I've only ever seen a style guide like this once before at work. So right away I love the layout I see what we have is essentially a collection of all the different elements we could use, we've headers.

[00:02:59]
I assume these are buttons of different colors here but maybe not, we've got our headings and our paragraphs. One thing, honestly the first thing that jumps out at me, because my brain hates it, is that there's no margin on the headings specifically, so the text lines up real close with the edge.

[00:03:13]
Which just bothers your eye, but then I realize, of course, that's telling us there's no margin or spacing on the headings themselves, which is of course by design. But to contrast the buttons themselves clearly have some padding between them and stuff like that you see text links have none.

[00:03:30]
Our images obviously enormous which looks like it's filling with equals 100. And there's just a little it's always time for coffee down there that I see, I don't know what that's telling us.
>> Okay, great. So that was a lot of observations there that Ben had for us, he was a three on his CSS

[00:03:46]
>> No, that was a two.
>> You're a two.
>> He's a two on his CSS scale here, so notice some of the things that he is pointing out like the fact that we've jammed everything over the left side.This is a style guide. This no one is actually going to see this page, so this is not the kind of styling that we would I mean, we would never put anything like this into production right?

[00:04:05]
This is for us to set up our base styling. So the fact that it is jammed to the edge of the page tells you there is no left or right, well, most likely, we assume on the right, padding or margin, right? Okay. Dinesh, do you have some observations for us?

[00:04:21]
>> The last one.
>> [LAUGH]
>> I mean, when I start to look into that, the style guide is, they're already covered. But the space between the header and then the tan color, the vanilla colors, there is a three lines, right? I found very difficult to get those three lines.

[00:04:44]
>> Yeah. So he's pointing to, those lines that go between that top that's the coffee color and the Manila color that comes underneath. How did we get those magic lines in place, okay? And spoiler it's a little easier than you would think, okay? Yes, sorry Ben.
>> Yes, I'm also just curious if you got these colors all on your own or if you use this tool to establish your color palette

[00:05:10]
>> I love those tools that establish your color palette but in this particular case that graphic designer put this together for us, yes. Now I did not the graphic designer. We have Alex is a fantastic graphic designer, he created these colors for us. Mark you you had a comment.

[00:05:27]
>> Yeah, just a couple comments and questions from online.
>> Okay.
>> Jackson says it's a simple style guide that can be used to create a beautiful interface.
>> Okay.
>> And then Frank said, I guess I'm a one compared to that guy.
>> [LAUGH]
>> He liked your explanation.

[00:05:47]
>> Yeah, nice job, Ben.
>> And then Kamal online is asking if we'll see variables in the root.
>> Yep.
>> Matching these color names then?
>> Yes, we will.
>> And then, is there a dark theme?
>> There is no dark theme in these particular examples, but that is absolutely something that you could add.

[00:06:12]
So if we go back to our website now, And if you scroll down you'll see here I've given you for the style guide, I've given you some instructions. So you can read through those instructions on your own and work through those. If you scroll down to the bottom here, you'll see the big red button here that says beginning code pen, shockingly, that is the beginning code pen.

[00:06:35]
And if you take a look at that beginning code pen. You will see here that I have given you the HTML, I want you to start with semantic, HTML, and I want you to write very generic styling here for our style guide because we will use this later as our start.

[00:06:54]
We'll override these styles as we work on the layout for the website. So you'll see here I have a header, I've got an H1 and I've put a span with a class of fancy text around the word style guide. So spoiler somehow that word underline has something to do with that class of fancy text.

[00:07:15]
There's our color boxes, there they are. Here's our headings and a paragraph, a link, okay? And then I've marked up a figure. Anybody ever heard of the figure element is one of my favourites. This is an HTML element that is, of course, combines your image there, which has an alt text to it along with a caption, okay?

[00:07:41]
And I'm gonna emphasise this since I'm not a lot of you are familiar with it. The alt text should describe this picture as if you did not see the picture the caption might say something completely different. So the example I like to use is if I have a picture of a baby Robin a little bird, okay?

[00:08:01]
The figure caption for it might say you know a baby bird standing in the grass you know baby juvenile American robins standing in the grass but the alt text is gonna say something along the lines of. Spotted black and white feathers, no orange breast, that kind of thing that you would get if you were actually looking at the image, make sense?

[00:08:21]
So that's a figure and that's what that is there for. And you can see here, we have quite a mess going on, that is our picture. Whew, it's kind of big, all right? So in our CSS, I've given you as variables all of our starting colors, there they are, I've given you the fonts, they are all hooked up with Google fonts so you don't need to worry about that, they will work.

[00:08:46]
There's information here about a font scale. I've talked about this in a few of my Frontend Masters courses I'd like you to write a font scale here. So if you've watched some of my courses before, you should be able to write a font scale with this, if not, I've given you a link to a code pen here where you can take a look and figure that out.

[00:09:04]
And then I've also given you a variable called radius probably has to do with border radius right?
>> Is figure for SEO?
>> I'm not sure about the impact on SEO, but it's really good for accessibility purposes because it combines the picture with what is said underneath and it treats them as a unit.

[00:09:24]
Which isn't necessarily true if you have an image tag and a paragraph underneath, who knows what the relationship is between those, okay? Sound good? Everybody all set, ready to start? Yeah.