Styleguide Exercise: CSS Basics Setup

[00:00:00]
>> Welcome everybody to chapter 2. We are going to start today with a warm up exercise just for you. So from practical.css.education, the course website, you want to go to chapter 2. The link is there on the homepage. Scroll down, you'll find it on the left side. And then if you scroll down here under part 1, establishing colors, click on the link to the beginning code pen, which is right here.

[00:00:27]
That will open up in a new tab for you. And this is where we're starting from. You can fork this code pen to your own account. And then I'll give you some time to work on this exercise. So what I would like for you to do is the following.

[00:00:42]
I have set some things up for you here inside of this webpage as you see. So to start with here we have a series of what will eventually be colored boxes as you can see here they are called by their various color names. And they're inside of a div with a class of colors.

[00:01:01]
Then we have some type down here, so headings 1 through 6. We have a paragraph, a link. We have an unordered and an ordered list along with some strongly emphasized and emphasized text. I have a block quote. And we have a figure down here, and of course the figure has got, I'll show you what that looks like.

[00:01:25]
Here's the men of Magenta Lime. There they are. And they have a figure caption that is associated with them. All right, so basically there is not a class to be seen except for these initial color boxes. And so the goal here is to start with a very, very basic page and we're gonna set up a bunch of variables that we are going to use for all of our websites.

[00:01:49]
And setting up a basic page like this is an advantage because then we can set up that basic styling right from the start. We're starting at the very base of CSS. On top of this, we can build all of our exceptions via classes or crazy selectors and all kinds of other things.

[00:02:05]
But right now, we wanna get our base styling that we're gonna use most of the time. We wanna set that all up and get it in place. So what I'd like for you guys to do first is the following. And I'll give this to you as a comment here.

[00:02:21]
So first of all, one, I want you to establish these colors as CSS global variables. Think about that for a minute. Do you know what a variable is in CSS? Do you know how to establish it? Do you know how to make it quote global, think about that for a moment and then I'll take questions.

[00:02:44]
And then second, I would like you to display these colors in a series, Of small boxes, and I'm gonna recommend that you make them 3 rem by 3 rem. If you don't know what a rem is, ask me and I'll explain rem to you. One color per box.

[00:03:12]
And then, Put all of those color boxes in a row. With a 1 rem gap between. And I think those instructions are, when you're done you should have basically a series of boxes that'll look like that. The rest of these won't be done yet but I want you to set up your color boxes such that they look like that, okay?

[00:03:50]
>> How do you declare a global CSS property?
>> I love it, how do you declare a global CSS property? Wonderful question, let's start with that. So here inside of your CSS, I'm gonna address that in just a second. Notice that we have a little bit of CSS here by default.

[00:04:09]
Anybody know what this CSS is here? What is the CSS that you see here?
>> It's creating a barter box so that, my understanding is that padding and margin don't cause the size of the box to change.
>> Correct, absolutely right. Yes, though the border box, we've talked about this many times before in my courses.

[00:04:30]
This is such that when we start to add padding and margin to our boxes, they don't get bigger on the page and then break our layouts. So anytime you're working inside of CSS, this little incantation should start at the beginning of your document, okay? By default, this does not happen.

[00:04:50]
By default, as you add padding and margin, boxes get bigger because width property is defined by the width of your content. So this is really critical. You can just copy and paste that anytime you want. It's called border box. If you just google for border box, you'll find somebody who'll give you this little snip.

[00:05:09]
All right, so once that is, that little bit of code is for, then how do we declare these quote global variables? We're going to start with the root pseudo class. So root, :root. It's a pseudo class. Why root instead of HTML? Anybody have an idea why root instead of HTML?

[00:05:32]
Okay, so HTML is an element, right? Is there a before or an after on HTML? Are there nodes that come before and after HTML? Just like their nodes on every HTML element. There's a before and an after, trust me on this, that is, in fact, true. So when we go to route, we're going to select everything.

[00:05:55]
What is another reason?
>> You're allowed to pull them into other selectors as opposed to them being nested inside of a particular selector.
>> Exactly, you can pull these from root into any part of your web page, right? That is sort of the definition of root. What is the specificity of root as opposed to an HTML element selector?

[00:06:20]
>> Well, pseudo classes as a whole are normally less specific than a class, but more specific than a tag
>> Close, they're exactly the same specificity as a class, okay. Pseudo classes and classes have the same level of specificity. They take priority over an HTML element like HTML or body or paragraph or any of the rest of them, right?

[00:06:44]
And since so many of us use so many classes in our designs, it may be good to start with something that is of a similar specificity. Yes, okay, so we're gonna use root. Now we're gonna use this to declare some variables. How do we declare a variable in CSS, anybody?

[00:07:03]
>> Dash dash.
>> Yeah, and the name right. So I am super creative and break all rules by calling my colors but the actual color that we're representing. We don't have to worry about ever changing them. In real life, usually you wanna call these colors by whatever, primary colors, secondary color, that kinda thing.

[00:07:25]
So you don't wind up with a color called lime, that is purple [LAUGH] right? But we're gonna start here with lime and the color from your webpage will be A4FFA2. Okay, so that's how we declare it. Notice nothing has changed on my page. How do I actually apply this variable to my webpage?

[00:07:46]
>> You put it somewhere, you assign it to an element or something.
>> Exactly, we have to assign it somewhere. This is just like in JavaScript where you declare a variable. Good times, that's great, but it just hangs out there and is, it doesn't actually do anything. Same idea here, so we need to apply it.

[00:08:04]
So what we'll do is we can create a class called lime because we're super creative that way. And we can say background color of var, this is how we call it var lime. Okay, Now notice that we do have a div with a class of lime here, right?

[00:08:34]
So the HTML exists, it has a class on it. And we've created a style here that corresponds with that div. But I don't see anything on this webpage, why is that?
>> The div is empty, there's no content
>> The div has no content, it is empty. So it will just not show [LAUGH].

[00:08:54]
If we started typing in it, hello, something will show up here on our web page. There it is, right? But because there is nothing in that div, it will not show here on the web page. How do we get around this problem if we want no content?
>> Set a width and a height.

[00:09:14]
>> Exactly, and we're gonna set a width and a height. And so a great way to do this. Those of you who are fan of wacky selectors, here's a nice way to do it. We're gonna say .colors > *. What does that mean? Colors > *. Remember that we write our selectors from left to right but we read them from right to left.

[00:09:43]
Read them from right to left. So what does star mean?
>> Anything?
>> Anything at all, right?
>> What does that greater than sign mean?
>> Direct descendants.
>> Direct descendants. Okay, so that might be new to some of you, direct descendants. So in other words, lime, magenta, magenta 50, white, tan, teal, cyan, black.

[00:10:04]
All of those are direct descendants of that outside div called colors. Which we call here so we're saying all of those descendants, we wanna do something. What could we do with 3 rem? Height 3 rem? Yeah, we did that. We made a box. Where did that giant space just come from?

[00:10:35]
>> Are they arranged vertically right now, all the divs?
>> Yeah, all those divs are arranged vertically. Andrew, you're burning it up here. Awesome, yeah, those are all those divs. They're right on top of each other, yep. Okay, so now that you know those sorts of basics, I'm gonna turn you loose on the rest of these.

[00:10:52]
Set up some more variables, okay, so set up those variables, just like I said here, and then display those on the page. Those will be a series of boxes, and then make them go in a row, all right? All right, so how did that go? Did everybody get something similar to what you see on my screen here?

[00:11:18]
Maybe you have sort of a missing hole. That's because you have a white box on a white background. I put a little border on mine just so you can see that it's actually there, okay? So for anybody who got stuck, let's just take a quick look at the code here.

[00:11:33]
In the CSS, we have our root declarations as are all the colors that came from the website that I told you about. And then I have all of my individual declarations for all of those classes. Like I said, I put a border around the white box just so that we can see that there is in fact something there.

[00:11:52]
And then we made this display using Flexbox. So we simply took colors, why did I take colors? Why did I take colors here to display for Flexbox? Anybody know?
>> Put flux on the parent?
>> Right, so all about parents and children all about containers and items. I'll only say that 1,000 times in the next two days, okay?

[00:12:20]
So colors is the container or the parent right for all of those individual divs inside of it. So the parent is where we're going to put a display flex or eventually display grid, okay? And then we can say exactly what we wanna do with that flex. In this case, we're going to do a row wrap.

[00:12:42]
Those are kind of the, well, not wrapped, but row is a default value so you actually won't see a change. And then I put in a gap, gap of 1 rem. You don't need to do padding or margin. You can use gap instead.
>> If anyone is confused about magenta 50, 50 means 50%.

[00:13:01]
>> Yes, great, good catch, yeah, what is this magenta 50 thing and this weird looking hex number. Anybody notice that hex had eight digits? Okay, so this is magenta 50% and that is the hex code for RGB, right? Remember those are two digits, R, two digits G, two digits B.

[00:13:26]
And then the last two digits are the alpha. So this is the same thing as RGBA. We're just writing it in HEX format now.