Morten Rand-Hendriksen: CSS Grid Changes Everything (About Web Layouts)

just before I get started the slides for this talk are on my website right now I'm telling you this because there's a ton of content and we have a short period of time here so I'm going to cram through it and you will want to review later so now you know where to find it I have a book in my bag and on that book I draw all sorts of layouts all the time that's how I design websites they start with a piece of paper and I'll just draw some stuff and I go haha this would be super cool so a couple of years ago I made this design and when you look at it you go yeah this looks like a standard web design it's fairly basic it has some interesting stuff like there's the categories and title at the top and then you have the featured image and then you have the meta content on the left hand side or right hand side right hand side and then the content itself and you go yes sure this is relatively easy to do except on smaller screens I wanted to make a slight change move the meta content from next to the content up above featured image and then on even smaller screens I want to move the featured image up above rest of the content and at this point you go this is not so easy you see any one of these three on their own is a piece of cake combined on one website with just CSS and HTML impossible because you'd have to change the markup structure to get this to work with old layout tools so instead you'd have to go with JavaScript and have to change everything which is not great because then you're changing everything and it shouldn't be like that today I want to talk to you about a whole new way of thinking about layouts on the web and this whole new way of thinking about layouts will truly change the way we design websites from here on forward I'm not talking about emerging technologies that are coming two or three years from now I'm talking about technologies that are here today that you need to start using today it's called CSS grid I'm Martin Hendrickson and let's get cracking so just to prove to you that I'm not making things up this is the layout I drew built purely in HTML and CSS and WordPress running in a browser today and all the stuff that you saw is happening plus a bunch of other things this website you're seeing here is my website so if you go to Morton comm grab the side of your browser and start doing this you'll actually see the content jumping around on the page and your brain will say there's some JavaScript happening here or this might be bootstrap it's not it's just pure simple CSS and in fact the HTML behind it is cleaner than any HTML you'll ever see from WordPress before this point so instead of going through the entire WordPress theme which will take way too long I decided to make a slightly simpler example so I made this little web page for the room we're in so this is the speaker track for today and when you look at it I want you to think about how you would make this layout using only HTML and CSS no frameworks nothing else just look at it for one second I think how would I mark this up all right it's here so first you're probably going to do something like draw boxes around the main either so here we have some sort of header thing and then there's a huge section on the side with all the content and then on the other side there's like a logo and then there's some other sidebar stuff good so we have those boxes and we'll mark that up in HTML then because we have to lay this out we need to start grouping elements so below the main header saying there's a bunch of content but the content is displayed in two columns so we need to put a box around them so we can flow up and left to right or you select to put them left and right then in the sidebar we have another grouping of content and since we're floating that we need to put a box around that and then inside the cyber itself there's two more pieces of content the need box to surround them so we end up with something like this the blue sections are semantic markup things that are required for the document to work this is the actual content the red sections are boxes that we drew around content solely to say this is a thing that will go next to another saying and this is another thing that will go next to another thing and you can see that the mark-up is full of that stuff when you start looking at responsively as that gets super complicated because in this responsive layout you see that that's saying the black box that's on the cyber that's actually the header and this the small box on the far right hand side that has some address information that's actually the footer and on a mobile display the semantic structure is as it should be on the other end of the scale everything has been moved around and then you say I can do this bootstrap is my friend everything is fine the problem is what bootstrap does to fix this and all the other frameworks is take the HTML and apply some JavaScript and move the HTML around in the document to get this stuff to work that means for accessibility reasons the whole document is now jumbled which is not great it also means we're leaning on external technologies to do something that should work on its own the problem is web layouts the way we've been doing it since the beginning of web time have always been broken and all we've been doing this entire time is refine how we break the layout so we start with tables then we had frames then we had layers then we had slopes and clears then we had flexbox and all this stuff is trying to solve this fundamental problem which is a web document so HTML is a document that starts at the top and ends at the bottom and anytime you want to put something next to something else you have to somehow break the document just to do that which goes against everything we want to do in design consider this super simple example you have a box and then two boxes inside two column layout simple right should be well if you look at just the markup this is what you get just two boxes below each other with a box around them then you have to put them next to one another so you use float few floats one item to the left and the other one item to the right and then the box that surrounds it collapses because of course you're floating content so you're pulling them out of the structure of the document and then you want content to float around it to fix that you then have to introduce a clear fix so that's just empty content that you stuff on the bottom corner solely for the purpose of making that box wrap around the content again and then you say well we have better tools now we have flex box and it's true flex box does solve this problem but if I make it just one element more complicated flex life doesn't help us any more because now we can't say to flex put the content to other pieces next to another than one piece not flex box we'll try to treat all three as the same thing because flex box works in one direction either horizontal or vertical so now we have to introduce an extra box and say can you please flex this container thing next to the other thing and then inside the container we'll put two things underneath one another this is a hack this is not the way to post me this is truly a hack this is how we design websites today we cheat we build a bunch of extra stuff just to get our layouts to working it's nuts if you think about it it's totally crazy float and flex forced us to put extra content into our HTML for the sole purpose of layouts which goes against everything we've learned about how to markup web sites this is also layouts today this is how we have to do things well it is today that you're going to change all this just before I get into it consider what the web looks like right now this is bootstrap the official sensation telling you how to make a layout that has two columns look at the HTML look how many nested divs are necessary to get this to work this is WordPress theme builder plus some sort of page layouts plugin i can tell you by looking at this HTML all of this stuff generates a box with some content in it but it's necessary because we have to do all this floating and clearing and nesting and nesting and nesting and nesting underscores this the same in this slightly less extreme version when you look at the overall markup of underscores there's a bunch of elements within underscores that are there solely for the purpose of layout so the blue boxes here are the header the main the side and the footer the red boxes are there for layout purposes so what if we could take all that extra craft away have just the semantic markup and nothing else and then solve the layout problems in CSS in a clean and simple way instead of this layout we'd have this which is easier to read makes way more sense what if we didn't have to do all this crazy stuff anymore if you look at my example the blue items are the ones that matter the red don't but even if I take away the red items the structure of this document still makes no sense we have a heading one then we have a main then we have a header then we have an aside and then we have a footer if I take all the extra craft away and reorganize the document all of a sudden it makes much more sense from a semantic standpoint header h1 name beside footer the problem is up until this point all our layout tools have been content out and one-dimensional meaning you apply a layout to an individual item and then you have to relate that item to other things what we need is a two dimensional layout that works layout in and that's what CSS grid gives us so instead of doing all the boxing I think I was talking about before what if we start by saying here's what we want let's apply a grid to it just like you would do in design draw a grid on top and then you say we're going to place content on this grid do you have your semantic markup then you simply grab each item the header the h1 the main the sidebar and the footer and you place them on the document that makes sense all of a sudden you know that thing with the guy with the blinds that everyone shares on the internet all the time that's it'll be like tripled applies work too bad this works perfectly go to code pen this example is a live website all those screen grabs are from the website all the content restructures the way it's supposed to you can play around with it you can see exactly what's going on and the craziest part is when you read the code you'll be like I understand what's happening here I don't even need to understand CSS grid I can actually see how this works so others are working I've been told that listening to my talks could be a bit like trying to capture a firehose sometimes so I've decided to try to structure this in such a way that it's more like strapping fire hoses on a platform and then flying all right but but this means I need your absolute attention I'm going to crush through some stuff here if it'll be nice and quick okay so brace yourself stand firm CSS grid needs new terminology so we have grid container grade item grid line grid cells good track grid area grid gap I apologize I know you have to do this there's a simultaneous translator or does not appreciate you speaking fast so a grid container is any container in your document that you create a grid inside you do that by simply declaring display grid you can do this to as many elements as you want on the page it doesn't that it does not matter a grid item is any direct descendant of a grid container so if you create a grid any direct descendant automatically becomes a grid item that's placed inside the grid but only the first level descendant just like it is with flexbox a grid line is any of the lines you draw inside the grid horizontal or vertical the grid lines are numbered by default so the first edge of the grid either vertical horizontal has the line number one and then you just count them two three four five six when the last one has the last number the grid cell is any cell inside the grid a grid area is any defined rectangular area inside the grid that covers more than one cell a grid track is either a horizontal track or a vertical track so a row or a column and a great gap is the space between each of the cells if you choose to add basically gutters not that good don't worry these slides are online you can go look at them later and this will become part of your vocabulary anyway so CSS grid in a nutshell how does it actually work how do we apply it today number one define a grid on an element where you want agreed to appear number two place items within that grid where you want them to appear number three make world peace that's all there is to it what does it look like well here's my example this is the semantic markup with know CSS apply except for color then we start by grabbing just the site container that's the container that wraps everything and we declare display grid so now we have a grid then we decide how many columns and how many rows we want I'm going to do that using grid template columns and grid template rows and here what we do is say the distance from the edge of the grid to the first line that's the first value then the distance to the next one is the next value and so on and so on so you're declaring the width between each of the lines and then another line is drawn this comes with new features like the fr or fraction of value that allows you to say take one fraction of the available space and then put a line there so you can make truly dynamic layout do the same with rows you just declare a list where you want the rows up here and they will appear automatically once you've drawn lower growth you have cells and your browser automatically places all the direct descendants of the grid element in those cells from the top left to the bottom right then for each individual element you can if you want to declare a grid column and a grid row property and say I want this element to appear from column line 2 to column line 4 and from row line 2 to row line 3 that means you literally find column line 2 and column line 4 and you put the content in between those two lines same with rows hello and here you see what I'm talking about we're doing layout in so we create the layout first and we just dump content where we want them to appear when you look at this you realize there are all these new things you can do like for instance create actual white space on a layout you can just choose not to populate cells then you have white space no space urges or anything like that anymore I want you to know this you can then place any of your elements anywhere you want in the grid looks promising right but uh you have to do all this counting stuff and keep track of the line numbers and then what if it's responsible to keep changing the greater gets kind of nuts in my layout I move elements particularly the header on the footer keeping track alive with numbers would be a pain and to be fair you can actually give each of the track lines a name and refer to them by name instead of my number but that's still quite a lot of stuff to deal with so we have this new property called grid template areas a grid template area is nuts it's almost like a ski you declare grid template area and then you write out each of the cells in your grid and you say what is the name of this cell so for instance here I have the three cells at the top our title title title and then we have main header header and main slide our footer then you use the grid area property on individual child items and you just declare the name of the area you want that element to appear so if you say great area header well that's wrong that's right if you say grid area header the element goes to the header area if you say grid area title it goes to the title area and this allows us to do crazy responsive web design because that means instead of doing a bunch of crazy stuff all you have to do is change the grid template areas and then the items that you've already said this is going in the title area this is going in the header area we'll just move around on the grid so your responsive code and your media queries become very very simple and anyone who reads this code can see ok so we have a grid that has two columns and then we put the title and title and minun header and main and side bar and then when the screen gets wider we have three columns and here we have title title title main header header the CSS actually visibly declares what's going on no more no more everything just works this is that point where your brain will start going like what is happening this is business this doesn't actually compute yet and trust me I've been working with this for over a year every time I sit down and do a new grid layout my brain keeps telling me to do things the old way and I have to keep throwing my brain out and then replacing it with a new one which means my kid is walking around the back on there making noises when he grows up he won't think the way I do and he'll be like this is super simple and then I'll tell them about flows and clearly you're like why would you do it like that that's so crazy there's also this weird little thing called nested grids now in the original grid specification from a couple of years ago you have the ability to create a grid and then have an element within the grid inherit the grids we would get consistency that never happened in browsers so instead what we do is we declare multiple grids inside one another and it turns out that's actually a huge benefit because then you can say I have an overall layout grid right layout my header my footer my sidebar and so on then you can have a sub grid just for the main content layout and you can even have a grid inside that grid before something else and you have detailed control over every single component within your layout and as you know the new trend in web design is to work on component level well let's the grids allow you to literally work on component level and this means for example if you're making a wordpress theme you can make individual content grids for individual types of content so if you apply a certain class to any element then you can change the grid completely using pure CSS no more fancy templates and crazy PHP just use CSS but older browsers this is the absolute biggest argument against CSS grid first of all all modern browsers support CSS grid now every single one of them there's an issue but I'll get to that in a second before we get to that there's also the question of I think it's too soon this is emerging technology it's not mature yet true it's emerging technology but you know small websites like the New York Times have them started using them so I'd say any client that says we're not ready for this yet because no one is using it it can be urged forward this is something we can do today but there are two elephants in the room right so you have these two you give me way too much credit they're always these things that don't work the way we want to so we have an Internet Explorer 10 and 11 and we have edge who are not currently following the spec exactly point of order if it wasn't for Internet Explorer 10 we wouldn't have CSS grid CSS grid was invented for Internet Explorer 10 and the reason why these two browsers are lagging behind is because the other browsers decided to change the spec but the spec is built into Windows so Microsoft has to update all of their operating systems to get this to catch on however edge is probably a couple of weeks away from getting full grid support and I'll show you how to create proper backwards compatibility for all other browsers there's this other thing that has nothing to do with CSS grid that's called a feature query that we can use now to ask the browser do you support this grid probably this CSS property and we can use that to test whether or not the browser support grid the canonical best practice is to ask app supports display grid works exactly like a media query so if it says yes and we run the code inside the problem is edge does support grid it is to sports the wrong spec so if you're testing for grid support and edge test for something that edge does not support within the grid spec for example grid area auto then edge won't try to run the grid my recommendation here is actually to serve up the mobile experience on all browsers that don't support grid and this is where people fall off the horse right this is like wait wait wait wait wait what so that means the site won't look the same in all browsers that's exactly right the thing is we've been doing responsive web design for 10 years now no we have not we've been doing responsive web design since 2010 and that we've established an entire language around not serving of the same experience across all browsers because on a mobile browser the website looks totally different from what it does on a large desktop browser there is no actual reason why a website should look the same across all browsers except that we keep saying they should so we can change our methodology around this making everything look the same across all browsers this bad habit we should be making things look the best they can on whatever browsers are supported in responsive web design allows us to do this we just need to migrate it from not just saying responsive web design it's about the width of the screen to also say we can make it responsive to the age of the browser accessible mobile first layout work well on all browsers if you don't believe me go look at the mobile version of Wikipedia on your desktop browser you will never use regular Wikipedia again the mobile version on a desktop browser is so much better I don't understand why they just don't move forward this is progressive enhancement this is our responsibility we progressively enhance the web because if we don't then we'll get stuck in the past forever so practical approach to CSS grid right now so you can use it when you walk out of this room first build accessible mobile-first layouts without grid that is your baseline so make it work on a mobile phone make it sure that it still works when it's on a widescreen then use that mobile first layout as the fallback so if everything goes to hell mobile first works then use add support to this detect grid support at the appropriate breakpoint when everything starts looking weird add a grid then keep scaling up the width of the screen add another grid and another grid on another grid because people have screens sort of this wide right now so I need to account for that so don't believe me go to my brother's house he has this ridiculously huge screen so remember the layout I drew that was impossible see you apply grid to it it's not only impossible it's something that makes sense and just works and it's a layout that's in the new theme on my website and you can go check it out on github and put it on your own site as well your path to CSS grid starts here today right now number one use Firefox when you develop because Firefox has a grid inspector so anytime you find out an element that has grid on it there's a little hashtag type thing that's supposed to look like a grid and if you click on that in the inspector the gridlines appear in your browser you can actually see the grid while you're working with it I'm sure the other browsers will catch up but right now Firefox has it second Rachel andrew has a website called grid by example this is basically doctrine rachel andrew is by alerts the reason why we have CSS grid in browsers today she's been pushing it for years and years and years and she's documented absolutely everything so we want to know how it works go to grid by example most little developer network has tons of documentation most of it written by either Rachel Andrew or Jenn Simmons it is a great resource it's documented every single property and everything that's going on CSS tricks has a complete guide to CSS grid which is just like the complete guide to flexbox which is also the same content over again my new scene which is running on my website is on github and you can go check it out pick it apart send pull requests complain about the lack of internationalization what you'll notice is CSS grid respect text direction so there's no RTL see style sheet because wood CSS grid you don't need it anymore I wrote an article about this that came out in Smashing Magazine yesterday called the building production-ready CSS grid layout today that covers what I talked about here plus how I designed the scene plus a bunch of other stuff go read it go where you want to go go where you want the web to go and the rest will follow we in this room control a large percentage of the web and if we all adopt CSS quit now and do it properly the web will follow don't believe me this is the LinkedIn office in Carpinteria that I go to occasionally they built a new building and then they put this huge patch of grass directly in front of the entrance so if you look at the image here there's a building here so everyone walks like this and I solved a patch of grass so this was taken on the first day and I'm like this is insane whoever designed this smell thinking about the end user so I just started walking across the grass and I was walking across the grass for a couple hours to make a path and then a couple of months later someone sent me this picture and then the code a week ago someone sent me this picture if you pave cow paths meaning walk where you want everything's ahead eventually someone put paving stones down so designers in the room CSS grid means you can finally use proper grid systems in your design there also means design the browser is now really easy same developers start using CSS grid today in all your work even if it means providing full fallbacks for everything you do I have links for that if you want to talk to me later framework people CSS grid cures your dividers so you should take a strong inoculation right now page builders this is make-or-break time CSS grid plus Guttenberg and WordPress means that most of what page builders does will be handled inside WordPress itself so if you're building a page builder you need to get on top of the spec and figure out how it fits into your business model set best practices be responsible because CSS grid allows you to mess around with the structure order of your content and can make sites really inaccessible so don't do that would use it for good build the web you want to see and repeat after me make it accessible make it fancy and make sure the fancy doesn't break accessibility oh come on stand up everyone of you stand up come on everyone of you stand up this is your mantra all right number one what number two number three thank you very much awesome okay where they take five minutes of questions now do we have questions in the room because I guess the alternative is everyone piles on Morten and an expert bar or somewhere like that where do you think you're going to be for questions if people want to come in and get to the detail excellent Baron Haussmann right okay Oh what you are going to have to ask questions the other room is running late they're not as sharp as we are so I need to questions on the floor while you're thinking about that I have got a question to get started with hmm what really is the guttenberg implications with CSS grade can you think of some really nice examples straight off the bat okay so are you're familiar with Gutenberg the new content editor and okay so there's a new content editor coming to WordPress called Gutenberg that works on the principle of block elements so instead of saying your write a bunch of content and you add an image and they write a bunch of content and there's just one big blob you're not able to say add a block that is the quote add a block that is the regular text add a block that is something else that a block that it's a video add a block that is an inline something and the idea over time is that Gutenberg will evolved to have things like columns and things like other types of layouts which is completely new to us in the WordPress community if you take that idea that all the stuff that you put into a blog post or eventually all the stuff you put on the entire view because Gutenberg will likely evolved to the point where you can customize the entire view including your header and your sidebar and everything else and then combine that with CSS grid there's a door that opens to customisation within WordPress that is truly mind breaking which is imagine if you go into the content editor board president writing up posts or some other type of content and then you say for this content I want to have an extra sidebar and then you can go in and just out a guide and place content to the left or the right of that guide not saying that this is what the Guttenberg team is working on now I'm sure if anyone in the rooms from the good work team they're like what are you talking about this is not part of it I haven't written this article yet I have crazy ideas but the thing is once we have CSS grid all the layouts components of a layout are handled by the CSS and that means you can provide different styles style rules for individual types of content on the page and it also means that WordPress can generate different layouts in pure CSS because Guttenberg outputs everything at block levels so you can target each individual block that's added to the content as a grid item so this opens the door for WordPress itself to become a page builder it also opens the door for WordPress itself to allow for custom layouts for each individual piece of content to create across the WordPress site this could happen it should happen it should also be in the hands of theme developers to control how much of this customization is possible but this is one of those times when all paths are open and whatever we do besides where we end up going yes yes I was always Olivo yet okay thank you kind of mind-blowing very cool um that come on I must be some questions here yes so do note your hop to the mic program a big Oscar if you could do that there's another mic from the others as well but grab your question please yes thanks Morten is unbelievably informative presentation you mentioned flexbox earlier do you think that with the use of grid that it's going to effectively replace the necessity for flex box or is could you see the two coexisting in any situations will CSS select CSS and flex box coexist absolutely CS great and flexible court systems allows us to do magical things they should be used in conjunction with each other in fact grid flex and float all have a place in layouts it's just now we can use float for what it's supposed to be which is floating elements next to other elements and letting content flow around it we can use flex for what it's supposed to be which is flexing contents within a box to either line up horizontally or vertically or break nicely and then we can use grid for the overall layout so one of the most interesting demos I've seen of CSS grid so far was a grid where they used it made an actual grid and they put content inside it to the cells and then they use flex to scale the contents in the each of the cells to be consistent so using grid and flex together makes four that gives us extra layout tools that we previously didn't have because we can now relegate the responsibility to the right type of tool so I think that was great on searches okay yes again me tree I'm Morten thanks for the great talk and my question is I know that the future of the web is kind of influenced by what default WordPress themes do in terms of layouts in terms of CSS in terms of HTML do you have a strategy to like advocate CSS grids to use them in default themes and how we as in developers can influence that and what are like step-by-step guide to use more you CSS agrees more okay there are two questions there so first is there a strategy in place to make the default payment WordPress use the CSS grid yes I'm building a conspiracy to make that happen I started it last year okay so there but but seriously there are conversations around this because hopefully the next considering the introduction of Gutenberg the next WordPress theme should display what is possible and as far as I'm concerned what is possible becomes more interesting if we use CSS grid for it of course when we when WordPress ships a default theme you have to consider the fact that WordPress is a global tool that people use all over the world and we have to account for every single type of user including users that are on older hardware on slower networks on less updated browsers so in that conversation we have to have a conversation about backwards compatibility about how to handle fullbacks properly and all that kind of stuff and my scorched-earth policy on responsive on progressive enhancement might not work for WordPress core but I think we're going to get there as for everyone else who is not developing a core theme that ships with WordPress you should use CSS grid in your layouts even if it's just the progressive enhancement for modern browsers because a year from now two years from now five years from now this is what's going to be expected and you need to learn it now because otherwise the kids that are in school now who are learning web design who are learning this stuff will just jump over you because this is better and easier and more performant thank you thank you anyone else any rule from the floor here you guys have bunda the expert bar that'll be good okay oh yes yes sir so for those of us who like to learn by breaking things is there a CSS grid theme you'd recommend we start off with um so as far as I know based on doing no research I think the current the theme I built was probably the first WordPress theme that only uses CSS code for layouts I don't know if other things that do it by all means go trash it it's on github and it's even on my websites you can just muck around with it on the website I'm going to document that theme once it's done it's still in its infancy and but I'd like to see more things showing up the thing with CSS grid is all the things that we know about layouts are no longer relevant this requires a completely different way of thinking about web layouts and if you approach it that way so you just start designing something without considering you know flows and clears and everything then you can do new interesting things and I would love to see our community start building new and interesting designs using CSS grid layouts that break the norms you'll notice that pretty much sticks within common parameters about design because I want to be something that people can relate to but I think the next theme that it's built should be something totally new and different yes I have a question yes so one of the things that comes up when I do this talk or even talk about CSS grid is what is happening to the frameworks people use the bootstrap foundation all these things are they going to adopt CSS grid I actually can't answer that question I know you have it so that's why I'm bringing it up I can't answer that question I went and looked at the beta version of bootstrap yesterday and it does not have CSS grid in it they're doubling down on flexbox as the layout module I'm interested it's interesting to think about where these frameworks will go next because the frameworks are very much rooted in this idea of using divs and containers to create these advanced layouts and with CSS grid a lot of that goes away so if the frameworks were to migrate to CSS grid they would have to break their standard practice and retrain all the people who use it that might mean that these frameworks will date themselves out of the game it also might mean that you in this room can build a new better framework based on CSS grid that may out-compete these old dinosaurs just think about that it's nice to end on a call to action isn't it thank you very much gone that was Frank a topic [Applause] you

Channel: WordPress

Views: 45,039

Keywords: CSS Grid, Web Layouts

Id: txZq7Laz7_4

Length: 44min 10sec (2650 seconds)

Published: Fri Jun 30 2017