 I would like to welcome Belen Albeitha to the stage, she has come all the way from Spain today and I tried to ask her about how I should introduce her talk and I think probably the best thing is just for me to let her do it herself because, yeah, do you want to just take it away? Here you go. Give her a round of applause. Can you hear me? Okay. So my name is Belen and this talk is named, you might not need a CSS framework. This is my Twitter handle, ladyvenko. I just tweet the URL of this deck, which is online on a GitHub repo. If you want to see it later or share it with other people. And this is my email address, Belen at mozilla.com in case you have questions later or you just want to say hi, whatever. Yeah, so I'm Belen, I work at Mozilla. I have mixed background in the industry doing video games, mobile applications and a lot of web programming, both backend and frontend. The thing I enjoy most is frontend. This is why I like to talk about CSS and HTML and JavaScript. So this talk is about thinking whether we need a framework or not, which are the advantages, the disadvantages and you will see that I have a strong bias against using a framework because I think you are better off not using it, but I just want you to make that decision for yourself. So I'm not going to tell you do this or don't do this, but I will let you to think about it at least. So, okay, CSS framework, like Bustra Foundation, how many of you use them? Okay, so a lot of people. Well, this framework is just for the ones that maybe are new to development or are not familiar with them. This is just a collection of code like HTML, CSS, bits of JavaScript that implement like a layout, UI components, some typography rules as well, and you just can build a website by copying and pasting these bits. So they are really popular. This is an example of a framework. I think this is Bustrap. You cannot see this clearly, but it's just a batch and you can see, okay, how this will look in your website. So there are life examples that you can see like a code section. This is the thing that you need to copy and paste into your code and you can see a bit of documentation. So it's a quick way to actually implement UI components in your site. So why people use them? When I ask people, they tell me, no, because it's quicker. It's really fast. And they think it's okay because it's already implemented for me, so I don't need to call the front scratch so I can release my product or my website earlier. I disagree with this and I will explain it later, but it's a belief that people have, and I think this is the most common belief. The other thing is like some people think this is a best practice, and this is being reinforced by these job postings that you can see about front-end developers that they put out of keywords and you will see HTML5, CSS3, jQuery, and you will see Bustrap as well as a framework. And other advantage that they have is that they implement a design. This can be advantage or disadvantage, but if you are a developer and you are not a designer or you don't have access to one because maybe it's just you doing a prototype for something, they already implemented a design so you don't need to think or you don't need to release something with no design at all. So it can be an advantage. Of course, your site will look the same as every other site on the Internet probably, but it's something to consider. So some of the problems that these frameworks have, the first problem which is unsemantic bloated HTML code is not intrinsic to frameworks per se. It's just something that I've seen in the most popular frameworks, that they use a lot of, for instance, wrappers that you might not need if you were coding your theme from scratch. They use maybe a lot of divs and spam instead of using the semantic version for the situation. If you are using a framework, you will probably include a really big CSS file with a lot of code rules that you won't be using because if you download a CSS that contains styles for buttons and you are not using buttons on your website or you have your own CSS for buttons, then these are rules that are present in your code that people need to download, they get parsed by the browser, but you're not using it, so it's a waste of resources. The other thing that, again, this is not intrinsic to frameworks, but I've seen it a lot, is that the styles or the rules that they create for CSS are very specific. You know, the way that CSS works is that the more specific a rule it is, the more priority it has. So you have a rule that says the text color to red, for instance, and you want to change it to something else like blue, then you need to create an even more specific rule. So this creates hard to maintain CSS because you cannot make efficient use of the cascade or you cannot apply the style to different contests because the rule is very specific. So in general, you have a lot of choices on the decision that some people have made for you and you might disagree with these choices. So if you disagree and you still use the framework, it's something you have to deal with. So again, this is very annoying, at least for me. So this is an example of stuff that I find annoying. This is a documentation of a framework, I think it's pure. I don't know you can see the actual code, but it's basically like a style for disabled buttons and they tell you to make a button as disabled at the pure button disabled class name alongside pure button. So you just need to include these two classes and you have your button disabled. The problem is that the way to disable a button is to actually add the disabled attribute to the HTML tag. And the cool thing is that if you actually do that, it is still worse. You will have this style applied, but the documentation doesn't say that. So if you are new to HTML or maybe you are a backender or you are in a hurry, you just copy and paste the code, you will have non-semitic code in your website instead of having the proper version which is using the disabled attribute. So for me, this party is annoying. This is another example that I find, like, okay, I disagree with this decision. Some of you might agree because this is a philosophy or like a methodology to do CSS. Basically, these are like labels with different colors and they tell you, okay, you have to use like a span tag and then you have to apply the class label and then another class which is label default or label success or label info which says the different colors. So for me, it's like, why do I need two classes for this thing? Why label default isn't enough? Okay, you might think no, two classes is not that bad. But with this philosophy, it's really easy to find yourself with five or six classes per element and I find this really hard to deal with because then you are expecting the CSS that gets applied to this and it's like a lot of cascade, you know, the priority of the rules is a bit confusing. So I just prefer to have less classes per element. So for instance, if frameworks follow the opposite methodology, then for me, this is something that is hard to work with. But this is like a personal preference. Okay, it's not a bad thing to do this, but for me, I just prefer the other way. This is another example and I will tell you, like, this is really bad. Okay, this is not like a matter of opinions. This is objectively bad. So this is a different framework and we can see this kind of like material design UI element that is called a card. So we have a title, a paragraph and then some links. And you can see that the title is actually created by a spawn element instead of using a heading. It's like, why? This is clearly a heading. Why don't you use a heading? But they use a span. And then for the links at the bottom, you should use like a nav element probably, but they're just using a div. Okay, with a special class, but it's just, okay, why not use this nav with the class? And you have a more semantic code. And the whole thing is wrapping to, I think, four divs. It's like, this just doesn't make sense for me. So again, if you're using a framework, you just copy and paste this thing. I think this HTML code is really hard to maintain and deal with. So it's something that you have to either use your own HTML or, but then you lose the advantage of being able to just copy and paste stuff from the documentation. So in summary, hard to maintain code. So imagine that you are a WordPress developer and you do either themes and put them into a marketplace or you do like custom websites for customers. Is this what you want for these people? I mean, if you think that the people who will be using your theme or your website are going to need to customize it, this is really bad for them because you are just passing technical depth to these people. So again, it might be worth for you or it might not be, but it's something to actually consider. If you expect people to be able to customize the thing that you are giving them, passing them technical depth, I don't think it's a good idea. So we've seen that these frameworks provide layouts and UI components. Let's talk a bit about our layouts. So before Bootstrap, before Foundation and all these new frameworks, we had this thing called Grid Frameworks, which have been around for many years, and they basically provide a grid for you to layout your website. So you just need to put these kind of classes that define how many columns this particular element is going to span or how many rows, and then you are able to actually customize the CSS for the grid because they will have an interface for you to select, okay, I want my columns or my grid units to be this many pixels, I want the padding to be this one, so you just download a custom CSS for your grid and then you just use these classes. The most popular framework I think is 960, I used that many years ago, and these frameworks appear because creating a layout using floats is really painful because you have to do a lot of hacks like the Clarefix hack to actually craft your layout, and it's just a pain. So these people created these frameworks to actually make this process more automatic and you have to code less, because the other thing is like this kind of grid is very repetitive, so you will be doing the same code for every website that you are doing. So it's a matter of actually refactoring this and not reinventing the wheel. But what I want to tell you is like if you just need a grid for your website, just use a grid, you don't need to include the whole foundation or the whole bootstrap, okay? Some of these frameworks actually allow you to just use the grid part, so you don't need to download all the rest of the CSS. If they allow you to just use the grid, then use that, you don't need to include the whole thing, or maybe you just can use one of these frameworks that they still work. I mean, 960 is still available for release. You actually have recovery to use Flexbox, so you can choose whether to use this on floats and use Flexbox, so it's a good thing. But what we have today, we have new CSS APIs that make crafting a layout from scratch really easy, so you don't have this problem of actually typing a lot of code every time that you need a website. So what we can use today is this API called Flexbox, and the cool thing about this is that it solves problems that we have been in front of for many years, and it's like the vertical alignment that used to be a nightmare. I mean, if you didn't know the actual measurements of the thing, I mean, the size of the element, the width and the height, it was really hard to actually have an element vertically aligned in the middle. It solves the Holy Grail layout, which we will see later what it is, and the problem of having a sticky footer with an arbitrary height is solved as well with Flexbox, without using any kind of JavaScript or hacks or whatever, using just regular normal CSS. So this is the Holy Grail layout. This is actually like a code pen, so if you go online to this deck and click on this image, it's linked to this code pen, and you will be able to tweak it and actually see the result live. So this is the Holy Grail layout, which features like a header and a footer, and then a central area with two sidebars, and then the main content, which is green, and goes in the middle. So how do we do this? So this is the markup. We have like the main header, then we have the footer at the bottom, and then we have this central area. The way Flexbox works, you need a wrapper. So this is why I put like this div there with class row, and then inside this div, I have the elements for the sidebars and the main content. So how does Flexbox works? How many of you have used Flexbox? Okay, a lot of people, maybe half of you, okay, that's fine. So the way it works is that it allows you to distribute elements along an axis. So you can choose whether you want a horizontal or vertical axis, and you can distribute and align your elements along that axis. So here what we are doing is by using this play flex in the body, we are telling the okay body, you are a flex container. So just define this vertical axis, which is doing by using the flex pod direction column. It defines a vertical axis for the body. And in this vertical axis, we are going to set the header, the central area, and the footer. And this is what we are doing now. The main header and main footer, you can see at the bottom of the slide, has the property flex that converts them to a flex item, and then by 00 it means that these elements cannot grow or shrink. They just take the space that they are taking normally. Then we have the central area, which has the class row, and by flex 11, we tell it, okay, you can grow and shrink. So basically this area will be bigger if your website, I mean if the window, the height is bigger. And if you resize it, the footer and the header will stay the same size, and the thing that will shrink is the central area. But the central area has also elements inside, and they follow a different axis, because this case is horizontal, so we need to create another flex container for it. That's why we are doing this flex here. And since the horizontal axis is the default, we don't need to specify the direction here. And we are doing the same thing. It's like, okay, the sidebars are going to have a fixed size, so that's why we're using flex 00, and then the container is going to be able to shrink and grow. That's why we're using flex 11. And this is it. I mean, we just create the holy grail layout in just like a few lines of CSS code with no hacks or whatsoever. So can you use this? Yes. I mean, some people are afraid of using Flespo, because it's like, no, because I need to support, you know, ancient versions of Internet Explorer. It's like, okay, Microsoft is not supporting Internet Explorer anymore, so why should you? This is the thing, I mean, and it's supporting an ancient file for synchronization, in mobile browsers, so there's really no excuse to actually not to use this thing, and it will make your life much easier. So the disadvantage of this thing is like, okay, it's one-dimensional, so you can only have one axis. And this is why sometimes you need to include wrappers, because they have to do the, for the central area of the layout. But still, it's way better than using these some floats to make the layout of your website. So if you want to learn how to use this thing, if you are not using it now, you can check the using CSS flexible boxes at the Mozilla developer network, which is like a really handy tutorial, like really detailed. And if you just Google, you know, Flexbox Playground, there are a lot of websites that have like pre-made layouts, and you can modify them on the fly, so you can learn the properties and how do they behave. So this is really cool, but we are having something that is even more cool that it will be coming to browsers. That is grid layout, which is also like a CSS API. It's kind of like Flexbox, but instead of just defining one axis, you can define two of them, so you can have like the two dimensions, so you don't need these kind of wrappers that we need it with Flexbox. So again, this is the same example, again on CodePen, but instead of being implemented with Flexbox, it's by using this grid CSS. So you can see this is the HTML markup, and you can see that we don't have the diff wrapper anymore, because we don't need it. And also change the order of the elements, so you can see that it really doesn't matter. So what we're doing here is like, okay, instead of using display flex, we are using display grid, okay? And then we are defining our axis, that is grid template columns and grid template rows. So we are saying, okay, the columns that are the vertical axis, we have, okay, 250 pixels, then the remaining space, and then 250 pixels. The same with the rows. By using auto, it means like, I don't know the size of this element, but I don't want it to shrink or roll. So the header will take the space that it needs to take to display its content, the same with the footer, and then the remaining space will be occupied by another cell. And the cool thing now is this thing that I set up here, that is the grid template areas. It basically allows you to assign like a name or a character to these areas that we're going to define. So here I'm defining the first row by the age character. So it's going to take all the three cells on the first row, and I will assign it to the header, okay? I just put an age for abbreviation, but you can totally use like a full word here, and just use header, header, header. Then we are going to have the second row, which is going to be the central area, and I use L for the left sidebar, then C for the central area with the content, and then right for the right sidebar. And then we have the footer that is at the bottom, we're just using the F. So it's a really visual way to actually define how your layout is going to look. And then I just need to assign the elements to these grid areas that we have defined before. So I just say, okay, main header, your grid area is going to be age. That's it. I don't need to do anything else. So you can see that this CSS code is much more compact, much more clear, and it's just shorter, and it's easy to maintain, and you don't need these extra wrappers in your markup, so it allows you to create more semantic code. So how to use this thing? Okay, there is this website. I think it was put up by Rachel Andrew, that is called Grid by Example, which is a collection of examples of these layouts, so you can actually learn the properties, how they look like. It would also tell you how to enable grid layout in your browser, because this feature is still experimental, I mean it's still on development, it's not finished yet, so it's not ready for production. But still I will encourage you to start learning this thing now, because the day this thing lands in the browser, it's going to change completely the way that we work in our websites to do layouts. And it's better to be ready in advance, and it's actually really cool because you can do crazy things with it. I'm super excited about this thing. We also have an article at the Mozilla Hacks blog, which is like a tutorial of crafting a layout, which is also interesting. Okay, so we talk about layouts, what about UI components? By UI components I mean buttons, mobiles, the navigation bar, these kind of things. So you have a custom design, why should you be using a design that is not your own? Okay, so why do you need to override CSS that you don't need in the first place? It's kind of crazy. So what are the advantages of crafting your design from scratch? It's like you don't need to override CSS rules, you won't have CSS rules in your code base that are not used, and this thing is important that you will be aware of all the values that are in place. What this I mean is like, when you are using a framework, they implement default values for a lot of stuff, like, okay, the distance between paragraphs, for example, unless they said, okay, 16 pixels, but then your designer has set it for B2B, I don't know, 20, for instance. But then you are a developer and you might not be used to spot this kind of difference with pixel perfection, but they do, and they will notice and they will tell you, this is not what I put on my design. Okay, and then you need to find, okay, which is the CSS rule that actually says, you know, 16 pixels instead of 20. Okay, so if you actually have to type the theme, you know for sure that this is the value that the designer actually provided you. But let's say that you don't have a custom design or you don't really care about this thing, but you just need a few UI components because you need to have like a model with an overlay at the back and you don't want to implement it from scratch, or maybe you need like a calendar controller or like an navigation bar. You just need like one tiny bit. Again, don't include the whole framework for it. Some frameworks actually allow you to grab, you know, this one bit of interface, so you don't need to include the whole CSS, or there are actually, you know, UI libraries or, you know, components that don't have any dependencies. I mean, you can download like a calendar controller with no dependencies, or maybe just a dependency with jQuery, which you are probably already using, either that or septo. So why not using that? Like a third-party calendar controller or like a third-party, you know, model instead of using like a whole framework for it. So again, something to consider. So what if you have like a super big project and you can say, okay, if I have a framework, then other developers, there might be junior developers or even, you know, people who are doing the backend that they just need to do something really quick on the front end, for then it is really easy to go to a place and just copy and paste these bits of interface to construct the thing. Okay, in this case, what you really need is your own framework or your own, you know, style guide. That is a place with a documentation with examples. Okay, these are the headings that we are going to have. This is how we create navigation bars. This is how we create a model. This is how we create our buttons. And then you just need to provide the HTML and CSS for that. And you need that for your project. I mean, I'd be having in a situation that we didn't have that and it was a problem, so I had to push for us to create it. So I recommend to read this article by Ana de Venam, which is really useful about how to actually create these guides for your project, okay? She also has a talk, a talk about this, and I recommend you to watch it because it's really interesting. So still, if after this talk you still think that, okay, but I really, really need a framework, okay, which is the best way to use it? Okay, my advice would be just to use mixes. I mean, these frameworks are created usually with some CSS preprocessor or compiler like last or less, sorry, SAS or less, and these frameworks use mixings. Okay, so instead of using the generated CSS, you can use the mixings, which is like reusable pieces of CSS that you can include in your own rules. So if you can create your own CSS rules with your own selectors, this means that you actually have control over the CSS of your website and you are in control of the markup as well, okay? So you will have less of these decisions being made for you. It will be more your own choice, okay? So that's all. I mean, if you have any questions, you can ask them now if not later by Twitter or my email. And thanks for coming and listening. Thank you, Belen. We have about 15 minutes before the next break, so we've got 15 or 10 to 15 minutes to take questions. I thought that was a really informative talk, lots of great knowledge in there. If you want to dig in a bit more and find out anything, we'll tap into Belen's knowledge while she's here. Stick your hand up, ask a question, wait till the mic runner comes to you with a mic so that we can get it all recorded. Ask away. Hi there. Do you use a CSS reset file? Depends on the project. Sometimes I use that. There is also another alternative, which is the normalized version, which I don't like because it says default values for you and this is the problem of framework setting default values for you, so I rather use reset. But it depends on the project. If it's a small thing, then I might not use anything at all to reset the actual CSS, but if it's like a big application or something that is going to be like in production, then I usually use reset, which is not that big of a file. Okay. We can start the countdown. So if you were... Oh, we've got another one here. Can we get a mic to the man in green? If you have got a question, put your hand up now so we can kind of prep the mic runners and try and get some continuity. Yeah, it's not a question, but I would like to add that there is a great game to learn Flexbox. It's flexboxforoji.com. Yeah, I really recommend it, yeah. Cheers. Hi. We've been trying to use Flexbox for a while, but I've literally just checked one of my clients' Google Analytics now and they just add 300 unique users on IE8 in the last month. And they've got users on IE7 even. So, you know, from a business to business type website, you can't really discriminate against those users. So what would your recommendation be in that situation? I mean, if you don't... You cannot use Flexbox and you don't want to deal with floats on your own. You can use like a grid framework like 960 or there are a lot of grid frameworks out there. So you can just use that. But my personal preference, what I've been doing in my career is to actually run away from projects that use Internet Explorer 8. Because I want to use... It's not their clients, it's their clients. So they will turn away business by doing that. The thing is, I'm not a business owner, so I'm more of a developer and when I get a choice to, okay, do you want to work in this project? Okay, which platforms do we need to support? Internet Explorer 8, no, I'm going to this project instead. But this is my personal preference to call things using APIs that are not new. But it's my personal preference. I mean, if I am in a situation that there's no way for me to run away from it and I need to support Internet Explorer 8, I would use a grid framework or I would create my own. But there's no alternative. You have to use these floats, clear fish hacks and all that stuff because it's the only way. I just wanted to say, I actually dislike frameworks and as much as I love that, they give us a lot of prototyping speed and stuff like this. And I just wanted to say, if you're just worried about the bloat and actually your employer forces you to use Bootstrap because the client heard about Bootstrap and they love Bootstrap, maybe you can look at something like Post-CSS, which I've used and it actually, a lot of the times it can un-CSS, a lot of the classes that are not used. I don't know if you've heard of Post-CSS, but it helps you, it actually parses. I think it uses phantom.js or something like this and it parses your pages. I don't know how in WordPress, we haven't done it with WordPress, so I don't know if it makes any difference. But it gave us a lot of skins down our CSS and our dependencies and everything and it actually ended up being not too bad. I still do this like Bootstrap, but if you have to think about something that can take away the bloated CSS and another thing about Flexbox, we had similar problem, but not as bad because some of our clients are actually just really knew that they don't have 300 IE8 users, but we did use something, it wasn't me, but a colleague of mine did something used with Modernizer and they did change, they literally, they wanted Flexbox so bad that they did use Flexbox and they worked just as much hard just to support the IE8, but they have the satisfaction that their code is actually future proof and it's now proof as well. It's just not IE8 proof, but they work, it works on IE8 somehow. So it's true that you can use some tools to actually detect, these are the parts of your CSS that are redundant or you are not using, but it's yet another thing that you need to add to your pipeline. So it's a disadvantage, but if you are using a framework and you have a lot of bloated code, it's better to use this thing than not using it, but for me it's not the perfect solution and you will also be trusting something to actually decide, okay, you don't need these CSS and then you realize, are you sure about this? I don't know, it's kind of like a risk that you need to actually wait, but yeah, there are these tools and they work reasonably well. Hi there, I was just going to say that for those people that are trying to have tried to use Flexbox and have had troubles with older browsers, one thing that you can do that's really useful as a fallback is all the child elements of the Flexbox container, if you set them to display inline block, all browsers that understand Flexbox will ignore that because they've already set it to display Flex, but it means if a user is using something like IE8 or even IE9 that doesn't really recognize Flexbox, it will put the layout in a linear column so it's almost like a mobile layout and that is, for a lot of the time, an acceptable user experience, so that's a way of being able to support those users without abandoning Flexbox. Yeah, you're right, and even some of these grid frameworks actually implement that thing, so you can choose between a pure, deep-float grid or just a pure Flexbox grid or just something that is compatible with both APIs. So, yeah, it's up to you. Hi, grid looks very interesting, but you say it's for tomorrow. What is the support for today like and how far away do you think tomorrow actually is for the majority of browsers? Sorry, can you repeat the question? Grid looks very interesting. You say it's for tomorrow. How far away is tomorrow and what support like today? Okay, this is the question. The thing is like nobody knows. Okay, so there is a lot of work that has been done by browsers today and you can actually create layouts with it today. You just need to enable, like, a flag in configuration and you are able to experiment with it. So when it will be ready for production and it will never be defaulted by most browsers, we don't know. And actually, the set of features that are going to be included in the first release of Grid because it's like a huge API, it's not fully decided yet. So it kind of depends whether more features are added or not. So we don't know. It can be this year, next year. But I'm so excited about this thing that I want to start coding this thing right now. So this is what I wanted to share with you today. Sorry, I was going to just quickly respond to yourself. I know that Grid has just landed in Chrome and Firefox stable, so it's kind of getting there. You can use it. Yeah, I mean, it's there, but you need to enable it. So it's not enabled by default. It is now, okay. But it's experimental. The thing is like there are differences between Chrome and Firefox, so I don't encourage you to use it in production, okay? It's great to get the collective knowledge of the WordCamp. Excuse me. I'll do that countdown in my head that I did on the first talk, from five to zero, and if there's no more hands, we will move on to break. It's like an auctioneer, isn't it? I need like a gavel to say, bash, bash, it's all over. Thank you, Belen, for sharing your knowledge with us and for taking so many good questions. Can we give Belen a round of applause and then there's some notices?