Wrapping Up

[00:00:00]
>> Jen Kramer: So just to tie everything up here, I have tongue-in-cheek called this technique, the death of Bootstrap. Let's just evaluate that statement a little bit. First of all, obviously, we are limited here by browser support. Just that's the world of being a front end web developer. There are plenty [COUGH] i.e., browsers that still are not supporting these custom properties, and so forth.

[00:00:27]
But we have managed to get around all of those layout problems. We can now change our columns at will, we can change our width at will. Pretty cool for changing the ways that we're laying at web pages. We've done it in a flexible way. We have flexible boxes, we have flexible gaps in between them.

[00:00:44]
We don't have to do a whole lot of math to change those things as we go. This formula you can use again and again and again, within one web page. You can use it across a whole bunch of different websites. That'll be a pretty cool thing to do.

[00:00:58]
Where is Bootstrap still gonna be useful? It's still gonna be useful if you don't like to write all your CSS from scratch. Bootstrap makes it look pretty from the beginning, so that's still there. But Bootstrap, we have broken the paradigm of the 12-column layout. You can now have whatever columns you want.

[00:01:16]
And we have reduced in Bootstrap, as we state over and over again, all of the various different kinds of layouts. And we stack up all the different kinds of classes to try to make it work. We've broken that as well, we can do exactly what we want to do wherever we want to do it.

[00:01:32]
So that's why I'm calling this the death of Bootstrap. And this is some additional resources you can take a look at, they all very much informed what I have presented for you here today. I've taken techniques from these various articles. I've combined them with other things and created some of the stuff.

[00:01:50]
So there's some reading here for you on calc, on custom properties. Especially, the Smashing Magazine articles are particularly good for this and and give you examples of how this kind of thing can work. I heavily borrowed here from this Responsive Designs and Custom Properties, Building a Flexible Grid System.

[00:02:07]
If you take a look at that article, that's where that concept of the initial basis that we had here. But if you read his code really carefully, he actually uses borders to create a, quote, gap. So the gap part I wrote myself. Then we have some additional stuff here on grid, including somebody was asking earlier about grid with variables.

[00:02:27]
Here's an article on that variables plus grid. Absolutely, you can combine this technique there. There's some more things on flex box, flex box grid systems and then the games that you probably already are familiar with. Feel free to go through this list. That's probably gonna be better for you than a book at this point in time.

[00:02:47]
Yes, we have another question.
>> Speaker 2: Kelly's asking, with Boostrap, there's a lot of utility classes for adding margin and padding.
>> Jen Kramer: Absolutely.
>> Speaker 2: Here you're moving all of the concerns to CSS, do you think that's the future of CSS or that's?
>> Jen Kramer: Remember, the technique that I presented here today basically did the following.

[00:03:10]
We said, whatever we're going to change across the media queries, we put up in a CSS variable, then we call that variable. We set up all of our logic in the mobile layout and then in the media queries, we just changed the values of our variables. So in something like margin, I gave you one minor example here.

[00:03:28]
And I did not go back and refactor all of the other code that I could have gone back and refactored. It was just the timeline was too short. But you can go back and take a look at it. What is actually changing from media query to media query?

[00:03:42]
So if you start with a margin at x and you're gonna change it to y. Set it up as a variable, change the value of the variable when you get into the media query. So it's a technique you can apply to pretty much anything along the way. I put it here in layouts and in type because those are pretty dramatic examples of how you can really leverage this technique.

[00:04:06]
But those are equally valid, so you can apply it to margins and patterns and other various things. Thank you all so much for all the questions, I've enjoyed it. And I look forward to seeing what you create with this new technique. Thank you very much.
>> Speaker 2: [APPLAUSE]