Description Lists & Flexbox

[00:00:00]
>> We've covered ordered lists, we've covered unordered lists, we've covered a bunch of different kinds of selectors, the ones who are familiar with grouping selectors, descendant selectors, attribute selectors, all the ins child's. And that sort of brings us up to a baseline here. Those are tend to be the things that people work with a lot inside of html and css going forward.

[00:00:23]
Now we get into some interesting wild and crazy stuff that we can also do with semantic html and with different kinds of styling. So the next thing we're going to explore are our description lists. You may also know these as definition lists. That's what they used to be called, definition lists.

[00:00:42]
Now they're called description lists cuz they're not just for definitions anymore. So we're here and chapter two, we're at part three. And there's a link here to this demo code pen. So if you wanna open that up, this is just gonna go through how we would go about marking up a description list.

[00:01:00]
So I've got my html up over here on the left hand side. So the way you started to description list is with the dl tag for description list, and of course you ended with slash dl, as you probably could guess. But since this is the list that is for key value pairs, there are two list items that wind up here in the list.

[00:01:25]
So dt is for the term dd is for the description. So dt is the key, dd is the description, and those terms and descriptions can be organized as follows. So over here in the display side you can see we can have a one to one relationship, one dt, one dd.

[00:01:48]
We could have a one to many relationship one dt, many dd. You can also have a many to one relationship, many different dts with one dd or we can have many to many, many dts to many dds. All of those are all absolutely legal in a description list.

[00:02:08]
So, here I have talked about various types of fruits and vegetables and we are just pairing them up here so that we have all four of those types of key value pair possibilities are all represented there. Now so that is just the raw styling for that particular kind of list.

[00:02:30]
One of the things that would make this more useful is if we could group these elements, right, so that we can do interesting layouts and we are limited in what we can do in that regard. One of the things that is legal is to use the div element to group each set of key value pairs.

[00:02:49]
You can't just group put that div anywhere you want in the description list. You have to put it around the relevant key value pairs. So we have in this case of course fruit and Apple those go together. That's an additive, vegetables which are broccoli spinach and squash that goes inside of a div and so forth.

[00:03:10]
So those are all we can do here in terms of our html and putting together this kind of list. In terms of the kinds of content because you're probably not making lists so what fruits and vegetables. Anybody have any suggestions for what kinds of content, might go together well with a key value pair.

[00:03:29]
>> That some types of pets are.
>> Yeah, so a category and members of that category, right? So we can talk about dogs, we can talk about breeds of dogs, breeds tats, we have breeds of cats, right? What else? How about frequently asked questions, where we have a series of questions, right, and then answers that go with those, that would be something like that.

[00:03:52]
So any type of those things where you have a relationship between two items, and you wanna be sure that relationship is represented, this is a great way to do it, okay. And we'll do more with description lists as we go on because it's one of my favorite things of html.

[00:04:09]
Any questions about a description list and how its marked up?
>> Is it valid to use only a dt and no dds corresponding to it?
>> I am not sure of the answer to that. I believe the answer to that is no that you can't have just a dt with no dd.

[00:04:27]
But I'm not entirely sure on that I would refer you to MDN to double check that.
>> I was kind of curious about the nature of it since we kind of have implied groups that are highlighted with these divs that we have our dts and dds father. If I thought about the example that that question laid out, it just seems like well, then your dt would be associated with ever dd is beneath it.

[00:04:49]
>> Yes.
>> Unless they suggested it was an empty list, just one dt, which would not be much of a list.
>> I think that's the second one is what their question, that's what I was referring to. Yeah, it's really targeted at key value pair. So one, one possible approach would be to just put in a dd with no value that might be one possible answer.

[00:05:12]
Other questions?
>> Only the dl is required and then one element inside of it.
>> Okay.
>> So dt or dd.
>> Well we can always take a look at mdn dl. So let's see what it does mdn tells us. It doesn't necessarily say here on this page either, I'm not gonna spend a huge amount of time reading documentation.

[00:05:37]
So that is how a description list works. Let's do a little bit of coding for that. So if you wanna take a look at your beginning code pen in part four, this is chapter two, part four we have layouts with description lists, and this is where it gets super fun.

[00:05:55]
So let's take a look at those layouts. By the way, questions that came up over the break, and I am remiss in mentioning it if you're not accustomed to using code pen, feel free to make a code pen account. There's a button up here in the corner. If you're logged in, you'll see these settings.

[00:06:14]
If you're not logged in, you can make an account, and then down at the bottom of the page there is a button to fork these ,so you can fork them to your account and save your work if that is of interest to you. Obviously you can just code right here in the screen if you're not wanting to save your work.

[00:06:31]
All right, so let's look at these description lists and let's talk about interesting ways to name them out. So what I'm starting with here is I have a portion of that list that we just talked about. So right now I just have a series of one to one relationships between the dt and the dd.

[00:06:54]
What might be one thing that I could do to start to lay these out? Anybody have any ideas?
>> Give a border to the dts.
>> We could give them a border, absolutely. Might we wanna put these things side by side, maybe a column of information, that would be kind of a fun thing to do.

[00:07:14]
All right, so let's say that we're going to have a div, we're gonna put a div around our fruit apple and we'll put another div around our vegetables broccoli. Slash div and clean that up. Okay, so now what I have is I have divs that are grouping together those dd and dt.

[00:07:44]
So anytime you see that, this case this div is the parent the dt and the dd are the children. Now we have a relationship between parents and children and we can start to think about things like flexbox or grid, right. So let's start applying some of those. So what I'm going to say we don't even actually even need a class in this particular situation for these divs.

[00:08:09]
In real life you might have a class on those divs for obvious reasons. But just for fun, let's just go with it here. So we'll have our div, will say display flex, we could say flex flow row wrap, right. So now we've got them at least on separate lines true.

[00:08:33]
If you can't see, see if you can't style it. So let's take a look at our individual elements as well, we have dt and we have dd. Now that dd as you saw previously, it's indented slightly. So there is a, I forget whether its margin or padding that's put on it, I think it's margin.

[00:08:58]
So if I said zero, yeah it's a margin [LAUGH] so if we put a margin on that we can get rid of that slight indent, right. Maybe what I wanna do is set a max width on this div. Let's say like 400 pixels. And we can put a border on that always one pixels solid red, so we can see where the list is, okay.

[00:09:29]
And now for our children for our dds and our dts, we could think about making these the same whip. So one way we could do that, if you wanna talk about funky selectors we could say div star just like this. All of the children have div, then we could say flex basis is 50%.

[00:09:51]
So now they're of equal width, right? I'm gonna give you a second there to catch up. So in summary, we've got a max width set on our list to only 400. We don't have a huge amount of stuff. We don't want it spilling all over the page. Clearly, you could apply responsive design here.

[00:10:14]
We have a border going around each of our divs so that we can see where they are. We set that up to display as flexbox and in a row, so now we have our dt and our dd, they're next to each other. Then I've said all of the children of the divs which will be all the dts and all the dds, we've just doing it in a very efficient sort of manner here, and we've set that to be 50% wide.

[00:10:44]
We do anything else that we wanted here we could say for the dt, we could say font weight, bold, right? That would be something we could do. We could put a little bit of padding on these. Maybe we want to say padding on our divs. Maybe we wanna do, I don't know, one rim gives us a little bit of space around those.

[00:11:17]
And if you wanted this to actually look pretty, we could say something like border bottom. One pixel solid, maybe a nice dark grey. Whoop poof kind of nice looking, right? What if I did not want that border to show up after the last item there on the list?

[00:11:43]
Anyone have any ideas?
>> Do you have not last child?
>> We're close [CROSSTALK] there is the last child, right?
>> So you can select that and tell it no border?
>> Exactly. Yeah, so we could say div colon last child. Border none, Hey that's awesome. So now we don't have that spare border hanging out in space, great.

[00:12:22]
All right, so well, that was easy. That's just single values was single pairs here, right one to one. Very, very easy, we just did this with flexbox. What happens if we add a few more items? So we had broccoli here in our HTML on line 12, I'm gonna add some spinach And some squash.

[00:13:00]
Okay, anybody tell me what's going on here?
>> Flexbox is filling up the things cuz they have a width of 50%, whatever the width thing is. And so it's jumping to the next row, because two of the 50s have filled up 100% of the width.
>> Yeah, exactly, so flex box, the children here for the dds and the dts, they're 50% wide.

[00:13:27]
So in that first row with vegetables in broccoli, we have 50% and 50%, that's a 100%. So that row is full. It takes our than our spinach and our squash and those are 50% wide also and it winds up forming another row, so our layouts kind of falling apart here, right.

[00:13:44]
What would be one way that we could fix this even though we're still using Flexbox?
>> You can make dts take up 100% of the width and then stay on their own line.
>> Yeah, so one thing you could do would be to make the dts take up 100% of the width, and then the dds they could do something different.

[00:14:06]
That is one possible solution, but what is marketing gonna say? Marketing's gonna say no, it's gonna look exactly like this, right, marketing graphic design all those people. Okay, so how are we gonna fix this here with Flexbox? If we want all the dts to always be on the left, and the dds are always gonna be on the right, true.

[00:14:33]
Yeah, one thing we could do then is instead of saying our margin is zero on the dt or the dd. Let me write out four zeros here, right. And just as a reminder, TRBL, right? I always I don't know about the rest of you, I always have to say this in my head.

[00:14:56]
Remember to TRBL it keeps you out of trouble, top right bottom left that's the order and in for these numbers, right? So what we want here is we actually want no margin except on the right hand side. So that would be the second digit here we gonna set that to auto.

[00:15:16]
Okay, well anyway it breaks and this is the whole point of the whole thing, it breaks, there's only so far you can take this with flex box. So let's just redo this, and now what we wanna do is if we think about this with grid instead this is actually gonna be a better approach overall.