So we've set up Laravel Elixir with the Silas extension, which allows us to call mix.silas, which is nice. But also, if we scroll down, you'll see there's a PostCSS adapter out of the box, which is kind of useful. And I go ahead and pull in the Lost framework. At this point, there's a dozen different choices. They're all pretty darn good at this point. But I happen to like Lost, so I will show you that one. You'll see that it includes support for lots of things, like of course columns and rows, but also some unique things like waffle. And that would be where the space to the right and to the bottom of the box is the same. So it looks kind of like a waffle. That's pretty neat. There's also masonry support if you use any of those plugins. It's pretty nice. So let me show you how to use it. Let's go to Sublime. Here's our Gulp file. I'm calling mix.silas on app.silas. And that's empty. Okay, so let's say we have a card. And I'm just

pretty nice. So let me show you how to use it. Let's go to Sublime. Here's our gulpfile.js. I'm calling mix.silas on app.silas. And that's empty. Okay, so let's say we have a card. And I'm just going to say I want this to be one-fourth of the width of its container. So if you were using Bootstrap, you might do something like <div class="col-md-3">, right? So three-twelfths equals one-fourth, right? But now we can kind of get it out of our markup. Bootstrap is actually really great. I'm a big fan of it, especially for quick prototyping. It can't be beat. But if you start to find that your HTML becomes very, very muddy, then you might want to extract that. Okay, so let's go to our view here. And we're just going to say we have a card and my card. And why don't we duplicate this? So two, three, and four. And let's view this in the browser. And there you go. Like I said, you just pull in the Laravel Elixir Silas extension, and this just works right out of

we duplicate this? So two, three, and four. And let's view this in the browser. And there you go. Like I said, you just pull in the Laravel Elixir Silas extension, and this just works right out of the box, which is very cool. So we have four lined up onto the page. And in this case, our maximum width is the entire browser window. So that makes sense. Why don't we do this real quick? On my wrapper container, and by the way, if you want to see that, I'm just wrapping our content within a div with a class of container. Okay, so I'm going to say lost utility. And we're going to set that to edit, but we could also use a clear fix. Okay, so if we were to come back, now we can get a better idea of our boundaries like that. And it's just for debugging purposes. Alright, but now what about, well, the situations where you want a fixed width? Okay, well, I could just say width, I could do it like this. So like 980, and then set margin to auto. Yeah, that would work. And if I give that

red to show you, if I were to come back, yeah, it's not going to work. They're not going to line up. And that's because, don't forget, you're applying a margin-right of 30 pixels, so if I remove that, they pop up. And don't forget, you can set margin-bottom of 30 pixels. Okay, so yeah, as soon as you add the margin-right, it's too much space and one drops onto its own line. So what you end up having to do is you say, well, I want two up on the page, so I just want to say for every one on the right, every second one, I need to make sure that I zero that out. So I could say something like card:nth-child(2n), and then margin-right is zero. So you're just basically saying for every one on the right side, I want to make sure that there's no margin-right there, and that way it doesn't drop down. But then you also often need to end up doing things where you say, well, every one on the left side, I need to make sure that I do call clear on it, because we're using floats, so I need to make sure that those

cleared. And this is what we were talking about earlier. This is just done for you automatically. So if you change this to three, a cycle of three, well, that means if I refresh, every third one will be the one that has no margin-right, and every one after that will be the one that gets cleared. So that's how you can adjust these columns if you need to. Now, what else? Well, what if we want this text to be perfectly centered? Okay, so maybe in real life, these are H3s, my card. Okay, so give that a refresh. We now want that perfectly centered. Easy enough. We can just say, text-align: center;. Done. Give it a refresh, and there you go. Now in this case, we do have margin, so we would want to make sure, of course, that we reduce the margin on that. Okay, one more time, and now it's centered. Or let's do this. Let's bring this back to one half, and then let's say within here, we want additional items. So maybe I could say all of these will be composed