 Good morning everybody How are y'all doing you enjoying word camp so far? Excellent today. We're gonna get kicked off right on time We want to make sure that we keep these sessions going flowing so you guys get as much information We've got a jam-packed session here. We have Mary bomb the founder and owner of Racket Press Website or a company that builds on Genesis to develop websites for tennis companies and And so she's going to be talking to us today about CSS grid and without further ado, please help me welcome Mary bomb How do you do? Good morning, Miami It's nice to be in warm weather in March. I Was at a word camp a couple of years ago. Well, I had flown in to my hometown from California where we were living and I cannot get this back on so I guess I don't know how I'm gonna be able to walk around a lot, but I Have a pocket. That's how So I want to make sure before we get started that We're all in the right place. We're here to talk about grid, right? Rectangles squares Rose columns all those like sharp pornery things Kind of like This right would you believe that this is a grid layout? Yes, ma'am and sirs This is a grid layout bona fide because that's the grid overlay That is the chrome dev tools version of a grid overlay at a certain point which we will talk about later you want to switch over to Firefox because It'll only show you one grid at a time and chrome wants to show you all the grids as you can see grid is a great way to do an asymmetrical layout with circles and They stay put when you change the viewport if you write your grid properly See there's the grid on the phone view There's a tablet view we are kind of smushed up there, but It is what it is those are really supposed to be actual circles. Oh Isn't that going to be lovely for our word camp TV team to cut out? that noise Here we are back at the home page and that grid again and Well, we if we have time we'll look at why You know what we did with the grid to make sure that none of those circles ended up in Unfortunate places on her tank top But that is one of the hallmarks But as we look at this grid, let's take a look because it is the same for all our breakpoints And no you can't read that code But you can read that the basic grid for that narrow view This thing keeps flipping over This is when I wish I Was a Hindu god so that I could have more than two hands. Oh I sincerely wish that Now did you notice in that code before? That we're dealing with a new unit here the fraction how many of you seen the fraction before? So a few of you all those Calculations about percentages and stuff when you just know that you need three of them the same or five of them the same Or eight of them the same Eight fractions And you really don't know how need to know in that case how wide they are. I mean there are other cases where you do but So you can do one fraction two fractions three more. I was sort of thinking of one potato two potato as I was Making that slide now Before we go any farther. Let's pay some dues We would only be here together. We are only here together because of two women Jen Simmons and Rachel Andrew Jen Has a podcast that is kind of marvelous called the web ahead in 2015 as you can see it was podcasted a year It's all about the history of the web and how that informs where the web is going now Which also dovetails nicely into her role as? the us advocate at Mozilla and I've actually been talking to her a bit on Twitter Fan girl. I am of her and Her whole thing is what do we need next in design for the web and There is a list of all the stuff that you can read Over the next six months if you don't take any breaks To learn about grid Rachel a Lovely English woman. She co-found Co-founded with a good friend the Perch CMS which is smaller than WordPress. I Won't hold that against her and This is the page that I've had up For the last six months every time I've been doing stuff with grid So check them out Anybody who talks about grid they should be referring to these two women because They've been spending the last three years of their lives making sure that we can talk about grid that it is implemented in the browsers and Mozilla Mozilla where Jen is has hired Rachel to do most of that documentation and they've both been speaking about it So grid Like slide I wonder why Because we're starting a build. What is it? Where do we use it? Does it work with Flexbox? And how do we get started? Well, how do we get started? We're pretty much getting started today. So there won't be an actual Section on that but let's start with the others. First of all, here's what it's not It's not a plug-in not a framework. It's not a page builder and It's not a panacea Because you got to learn it Grid is a CSS Specification Flexbox by contrast how many anybody here not know what Flexbox is Excellent Flexbox is a way of dealing with Things divs boxes, whatever you want to call them That you want to lay out in a specific way in one dimension I mean, there is a wrap thing that you can use to make a grid But we don't need to do that anymore really because we got grid Flexbox is a module. I Have an idea that this is based on how many hundred pages in the CSS specification. It actually takes to talk about all the things You know Flexbox is like this long And grid is like This long we use it Where do we use it? Grids of posts is an obvious answer Instead of Flexbox in such a grid instead of floats Floats are still relevant or they will be again this summer. We'll get to that at the very end. I'm gonna skip over that Because of time and instead of block an inline block instead of Flexbox This page from the St. Louis tennis Hall of Fame used to be in Flexbox. In fact, this is the Flexbox page Using row wrap before you Flexbox aficionados. Here's the same page Now in grid and with my favorite backstretch featured image thing This is a category archive By the way, I I do Genesis you could do all this stuff mostly In underscores or any other theme. I just happened to do Genesis one thing. I like about Genesis There is a content box on the archive admin page. I Gotta look skinny for the camera It's not gonna work. All I did was just Do do for you in the camera what I tell my tennis pros to do my favorite sports In addition to tennis are taking pros pictures and resetting their email passwords But anyway, so this is a category archive and thanks to Genesis I could just stick all those alphabetized names in columns uses in CSS multi column 18 minutes we got it speed this up. Oh In that introductory thing which is can also be good for CS for SEO So instead of floats Here's a grid of pros on a club site my club site and We've all you can do that with floats and you know, if you know how wide they are and if you want to set your margins and padding much easier in grid somebody last night was saying well now How does this work with foundation and it's like I was a big foundation fan in 1415 16 Then flex box and grid came along and it was like Don't need you anymore. Sorry, but boy, did you teach me how to work with the loop? That's the main thing I did and this page is still in the foundation in a theme I'll redo this in grid probably later this summer now inside of post you can do the same thing and Gutenberg is gonna help this a lot. I Said I Referred to things as I I threw up this portfolio on my site, but that doesn't sound quite right So I stick I stuck it up there And you'll see we're looking at a phone layout Same deal here. That's that Sustaining partners page from the Hall of Fame and they're essentially based on this again One tube of content one fraction you could also call it a hundred viewport with units or You know a hundred percent or whatever and you'd get the same thing now Can we talk? Can we get really real here? We talk about phone view and tablet view and laptop view and Thunderbolt view if you have one of those as I am blessed to have Or privileged those 27 inch thunderbolts. I have a son-in-law who works in Sports information at a university. I would bet that he has to design for the jumbo truck and Half of us are now wearing Apple watches folks The names we give those views and the breakpoints at which we set them are Euphemisms return with columns one fraction One fraction can be anything Breakpoint the fact is break points Damn it our life Breakpoints are a lie so we can talk about those we can use it as short-hand But let's remember We have no clue And yes, there was supposed to be a word between no and clue a Participle what size any given user looks at our site on at any given time? We just don't I have a guilty pleasure of those mock-up packs you can like buy for 30 bucks to like show off your site You know in a photograph of a MacBook. There are like, you know game consoles in there and that and the the Controllers that have screens We could be looking at this on like a ps2 or a Sony something or some and things that are not invented yet Also things that died five years ago You know one of the things you find out when your parents get older is They're using things. You didn't know still existed and in ways you never dreamed of Wait till you see the first time some parent of yours has signed up for a particular service 27 times in the same month It's an eye-opener. So These are those things break points are alive that is the first thing I'm gonna repeat a million times At 23 minutes help so this is the grid and tablet view will skip the code You can look at this online Because I want you and yes, you can mix units. I'll just say that we don't have to go through it You guys get that So no code pen does it work with Flexbox? Absolutely, I still use Flexbox for all my navigation Ever wonder why we haven't been doing for years and are just starting to see headers with the logo in the middle and links on either side Until five minutes ago. That was hard You know with floats because you're having these links with the floats left. I mean that's that's a Good 500 lines of CSS right there You do not want to go there without grid Flexbox on the other hand was born for navigation In two lines of code you can make it do anything you want and then of course with all this stuff Hey there, Bessie the elephant in the room Browser support for Flexbox and grid it's as good as they come with one exception opera mini How many of you use opera mini on your phone right now? How many of you know anybody who uses opera mini on their phone right now? You do does he play tennis find Chris lima and ask Chris about the boxing class He's taken your friend might like that better Bessie, but he's still doing here. We're almost out of time the implicit grid Very important. Here's a product page I'm not telling you where this is because it's not quite done yet But I did do this view of the product because it's got a lot going on You know You start laying out a page like this and it's a little complicated so you define an overall grid at the beginning It doesn't cascade So it's going to be useless About three children like two children down so on the content. There's that You see where all those elements that were so nicely placed Started out because grid added some other lines Just because of how I said you know tried to place them with the placement notation if our display was a little bit cooler You'd see that there are a bunch of little lines. That's the implicit grid Which is the result of this basic point which I'm going to say twice because it's so important And then I think I will kick Bessie to the curb and take your questions for like one minute The browser adapts the grid To the elements you put in it you don't define the grid and then put elements in I mean you do But you define the grid you put in your elements and then the grid changes and So then you have to accept those changes or make changes based on what the implicit grid has done And we're going to skip all of my jokes about VW's the viewport with unit and Thank you very much. I'm Mary Baum I own racket press and I got speaker cards. Do we have any questions for Mary? Yes using older brought people using older browsers are They tend to fall into two categories People who work in corporations that won't let them upgrade from IE whatever and they probably Shouldn't be booking their tennis games at the office anyway And the other people who use old computers and old browsers and this probably should be a lesson to us all Our people Who range in age from my age to a hundred who are so? impossibly rich that they could buy and sell entire states and in fact do every day So If they want to have a degraded experience, there's really not much I can say about that so There in fact you have heard me break the code of conduct, I think But I tend not to worry about it. I'm getting more more on board with accessibility than I Was but not nearly as much as I should be and you're right. It is a concern for an awful lot of people So it is something you want to think about That's probably what they're going to get anyway or naked HTML. I mean I If you don't do too much, I mean if you still write your content semantically they'll at least get that and they'll probably get your typefaces and your colors and If you don't bend to the other temptation in grid, which is to do unspeakable things with the source order in Your content do we know what source order means? That's the way you write your HTML you know H1 headline a little bit of subtitle copy H2 headline then copy and then Other things in the order in which it makes sense to Scan the page for information. What else? I guess we're out of here. We are thank you guys Let's everybody give Mary a big round of applause And it was racket press Racket press racket press if you guys have any more questions for Mary about CSS grid You're gonna be at the happiness bar happiness bar. You guys all know where that is by now Actually, I need to know where that is right now. That's a good question. We'll look on the map Thank you all very much. We'll see you in the next session