 Thank you. It's been a while since I've had a talk with a mic like this. I feel like doing stand-up almost. Welcome. We're going to talk about some CSS today. There's not a whole lot of WordPress involved in this talk. My main goal today is to convince you to stop using CSS frameworks like Bootstrap or Foundation and just focus on plain old vanilla CSS. And the end goal in this is to basically just make your lives better. So are you ready to improve your workflow and have a lot of fun while you're doing it? Yes. Come on, you can do better. What's the deal with airline food? No, I'm sorry. Some basic frameworks some of you might know. I've listed three of them. There are plenty more. Bulma in the bottom is like one of the more modern ones. It's a CSS framework. Foundation is also very popular. It's not really my cup of tea, but it tries to do everything out of the box. And Bootstrap by far is the biggest. Can I get a show of hands of people here who have ever worked with Bootstrap or are still working in Bootstrap? That's the entire room. Perfect. Okay. It's kind of insane how huge Bootstrap is. The JavaScript version of Bootstrap currently powers 17% of the web. I know this percentage is low for us WordPress developers were more accustomed to like 30%, but 17% is huge. It's like the second largest after jQuery. And I would have put up the statistic for the CSS framework, but the problem is the W3C that makes these lists of which frameworks are used in the JavaScript space, which backend frameworks are used. They do a very good job of monitoring all of them. But if you get to the CSS frameworks, all you get to show for is this. Popular sites using CSS. Wow. What keen insight. Yes. Now obviously every site in the world uses CSS, but Bootstrap by far is the biggest. Not only is 17% using the JavaScript framework, I think the major, like the larger part of that is people just ignoring the JavaScript completely and basically focusing on Bootstrap grid. I mean, that's everywhere. It has like 121K stars on GitHub and Bootstrap themselves are also very open about how popular they actually are. The most popular HTML, CSS, and JavaScript framework out there. So for today's talk, I know the talk's name is Ditcher Framework, but I'm going to take Bootstrap on and try to slay that dragon with modern CSS. Bring it on. Well, first I'll look at why, because obviously working with a framework has a lot of benefits. Otherwise, it wouldn't have been popular. Working with Bootstrap specifically in teams is not themes. Teams is very good because you have set up all the documentation, people can get started right away, and they know exactly how to work within that company or within that frame. So there are positive reasons, but for me, there are also a lot of negative ones. And I want to start with two of my personal issues, and that is basically all of the markup and all of the classes. I hate it in Bootstrap. I mean, look at how far that paragraph is, nested. It's a container and then a row and then a column, and then the column has classes. I can't read. It's like large, far, earth, the perimeter. What barbecue? This isn't semantic at all. It's not telling me anything about what is inside of that div. It's not telling me anything about what it does and why it's there. It's just telling me how it should look, which is basically in line styling. But that's my personal issues. My therapist says it's going to be years before I get past them. I'm not going to bother you with those anymore. I'll start by saying stopping with frameworks will make you a better developer. Or at least doing only frameworks will not make you a smarter developer. So I can prove that. In January of 2010, this was the average page size. So an average page size in 2010 was about 700k, which is large, but it's okay. By today's standards, this will load pretty damn fast. I know images are the larger chunk of the pie chart here, but HTML, CSS, and scripts also account for at least 25% in this. So we can do a lot to improve those, but we haven't. If you look at January 2018, suddenly the average page size jumps to 3500k. It's three and a half megabytes for a single website. And you also see the scripts, style sheets, and HTML are growing exponentially with it. So if you look at the scripts here, it's 500k. Here it's 113k. Clearly we're doing something wrong, because that's an increase of almost 500% over the last eight years. Our websites have been getting 500% larger than they were eight years ago. Lucky for us, internet speeds also have grown about that much. So this is the average growth of internet speeds in the US. But the thing is this is broadband, and broadband prices have gone up, especially on mobile. So if you think about it, we're now paying more for the exact same result we got in 2008. That's not good. We're doing something wrong here. We need to be better. You like that? We need to be better developers, and better developers start by getting the basics right first. Overheard. Our new front-end developer is new to HTML and CSS, but he knows anger so well. I have questions about this as well. This is the main point I'm trying to make. If you only learn the framework, you're getting caught up in the basics. You're doing stuff wrong. The amazing Riam Rietveld who isn't here today, people using spans and divs as buttons in new JavaScript frameworks are wrong. Plainly because they don't get keyboard focus. We just have a button element in HTML5, and if you don't know about that, then that's a problem. We want to prevent becoming this guy, right? We need to learn the basics first, and then move on to frameworks if we like. I'm going to also prove that frameworks bring uniformity, and I like uniqueness. I like good design, well, thought-of design. I don't like having to look for a menu. I don't like inaccessibility. I don't like dumb choices in websites, but I do appreciate good design. With Bootstrap, what we get is this. It's all the same here. We just get a giant Jumbotron, some text on it, a call-to-action right beneath it, and then underneath all of these, I can guarantee you there are three columns, all with a Fontosmo icon. We've all seen these sites. We've all made these sites. That's fine. There's one guy, Jeremy Krobowski, who made the, hey, look, it's every Bootstrap website ever page. You can find this online. I use this for clients. I say, look, I know you're asking me to build the exact same website your competitor has, but this is the effect it will have. You won't stand out, and we can do so much more by now. The third reason I think we should ditch frameworks is what I hear a lot is building stuff yourself is hard, especially in CSS. CSS isn't really a logical language. Someone once told me it was basically knowing 50,000 key value pairs by head and then just putting them in a document. Four years ago, you would have been right. Every time I see this gift, at this point, I just want to punch somebody because I totally get that this was made. This was probably made by a backend developer with a grudge against CSS, but we're so much better now. So can we just please all say, hey, modern CSS. Super excited for this. Now, to sum up, it's not making you any smarter working with all these frameworks. It's removing you from the actual core of the tools you're working with. Everything looks the same, and it's not harder than regular CSS. In fact, modern CSS is a lot easier, especially for new developers. I'm convinced of this. If you're new to CSS, please start working with the good stuff right away. So what I'm going to present to you now, I see some of you who were at my workshop yesterday. What I'm going to present to you now is a single workflow that we also worked on in the workshop where we actually get to work with modern CSS standards right now. So no bullshit. All browsers are taken care of. We can do this, and we can do it in three easy steps. So this workflow needs to work everywhere. It needs to be easy to build and maintain, and it needs to be very lightweight. It needs to be better. It needs to outperform bootstrap in every way, right? And to do this, we're going to use what I call the escalator principle. It's actually taken from a joke from the stand-up comedian Mitch Hedberg. Who knows Mitch Hedberg? No stoners in the audience. This is the joke. An escalator can never break. It can only become stairs. And that's the thing we're doing here. We're going to make an escalator, and when browsers say, I don't know what you're talking about, it'll just become stairs, which is a perfectly good solution. We're going to do this in three steps. And the first step is called pattern library. We're going to lay down the very fundamentals of our website. So there are three golden rules to this. We set up colors and typography first. Then we're going to remove all classes and IDs from our style sheet at first. We're going to just style on the tags. And we're going to use HTML5 semantic markup. All of these three support one another. So if you are forbidden to use classes or IDs, suddenly you have a real reason to look into semantic HTML5, which is accessible by default. Every browser can handle them. Even IE6 can handle HTML5 tags. So this is my optimum workflow for getting started at least. And I have a little SAS example here. So at first we set up variables. We set the main font family and the heading font family, and then we lay out all the colors. All of those things you usually need to look up. All of those things you usually need to look up back in your document. We set up as a variable so we can re-use them every time. And then we just style on the elements. So instead of saying class button, we just say button. And we say our background will be orange, our color will be black. And if we need to style an icon in that column, we can just nest a figure or an image tag inside of that button. And this will work everywhere. And it will be very easy to overwrite later. So every time you need to make an exception, or make an exception rather, you can just use a class. And a class will weigh more than the tag name. And everyone will be happy, and you won't need to use important anymore. So these are some examples of HTML5 element types. Who here knew that there was a dialogue element in HTML5? Few hands, very cool with people. This is actually a very simple way just to get a message popping up on your screen. A fit capturing is something that all of the accessibility tools will look for when there's an image in there. And then second, they will look at an alt tag or a title. But there's like a time notation. There's plenty of more tags out there. So I encourage you to look into this. We now finally have semantic marker. And then your pattern library, the page at least, will look like this. It will just be a list of all the elements you're going to use in your site. This won't include big layout elements. So it won't include article or section or header or footer. It will just mainly be typographic elements and all the image elements you're going to use. Again, this works in IE6. So even these elements will just default to diff behavior in IE6. And that's perfect. Then our second step. My mic isn't working, is it? Our second step is called mobile. And that's where we start carefully laying out stuff. It will be a complete mobile website in this way. So it's very basic. Everything will be stacked on top of each other. This is a mobile-first approach. That means even if you're working on a large screen, you're going to build a site that just has page-wide sections of everything. You're doing as little layouting as possible and as little putting elements next to each other as possible. There's a few golden rules in this as well. Again, basic CSS only. Batting, margin, background colors, all that stuff. More than welcome. We're going to default most of the widths to 100%. So it will be screen-wide. And then the most important rule is keep it legible. Meaning that if you style a paragraph tag with a width of 100%, and you're looking on a screen of like 2,000 pixels, why did we become a tennis match? We don't want to do that. We want to add a max-width to that paragraph tag to be like 11 words per horizontal line. And the reason we want to take this approach, well at first if you think while all of this is bullshit, I'm going to keep using Bootstrap. That's completely fine by me, but please start doing things at least in a mobile-first manner because the percentages of mobile users worldwide are getting ridiculous. Nobody's watching on a desktop anymore, or at least mostly. And in Western Europe it's 60 to 70% that actually looks at everything on a mobile device. Asian countries is even larger. And the rest is basically coloring in. So adding background colors, adding link colors, making sure stuff stands out. And what you have here in the end of this step is a completely functioning site. There's no CSS grid involved. There's maybe a bit of Flexbox involved because that's pretty well supported nowadays. But this site will work everywhere. And as an example I put up my own site. So this is my mobile-first version. It's a slim container. The only thing that is about to change though if we drag the screen wider, if you do not have CSS grid support or if you're looking at an ancient browser, is that the menu folds out. That's it. The rest is just exactly the same as the mobile version. And then the third step is scaling up. And this is where we actually get to have fun. This is where we get to play with CSS grid, where we get to play with Flexbox. And what I like to do now is give a few demos. And what we're going to do is look at different aspects from the Bootstrap ecosystem and look at how we can do that better in modern CSS. So the biggest component in Bootstrap at this point that's most widely used is the grid, the 12-column grid. Most of you are familiar with it, I'm sure. But we can do that better. So if you just take grid from Bootstrap and you put it in its separate file, it'll be about 44k, which is decent. You can load that in. It won't be a big hassle for the client or for the user. But there's no way in hell I can beat my three lines of code. So let's do that. Lazy Mike. I have here a little section with three columns. And we're going to add a row here. And we're going to recreate Bootstrap, basically. I won't bother with the large four, because I can be bothered. So we have a row here and three columns. And what we want to do now is put them next to each other. And if we just add Bootstrap, that would happen automatically. But it would also mean adding 44k to our document, which is not necessary. Because if we say row, display grid, grid template columns. And if you think about it, Bootstrap is a repeat of 12 equally sized columns. And what you do with the columns you have in a row is just combining or melting together different cells. So what we need to do is repeat 12 times an equally fractioned column. And Bootstrap also provides a gutter for this. So let's add grid gap for the gutter. And what we can do now is inspect this. And we can see there are 12 columns. This was three lines of code. I didn't have to do anything. Now, of course, my columns are still just one column size. And we want them to spread out. So what we can do with our call class is just say grid column span four. There we go. I'll give them a little background so you can see. There we go. So this is a super simple solution. And right now we've just created the entire Bootstrap grid in just a few lines of CSS. This is completely alterable later on in media queries. We can change the composition. Every bit of styling is done in CSS, not in a class name, not in the HTML. So this is still clean or relatively clean HTML. It has a lot of advantages. We can even just remove that row and put everything in our container, in our section, and everything will still work. We don't need the row anymore. What we also can do, and this is the first time ever in CSS that this has happened, with grid and flexbox for the first time, we actually have control over the vertical space in CSS as well. That never happened before. We always had to do hacky stuff with floats and with tables. It just didn't work out. But by now, if I just say grid template rows, and I say let's repeat four times one fraction, they will be equally sized to our columns we've already filled. And it just kind of does the right thing already. We don't have to do anything anymore. These rows are there. Now if we want to scale our columns in a bit of a different way, like more of a puzzle block, what we can do is say our first column, let's say our grid column, we start at one and we span six. And our grid row, we start at one and we span four. And that's an entire block. Now what we can do is with two and three, let's say we start at grid column number seven, and we also span six. And our grid row, in this case, will be one, but spanning two. This might be a bit different than what you used to in just regular old CSS. What happens now here is our two and three columns are stacked on top of each other, because Flexbox and grid were also built with Z-index support built in. So if I say to column number two, get on top, this just changes to two. But I don't really want to do that. Put three underneath that. So I'm going to say grid row, start at three, span two. Oh, crow. Yeah, there we go. That did the trick. So what's going on here? Well, grid works with lines. So I have to say grid column seven here, not six, but it's actually the seventh line in my entire document where it needs to start. It's same for the row number three. It needs to start at number three. This really isn't working very well. Isn't that always the case? So what we have now is a lot easier to memorize than the entire library of classes you have to get to know in Bootstrap. It's much more flexible. We can put this in media queries. We can apply this everywhere. There's way less markups needed. And we have browser support of 87%, meaning only 13% of the web won't be able to see what we just did with CSS grid. You might say, well, 13%, that's quite a huge percentage. Yeah, you're right. But the main chunk of that percentage is visiting from mobile. It's visiting on ancient mobile browsers, on old versions of Android, on old versions of mobile Safari. And those things will get updated because everyone loses their smartphone or breaks their smartphone. They will get new ones. They will update their software. And eventually that percentage will go down quite a bit. That remaining like 2% or 3% that's looking at your website on ancient versions of Internet Explorer. So before version 10, because IE10 already supported the grid. Those will default back to that mobile first version we created in step 2. It will work completely. It will be readable. It will be clickable. It will be navigable in like optimum HTML. It just won't be as nicely laid out. That's it. But that's the only trade-off in all the other cases. You can tell your clients, listen, if we work like this, we can speed up development quite a bit. We can do more stuff with design. We can be more accessible out of the box. It will save everybody a lot of time and money. If we just get over that one little thing in our head saying everything needs to look the same on every browser. Everything needs to look the same on every browser. That stuff doesn't work anymore. We're living in a different age. So, sorry for my rant. Let's look at bootstrap alignment. Because bootstrap alignment classes are riddled with importance. Sorry, but if you have a professional CSS framework with importance, you're banned. We're not going to talk to you anymore. That's just the way it's got to be. Flexbox can do this so much easier. We have a little header here with a logo and a nav bar. Again, very few markup. All we have to do to get these elements next to each other is play flex in our header. Obviously, this doesn't really look very well. We want our nav to be not completely sticking to our logo and not completely sticking to the top. What we can say to our nav is say margin auto. Flexbox will just know everything needs to be centered. We don't even need justify content or align items here. We can just use margin auto to center everything even vertically. If you find someone complaining that centering things vertically in CSS is hard to do, please punch them for me. Now it's completely centered. What if we wanted to stick it to the right side of the viewport? We could just say margin by the zero and that would mean it just goes there. If margin auto basically says to flexbox just put me dead in the center of everything unless I've changed that value to zero, then it's centered me to everything except the margin on the right needs to be zero. Again, this is a lot easier. We only need two lines of code. It's a lot more flexible. You won't get problems later on when you're doing stuff responsibly. You won't have any problems with overwriting this later on and we need much less markup. Flexbox actually has a browser support currently of 89%. There's absolutely no excuse why you shouldn't use that in every project imaginable. Another demo I've prepared is more in line with JavaScript stuff in Bootstrap because there's this little overlooked or this really overlooked selector in CSS called Target. It's been there forever and we can do amazing stuff with it. What we have here is a very simple slider. These are just four divs with text in it and a navigation with four links. The four links link to the IDs of the slides themselves. Currently, each slide is positioned absolutely and it takes up the entire space of the slider, meaning they're stacked on top of each other. That's why you're seeing slide number four. Slide number four was latest in the markup, so it's the one that comes on top automatically. What we can do is say each slide by default has an opacity of zero, so they will be hidden. But if a slide is the target, then the opacity is one. Now, what does this mean? If I save here and I click on one, I go to that one link, that ID slide one link. Yes, I click one, one becomes visible. I click two, two becomes visible. There's no JavaScript in this. Look, it's just empty. This is all just CSS. It's done with the target selector. The target selector selects the element that is currently targeted in the URL with the pound sign. Obviously, this doesn't work very well because if I refresh this, then we're looking at another loading screen. There's no default, so we have no default slide to open with. What we can do is instead of saying let's target the target, saying if a slide is not the target, that opacity should be zero. Slide number four, we give the default opacity of one because that's the one that's already on top. Now, I can click this and stuff really doesn't work anymore. What we need to do now is because our slide number four is always at an opacity of one, I can have this and see that stuff really is working. But our slide number four is always stacked on top. What we need to do is hide our slide four if we do not have a target. How do you go about doing that? We can say if there's a target, then any element that comes after this, we do this with the little tilde sign. Any element that comes after this that has ID slide four also has no opacity of zero. Meaning if I click now, we get a working slider with a default. Again, this is a lot easier than learning an entire JavaScript library. It removes extra load. We don't need JavaScript anymore and the browser support for this is nearly 100% because the target selector has been around for forever and nobody knows it's there. The same thing we can do with tabs and accordions. Usually, I used to do this in jQuery or bootstrap. Now we can just do it in CSS. I'm going to just loosely explain this. We have four tabs at the top and then our content. Again, no JavaScript is needed. Let's look at how our HTML is structured. We have a radio button and then a label for that radio button named tab one. After that radio button or after that label rather, we have a section with our content. For each tab, we create that radio button, that label and that content. What we can do in CSS is basically say, every input that's checked, the label that follows directly after it has no opacity of one to show which one is active. If tab number one is checked, then the tab content one that comes right after it has a display block. We hide everything on default and every time a radio gets checked and we can check it by clicking on a label. This works automatically. This has keyboard focus. It's, again, kind of out of the box accessible. Also, the browser support is around 100%. We don't need JavaScript anymore. With this, I hope to convince you that we really don't need to use Bootstrap for anything anymore. We can do everything in regular CSS. There's a lot more possible to this. I'm probably going right after my talk because I have to take care of something at home. We can do questions now, but if you have questions later, look me up on Twitter. It's at LUCP. Please ask them because I totally get that there's a lot of questions surrounding CSS Grid. If you feel like talking about it, I'm always available. Thank you.