Bummer! This is just a preview. You need to be signed in with a Pro account to view the entire video.
The Rise of Ratio Grid Systems: Grids' Next Big Evolution24:38 with Cory Simmons
Grids are probably the most important part of your workflow as a frontend developer. They can speed up your development and make your site responsive without much extra attention. For a long time, developers thought grids couldn't get much better and stopped exploring the limits to which they could be pushed. In this presentation, Cory Simmons will show you how a few great teams have harnessed the power of CSS pre-processors to create some of the most flexible, yet intuitive, grid systems you've ever seen, and he will demonstrate how to code entire responsive layout structures from scratch in literally minutes.
I'm Cory Simmons. 0:00 Let's see. 0:02 I've written for CSS tricks, 0:05 I've got a book with, pack publishing on responsive web design. 0:06 I've got a little get up project called Jeet, which is a grid system and 0:11 stylus success. 0:15 I won a side of the day award. 0:18 And I'm currently a author at tux plus. 0:20 And so that's a little bit about me. 0:23 So, why I got into grid systems in such a big 0:27 way is I've been a freelance web designer for a long time. 0:32 I'm sure a lot of you have too. 0:34 And I had a client that was extremely picky. 0:37 He would tell me to do something and then immediately like want to change it so 0:41 I'd have to go in like and mess with my grid system over and over and over. 0:46 So like for example he'd want a three column, like services or something. 0:50 And then he'd want me to change it to like seven columns or something like that. 0:55 And traditional CSS grids systems just have a problem, doing stuff like that. 1:00 Like changing, your grid on the fly. 1:05 So I needed a quick way to appease him. 1:09 I needed a more powerful grid system and, traditional CSS grids weren't cutting it. 1:12 So I put a plan into motion. 1:18 Where I could change all my grid settings just, like, on the fly. 1:22 So if I wanted to have like, 1:26 you know, my grid system set up to where I had thirds, up at the top of the page. 1:28 And then maybe, like, a little bit further down, I had sevenths. 1:32 Something like that. 1:36 I could do that. 1:38 So, I felt like preprocessors were powerful enough that they could do this. 1:39 Like I tried everything in the world with traditional CSS and 1:46 couldn't figure it out. 1:49 So I kind of got obsessive about trying to figure this out with preprocessors. 1:51 So much that like I stopped talking to everybody. 1:58 And I, I stopped working. 2:02 I fell behind on all of my bills. 2:03 Almost ended up homeless. 2:06 Matt's weird. 2:09 So yeah, so I finally gave up. 2:12 Like I was about to get evicted and all kinds of stuff. 2:14 I finally just like gave up on it completely. 2:17 And was like you know it's, it's impossible like the formula is way above 2:20 me I'll never be able to figure it out so I went to sleep and then, one morning I 2:23 woke up to this huge pool request by this guy named Mitchell Putte... 2:27 who has like.. 2:34 he's like an animator for LA Noir. 2:35 And Saints Row, like those video games, so, like if that, 2:38 like if anything's like a testament to how awesome GitHub is, and 2:43 like how it can connect all kinds of different people, like this should be it. 2:47 So, he had figured out this formula, by borrowing, 2:51 like, bits and pieces from other great systems. 2:55 That we're trying to, tackle the same problem. 2:58 So that was a pretty awesome morning. 3:02 So now that I was equipped with like this bad ass grid system, 3:06 like I could take sites like, I could work with this client again and 3:10 anytime like he wanted to change anything I could just change it like on the fly. 3:16 Super fast. 3:19 So, you know, then that left me with other time to, like, you know, spend, 3:20 like my family and friends and stuff like that, and I was able to catch up on bills. 3:26 I was able to do like twice as much work, 3:32 so, like, these preprocessor grids are really powerful. 3:33 They're really flexible. 3:38 And we'll get into that, so, but enough about my personal experience, 3:40 let's bash things. 3:44 Like, let's, let's be jerks. 3:46 So what is a tradition CSS grid? 3:48 It's any grid distributed as pure CSS. 3:51 So, like, some of the big ones are 960 Grid System, 3:55 sure everybody's used it Bootstrap. 3:57 You guys may have heard of it. 4:01 There's Foundation, and then just, there's a billion CSS grids out there. 4:03 So what are some of the pros and cons of a pure CSS grid? 4:11 Well the pros, they target a wider audience. 4:14 Like, if you can just hand somebody a file they can just toss it into any, 4:18 into any index html page and it'll work. 4:23 Whereas like if, you know, they have to screw around with preprocessors and 4:27 things like that then it gets a little bit tricky. 4:30 And for, like especially like for beginners and amateurs like. 4:32 They, you know, 4:36 they're trying to figure out how to use CSS in the first place, you know. 4:37 It's hard for them to grasp how to use preprocessors and stuff. 4:40 Another pro to just like CSS grids is that they're awesome for 4:44 like tools like, Rails and like frameworks and stuff cause you can just. 4:48 Again you could just like dump them in there and they work. 4:54 So like what are some of the cons? 4:57 Everybody uses a preprocessor, like do you guys use preprocessors. 5:00 Like, show of hands. 5:04 Yea, so, like, almost everybody uses preprocessors. 5:06 CSS grids aren't as powerful. 5:12 They just can't do the stuff that preprocessors can do. 5:14 It requires a lot more markup. 5:17 And it's not that hard to use a preprocessor with tools like 5:21 Rails, and stuff. 5:23 In fact, it's built into Rails. 5:25 So, why CSS grids suck. 5:29 Again, more markup, in the form of those rows. 5:33 Like, it, it's insane how much mark up there is. 5:36 You've bigger CSS file sizes. 5:41 For example here's Twitter Bootstrap, just 5:44 their grid system starts here on 1390, 5:49 and just goes on and on and on and on. 5:54 And on and on. 5:58 And then there are like media queries. 5:59 And then on and on forever. 6:02 So like that's, that's a big file size that you don't need to be loading. 6:06 And then there are a lot more classes. 6:12 Like my god the classes. 6:16 And I know a lot of people know what object oriented CSS is and they're like, 6:20 well, you know, it's an object oriented approach. 6:24 We can, like, reuse these classes over and over. 6:27 And that's fine. 6:30 Most of the time I'm not working on sites like Facebook so 6:33 I don't have to like really. 6:37 Put a ton of effort into making sure that every single class I make is reusable. 6:39 Usually, like I'm working on really small sites and 6:45 I just wanna crank out a grid system really quick. 6:46 Not to mention, like, you don't have to forfeit object orient CSS, 6:51 you can create your own classes with preprocessor grids. 6:55 So here's, here's an actual example straight from their docs. 7:01 So that's a lot of classes, right? 7:05 Like, imagine having an entire HTML page. 7:10 That's just full of those classes everywhere, 7:14 your mark up looks horrible and like it becomes really hard 7:19 to debug and to see like where things are and yeah. 7:24 [BLANK_AUDIO] 7:29 So then like the, the rebuttal to this is but Bootstrapp and 7:32 Foundation offers semantic mix-ins for their grids. 7:35 They kinda do. 7:39 Bootstrap they're they're semantic mix-ins kinda suck. 7:40 You have to, create a new mix-in every time that you want to create a new grid. 7:45 So, like, you wanna, 7:50 like, the three column thing on top, the seven column thing down below, 7:51 you have to make a new mix-in that made use of their big semantic mix-in stuff. 7:55 And then, Foundation does this a little bit better. 8:00 They've almost like ripped off Susy. 8:03 If anybody's ever heard of Susy, or Bourbon Neat. 8:06 So, good for them. 8:09 And if you're, if, if you're using those already. 8:14 Like, and it's working for 8:16 you, go ahead Keep doing it, because I mean like if it's working for you. 8:18 It works for you. 8:22 So, but I think it's time for all of us like to up our grid game. 8:26 And I think that, like grids are the most important part of any UI work flow. 8:30 Everybody uses them. 8:37 Like, show of hands, how many people use grid systems? 8:39 Everybody? 8:44 So. 8:44 Yeah. 8:45 So I mean, like, why, why aren't we using the most powerful and 8:46 flexible grid systems we possibly can? 8:50 So. 8:53 What if we could define our grids on the fly? 8:54 What if we didn't need any stinking row classes anymore? 9:00 What would are markup look like? 9:02 So, here is my shame filled, self plug. 9:06 That sounded kind of nasty but [LAUGH]. 9:11 Or hot, whatever you're into. 9:14 So >> [LAUGH] 9:16 >> There are amazing grid systems out 9:17 there and, I'm using my grid as an example just because I'm so familiar with it. 9:18 There are other grid systems out there, though that are like, they're awesome. 9:23 They're really powerful. 9:26 My grid system it's, it's really simple. 9:27 So like that's, that's the lure of it and 9:30 that's why I understand it cuz I'm simple and it's simple. 9:33 So it's a grid system called Jeet. 9:36 And it works with Sass or Stylus, so. 9:40 So here's, like, some traditional Bootstrap markup. 9:44 And I'm picking on Bootstrap because like, he who wears the crown, and all that. 9:47 So, you can see like, you've got this. 9:50 Just, all these classes just cluttering up your, your markup. 9:55 You've got an extra element in there, the row element. 9:59 And then versus Jeet markup which is just, you know, 10:04 the, the element that you're creating. 10:08 The, the thing that you're making. 10:12 So especially like if you get into things like angular and stuff like that. 10:15 You'll notice that like you're, you're already cluttering your markup with stuff. 10:18 Like so to clutter even more with classes and stuff it's just painful. 10:25 So I think that we need to go back and remember why CSS was invented. 10:32 Like does everyone know why external style sheets were invented particularly? 10:36 Like does everybody remember doing inline styles? 10:41 Everything, yeah. 10:44 And then and then like we found out, oh we can put this in a separate file and 10:46 now our markup's really clean and it still looks pretty. 10:52 We still have all of our styles. 10:55 So i think we need to go back to, to doing that and I think like one big step 10:58 that we can do is doing it with our with our grid systems. 11:03 So here's what Jeets style looks like, and this is the stylists pre processor. 11:09 It's basically you just remove curly braces and semicolons. 11:15 So so it's saying the gallery, the gallery there's a clear fix, mixin. 11:21 So I, I guess everybody's familiar with clear fix and mixins as well. 11:29 So there's a clear fix mixin and then the DIVs, like the media DIV children of that 11:33 gallery, I want them to be half of their container. 11:38 So each one's gonna take up like, half of that gallery. 11:43 And then above my medium break point, so like whatever I set that medium variable 11:48 to, I want to make them take up a third of their container, of that gallery. 11:53 So like, you end up with like, you know, two pictures for mobile, 12:01 three pictures for tablet and so on. 12:04 [BLANK_AUDIO] 12:06 So then let's say, that client comes back, and he's like, you know, I, 12:09 I want this to be in a row of four items instead. 12:13 So all you have to do is change that, that half to a fourth. 12:15 And suddenly, you know, you got four items on that row.. 12:22 So in traditional CSS grids we would have to go back over every single 12:26 class in our mark up. 12:30 Well first we, we'd have to create a new grid and then we'd have to go 12:32 over every single class in our mark up and change everything to adhere to it. 12:37 And it's just, it was really hard. 12:42 So yeah, say we had, like, 12:48 three columns at the top of our page and somewhere below want five columns. 12:51 There's now way to do that with traditional CSS 12:55 grids without upping that original amount of columns to fifteen. 12:58 Like the lowest common denominator. 13:01 Which will screw up all of your existing markup. 13:05 So, but with Jeet you can do it really easily. 13:08 So you know we want the three columns and five columns we say you know for 13:13 a masthead we want a third for services we want, you know, a fifth 13:18 and then padding based grids are pretty bad as well. 13:26 They're the best we can do with CSS right now, I think. 13:33 Like, with just pure CSS. 13:36 And so Bootstrap and Foundation use padding based columns. 13:38 It's, it's a grid solution where you can drop in as many elements as you'd like and 13:41 they adhere to the, you know, the little drop down from the next row and 13:45 everything's fine. 13:48 But where they're padding based, so they've got padding separating them. 13:50 They don't have actual margins anymore. 13:55 They moved away from that. 13:57 So as a result whenever you want actual 13:59 margins between something, say like you wanted the background color. 14:03 Like say like you've got a product page and you've got these cards and 14:07 each card has a background color of white and 14:13 the whole like, HTML page has a background color of red or something. 14:15 And you want that red to show between each of those cards. 14:19 Well, with padding based columns, 14:23 you have to create a new element inside of every single one of your grid columns. 14:25 Because they're separating them with padding, remember? 14:31 So anyway, so yeah, if we 14:33 actually go to Bootstrap's documentation, just scroll down a little bit. 14:38 Can't really see it where those are all stacked up on here we go. 14:45 Okay. 14:51 So we'll just go and inspect this, this right here. 14:52 And we'll get rid of the background colors so that you can see the borders. 14:57 So like these, these grid elements are touching now. 15:02 So like, let's say that I wanted the background, 15:07 I wanted it to be red, but I want an actual gutter between them. 15:13 So I, I, to do that, I would have to go in here. 15:18 [BLANK_AUDIO] 15:21 Create a new element and we'll just create a DIV here. 15:25 [BLANK_AUDIO] 15:28 Expand that, and then select that DIV. 15:36 And now make the background color red. 15:39 So imagine that same product page and 15:42 you have to add a new element to every single product. 15:44 So that's, that's kind of terrible I think. 15:48 And foundation tries to cheat and 15:54 like, trick us into thinking that they figured this out, with their block grid. 15:56 So you can see there's like this, this space between these elements. 16:03 It's like oh, cool they figured it out. 16:07 But then you inspect it and again it's the same thing it's just now they're using 16:09 list items instead, and so, you know they still padding between them. 16:14 So it, it's still the same problem now, you know, 16:19 our list items are the extra elements instead. 16:22 I've got a whole like, in, image, 16:27 imager gallery on this that explains it in detail. 16:32 So if you want, it's bibli/padding-grids and 16:37 just check that out sometime when you have time. 16:43 So, here's what it looks like, you know, you've got, you know, up, up at the top 16:47 you have like a ratio grid that actually has margins, real gutters between things. 16:52 Down here on the bottom you have like Bootstrap, 16:58 Foundation, all the padding based grids, so. 17:00 You got this red which is like your original element and 17:04 then you gotta create these blue elements inside of them. 17:07 Just a little visual illustration there. 17:10 So, again, in their defense, these are the best, like, 17:14 this is the best we can do with CSS only. 17:17 And there are and 17:21 they are trying to market their frameworks to the biggest possible audience. 17:24 So it makes sense for them to you know, just have CSS based grids. 17:27 And like with, with Flexbox though like 17:32 like these aren't the best grids that we can use. 17:36 We can use Flexbox as well, so, you know, 17:41 we should use that if you're gonna go the CSS only route and hopefully, with, like, 17:43 the next version of Bootstrap and Foundation, we'll see that. 17:46 [BLANK_AUDIO] 17:49 But we're not babies. 17:52 We can use, preprocessors, so CSS-only grids will always exist to cater to people 17:54 that don't know how to use preprocessors, that don't particularly care. 18:01 To, developers that just want to toss classes on things. 18:05 But for those of us that actually like, you know, deal with this every single day 18:12 and we have those clients that wanna change things routinely, 18:16 we've, we should try to up our grid game, I think. 18:21 So, here are the ratio grids that I've discovered so far. 18:26 I'm sure there are a, a few more out there. 18:29 There's Susy, I don't know if anybody uses Susy. 18:32 It's extremely powerful, and the code is really, really clean. 18:35 So, you guys should get your pens and papers out, and write these down. 18:41 Cuz these are, these are the things that like, 18:45 this is your homework after this talk. 18:48 So so check out Susy. 18:50 Check out Singularity, which is another really powerful one. 18:53 Check out Bourbon Neat. 18:58 You probable like, a lot of you probably already have, I think where like, 18:59 where most people use Sass, most people have touched Bourbon. 19:02 And as a result they've seen Bitters and Neat and stuff like that, 19:05 so Bourbon Neat is a real simple one. 19:08 It's very similar to mine which is, Jeet. 19:11 And then there's a new one called Flint, which I haven't really had a lot of 19:14 time to look at, but I just wanted to plug for that guy, because I like ratio goods. 19:18 So. 19:24 So right now, we can replace Bootstrap's grid with a ratio grid. 19:27 So if you're, if you have Bootstrap sites and 19:31 they've got cluttered mark-up with a million different classes, you can take 19:34 out all of those grid classes right now and start using one of those ratio grids. 19:37 So the way to do that is just to remove all of your bootstrap, 19:43 grid classes, use a ratio grid for all of your column needs. 19:48 So like however, 19:53 like whatever documentation is for that particular, grid system. 19:54 And then somethings will need to be set to a width of 100%. 19:59 But not many things, and like that's just on a case by case basis. 20:05 So, you'll, you'll be able to tell. 20:09 So here's an example of me replacing boot straps grid with g. 20:13 So it's the same, the same exact thing except now the mark up. 20:22 [BLANK_AUDIO] 20:26 Looks like this it has no, no grid classes. 20:33 [BLANK_AUDIO] 20:35 So, and by doing that, you know, like, this is responsive. 20:40 You know? 20:43 You can't see it now, like,but, if you are on, like a higher resolution, you know, 20:45 like this logo goes over here to the left. 20:50 So, I mean, just much, much cleaner markup for everyone. 20:53 So, in conclusion, CSS-only grids are good for people who use CSS only. 21:03 Most of us don't, so, we should stop using CSS-only grids. 21:09 Padding grids require extra mark up, like that row. 21:13 And if you want to change something, like you know, 21:17 like with the product page, as an example, you know, having to add that extra 21:21 DIV into every single product just change the background color of those cards. 21:26 You can replace your grid system right now. 21:33 So like this, this is something that would take like, two or 21:36 three days to really master and like these ratio grids, 21:41 to really test them out and pick out your favorite one. 21:45 So, I really feel like, you know if 21:49 you guys care about like increasing like making your work flow much faster. 21:53 The, you should, you should devote one, one or 21:56 two days to messing around with these grid systems. 21:59 And the less characters, the faster development. 22:02 So you can see like with Jeet it probably has like the most terse 22:07 syntax out of all grids, out of all of the ratio grid systems. 22:11 Like you can set a column. 22:14 You can set a grid system, like a grid system in you know like six characters, 22:17 As opposed to having to write out a bunch of classes, extra markups, all that. 22:21 As a side note every single developer I've ever worked with on a project 22:27 like immediately went to Bootstrap. 22:32 They started using it and they screwed up the grid mark up. 22:35 And as a result like, you know something in the page was screwed up and 22:42 like they just kept doing that. 22:44 And it, it would kind of work but, you know then whenever we go back in and 22:46 we start like trying to figure out like what's wrong with it. 22:50 Like why, why the logo's a little bit offset. 22:53 We find out that, you know, oh well the, the grid markup's a little bit screwed up. 22:57 And that's a true story. 23:01 Like literally every single developer I've ever ever worked with 23:03 that's used Bootstrap has messed up the grid at some point. 23:06 And every single designer that's switched from a traditional CSS grid o a ratio grid 23:10 has been incredibly happy and I haven't had any complaints or haven't, 23:16 you know, I've never heard of anyone like going back, so. 23:21 I highly suggest you try out all these grid systems and just pick your favorite. 23:23 I don't care if it's Jeet. 23:29 I don't care like what it is, Bourbon Meets a really nice one, 23:30 Susy's a really powerful one, so I guess I would sug, suggest one of those two. 23:35 And, [SOUND] my name's Corey Simmons, again, 23:40 I work at Tuts Plus, making tutorials and courses. 23:44 And there's been like a lot of talk about animation and 23:49 I've got this, this course coming out this month about CSS animation. 23:53 So, you know, if you guys want to, a quick introduction to it and 23:58 to become like pretty competent with, CSS animation, I would suggest 24:03 doing another, self-plug. 24:08 And, yeah so subscribe to Tuts Plus. 24:13 And, I want to thank, MojoTech for sponsoring my trip here. 24:16 It's a company in Rhode Island, and they're hiring for pretty much everything. 24:22 So just go to MojoTech.com. 24:25 And you know, see, see if it'll be a good fit for you. 24:27 So thank you, and I'll take any questions you guys have. 24:31 [APPLAUSE] 24:34
You need to sign up for Treehouse in order to download course files.Sign up