Styling Without Classes Solution

[00:00:00]
>> I hope you all had fun with that, does anyone have a code pin they wanna share to see could you manage to get the styling done without any classes? If you do go ahead and drop it in that window here and I will go through what I have done.

[00:00:17]
So I was so excited to find out there was a Trex and a gecko emoji. So I threw those in here in my code bin they're right there inside of my h1 and I think that those were the major additions that I have here. What I did do was I put the hours as its own little thing here on the side and I put it next to about the cafe.

[00:00:43]
And so to make that happen I had to put a div, so put a div around after main but before article, and that would include then the article about the cafe, all of that information. And it includes the section here that I have for hours and potentially that could also be an aside that might be a better choice of item because these are all next to each other.

[00:01:12]
I think I just laid this out with Flexbox if I remember correctly, well maybe I didn't.
>> Read grid section just above there, so
>> Yeah.
>> Grid template columns.
>> Yeah.
>> Grid.
>> Yeah, there it is. Yeah, so I did it with grid. Yeah, thank you.

[00:01:31]
So, the article is slightly bigger than this hours over here on the side. And then, down here in the menu, so, what the menu being sort of the main attraction of all this. I've got some stuff going on here that's similar to that trick that I just showed you with the unordered list and columns here, I'm doing it with dt, so if there is at least a fourth, nth of type.

[00:02:03]
Which would mean that let's find that HTML here. So we're looking for the fourth dt, so here in this definition list that's inside of the article. Here's one, and then here's two, here's three, and here's four. So once you get to that, then I want you to make two columns for me.

[00:02:25]
And went ahead and did that and assign them accordingly like this. If you're wondering about how I separated the title of the menu item from the price, the way I wound up doing that, right here is the big salad on line 70. So I use span tags around these, okay, so that's all inside of the dt, but I put span tags around, in this case, big salad and $12.

[00:02:52]
And then you can use the article dt becomes displaying as Flexbox, right? And put all the space in between that which sends those two elements to either side here. And then you can assign the the other various kinds of styling to this and then put a border bottom on the whole thing to sort of visually connect the name of the item with the price.

[00:03:17]
So that's that little line that goes underneath of that. So that's how I made that cute little trick there happen, I think everything else more or less is pretty straightforward in terms of the styling that was sort of the big trick that I did there. If anybody has any questions or want me to talk through any of the CSS that's here on the page, let me know.

[00:03:43]
Okay, Ben has got some styles here to show us, thank you, Ben. He copied and pasted a few things from earlier, [LAUGH]. Setting the bar low, so he liked the menu that we made earlier for the navbar so he stole that styling there. He just hasn't taking out the bullets and making it go horizontal yet so they sort of overlap each other but he's got at least part of it there.

[00:04:13]
He's got the hours here next to each other, right? All the hours are next to each other, and he did a different formatting here for his menu, I think this is great. So here, we've got the Kaji burger $15 with the description next to it, that's totally awesome.

[00:04:30]
What a wonderful way to go about formatting your menu down in a list like that. He could then add to this the concept of those columns right, put those two things side by side using the hash selector that we talked about earlier, that would be a fun thing to do.

[00:04:46]
And you could probably use the hash selector conditionally there also to say it's the last one on the column. Maybe there's some way that we could write some CSS to do that if it's the last one on the column not have the border there. I'd have to give that one some thought but that might be something that you might think about seeing if you could do that.

[00:05:07]
Yeah, the only disadvantage here is this little snag right here, so we have the chocolate cake is $8. We have a description and then we have the with the ice cream is $12, I don't know I guess I've seen menus formatted this way before that's okay. If you wanted it show up over here you'd have to do something a little bit different in order to make make that happen.

[00:05:30]
So didn't quite get through all of it but I think you've got the great bones there nicely done you concentrated on layout problems and so I think that's awesome, good job