 Meghan sconellchwch gyda bwydraeth sydd yn byw, gyda bwydraeth bwydraeth, wrth gwrs. Ac mae'r gweithio dechrau mor bwydraeth ymlaen yn ddesgrif yn hwnnw, a blwyddyn iddyn ni'n gobyl am amser. Wrth gwrs, mae'n gweithio ddiogel. Mae'r gweithio adeilach iddyn nhw wedi bod nhw fydd yn gweithio ddweithio ddydd. Mae ddim yn ydych chi wedi gweithio, I guess it was really a chocolate car. I like this much better. This is easy. So what I did was I asked around, I had a look around at what the alternatives are. I use no framework personally, I just write all the code myself. It doesn't mean that I don't look at other people's code, I just make sure I maintain my own. I work here at CSA where Enterprise is great, there's nothing stopping you from doing that. Felly yn siarad rhoi, ond iddyn nhw'n gwneud hynny. Y grwp yma, bydd yma'r rŵl, maen nhw'n bwysig ar y cyfnodol, ond mae'r tynnu yn oed yn ymddangos. Y dyna'r unrhyw o'r ysgol yn yr CSS. Mae hyn yn hynny'n meddwl i'w eu hwn. Mae'n mynd i'r hwn yn ei ddim yn oed, mae'r ddifol yn HGML. Fy nid o'i meddwl i'r ddifol, maen nhw'n i'r ddifol i ni. gyda' Chwyl bwysig yn cyflawni ffordd, mae wedi'i have o ydychrau. Yn y mwyloedd ymlaen fel yw'r atwgui". Felly mae'r gwasg ymlaen. Mae'r gwasg ymlaen yw hwnnw. Maeקru yn ei wneud y fflaenio, ymlaenio yn ymgwrdd o'r gwasg fflaenio o'r cyflaenio o'r cyflaenio, oherwydd mae'n arfer o'r gwasg. Mae yw'r gwasg ymlaenio, nawr yw ddweud o rhaid i'r gwasg, yn ymddangos ni sut yna'r f� Birthday. bwrs yn y bydd o'r awr ond yn yr awr fel yw, mae yma'r amser ond y teimlo'r grwm petr yn y ddych chi. Ond nid yw eich teimlo'r bwysig maen nhw achos gael o'r rhaid. Felly, mae'n ymryd rhaid o'r fframau mae'r bwysig, mae llwydd ac yn eich thwyloion yn y cymdeithas fel hwyl y fwrdd. Athynol ddim yn ychaf yng nghymru mae'r fwrdd maen nhw. Mae'r fyrniad eich fwrdd maen nhw, yn ddiwylo'r adrwyddol, dyna gynhymhau cywir ac mae'r dweud i'r ddweud o'i gyffrin, ond mae'r dweud o'ch gyflym a mynd i'r ddweud o'i amser ac mae'r ddweud i'r ddweud o'i amser. Y rhaid sydd anodd o'i casgliadau maen nhw ymlaen, dw i'r ddylu hwyl wedi'i ddangos i'r ddweud i'r ddweud. I ddweudio hyn o'r ddweud pwysig, dyna fe attaith bod y bramfyrddio gwheidiad, Nad yna gymryd hyn wedi fydd stryd. If bootstrap doesn't look like bootstrap, someone has either spent it all for a lot of work or they're not actually using bootstrap. If you throw up to a designer and said bootstrap, bootstrap, bootstrap, you'd know right away. It's really easy to tell. I should mention why bootstrap does all these things wrong as well. Bootstrap is using Flux still. Bootstrap 4, which is still in alpha for some reason, is using Flexbox. Wow, welcome to this decade. The accessibility of bootstrap is okay, but given the magnitude of the project, okay is not really good enough. You can get sued. Your company could go bankrupt because someone sues you because you're not accessible. Apart from the human side of making our sites nice for people. So you don't want your company to go bankrupt because you chose bootstrap and chose bad accessibility. It's not really something that happens in Asia at the moment, but it has been a big thing in Australia, UK, US. It will spread. One of the consequences of the framework being a lot of lithic is that it's usually really heavy. Bootstrap now lets you configure so you can choose what you want to, but the reality of any configurable thing is no-one ever chooses the settings. When Microsoft redesigned Office in 2007 and introduced the ribbon, they always did a lot of research on Microsoft, which is probably one of the best things they ever do. They found that I think 0.5% of anyone ever using Word ever configured anything. That's ridiculous. No-one knows the settings on average. I do, most of you probably do, but we're not normal. We're weird. We're the crazy people that play around with stuff. So the consequence of all that is, basically, too much configuration means it's going to be heavy. Bootstrap, everyone will just like, think to the CDN, the whole thing, I don't have to think about it anymore, or let the client worry about it, let them pay for their mobile bill. Here in Singapore we have fast internet, which is cheap, but lucky. Most of the world is not in that situation. If you're living in Bootstrap, you're charging your client for the privilege of using that framework every single time they load a page. That's not great. CDNs are no excuse either because by the time someone comes to your site, the case is cleared, so they have to load the thing anyway. CDNs are not a miracle cure. Moving on, assuming you don't want your site to look like Bootstrap, they want it to be extensible. With CSS, the key to that, unless you're using CSS modules, is to have something that's name-spaced, because you don't want an overlap. If someone is using something called button as a class, I don't want to have to use the same class. I'd rather have something that's got some unique identifier with that framework. That lets me go in there and change it, and I don't have to worry about it. I can upgrade freely, I don't need to think about it anymore. There are more things to extensibility and name-spacing, but certainly for CSS it's probably the most critical. The last one is proper icons. When font icons came in, they were awesome, kind of, because you could use icons fairly quickly, but we now know there are a lot of problems with them. If the icon set doesn't load properly, if the font set doesn't load, you get random characters thrown at you. There's no accessibility because you're throwing random characters to a person. All that's a nasty level. There are problems. They serve the world fairly well for a while, but it's no longer the best solution. It hasn't been for some years. It just kind of goes back to being up to date, but icons are one of those things that you really should get to make on. Okay. Now, since I don't use these frameworks, what I'm talking about tonight is based on my research into them. If someone has used them and been like a chocolate, please interrupt me at any point, and we'll test the Beijing's throwing skills. Again, if she's not throwing to you, then there's something wrong with them all. Professional basketball. All my professional basketball. Still better than I've ever thrown in my life. Foundation is one of the ones that comes up often when you talk about things. It is a big framework. It's fairly monolithic. It's been around for a while. We've done a lot of work to optimise it, unlike Bootstrap, which is kind of founded, but it hasn't really been that much interesting development effort in Bootstrap for a while. So it's got some things going for it. My favourite thing is it has aria support in its controls, and it's actually accessible. I haven't tested it thoroughly. I just had a look through what I could see on the site, but it generally seems to work, and that's a really good thing. I don't want to have to think about how your CSS is working. That's nice. It does use presentational class names, so it calls buttons, buttons and things like that, and this is not good. It's not extensible, at least, to bigger CSS libraries. It's pretty nasty. So if you're choosing a foundation, you have to live with it. If they change something to something you don't like, then you're in trouble. If your client comes to you and says they need something different, it's going to cost you. It's going to go with a monolithic framework. I have no spacing. It uses floats still for grids, because it's not really in the 90s, early 2010s. When did Flexbox become more? It's been a while. It's been a while, I think. It's been a while. But there's still a few floats. This is version 6 of foundation. You'd think they'd be moving beyond that. There is no browser compatibility problem anymore. There's nothing else to think about. They do use icon fonts. They're still doing the old way of doing things. On the balance, it's all right. It's quite monolithic. I wouldn't go near it, because it is too monolithic. It's not extensible. The accessibility is nice. Anyone use foundation here? How have you found it? It's lighter. It's light because it's 65K from the CSS 60 on K from the JavaScript, something like that. I don't know where it is. It's awesome. It's better than it is. Have a go. Would you recommend it? It comes with bootstrap, yeah. We're assuming everything is better than bootstrap, yeah. This is basically the question. You can write your own. People sitting here, we write our own citizens. Not everyone is us. Every criticism I'm learning here, it's right back at me. What do I know? This is skeleton. Skeleton is so great at marketing. They don't even have a name. It's a framework on this side. The really good thing with skeleton is it's really, really lightweight. It's down to a couple hundred lines of CSS, which is remarkable. It covers the basics. The idea is it is just a skeleton. It covers the core parts of what you need to get going. For me, if I was going to choose a framework, it would be something like this, where it doesn't prejudge anywhere beyond the basics, so you can customise as you like beyond that. What some nice things. It doesn't have name spacing, which is unfortunate, but that's showing the age of the framework. You'll know it says it's dead symbol. We'll just remember that word dead and we'll be coming back to that in a minute. This is more features coming soon, which is really nice, except it has a good name. More features coming soon, maybe never, because it is dead, unfortunately. It was promising at one point, but unfortunately it's not used to anyone anymore. Unless you want to take it up and maintain it yourself. I don't. Moving on to pure CSS. Does anyone use skeleton, actually? I should ask on each one. Pretty much sums up what happens. Sorry. Pure CSS is written by Yahoo. The idea of pure is very much along the same lines as normalised, as skeleton, where they've taken normalised and they've just covered the basics. You can't really see so well here, but it's got, I think it's like 6K to use it until something else, even 3. It's tiny. They've got base stuff, basic forms, buttons, tables and menus. You really shouldn't need much more than that to get going, because you don't want to have to write a menu every time you start a new site, so it's nice to have something to get you going. So this is quite useful. It is really small because it doesn't do much, but it covers the essentials of what you need. You don't really need to think about it. It has some names facing, but it's a bit weird. But they're a bit inconsistent about how they apply it. They're using pure dash in some areas and they're not in others. Considering the size of the library, that's quite remarkable. They've got such variation going on. It doesn't, they don't do icons, so that's not relevant. They don't cover accessibility because it's just so basic and isn't pure before. You can claim you're having it a chocolate. There you go. Symantec UI. Symantec is another monolithic framework, so one size fits all. Come with us when you have to, you'll never have to think again. That's a lot of research. I've heard of all of them only because I've heard of all of them. But this is a thing. What's curious about Symantec is the class naming structure. If you've heard of atomic CSS, weighing it down to really micro level names for everything, they're kind of along those lines. Now there are problems with atomic CSS in that it's really hard to work out what's going on. That's not so bad with Symantec as the class names are a little bit more verbose. Not really. It's not semantic. They're a bit of a lie. The library itself in the structure is quite good. They have a fair amount of depth in there without getting too crazy. Their keyboard support is pretty poor so the accessibility is basically in tatters. For me it kills any framework. If you can't manage keyboards then don't try. It's monolithic. It covers everything for you. If you look at a framework and they start talking about theming then you know you're in the wrong territory. All you can ever do is add a little bit of modification on top of what's already there. Then it's a monolithic framework. They're making a lot of decisions for you already. The real problem with that is the effort involved in customising is usually more than just writing a code yourself. It's not that hard in a good environment. When you have a framework making decisions for you, you're in a bad environment so it can be a lot more effort than it's worth. I've mentioned it before it's one of the key problems to Bootstrap. You can't make it look like anything else. The good thing with semantic is because it's new it covers the generic design elements that you need without too much effort. So you can throw it into a site right now and look okay. When the design trends change you can do it with it. But then you probably be redesigning by then so it's not necessarily a bad thing. Anyone use this one before? No chocolates. Ola, ola, something. Ola. It's modern based off not modern in the Flexbox. The key thing is they're using Flexbox for their grids instead of floats. Wow. I'm not using CSS pretty good. It's not namespaced which means you can't override anything. But that's a button. Great. No custom anything. They're using font awesome for their icons because font awesome is not awesome. Their accessibility was the worst out of all of these that I tested. The easy way to test is just throw your mouse away for half a second and if you can use a site with a keyboard then you know you're doing alright. I couldn't focus on anything on this side. It was terrible. Did you use Chrome or Firefox or Safari? I tested it in several. Because I tested my site recently on Safari and I found out that Safari doesn't support like tabbings across links and almost all my elements. It does if you do your elements. You have to configure it The key element I had was for tabs. Because I know how tabs work really well because I've written these in time. Having written a tab control before I know it inside out I can see when someone would pay to spec on that without having to look for it. Not even close. You couldn't even focus on anything on the other page. It was unfortunate. Anyone who uses Boma? Anyone? Anyone? Boma. There you go, chocolate. Wow. Material design light. This one material design was achieved by the current standard team for the entire and product apps. Yeah, that's material design. This is a framework designed to use material design There's not just one I think there's another CSS CSS framework like also based on material design. But it's still basically the same idea. Material design you've got Microsoft, what's the new one that just named it recently? It's not... Is it F? They hadn't meant to do it. I had Metro, they got a trademark dispute so they called it something really awkward instead. But it was still Metro to everyone because Metro was much nicer then. So if you've used Windows Phone, Windows 8 after using Metro they're currently modifying their design moving towards Linux. So it's like the next evolution from that. Apple may have maintained their human interface guidelines since the 80s that have been publishing them on the internet since the 90s since internet came into existence. Maybe we'll have got material. It's just another design framework. If you use material design you make your things look like Google great. You could make your things look like Microsoft you could make them look like Apple if you want. It doesn't make you special. It's following a lot of other trends but basically you're locked in to that particular design trend. It's smallithic so it will tell you exactly how everything should behave. It does have namespacing which was nice. Accessibility was terrible. And the icons were falling. Anyone come across this one used to thought that I know one side. I'm not on the app. I know one side uses the material. That was the end of my research basically at this point. It means we've got to deal. Has anyone else got anything else that you want to throw out? In what other frameworks has anyone used that is useful? Or does your organisation actually have your own framework? Or are you all using bootstrap? Or are you using just a great framework and not all the other things combined? Everyone's chocolate. Mark, you can speak. Mark works with me so you can just say that we don't use the guidelines. I don't have any framework. Your own? Your own standard? Is a CFC framework there? Is a CFC framework there? No one else. What does anyone else use? Do you use a framework? Do you use your own? We're doing well. Last time I asked something like this to talk to the CSS audience. I got a lot of bootstraps around me. You've got a lot of CFC here. You've got chocolates. If you want, let's try to get a chocolate. I'm rewarding you with a candy for your bootstrapness. That's been done. Thank you very much. Any questions about frameworks on me just taking all of them? You mentioned next facing what framework you see recently that you are impressed by the nameshifting? It was one. The only one you see. Pio, what do you relate? It was one. No, it doesn't matter. What do you relate to the nameshifting? Maybe I made a mistake because looking at my notes, I've got none. There were actually fewer worlds fewer worlds. Pio had some nameshifting that was really inconsistent. They don't have consistent nameshifting. Yeah. It's a few K and they managed to communicate inconsistent nameshifting which is bizarre. Nameshifting, the idea is basically just like with any other language you'll just have a couple of letters dash something and there's a nameshifting. Everything is now unique to that nameshifting. Really easy. You don't have to think about overwriting but one of the other things that I haven't covered here is globals. If you start modifying global CSS then you're at risk. Bootstrap does this, which is annoying. I've had to inherit the science that you use bootstrap and implement other things on top of them. The first thing you do is basically counter all those bootstrap things that tell you how a header should be displayed. Have you looked at angular material? No. I just started learning Angular at my job so I'm kind of picking it up right now but I think it comes back into Angular. Angular is a model mistake as well. The nameshifting seems pretty good because it's all ng something. There's a lot of stuff. I was wondering if you knew anything about it because I never lived with myself. I think it should work. I'll suggest it too. This is a problem because I don't use any frameworks that rely on other people. I have come across and the ng nameshifting is perfect. Exactly what you should be doing. You should be doing this in your own code not just anyone else's because someone else at some point will have to maintain your code. Maybe you six months from now. You can either make you six months from now or make you six months from now sad. I think when it comes to Angular it's more towards the Java's type nameshifting. Lost my CSS site. Even in those CSS. Wasn't Angular 2? Yes. I think it's quite new because the document is just really horrible. I can't find anything in terms of what the classes are and how the system works. It's all Angular. The past Angular 2 was nasty anyway so it's not really surprising. I'm not surprised that there isn't much to find. You're a warrior. Good luck. We chose to react. I didn't have that choice. I would have had that choice. You mentioned accessibility. I was only familiar with accessibility in terms of color contrast. But you were talking about navigating websites without a normal story type as I said. Can you elaborate why that's important? Not everyone can use a mouse which is significant. Not everyone can use a mouse. You don't have to be disabled. You could have a child in one arm and be using one hand or something. There's a really good Microsoft poster that they put out recently from their accessibility team showing that everyone is disabled at some point or other. There are a lot of reasons that you don't realize until you're affected by it. For me, I've got a five-year-old son and when I was pushing him around in a pram I realized that the ramps are awesome. Pride of that. Stairs. When you're on wheels suddenly you love ramps like nothing else. Lifts are the same. You see people walking into lifts and it's like, I need to get in there. You can take the stairs. You can go on the escalator. I have to get in there. That's when you notice that stuff. Keyboard accessibility is especially for people who can't see because you can't use a mouse. But even if you're able to body load you just want to use your keyboard. There's no good reason why you can't support it. US stats, 20% of everyone roughly has some kind of disability. I remember the details. I did a talk on this last year's talk at CSScon. You can find the video online and stuff. I can't remember the details on that. But if you look at the area rules towards accessibility if you want to be compliant with the guidelines you need to have keyboard support. And it's not. Just finish my point. It's not that hard. It's daunting at first when you look at this was the nature of my talk at the CSScon last year. Actually making things successful is not that difficult if you put some effort in. Which is all the more frustrating that when you see, I'm pointing at this here. When you see frameworks, when you look at other people to use put the effort in and do it. It's not difficult. If you're looking for an autocomplete control if you instead of googling an autocomplete JavaScript or something like that just put aria or accessible in there and you'll get one. It's not that hard. There's no good excuse for bootstrap not to be completely accessible. It's just an awful failure. It's really good for some of the controls because they put the effort in. You've been talking about making your own framework. This is a bit of a huge question but how do you write a documentation that other people write? I know that you probably can't answer that in a couple of minutes. How do you write a style guide? Does one person contain it or does one person write the whole thing? There was a poll CSS tricks did a couple of years ago I think asking how many people maintain CSS within a call protection. It's usually a handful. I know here at CSA I limit any proper CSS editing to myself and to others because I don't trust anyone else to go near it. Sorry Mark. You've got to be really careful about it and really tight about it. If you maintain a separate library with our CSS code which I'm building in a moment and everything else consumes it in the same way you consume one of these if you structure your code that way you get a lot of benefits out of it. So when you say you made your own framework it was like this kind of page with all this? There are tons of different libraries out there to generate your style guides for you as well depending on level that you want to achieve. Yeah. That's a completely separate topic all again. We're hoping because there's not going to be a CSS comp this year we're hoping to have a talk CSS excel or something like that. What is it actually for you being a CSS comp so you're doing this comp? We're all the same now aren't we? So we're going to be different. I still want to get an indebenum here. If you look up Brent Frost and an indebenum there's tons of style guides to IO there's tons of material there for what to do and it really depends style guides mean different things to different people so it depends on what you're trying to do.