 I had some technical difficulties earlier, but I'm back. So yeah, I'm Emily. I'm here to talk about ditching the grid system. I'm an engineer at Algolia, where San Francisco start up. So it's a long flight here. My Twitter is right there, so if you disagree with me, feel free to send me a disparaging tweet. That'd be really awesome. So I'm here today to talk about something I'm super, super excited about. I know most of you probably messed around with it before, but Flexbox. I feel like for a long time now, we've come in focusing on one certain way of layouting things. It's been pretty rigid, and I'm really excited to sort of rethink everything and sort of shift our paradigms, and then will allow us to, in the end, have a little bit more flexibility with how we're layouting. OK, so before I really dive into it, I want to talk about where we've been. So back in the Dark Ages, this is what websites used to look like. Basically, tables were our only method of really laying elements out on the page. You had a row, and inside that row, you had a cell, and inside that cell, you had your under construction GIF, and that was your web page. Like there, you're done. But then things got a little bit better for us. CSS became a thing. That's why we're all here, which is awesome. And as part of that CSS spec, there was this thing called floats, right? You had an image, you see it's a boat, it's floating. No, OK. So you had an image, and you floated it, and then the text floated around it. And that was great, and it was meant to emulate print design. But then everybody said, hey, maybe we can use this for layouting. And it worked pretty well, actually. So most of you probably recognize this grid. It's pretty standard, like 12 column bootstrap foundation insert framework here, sort of latched onto this idea of a grid. So you have cells that are in rows, and they're all floated, and then that row is cleared. And it's actually, when you think about it, pretty similar tables. It's definitely a step up, but it's still very much focused on your pre-defining the width of your elements. It's not content focused. It's, again, just width focused. So yes, it's responsive, and allows you to do this thing when clients are like, what's responsive? And you're like, it does that pretty well. But overall, you still have to know a lot about the content that's going to be in there. So if you have a CMS, and your CMS user is like, I'm just going to put in a bunch more copy here and add this thing. And then they're like, why does the page look like this? Because of this. So we can do better. And the awesome thing is that Flexbox is going to help us. And obviously, there's other cool things. Like CSS Grades is an awesome thing a lot of people have already talked about. But Flexbox is here. It's now. And it's really going to help us out. So how many people have played around with Flexbox thus far? Awesome. Cool. That's really exciting. How many people have used it in production? Awesome. OK, cool. I was worried this next slide was going to be really controversial, but that's really exciting here. So global support is at 96.92%. There's that weird yellow 13% color. And that represents IE and prefixing and weird stuff. But this is CSS. Things can be kind of weird. But that's a pretty big number. And that's really exciting. The times now, we can start using in production. Don't be scared. Don't be like, but what about my A9 users? No, no. Just come on. OK. So you're saying, what's the big deal? What is so exciting about this? So I actually grabbed this sentence from the spec, so full disclosure. Flexbox is an efficient way to align and distribute space for dynamic items in a container along an access. I know it's a lot of words in a short period of time. So I really want to reiterate this because this is so important. It's about dynamic items. That means items that have a content-based width. And you take those items, and you align them to each other, and you distribute the space between them. And this is so, so different from that pre-call six, call six inside a row. It's so different. But it's awesome because it is that different. And it really opens up a lot more possibilities. So I know a lot of you raised your hands to playing on Flexbox. But I did want to give just a quick overview of some of those who aren't so comfortable with it. So a lot of Flexbox is it's about the container, right? So you apply display flex on a container, and any of the direct children are automatically going to get a flex context. And one of the great things is you can do a lot of the layout in you need to do just on the container. So you no longer have to worry about the children elements. It's all about aligning the items and distributing the space on the container. So again, just a little background. So Flexbox is all about accesses, as I mentioned. There's the main access, which by default is the x-axis. And then there's the cross-axis, which is by default the y-axis. And you can flip these accesses using flex directions. So you can say, call them if you want to flip them around. You can also do reverse and all those things, sort of reorder things, which is great. And you can also set the flex wrap. And as I mentioned, again, it's all about aligning and distributing. So we have the justify content. And you can justify the content along the main access. Again, that's that default x-axis. And you can start at the beginning. You can start at the end. You can do space between. You can do space around. Also, these are some of the best name properties, because it literally puts space around things. That's so straightforward. And you can center things. And when you align things, you line them on the cross-axis. Again, this is about aligning items with each other. So you can center items, start at the end, baseline. But one of the really, really cool things is stretch. So the default value of aligned items is stretch. And what this means is out of the box, you're going to get equal height columns, which is amazing, like how long you'll be waiting for that. So that's really great. So I just want to show a really quick component. So this is pretty standard. Like most people recognize, like logo on the left, navigation on the right, and they're aligned to each other. And all this takes is three lines of CSS on the container only. So right, you're going to display flex. You're going to justify the content to be space between. So that basically means take the left thing and stick it over here, take the right thing and stick it over here. And then you're going to align them to be centered to each other, which is a pretty different shift from the old way of doing it. So the old way, you'd have the row that was cleared. And then the logo would be floated, and the navigation would be floated, and there'd be some sort of weird magical number you created to add a top margin to it, or something like that. And again, like in this case, you're very focused on the children elements, whereas the flex box, you're more focused on the container. And again, no magic numbers. So if somebody were to come in later and be like, actually I'm going to insert this huge logo, everything would still work. Whereas in the old case, the margin would only be centered and weird things would happen. So there's also some children properties that can help you do a lot of great things. So flex grow basically sets the element size, relative to its siblings. The default value for this is zero. Often what you're going to find yourself doing is setting this self to one, but depends on the use case. And then flex basics sets the initial main size. This is sort of like a width, but not really, the default value of this is auto. And that's really awesome, because what that means is the default width is going to be its content. Okay, so what does this mean for us? So back to that sort of example of like the logo on the left and you know, some stuff on the right. So again, we set the, to be displaced flex, we justify the content to have space between it and we line the items to each other. So what about this like this search field container over here? I wanted to make it so that as CMS users added more links that this search of input would continue to grow. I also wanted to make sure that if anybody ever changed this, the size of this icon or the padding on this, that these, that the search icon and the input would have the same height. So fortunately, that's really, really easy to do a flex box. You just add display flex on the search field container and right away out of that box, you have that default aligned item stretch, which means that they're going to be the same height. Then all we need to do is add one line flex grow one onto this search input and it will continue to grow to fill the remaining space. So again, pretty straightforward and nothing should look too crazy here. But what about when we move into other component types? So here's this grid that we were talking about before. What if we boil this down to really all we're looking for is equal with columns, right? We don't really care about like one, one, one, one or two, two, two. All we want is we say on the container, we said something that then says, hey, we want everything, all the children to be equal with. So I have this container class display flex and then on the immediate children, we've set flex grow one, right? Because we want them to be equal. So the relative size of each other is going to be one. And then flex basis to zero. And that's basically saying like, hey, go ahead and shrink as much as you need to shrink. I don't care about your content. So I have this really contrived example to show everybody what that looks like. I've got like, I obviously did not put much effort into the design of this, but we've got three columns and they're all equal height and they're all equal width and we've got our cat in here and everything looks pretty good, depending on how you see things. So what about when we want to add some margins, right? So things are getting a little bit more complicated here. So we've got some margins and left and the right. And then we're making sure that for the first child and for the last child, we've reset that margin to zero. So that's going to look like this. So it's looking a little bit better like things are a little bit more spaced out. Everything's still equal height and equal width. Okay, what about mobile? Let's make sure that when things get down to mobile size, they aren't getting squished. So like, right in this particular case. Oh, I don't know how to de-squish this. So in this case, if you were to shrink it, everything would continue to squish like this, right? But we want to make sure that at a certain point on mobile, things stack because that's pretty standard, right? That's sort of the grid concept of like things decrease on width and then they start stacking. So what we do is we add in a media query and what we're going to do is change the flex direction to column on mobile. So that means rather than that main access being the x-axis, we're going to change the main access to be the y-axis. And then we're going to do a little bit of resetting. So we're going to make sure that the flex basis is reset to auto so that things aren't stacking. And then we're going to add our additional margin. And so if you were to shrink this, you would see that they would start to stack. Okay, so now you're probably like, that was a huge chunk of code. Like what are you talking about? That was a lot. Why would I keep writing this? It seems like we're kind of back where we started and things are not looking good. That's a good point. Okay, so let's put things into SAS and see how we can get ourselves back into a place where it's pretty straightforward. So what I've done is I've created a mix and can everybody see this? Is this sort of like readable maybe? Yeah? Okay. So anyway, so we've created a mix in called foxbox equal column and we've inserted a couple parameters here. So in this case, I have a 20 pixel parameter. I've created a parameter for the white space. I've created a parameter for the element name and I've created a parameter for that column break point. This is actually pretty much the same code of what we just wrote. It's just been parameterized. So in this case, you'll see that the padding is now half of what that padding value is. So we no longer have to think about that. And here is that same logic. So if a column break point has been set, then we're gonna have that media query. So again, this is really the same as what we just wrote. We just made it a little bit more flexible and a little bit more reusable for ourselves. So what does this mean? So we can use other possible parameters. This isn't, it's not necessarily just oh, just padding or just media query size. Potentially, you can use a Boolean flag to set if you wanted to reverse things. You could add a column break point padding. Really, the sky's your limit. The key takeaway from this is it's time to start identifying component patterns. So recognize that at a container level, I want the children to interact with each other in a certain way. And there's gonna be common underlying structural logic between components of certain types. So we wanna identify that logic and then refactor that into a mixin. And then with that mixin, we'll create a few parameters that'll make it easy for us to simply plug and play, again, at the container level. So now the main takeaway here is creating a responsive equal width, equal height column at the container level is now reduced to a one liner. All we have to do is call our mixin, input the padding we want, input where we want that break points, and we're good to go. We don't have to think about, you know, like, okay, what about this and what about this? We're just done. And that's that other logic. It can be reused for additional components. It is worthy to note, though, that we should find the middle ground here. So each mixin should focus on reoccurring, differing use cases within a component type. But if you're getting to a point where your mixin has like 20 parameters and like a million nested if loops and you're like, what is going on and it just becomes a black box, that's probably a sign of a problem. You wanna make it so that it's gonna be consistently able to be reused, but not to a point where somebody else who comes into the code base is gonna be like, what is this gobbledygook? So in all things, moderation. So I wanted to walk through a few component types that I've identified and that I've sort of created this set of mixins for that have proved to appear again and again in certain template types. So one particular component type that most people should recognize is a fixed width section on the left and then a section on the right that's meant to take up the remaining space. So as the user resizes the screen, the left section, that filter section is gonna maintain its width, whereas the right section is gonna shrink. We do this because we wanna ensure there's always enough space for the filters. So right in the older system, we would have done something like call three, call nine and then as things shrunk, the filters would have shrunk and then maybe they would have started to get cut off and that wouldn't have been the greatest user experience. So we're gonna create another mixin. This one I'm calling two column fixed and what we're gonna do is we have a couple parameters here. One of the parameters is gonna be the fixed column and then the other parameter is gonna be that fixed columns width. So here's what the code for that mixin would look like. So we have the fixed column. If it's left, we're gonna set the flex basis to be that fixed column width on the first child and if it's the right, we're gonna set the flex grow to be one and the flex basis to zero, right so that other element is gonna take up the remaining space and we'll flip that logic for the last child. So pretty straightforward. The cool thing is though, that then once I get to a point where I'm like, hey, I recognize this component type, all you have to do is have one liner and you're done. So another one is two columns, one with a content based width and another one with the other one taking up all the space. So in this case, I'm saying, hey, this image is really important, like I want this to always be the size of the image and the remaining content should fill up any remaining space. So again, we've created a mixin, two column flexible, where the parameters are the fixed column, again, a left or a right and then the padding and this looks super similar to the other mixins we wrote. You might notice there is some overlapping of logic here but pretty straightforward. So there's also another one of two columns. They're both percentage based width. That's another one I've noticed a lot. So we create, again, the pattern is arising here. We're creating a mixin for it called two column fluid. We're inputting the first column width and then the padding. So what this means is that on the first child, we're setting that first column width and then on the last child, we're doing 100% minus the first column width and then setting the margins appropriately. Another one is a grid. This is a pretty standard, it's three columns and it's gonna start wrapping and the cool thing about this, right, is that if we didn't have that last Alice over there, it would just stop. There wouldn't be a weird Rio Grande wouldn't take up their main space, it just stops, which is what we want. So we've created a flexbox grid and in this case, we're going to input the number of columns we want. So in here, we have the column number and then I've also added a Boolean flag called reverse. So what we do is once we input it, we can set the flex wrap to wrap reversely. So this is a case where we might have, oh, okay, the markups mean one way, but we want to reverse this. Again, this is just another example of a parameter you might want to set to make things a little bit easier for you. And then that element, we're gonna set the flex basis on it to be 100% divided by the column number. Okay, so what about, you're like, okay, this is great, but it seems like we're putting a lot of stuff inside Mixins that maybe we don't need to, maybe this is too abstract, and what's the point of this? So I found myself doing a lot of copying and pasting and that's why I started to extract this. So I wanted to give it like a more complicated example to show how this might be a little bit more useful in your day to day. So this is a case of we have a larger component and I was putting up thinking about it into, so there's this sort of main section, we've got the professional, the data, the plan sponsor sort of call outs, and then we have this sort of column stack section for academic and for non-member. And there's a few things we wanna make sure happen here. So we wanna make sure that the academic and non-member that always take up all the space next to the other columns. We don't want there to be like weird space between them or like them to not appropriately align. We wanna make sure that happens. We also wanna make sure that these on the left are all equal columns. And finally, we wanna make sure that the buttons stay at the bottom, no matter how much content has been entered inside of these other buckets. So this would be something again that'd be pretty difficult to achieve with floats. Both Foxbox, it's actually really straightforward. So on the outer container, we've decided that this section should be 75% and the other remaining section should be 25%. So all we've had to do is using this mixin that we've created, set the first column width to be 75% and then set the pattern between them. And what that's gonna give us is right away that's a sort of main layout of a box over here and a box over here that's 75 to 25%. Not that exciting yet. Okay, so what about the left column? So the left column right we said we wanted to make sure that these were all equal widths and equal heights. So all we need to do now that we've created this mixin is include that Foxbox equal column mixin. It might include padding depending on our needs but it's really straightforward. So finally that right column as I mentioned we wanna make sure that both the callouts are flush against the other buckets. So in this case we set it to be display flex and we set the flex direction to be column and then we make sure that all the children are gonna fill their remaining space again by using flex grow one. So that's gonna give us right away in very few lines a pretty decent layout that pretty much matches the spec we need. The final thing that I mentioned is we wanted to make sure right that the copy at the top was always at the top and despite differing copy all the buttons aligned at the bottom. So what we're gonna have to do is for these particular items is set display flex and then change the flex direction to be column and then again we're gonna use that justify content to give us some space between so we're gonna have things falling at top and things falling to the bottom. Okay, so what's the main takeaway here? Again, flex box it's all about it's about content based with it's about dynamism, it's about not forcing things to be within sort of like a rigid structure that you've created, it's about letting things take up the content with they're gonna take up. So see elements as more dynamic and then align and distribute them on the container level focus as much as you can on that container because it's gonna keep your code a little bit drier. And finally for reoccurring structural logic so a lot of times if you have a lot of logic related to like padding or children properties it might make sense to create a seismics in for that. Pull out that stuff that you find yourself continuously copying and pasting and create something that can just be one liner for when you see those component types that appear and reappear. So finally utilize those parameters to handle all those varying use cases within that particular component type. Thanks. That's great. Love flex box, love me some flex in. Are you using flex box? Here's the question for any layout things beyond components are you just using it for components? So right now I've been using flex box for everything in production. Obviously when when grid comes around it'll make more sense to use that for the outer wrapper and then more for components. But right now I truly think the flex box is our best bet when it comes to layouting. That's cool. We do that in some sections of our site too. It's just so fun. You're like, oh I can reorder this easily and yay, also sticky footer. Yeah, oh yeah. So have you been playing with any grid stuff as well? Like experimenting with it even though it's behind flags or just sticking to flex? No, definitely. I definitely think there's gonna be like a lot of value there and it's super cool and it's awesome to sort of stay on top of all that stuff for sure. But unfortunately browsers are a thing so it limits us to what can be done in production. Is there anything that still trips you up about flex box even though you've used it? I sometimes still have the CSS tricks, everything you need about flex. I'm like oh, sometimes I forget which ones these are. Yeah, I definitely think mostly like IE10, I'll open it up and all. Like there'd be something related to heights and I'm like what is even going on? This doesn't match anything that should be happening and then like on a blood boot and refresh and page turns and yeah, exactly. I love the repo flex bugs by Philip Walton. Do you, are you aware of it? So good, saves my life all the time when I deal with any cross browser. I'm like what is this? You've answered my question, thanks. Yeah, exactly. Yeah, cool, well that was our flex talk. So thanks everyone. Thank you, Emily.