Starting CSS Setup

[00:00:00]
>> So, if you hop into the website for the course, which is at front of masters dot GitHub that IO slash grid hyphen Flexbox hyphen V2, take a look at the Flexbox introduction item. That's the first one on the list there. I just went through the slides that are there.

[00:00:20]
So you have a copy of the slides we're gonna come back and revisit those momentarily when we talk about Flexbox Grid. And then what we're going to look at next is the starting code pen. So, let's go ahead and code and we're going to start with this particular code pen the link is there inside of the website.

[00:00:39]
So, what I have here is some very simple HTML and some starting CSS. So, let's see what we've got here to get us started and then we can look at each of these Flexbox properties independently. Part of the problem is that we all wanna rush into making beautiful web pages without understanding all of the properties and values that are available to us.

[00:01:01]
So, if you build a little system like this, it isn't supposed to be pretty that's supposed to simply demonstrate those properties to you, you'll get a much better sense of how all of these things work. So, here in my HTML I have a bulleted list a UL followed by a bunch of LIs and I have only two classes in here on the second and the fifth bullet, I have a class of flex to, some of these bullets have numbers.

[00:01:26]
Some of them have a little bit of text. Okay. So, very, very simple HTML to work with. In our CSS, we have the setup a little bit differently. First of all, we start with the border box model. If you're not familiar with the border box, the way that CSS is configured, it starts off with a so called Content box and it has to do with how we determine the value of the CSS property width.

[00:01:52]
Are we going to include the width of the border and the width of the padding, plus the width of the content to determine the value of that property called width. Or are we just gonna say it's the width of the content itself. So, content box says the width of the content itself, is the value of the width property, the border box says let's include the border and the padding as well, to determine the value of width.

[00:02:19]
And it is much easier for math if you use the border box. And so, this is the declaration that you use, you simply say the box sizing is border box. It doesn't inherit by default. So, the next declaration and you say universally, the entire universe and everything that comes before the universe and after it, inherent the box sizing and then you don't have to worry about it.

[00:02:44]
After that we just have a body declaration, we declared a font we remove the margin and padding. Some browsers have margin, some browsers have padding. It's responsible for the tiny little box you see around the edges of web pages if they don't go all the way out to the edges of the screen, this is the reason why edge or margin and padding zero those out.

[00:03:07]
And we set font size. And then here UL, we've turned off our padding, we put in a little bit of margin to make look pretty in a border. We gave it a width and a height. And then finally down here in our LI, we've set up a border a background color a min width and a height, so, pretty standard stuff nothing exciting here so far.