Refactoring a Grid System: Bootstrap is Dead

[00:00:00]
>> Jen Kramer: So if you now take a look at what you got before, whoa, okay. Switch our view here back to full page view, what do we got? Hey, look at that, the gap is back, okay, and it all lines up, and it lines up beautifully, look at that.

[00:00:21]
Okay, and if I start to shrink it down,
>> Jen Kramer: Wow, look at that. Still get a gap, still everything lines up, isn't that awesome?
>> Jen Kramer: Why aren't you guys jumping out of your chairs? This is amazing.
>> Speaker 2: [LAUGH]
>> Jen Kramer: Okay, and then now you've got everything stacked on top of each other just the way you want.

[00:00:45]
Are you happy? Look at what little we had to do.
>> Jen Kramer: So we go back to our code here, look at what little we had to do here. We've simply established, I have the same number of columns, and each column is gonna have a width, right? I calculate this initial basis just simply dividing the width by my number of columns and multiply by 100%.

[00:01:13]
I have a gap that I'm also factoring here. I'm gonna make this a little bit bigger to put it all on one line, make it a little easier to read. Columns minus the width times 1% to convert it to the right number of units. And then I'm simply gonna subtract my initial basis minus the gap.

[00:01:35]
>> Jen Kramer: I just wrote a grid system for everything. It is the grid system, we're done, Bootstrap is dead, this is all you need, that's it. Cuz now what could I do with this, what if I decide I wanna have a 12 column layout. What do I do?
>> Speaker 2: Just change the value of columns.

[00:01:56]
>> Jen Kramer: Change the value of my columns, right. And then change my value of my width. Down here, I'm gonna have to declare different values for width to make it work for 12 columns, right? But fundamentally, the logic, it is exactly the same, isn't it?