 So I have a question Who's your favorite? This is also a little bit of the grown-up test Who's your favorite floutist? Well, I only know of one floutist so he's my favorite And you're over 50 if you know who that is Right Yes And I can name this tune in six notes Ba-ba-ba-ba-ba-ba Exactly Do you know that there's an app now? For name that tune I downloaded it. I probably won't play it Because I like that blend game where you do the color theory thing. I did sophomore year in design school But the point is we always want to do things faster You know we want to do things we want to name that tune in three notes And especially we want to in the name of performance Style that site and get our style sheets shorter I can style that site in three break points in four break points, right? And that's the power of grid If the rest of our styles are clean You know if we haven't like goose something with you know a little padding here And a little margin here and stuff if we keep it really clean We can get our style sheets Like down to half the size we really can do it in two or three break points Per like thing we want to style like You know the the posts and the pages and the products By the way, that's as far as my knowledge of taxonomy goes You know custom post types I don't even know what that is You know, I I accept posts Pages products and real estate listings Other than that, it's a post and it gets a category. That's what I have the like headspace for but anyway Here's a photography portfolio. I threw up. I swore. I wasn't gonna say throw up You know that I threw together on my personal site last fall When you know, I just realized I need a word camps category because I have some shots from some St. Louis word camps. I took a few pictures here, but anyway now this is a Genesis child theme Everything I do is a Genesis child theme unless it's something I put in the oven on pure convection Or it's a backhand volley and this is the phone view and Seriously that styles it and I don't know why I decided to have Three different grid or four is it? widget areas You know, oh My goodness. I better put on all those widget areas now So I don't have to come back and open that PHP file You know climb the mountain in the snow. It's in a tab If I need another one, I can add it some other time But at any rate you can see that all that column of pictures is just display grid grid tepid with columns one fraction Isn't it great we can finally measure things without knowing how wide they are One fraction. That's all of it There's a tablet lab or somewhat wider because the truth is we there are like There used to be eight million stories in the naked city now. There's eight million screen sizes and That's just on Amazon's You know the deal of the day page You know So I call it tablet. I call it phone. I call it laptop For all I know it's the jumbo tron at your local basketball stadium Or it's a watch But anyway, so here's The code for that, you know, I mean the grid part Three lines and again the fraction That's a new unit. It's called the fraction It's my second favorite my first favorite is the new unit called the Viewport width unit the VW and I do things in terms of the VW because unlike the VH You know, we don't usually know how high Something is and often when we're working in the browser How many of you are designers and We all write CSS of course and a little PHP. Yes Or not how many of you never heard the term CSS? Oh Good we're among friends and How many of you Do like a full comp in Photoshop or sketch or affinity or something and then You like write the styles And you discover something that you had in your lab that you really loved and it's not exactly translating Into the CSS properly and some things like way over there that should have been here Anybody ever had that experience? Both, you know, how many of you had that experience this week? Yeah So the fraction You know can be anything The VW is great especially on these narrower views because That's like smaller and it's maybe not gonna mess up on you Also, I have the concept of these little like cars as the measurement units. Oh, that's three bugs across But anyway, we so there's a laptop view Now we have one fraction And you can do it this way or you can do it with some repeat notation, etc And I think it's time to pay some dues We are here today for exactly two reasons and we would not be here at all without them Jen Simmons and Rachel Andrew. They've been working on teaching us this stuff and Jen I think has been advocating for getting it Supported for longer than that, but they've been working on the teaching the stuff for like two years Everything you read even the stuff on CSS tricks I'm a huge fan of Chris Coyer, you know, everything started with them In fact when I was doing demos for this and some other work in the last couple of weeks I had Rachel Andrews demos open the whole time in three tabs. I finally Put it in another window just so I could get to it faster a Little taste of Jen Simmons started her website and that will lead to you to her lab She's also got a whole list of stuff seriously You could read for six weeks between the two of them and This I absolutely have had open For a month and that's what ends so much more means So grid what? Isn't Where do we use it does work with Flexbox? Yes How do we get started so first? What is it? Here's what it's not It's not a plug-in It's not a framework. It's not a page builder And it's not a panacea much It's a CSS specification That's the technical term Flexbox by the way isn't any of those things and it's also not a CSS specification It's the flexible box module. I Guess that's because you can read it. I haven't in You know six fewer hours So where do we use it on? Flexbox if you're familiar with it helps us do things in one dimension Grid works for grids of posts which largely happen in two dimensions That first phone view not withstanding We can use it instead of Flexbox instead of floats Goodbye foundation Instead of block an inline block instead of display table What's display table for? Does anybody even know I mean is that was that just like to help people get over? table layouts So instead of Flexbox. I just redid this grid. This was a Flexbox Row wrap deal Just did that. Yes. I did have Rachel Andrews thing open the whole time another grid That we can now use grid for instead of Flexbox and another one Yes, I do do a lot of tennis stuff, don't I? We can also use them along with most of those things which is wonderful so I Will take a leaf from our high school teacher guy yesterday who was terrific. I thought didn't he do a great job yeah, and Make sure we're we're all tracking along Questions at this point on what it is what it's not are we asleep awake? I Don't think I have a joke for this part. Oh, yes, I Do Well a little acknowledgement Thank You foundation you taught me some great php. That's how I learned to manipulate the loop and this is still in foundation and I will refactor it in grid shortly After we take the cats in that was our vet So you can also use grid inside a post in this for photography site I Purposely did not use any of those gallery plugins like Are you familiar with next-gen gallery? Hands Foo gallery, which is free and then there's all those light boxes. I think we maybe don't need those quite as much anymore unless you want to be sophisticated so at the top My favorite image from we drove back from California to st. Louis in September, and I just love the way that those rocks live in space and I Use I use backspread I use Backstretch don't ever get a dry mouth One of the few jQuery Skrits I care about With grid and grid to organize the shots right in the post There's the code one fraction Overflow visible. I don't know why I care Again two fractions three fractions and yes, you can mix units We're gonna live dangerously here We're actually gonna look at that code pen thing Unless of course, we're not. Oh, I guess I'm supposed to Tell me when you see the cursor. Oh, there it is. We can all see this the CSS part on the left Oh, oh I guess I want to switch to mirroring right now Hang on a second This is a bad idea. I think but anyway, the point is You any Let's go back to the real thing. There we are Imagine if you will that you have one of those one FR one FR one of ours thing you can actually do one FR 300 pixels and Auto and It'll just go and then there's other notation. You can use that will say Okay, I want it to start over in column one and in column three and Yeah, it's perfectly fine that the column that he is in is 200 pixels wide and two picks hundred pixels long and I encourage you to go to codepen.com and with some of Rachel's examples and And play with it Because it's hard for me to understand we don't want to take that much time But it's absolutely the best thing you can do to learn about this stuff And if you have children, they'll probably come up to your screen and say, what are you doing? And give you that look that they give you If you are parents, I have good news for you at about 25 They start to say these new vocabulary words like thank you and Are you sure you don't mind? It's fabulous Cannot recommend it enough 25 23. Those are the cutest 22 in our son's case. Those are the cutest ages ever Love them today so Does it work with Flexbox? Gorgeously Flexbox I think was born for navigation also phone views And then you know if you're building mobile first Start with a phone view in in Flexbox and then the next break point or two up Switch to grid when it seems appropriate You know Chris Coyer who I mentioned before He's a new father He wants to strap the baby to the Roomba and Win money for videos he tweeted that so I'm not saying anything out of school But as he puts it the phone is just a long tube of content What's perfect for one dimension? Flexbox two dimensions grid If you take away nothing else from today It's that one dimension flex box So your primary nav your phone view two dimensions grid Three dimensions, I don't know I Know that final cut pro just upgraded to some 360 video editing and we'd have to get like our phones in four years maybe with the 360 video and Maybe then you guys tell me Navigation that's Flexbox Ro wrap Wouldn't necessarily have to wrap probably better if it doesn't you know all those themes where Well, you know all the times where you'd really like to center the logo in between like three top level Links over here and three top level links over there You know why we never saw that in a theme store before like a year ago It was hard to do with floats You know you prime and you know and filters and hooks out the wazoo move the primary Navigation over here and this became the sub navigation and to keep it centered and to keep the left on the right left and the right on the right That was a pain in the butt and by the way, I'm not being inappropriate. I mean the pork butt Our son is in the barbecue business Of course the elephant in the room about any new CSS thing browser support For grid Totally is anybody in here use opera mini on their phone Do you know anybody who uses opera mini I Don't either so And you know, I don't I want to be inclusive and say you know wonderful, you know if they do but I Don't think it's a big problem Doing here Another problem with grid and something to watch out for I hate to end on a downer There's this thing called the implicit grid How many of you have ever done anything with grid or played with it at all today? I mean before today You know those grids we defined in all those views That's just a suggestion CSS and the browsers If you add things They will add things and that's what we call the implicit grid So if I go back to like that tablet view, but then for some unknown reason That I did a lot in the last couple of months Decide that one of those Nicely lined up squares Needed to have a position That I specified and I decided that that one Needed to be In column one or in column five Suddenly we'd start to see holes and we'd see five columns here That's the implicit grid If I decide to put one of them in row four, there's gonna be a row four because the grid Isn't final until you've placed all your items So be aware of that Which is one reason you should really play a lot on code pen is so that you can make Bessie happy And she'll go back outside to the jungle because otherwise Bessie has some news for you also Bessie wants to remind us not to do that to our elements as much as possible You know don't fix things with margin and padding don't fix things by You know deciding that this has to be in a particular place for the most part define your grid let things fall and then If something's in the wrong place or something needs to be in a specific place then start tweaking But let things be automatic first and Then Bessie it will be happy She might even give you a peanut. I'm Mary Baum I Make stuff for tennis people and I live on Twitter at Mary Baum. Thank you very much Questions Yeah, Flexbox is also a CSS specification and I will teach you Flexbox right now display flex and You look at and if it's working All the elements that you are in the children of what you just declared that on Will line up horizontally and squish all together and then There are two ways to sort that mess out justify content goes in that direction if you want everything in a row and That's basically flex start flex end but mostly you'll use space between and You don't say anything about that if you want them going the other way then you go flex flow column and Then if you want them left aligned Say a line like a line items flex start a line and items Center a line items flex end for the right side and a line items stretch if you want them to justify it And if you think you want them to wrap into more than one rows switch to grid There you go. You mean like floats and stuff Yeah Well, no, you're dealing with divs the whole time everything is a diff You know be careful of making you know have have as few divs as you can and Decide where you're gonna do your margins and padding I Would recommend doing them on the big boxes But then sometimes I decide no you shouldn't do them on the big boxes. You should do them on the little things but but I think pat patting versus margins pad the big boxes and Then leave the margins for the little boxes sort of at the very end of Each of each size when you're tweaking Combination of flex box and grid And but I'm gradually getting rid of the floats and I'll tell you why Floats actually have a really legitimate use Especially for those of us who come from print Sometimes you want to pull an image or a graphic out of some copy and Wrap text around it That's what flexes that's what floats are for and Possibly someday The Mozilla Foundation is going to see fit for Firefox To wrap text around a shape that is not a rectangle and at that point Floats are going to be a little important Until then we can in many ways ignore them Unless we want to really You know unless we really want to get fancy with Pulling like a rectangular photograph halfway out of the column and wrapping And that's that it can be kind of tricky. I was messing with that a lot When I should have been doing something else anything else Or should I say what else oh? Rachel also tweeted out a great cheat sheet on totally on Like when you say a line when you say justify when you say stretch that goes across Flexbox and grid and multi-column I would just go to her Twitter. Yeah Yeah, I would search on her and Twitter She tweeted and then it'll be sort of near the top of her feed Yeah Bootstrap Foundation, I know that foundation has just released a new vert except Probably you need I have not been doing a lot of email marketing Lately so you can pelt me with whatever you want to and say shame But I think foundation for email is probably relevant because emails and I would say I Was about to say that emails like never going to adopt this stuff But of course it is in about five years when it's all obsolete. Oh Oh That was a joke Some of some jokes are true But yeah, yeah bootstrap Foundation I don't know if you were in the habit of as I was Like rewriting a bunch of foundation stuff so that it would look the way I wanted it to look but also you know no more Rewriting the loop did I explain to you guys that this is a Genesis theme? Oh, I never got to the point of like that thing where it's either a Genesis theme or Pasta or a backhand volley But you can do this talk you can totally do this with like underscores or anything else you're using I'm only partly a shill for the studio press Okay, and they don't even know I'm a shill for them