 Okay, it's one o'clock, let's make a start. Just in case you're in the wrong room, this presentation is GSS grid style sheets, the layout system that's two generations ahead. So yeah, this is your chance to go if this is not the right session. Put away your phones and laptops, try and pay some attention. We'll do this short and sharp because otherwise the room is gonna get very warm. So, who is this fool? I'm Alan Burke and I'm one of the directors of Lanartik, Drupal Development Shop in Ireland. You'll find me absent on Twitter at that handle and you'll find me on Drupal.org at that address. I've been using Drupal for far too long. Since about 2005, I've organized Drupal camps in Ireland. I was the founding chair of Drupal Ireland. I've spoken at DrupalCon, Drupal Dev Days, front end uniters, bar camps, all sorts of other stuff. These days I don't do as much web development because I'd like to concentrate in running a small business to a large degree but one of the other things I do is the trivia night, I'm the emcee for trivia night. So hope to see you all there on Thursday night. More details about that as we go. And I'm also a cyclist so I was one of the tour de Drupal team. So thanks very much to the people who organized tour de Drupal. I know there's some of the cyclists here in the room. Raise your hands if you made it. There's Lewis, good stuff he cycles. He's still sore. So what is GSS? So the best way I could describe it is as an alternative layout engine, though that is not doing it justice. It can do an awful lot more than that. This is the spiel, I guess. It reimagines CSS layout and replaces the browser's layout engine with one that harnesses the category constraint solver. And it's the same algorithm that Apple uses to compute native layout. So if you've written native mobile apps, that's the kind of stuff that the layout algorithms that is used to build those apps, that's what we're talking about here. It's the same algorithm, not in precisely the same code. Oh yeah, so one of the things, if there are questions, feel free to interrupt me. I'll do my best to answer them. Another tagline they've used from their side is they describe the CSS polyfills from the future. That's what we're trying to do here. We're basically have decided that CSS isn't quite up to scratch, so we're gonna use an alternative layout engine to layout things on the page. What I'm gonna go through this session is I'm gonna look at some of the features of what CSS is, look at the syntax, some basic examples, a slightly more advanced example. And hopefully the objective is to give you an idea of what it is and what it does. I won't pretend that you'll be experts having walked away from this session because I certainly am an expert now. So in some ways it's better to think about what CSS is not. So this gets rid of some of the preconceptions that people might have when they come to a session like this. It is not a preprocessor. So if you've used stylus less or SAS, you know what a preprocessor is. This is not a preprocessor, at least not yet. At some point in the future, it might be seen as a way that we are, it might be developed in such a fashion that it can be used as a preprocessor and therefore the browser has us work to do, though that's not the case just yet. It is not widely used, at least by me. So the backstory to this presentation is that when Drupalcon called for talks what six months ago now, this was a brand new thing that I'd seen tweeted on and seen a couple of presentations and thought, this is really cool. At six months time, this could be huge and Drupalcon really should have a presentation about it. Now that hasn't quite come to pass. But obviously the people who chose the sessions agreed with me and thought, this might prove to be very useful at some point in the future. But I will say this, the first time I started using SAS, I remember using it and going, this is really complicated. Do you really need SAS? I can do pretty much everything I need to do in CSS. And I left it, I went back to standard CSS and then a couple of years later, I found my way back to SAS again. And what I'll say is that the feelings I have about this are very similar, that it's complicated and I'm not gonna show you many examples that you can't really do with standard CSS or various layout libraries let's say. But at the same time, I think that over time the advantages of what this can do and the certainly things that it can do that CSS can't, I think they will become more prevalent. We'll start seeing some demos from people who've cracked one or two problems that are really, really hard to do in CSS. So that's how things might evolve, but no one knows for sure. It is not a grid system. So despite its name, and I'll come back to the name at some point, it is not a grid system like 960 Grids or Zen Grids or Suzy or other grid systems where they'll vary in their implementations slightly, but they'll more than likely give you a series of classes that you apply to elements. And then those classes are defined in the library or the other CSS files to handle the layout on the screen. Or if you're using Compass, then you can apply the styles directly to the elements using a preprocessor or something similar like that. But this, you don't get that with grid styles sheets. And it's not a browser implementation. So you won't go to canayuse.com and see whether this is available for use in the browser. Is it in the latest version of Opera or will IE8 support this? Because it's not implemented at the browser level. It's JavaScript. But we're friends with JavaScript now, right? Things have moved on. Bit of a non-tank cordial, so to speak. So we're happy that JavaScript is responsible for some things. An immediate question is, will it degrade? No, it will not. So the layout that you have tried to achieve or you have achieved through grid style sheets, you will not have available if JavaScript is disabled in the browser. So it's kind of up to yourself as to how you deal with that. Do you say, well, the layout's fine. You know, the content is there on the screen anyway, even if I don't get layout. But that's a call you have to make yourself. So this is how a preprocessor works. With a preprocessor, so SAS, less, stylus, and others, you will write flavored CSS. So it's an enhanced version of CSS with extra little pieces of syntax. You'll run it through a compiler, perhaps Ruby, or a JavaScript compiler, maybe, with Node. It will compile it down into vanilla or ordinary CSS that the browser with the look of God will actually understand and parse and then lay out the things on the screen. So that's your standard model. Like, can I just see a show of hands? Those are using SAS or similar. Less or similar? Nothing at all, just plain CSS. Hardcore, okay. So, okay, so now we know how that works, but maybe a little bit. But this is how grid style sheet works. Now I did a check earlier on and I'm told that this is readable at the back of the room. So, you know, if you can't read it, it's obviously your problem. So the way grid style sheets works is you will still write flavored CSS, and we're gonna see some examples of that very shortly. It runs through a compiler which generates JSON and that is sent to a layout engine, which then interacts with the DOM, but really at the same time, it's also interacting with a constrained solver to try and meet the rules and suggestions that you've made. I'll talk about the rules and suggestions, which is, I guess, my explanation of what CSS is. So it is slightly different. It's not something that this all happens at the browser side. This is not something you do on the server and then generate this stuff and send it down to the browser. At least not yet, that's in the pipeline or at least one of the plans for grid style sheets. So this works. So all that stuff happens in the browser itself using JavaScript. Okay, so the simple example. So let's do some live coding so you know what could possibly go wrong. Okay, let's see what we got. So bear with me, we'll see how we go. Okay, that's the more advanced example. Okay, here's a very simple example. Okay, so what we have here on the screen is just a very simple thing with two elements. We've got a cloud, we've got some lightning. I'm not a graphic designer just in case it wasn't immediately obvious. I didn't want to pester the graphic designers that I work with to do some work for this presentation. Anyway, we want to center the top of this lightning bolt in the center of this cloud and we want to center the whole lot in the middle of the screen. So I'll let you, as an exercise to the audience you can all imagine how you'd write that in standard CSS now, okay? How many lines are we thinking in CSS? Two, three, four? One really long one, you know? I guess they're all valid answers. I'm not going to go through alternative ways to approach this in CSS. There's a good bit of stuff to get through and I'm not sure that's going to serve much purpose, but yeah, you could probably do that in CSS. One way or the other, you'll work it out. So let's see how we'll approach that here. So this is our simple HTML file. Okay, just a double check in fairness. Now, legible from the back. Got a thumbs up and nods. Yeah, very discreet nods. You people do a lot of options. Okay, so we're pulling in our grid style sheets. One small thing to just point out here is it's served as CSS and that's kind of important. So if you look at the local demo, it's been served through a local web browser so that it's served as CSS. If you were to use this as an ordinary HTML file, it wouldn't really work or it wouldn't work at all. So just be aware of that. I just use a simple local web browser to serve that. So I'm pulling that in. I also have the grid style sheets JavaScript that I downloaded from GitHub and I also have some configuration settings that I send to there. This is all pretty much out of the box stuff. There's nothing particularly ordinary here. So in terms of the markup, you'll note that I've just had two simple image tags. Forgive my use of IDs, Morten, and others just for the purposes of this presentation. So if you could just look beyond my heinous CSS and just see what we're trying to achieve here, it'll be tough, but you can do it. I believe in you. So there is no difference there. That's a very good point because I don't need any divs to do what I need to do. So let's have a look at the grid style sheets. So right now it's empty. So the first thing we're gonna do is try and take this cloud and centers on the screen. So let's look at the first bit of CSS that we're gonna pass in there. So here's some that I wrote earlier, like any good cookery show. Okay, so let's look at the syntax of this. So the first thing to point out is, it's flavored CSS. It looks to a large degree like CSS, but there's a lot of little bits and pieces going on there. So the first thing is, actually, I'll just put that down a bit, okay. So what we're saying is for the center X value of the cloud, hash cloud, so that being the image tag of cloud, I want that to be equal to the center of the window. So this is some special syntax to get me properties of the window. It's not a variable declaration, and neither is it a test for equality, for other people, from other program languages. This is simply how we define a constraint. And we're always thinking about constraints. We are not deciding rules. We are setting boundaries that we would like the engine to resolve and to come up with a value that will satisfy all of our conditions. Okay, so this is not standard program. I'm not declaring a variable here. I'm not setting a rule that the browser must do. This I found a little bit easier to get my head around when, at some point in the past, you might have read that, sure, you can write all the CSS in the world you like, but you can't tell the browser what to do. You're merely suggesting to the browser, hey, this is how I'd like to do it, but the browser might have a user style sheet or something like that that will override your styles. And you always have to be aware of that as a web developer. So what we're saying here is I want the center of the cloud on the X axis to be equal to the center of the window on the X axis. And I want to do the same on the Y axis. I want the center Y of the cloud to be equal to the center of the window. So I've defined my grid style sheet rules. I go back to the browser. I don't have all the reload working just for the shazam effect. And I go, oh, I wasn't expecting that. Sorry? It worked. That's a very good point. It worked. It is exactly what I asked the browser to do. And that's the key point here. All of your constraints that you're set, you don't get, you have to be quite explicit in terms of defining your constraints. So we have asked for the center of the cloud to be in the center of the window. And that's exactly what we got. So, right, well, okay, yeah, fine. Thanks, thanks very much. You've done exactly what I asked you to do, but it's not really what I wanted. So the way you start thinking about this, I've got to give it more details. I've got to give it more constraints to satisfy such that I get the layout that I was trying to achieve. So let's go back and add some more constraints. So again, we'll take some extra code. I will put it in here. So now what I've done is I've added two more constraints that I'd like the engine to meet when it's deciding how to lay out the things through the DOM. So we got some special syntax here to grab the intrinsic height of the div or the image tag in this case and to grab the intrinsic width of the div and, oh sorry, the image tag and apply those as other constraints. So we want that to be matched. And you'll notice at the end here, we have something similar to the oft-used important declaration in CSS. And this is kind of similar, except we've got a number of different values. We have require, which is at the top. In other words, this is a value that we are constrained that we absolutely, excuse me, that we absolutely want to have met. So this is very, very important if you wanted to think of it like that. But there are other values that we could have said there to the engine. We could have said strong, meaning yeah, we'd really like it, but it's not the end of the world if you can't achieve it. We've also got weak and another one that escapes the mind at the moment. But again, we can just use numeric values there as well and they'll work to a large degree as well. So let's have a look and see whether that achieved anything for us. So we reload and yay, lovely stuff. It's centered in the browser. So I'm very happy with that. It's all centered, it's all super responsive. That's really good. Okay, so now we've got to deal with our lightning bolts and we want to move that to the center of the cloud. So let's see what we need to do to do that. So let's take this value here. Okay, so what we're saying is we want the top of the lightning bolt to be equal to, if possible, the center of the cloud on the y-axis. Okay, so let's do that. So we reload the page and we go, so yet again, on closer inspection, the browser or rather the engine has actually achieved the constraint that we've asked it to meet. I hope we're in for time. Okay, we're good. Okay, so the top of the lightning bolt is actually towards or at the center of the cloud. So that's actually worked, but we need it to be in the middle as well. So we're gonna need some more code for that. So we take some more here and we say, we want the center on the x-axis of the lightning to be equal to the cloud on the center of the x-axis. So hopefully this will do exactly what we, oh. Oh man, that's a shame. So yet again, something hasn't gone quite right, but yet again, if we look at what the browser has done, it has actually done exactly what we asked, but we weren't explicit enough about what we wanted. Think of this as a really poorly defined requirements, or maybe you've never had to come across that from a client going, you know. Oh, that's what I said I wanted, but that's not what I meant, you know. So it's quite similar. So like every good client, we just get more details out of the clients and we put some more information here. And again, this is similar to the rules that we had above where we said that we want the lightning's height and width to be equal to its original and intrinsic values. So let's have a look at that. So we reload the page. Shazam, there we go. One live demo, that worked. So, yes. Why are you using two syntaxes and... Why am I using two syntaxes? Let's see what's going on with that. It's just two different, oh right. Why isn't my CSS not consistent? Yeah, well, I mean the 13. Okay, so you can, just like in CSS where you have say font, font size, font, whatever you got, line height, all that kind of stuff. It's very similar. So you can specify, for a single value, you can do it like this. So I've done that here, but for a longer set of values, you can use, I suppose, a standard CSS brace to do it like that. They're equal. There's a couple of things I suppose probably worth pointing out at this point. The order in which these constraints is placed is not important. So I can put these styles in any way and it doesn't really matter about the order. What matters is how the engine resolves them. So I can put these values in any order I want and it should not and will not make a difference as to how the engine resolves it. So that's, it's something slightly different to CSS where you're used to putting the rules at the bottom will trump the rules at the top, all other things being equal. This is not the same. It will just basically try and resolve all the constraints to the best of its ability. Now, with all constraint solvers, so you're trying to work out what the best way to deal with all these requirements is, sometimes it won't be able to do them all because they're all inherently, like it's a cyclical dependency. In other words, you can't have x equal to y equal to z equal to x as long as x and y are different. It just can't be done. So what it does is it tries its best to meet as many of the constraints as close as it can. So it does its best to try and resolve that. And the problem is that, and I haven't dug into the implementation engine. I imagine there's some serious JavaScript voodoo going on there. So I shall stay away, but it's got a resolver in there. So it's got to come up with some solution that will let it display stuff on the screen. Did that answer your question? Cool. Okay, let's see where we are. So that was our simple demo. All right, let's see. Have we got some styles, simple example. So this is just, I'm going back over some of the other syntax that was there. Probably should have shown this before the demo, but nonetheless, you specify one value to be as equal as you can to the other value. So it's setting constraints that the engine will resolve. If nothing else, take that away from today, because if you think of these as being defining values, they're not. They're setting constraints that you hope will be resolved. So we've done the demo already. Okay, so the background to grid style sheets, and the reason for the name grid style sheets, it comes from a company called grid.io. So for those of you who were in Munich last year, a guy called Henry Burgess presented a talk on decoupled CMS. So he's involved with this company as well. They've got some interesting stuff coming up, including the no flow. It's basically visual programming editor, I guess you call it. So they've got a couple of interesting things and they felt that the current implementation of CSS wasn't going to be sufficient what they were trying to do. So they decided to come up with a better way of doing things. So that's the name, not to do with grids. But why would you bother with all this? Yeah, that's a good question. And I haven't got the perfect answer. All I can say is that a lot of this stuff seems extremely powerful and as soon as I work out how good it is, I'll be using it. But in some ways, there are some things you can definitely do with this that you can't do in CSS right now. Because it's a JavaScript implementation, you're not really relying on a browser implementation and you don't have to polyfill for particular browsers. You're essentially polyfilling every browser because this JavaScript's been sent down to every browser and they all behave the same. I haven't gone back and done tests on IE8 but it definitely does work in IE9. I'm sure that it probably, it should really work in IE8 as well. I don't think they've got any kind of, I guess advanced JavaScript stuff that isn't implemented in IE8. Okay, so I want to talk briefly about layout evolution in the beginning, there was tables. So that's how, well, at least some of us old codgers here. Yeah, speak for yourself, Morton. Use tables for layout and all was good and things worked all the time and it was great. And then we moved on to floats. And one of the things about floats is, they'll work to a certain degree until you start running into percentage rounding errors and other bits and pieces and collapsed divs and all sorts of stuff. But that's how layout was done for a long time and indeed it's still done like that for some of the older browsers. So the new kid on the block is Flexbox and that can do some nice layout, I believe in our new, we just launched our new site on Drupal 8 the other day and I'm reliably informed that we're using Flexbox for layout as much as we can in polyfilling older browsers. Some of the stuff that's coming down the tracks that is not fully implemented in all browsers, you got CSS grids. This looks pretty interesting. I saw a talk at CSS com from Berlin a few weeks back from Rachel Andrew and if you have any interest in CSS grids, I totally recommend that talk and she's got some really good examples up on our website as well. And other stuff that's coming down the track are CSS regions. So these are future CSS implementations that will be available for you to use. But the one thing about pretty much all of these layout tools for want of a better word is that you will use these as stuff to hang your divs on, okay? So you're reliant on other grids that you put your content into to a large degree. You don't have to do it quite like that but that's generally how they're expecting you to do it. So the order of things is very important. The hierarchy and the nesting of things is very important. Now when I talk about hierarchy here, I'm not talking about HTML hierarchy in terms of H1, H2, et cetera. That's fine. That doesn't go away. That's still valid no matter what system you're using. But the hierarchy of how you will put one item inside another item is very important to set for flex box and floats. Okay. Hopefully that won't be picked up too much on the video mic. Okay, so I've touched across some of these topics but the key principles to grasp when you're writing or using grid style cheats. How are we doing for time? Okay, good. Okay, so I've talked about this a lot and I really can't emphasize it enough because it's easily the biggest mind shift that you have to deal with when you're dealing with grid style cheats. As you're expressing relationships between variables that may or may not be true depending on the other variables that the engine is trying to resolve. Think of it as dealing with a browser that doesn't like your CSS. You just gotta be a bit more verbose in terms of what you're asking it to do and then it should do what you want it to do. Generally speaking, as we saw in the simple example, the simple stuff, you've gotta be sometimes a little bit more verbose of what you're trying to do. Constraints are two-way. They're not a value, sorry, a variable on the left assigned to a value on the right or rather the other way around, a value on the right assigned to a variable on the left. That's not how it works. You're basically saying that one element should be equal to the other element or one value should be equal to the other value as much as possible. So I should be able to do things like, no, not do any more live demos. We got enough of that going on. Anyway, the values on the right, you can swap them around with the values on the left that shouldn't make any effect on the constraint solver because they're two-way, okay? It takes a while to think about thinking constraints. You're more used to dealing with setting variables and expecting them to be true. This is a mind shift to go from setting variables to setting constraints that should get resolved. Okay, so there's three main constituent parts to grid style sheets. The first one is CCSS for cassowary CSS. Second was VFL for visual formatting language. And the last one is if else, which is conditional CSS. So we're gonna have some brief examples of the syntax followed by a more complex demo that shows a lot more of the features in the syntax. So we'll start off with CCSS. We've seen some of this already. We have relative property constraints with strength and weight. So here we're saying that the font size inside the article div, or sorry, the article element, I guess, should be the same as the height of the box divided by 12, and this has to be strong. So in other words, this is important but not required. So if we said this was something that absolutely had to hold true over other constraints, we could use required there. But you do not and should not and do not use require everywhere because you essentially end up with a situation that you will have constraints that cannot all be resolved because you're asking the engine to do too much. And if you start trying to do some layout stuff, you'll see some problems. So we start getting very verbose. So we've got three buttons inside the panel. So three button elements, let's say, and you wanna just line them all up. So we start saying that the 10 pixels, and all values are currently pixels within grid star sheets, 10 pixels from the left of the panel, we want the button left to appear. And we want 10 pixels onto the button of the left. Hold on, yeah, that's right. So it should be to the left of button two. So we set all these constraints and it can easily get verbose with any kind of complex layout with a lot of divs on the screen. So in order to combat that to write it in a nicer way, we can use visual format language. So this is one directional alignment, not super fancy with any kind of 3D or curves or anything like that, it's very much but setting things in a straight line either in the vertical or the horizontal axis. So what grid star sheets do is they modernize and webify visual formatting language. And this is what it looks like. So what we're saying is on the horizontal plane, we've got three buttons. I want them to be in a row on the horizontal plane inside the panel. So in, hold on now, let me try not like that. So these are the elements we wanna put in a single horizontal row. We want them to live inside this panel. I want the gap between them to equal to 10. So let's see some other different ways of writing that. You can be a bit more explicit and you can be a bit more custom about the gaps that you want between your elements. So we can see the hyphen followed by the 10 which is otherwise just assumed up here to take a value of 10 at the end. Things can get really meta when this 10 can also be another constraint. The actual 10 could be the value of border width of something else. You can have all sorts of constraints even within the values here. And another way to do that is assuming that all of the elements within this panel are all using a button tag, we can do something like this. So all the buttons inside the panel line them up with 10 pixels of a gap. You can even trim that down further by using at H for horizontal and at V for vertical. Okay, so, excuse me. So we do have another tool in our army within Grid.style.cheats and these are if-else statements. So the problem with media queries is that they're only allowing you to test values and even then only some values on the media that you're within. They don't allow you to test other values within CSS nor do they allow you to test on a per element basis. You want to do responsiveness on a per element basis that's not an option available to you. So this is how we can write some stuff in Grid.style.cheats and that's how it would look like in standard media queries. So let's look at some other examples that we could do with that. We could also respond to some element properties. So if a panel width is greater than, and this is the syntax for greater than, I'll admit that it took me a while to realize that wasn't greater than or equal to. It's just greater than. And you can, oh, you'll all laugh now, yeah. Yeah, let's see how you get on. Anyway, there'll be an exercise afterwards. I've got loads of time. So we can have other, basically it's if-else statements week, so we can respond to other elements than just the media that we're constrained within. So this is really useful if you want to do per element responsiveness. I think if anything that I was going to use it for, this is the one thing that I might start using it for straight away. Okay, so a more advanced demo. So let's see how this goes. There'll be less live coding. Okay, so what we've got here is just a couple of divs that we're gonna style up. And you'll see that they're not inside any other, any other divs are just stacked up in a row like that. And just put out on the screen like that. So if we go back and just briefly, we're gonna disable the structure. Two live demos, what could go wrong? Well, that wasn't meant to work. Yeah, we get nothing, okay? Because we don't have any styles, or rather the grid style sheets itself is kicked in and taken over responsibility for the layout, but our own styles are not there. So let's load our styles. Yeah, there we go. So this is some hidden and subliminal advertising for an event on Thursday night. So I don't know if you'll spot it or not. Let's see how it goes. See, I'll just see who's there on Thursday night, see if it works. Okay, so let's look at the grid style sheet used to layout that on the page. So, right, so things get a bit messier. Okay, so this is a more complex example of a layout achieved using grid style sheets. So again, at the top, what we're doing is we're setting some variables or rather hard constraints might be a better way to describe these things. So we're setting some hard constraints that we're gonna reuse these constraints or these values throughout the rest of the grid style sheet. So we're saying that we want a gap of 20. We want a flex gap of double the ordinary gap, when a radius of 10 and outer radius of double the standard radius. So because these are described as virus here, but really again, they're just hard constraints with the require set against them. If that require wasn't there, then you really couldn't consider them as far as at all because they would be just standard constraints that would have to be matched just like all the other constraints. So little things we're doing. The outer element is the card div. And that we're setting some things you've seen before. We're setting its width. We want that to be always within 480 pixels of the width of the window 480 pixels less than the width of the window. We want the height to begin, hold on now. There we go. Less than 480 pixels of the height. So if we look at the example, we'll see that that's how that is laid out there on the page. Let's see if you can see the mouse there. It's back moving around at all. But that's what that's coming from. So as we move things around, we'll see that it's always trying to constrain that. It doesn't always achieve it because there's other rules in place as well, but that's what it's trying to do. And again, it's centered on the X and the Y axis. And this time we're using our variable or our hard constraint to set the border radius on the element there. So for the avatar, that's this element here. Oh, hold on now. Is that even visible? Can I even see the mouse there at all moving around? Okay, get some of that to grant. So that's the avatar element. We're setting a height of it because otherwise it'd just be collapsed. We're setting the width equal to the height and we're setting the border radius equal to the height over two. And again, that lets us achieve a nice circle. So again, the name is a standard H1 tag, but if we don't put in our height and width, then it doesn't actually get painted onto the screen in the way that we would want. So again, we have to be quite verbose about how we do layout more than, yeah, more than I'd like. I think that's probably one of the more awkward things, but I can see the value of it. If you're forced to be more verbose in the CSS that you write, you're more likely not to understand where things are coming from. So things that are assumed or automatic, they're the things you'll forget about and wonder, well, why is something acting in certain fashion? Okay, so let's, as we move down, setting the border radius, we're setting some values on the button. I'm trying to see if there's any sort of new stuff in here that we didn't really cover already. I don't think there is until we get to something like this. Right. Okay, so now we're into some layout. So what we're saying is on the horizontal axis, we're using a new feature here called cushions, which are like gaps, but not. Gaps are defined on equality, cushions defined on inequality, meaning I want to get stuff to be less than or more than something, not the same as. So yeah, that's not a great description, but my head hasn't quite parsed yet myself, to be honest with you. It'll have to do for now. So what we're saying is that the name element sits inside the cover element with the gap of standard gap times two, and that's a strong requirement. That's something we really want. So that's an example of the short form of the syntax on the horizontal. Now we're into the fun stuff. So this is where we start to use some of the power element responsiveness. So this is something that, off the top of my head, I'm not entirely sure how, if you could even do this in CSS. But basically what we're saying is, if the width of the card, the card being the outer element is, or it should be, or, see, it's not a hard requirement. So you have to be careful how you even say these things out loud. Anyway, if the card width is greater than the card height, then we're gonna use this layout. Otherwise, we're gonna use this layout. Okay, so we're not testing the width of the browser. So the browser width doesn't really matter here. All that matters is the width and the height of the card element. And that's what happens in terms of responsiveness. So again, we've got some layout on the vertical. So we're saying for the landscape card, which is this, we're gonna have the avatar, followed by the name, inside the cover element. So that's just the rule we want to achieve. The constraint solver solves it by laying them out in that order. There's other values being added on here that we haven't covered before. So we're setting a gap. So the gap between the elements. And we're setting an outer gap, which is something we didn't cover before. So the outer gap is the gap between the elements and the element that they're sitting inside. These are all things you can find. So this is all one, I guess, I won't call it, it's all one constraint. So even though it's spread out over two lines. So the next thing we're setting is a new value called chain. So what you can do is you can take, for the elements in your vertical layout in this case, you can take certain values and chain them together meaning they should be equal. In this case, we're saying that the center X value, there we go, this and this, that they should be equal. Okay, and again, we're taking that value from another value. So it's getting a bit weird at this stage, but it all works, thankfully, because I prepared it earlier. Okay, so we got a couple of other rules here. I'm trying to pick out the stuff that's kind of new that we haven't covered before. Most of this stuff in terms of setting horizontal and vertical layouts, we've kind of covered before. Okay, talked about the chain value. Okay, so now we have the portrait. So you can see the layout is quite different in terms of, let's look at the visual implementation. So if we go to portraits, do need to reload for it to kick in. So that's our portrait layout. Looks quite different from our vertical layout. Now, I didn't go over the top in terms of coming up on something crazy, but there's other little things you can, I don't know if we've got enough screen width to show this. Not really, no, because I wasn't smart enough to set up an auto reload thing on my browser. You can do that. You can't get it to reload all the time, but it's stuff that you don't necessarily need to have going on all the time. Sorry, the question was how come it did not reload? I like giving the answer. No, you can get them to be evaluated all the time, but it needs to do a bit more work because otherwise it's going to put a lot of load on the browser, just constantly checking how's the screen change with? How's the screen change with? So you try and avoid that to a degree, like deep pencil, I guess. I'll have to look at that another time. Yeah, have we even got a path through to the microphone? Probably not. Yeah, so the question was, why did I have to keep reloading the page? So that's why. Okay, so let's go back to some of the syntax. Okay, I think new there, not particularly. No, this time we're just being a bit more verbose about how we set the gaps between the elements. Right then. That might well be it, short and sweet. That's pretty much it. The one element that I didn't get to, it's kind of a, I was up in the area so whether I go ahead with it or not is because I felt there was enough news of here was to try and implement this in Drupal 8. To be honest with you, it's fairly straightforward. There's only one element that's a little bit tricky and that's how to get Drupal and the web server to cooperate and make sure that the grid style cheat file is served as GSS. So you can't just say it's another JavaScript file, it'd be served as text.js and it won't be parsed. So I didn't quite get around to working on how to do that. So if anyone's still awake and interested, happy to take questions, I'll do my best to answer them. Not a grid style cheat expert, there's probably a number of you in the room. But there you go. Actually, there you go. There's a question you should have asked to start. Who has heard of or used grid style cheats? Let's go with heard of and used in anger at all. Even for fun. Okay, okay, are there any questions? We'll happily take some questions there. If you can make your way. No, okay, just shout it out and I'll repeat it back. The first question was what's the performance impact of this? The examples that I have are, they're not super complex, but they've got enough layout there that you might have in a standard webpage. And there's a tiny amount of time it takes for the JavaScript to be parsed and loaded on the page. Not too dissimilar from my experience with say loading an external font, perhaps. So the same issue you have with flash of one style content, you have here, there is some tricky CSS that you can use. And there is a class that's added to the body tag. If I remember this correctly, let's see what we have if we have it here. Yeah, so we had this class GSS ready. So some of the examples have this thing where it basically hides everything until that class GSS ready is true or it's added to the body tag. And once that happens, then it displays the page. So it stops you having a situation where actually you saw it in the sample demo where it showed them slightly out of line and then quickly into line. So yeah, there is a performance impact. You know, the reality is Anthony that uses JavaScript for layout is gonna have that. But I don't think it's huge. And again, it's a case of trade-off. I think some of the stuff that you can do with this, if I can fully get my head around it are stuff that I couldn't do in CSS. So you have to decide, well, is it really worth it or is the flash of one style content a bit too much? Now take the follow-up question then. No, the fallback to CSS will be up to yourself. I mean, you can see the class GSS ready is there. So you could do a fallback in CSS by testing if that class has been set. So dot, I don't know, CSS ready. If the body tag doesn't have that class then you can do some other stuff with it. But no, not really out of the box. It'd be up to yourself to do that. Okay, next question. Lewis. Oh, sorry, sorry. So Lewis just said that you could use a Node.js class or something like that to test if JavaScript wasn't available and therefore you wouldn't get your layout and you could do it like that. Lewis' question. The question was. Yeah, so this isn't really pretty. So there you go. It basically applies all this stuff. What did you expect? Nice, clean CSS. Can you take the simple? Yeah, it's not much better. There you go. So I talked about the stuff that it's generating. It's generating JSON, sending it down to the browser and applying it to the browser. Yeah, there's a lot of voodoo going on there that I have no idea of what it's doing. But hey, I don't know how Gekko and WebKit work either. So I'm blank and things like that. Yeah, I'll leave that to the nerds to read there. Have fun there, Morten. Andrew at the back. The simpler, the more advanced one. Oh yeah, so I have it here in a CSS file. That's fine. There it is, some basic CSS. That's a good question. That I do not know. I wouldn't. I would try and keep the separation of concerns to some degree if I could. There's obviously a lot of, the question was kind of do color in GSS. The short answer is I don't know. The longer answer is I wouldn't. I try and keep my CSS doing layout style and presentation and try and keep grid style sheets for layout on the page. Any more? Okay, yeah. Mix switch. Oh, well, yeah. That's where I get, the question was is it possible to mix this with like other CSS layout things, is it? No, GSS tends to trump whatever's there. So anything that's even there in the browser already gets trumped. So it's basically the values that GSS looks at, like say height, width. There's a series of values that it basically determines and calculates. Yeah, they're going to get trumped by it. As far as I can tell in any case. Oh, no, for all elements, yeah, yeah, yeah. Fun, yeah. Next question. Yeah, yeah, that's fine. So basically the question was if you set a margin in CSS, what will happen with it? It goes away. It's basically the browser, GSS takes over layout everything. All elements on the page. So if you set a margin in CSS, it just goes to its browser default. Adding to. Sorry, I'm being a slightly facetious there. The shorter answer that I don't know for sure from what I can tell from the testing, it doesn't look as though those values get respected whatsoever. So in other words, anything that's going to affect the box model essentially. That's the stuff that gets overwritten and used by grid style sheets. I'd need to do a bit more, I suppose, test out and see which one or the other. The problem with not having a chance to do this in any kind of production site is that I haven't really got great answers to things like that. Like in particular, knowing exactly which stuff to put in a standard CSS file and which stuff to put into a grid style sheets. Because if Andy's going to get trumped by grid style sheets, well, you want it to live in a grid style sheet and keep it there and there only. But with a bit more practice, I guess we get there and work it out. Interestingly, the site itself does use GSS for layout itself. So the gridstylecheats.org, they do use gridstylecheats for its own layout. I'm not sure if that answers your question, but there you go. Can't win them all. Will the CSS be stripped out if we go back to its default state? The gridstylecheats, as far as I'm aware, it doesn't set it back to default state. It just basically sets it, it just clears it out completely. So even the browser, you know, I don't know, is there a browser standard height for H1 or something like that? Well, if there is, gridstylecheats doesn't seem to respect it from what I can see, from what I can see. Yeah, questions back there. Can you use transitions? So you mean, can you use transitions in your CSS and then not have them trumped by gridstylecheats? I don't think so, no, because like you can see that it's using transform there in the generated stuff. So that's probably the kind of stuff that I'd steer clear of. But yeah, yet another, I don't know for sure answer. I might stop these things now. Addie Moore, Morton, and then Jonathan. When is this ready for production? When is this ready for production? People are using it in production in fairness. So like the guys at NoFlow are using it in gridstylecheats on their own gridstylecheats site. They've got others. Yeah, I wouldn't think about it in terms of time. What's gonna happen is someone will manage to achieve some layout stuff that's just not really doable. Even with the new stuff that's coming on down the track would say gridstylecheats or CSS, sorry, CSS grids or CSS regions. And like everything else, when someone shows something that, hey, that's something that's really, really awkward to do. Therefore, this is technology that it's worth looking at. And that applies to everything. In the same way that whenever we first picked up Drupal and Huck, I was saying to me, write in handwritten CMSs now because someone's just done a better job and solved a problem for me. And I think that's, I haven't in fairness on it, but hold my hands up. I haven't come up with an example here that's gonna send you all scurrying back to your code editors to start using this. But give me a couple of months. I'm sure I'll come up with something. And I think more than likely we'll see implementations in the wild. I fully expect to see stuff in the wild where people go, here I did this and it could have taken me 600 lines of CSS and I managed it in, I don't know, 30, 40 of grid style sheets. So you present this at Frontend United in Bristol? Oh, that's, of course. I mean, I would love to attend this at Frontend United in Bristol on the 18th and 19th of April, 2015. Yes, Martin, I would love to. So yeah, Frontend United is a Drupal Frontend conference, although it has pretty much morphed into a general Frontend conference at this stage. And it will be on Bristol in the UK on the 18th and 19th of April. It will be a lot of fun. I will probably be there. And I might even be presenting a better version of this talk. Thanks, thanks, Martin. Jonathan. Oh, it is, yeah. Like, I haven't done any native Apple coding type stuff, but I'm told it's this kind of stuff as well. Interestingly, I was talking to Chris Van de Water this morning about this. He said he was doing very similar stuff in 2008 or so using OpenLaslo. And while they weren't using the exact same, say, syntax being flavored CSS, it was all XML, I think, if I remember correctly. But again, it outputted, and you had two choices of output. You could output it as Flash or output it as JavaScript. Now, most people tend to go for the Flash. It was a bit more powerful and probably a bit more performant. But yeah, it's not especially new. This is just a different way of doing it, I guess. And it's a bit, you know, it's closer. If you think about it, in terms of syntax is a lot more accessible to web developers than sort of defining layout and XML, I would wager. Any more, yeah, at the side there, or are you just? How big is the library? How big is the library? It's not very big. Let's have a look. See if I can work it out. Nothing like live stuff, eh? Resource is there. Okay, you've got me on the spot, I'm not gonna find this. Okay, well, this is the grid spreadsheet itself. Yeah, it's substantial enough when you look at it. Oh, here, 2,000 lines. Yeah, but how many people have read the source code for Blink? No hands here. And we have it, we're raising our hands. What about Gecko? Anyone know that one? Okay, the difference is you don't have to send it down to like Gecko and Blink, they're already in the browser. That's probably not a fair comparison. The only information on how it performs is it's generally okay. I think I covered this earlier on. It seems to me, for me, about the same as like loading external font, you have to deal with the flat-of-one style content one way or the other. So, you know, in terms of the processing time to load something like that, like an external resource, and then only then do you want to paint to the screen? It seems to be very similar. Again, that's a good feeling. That's not a scientific answer to your question, but that's how I looked at it. If you're willing to put up with having to deal with loading that external resource of an external font and hands up those who are not using external fonts or custom fonts in their designs these days, well, then this seems like a fair enough thing to do as well. It'd be quicker if you didn't, sure, but you may be willing to put up with the cost of it. Jonathan? Well, why would it not work? The question was, it seems jQuery won't work anymore. Oh, yeah, okay, sorry, I see what you mean. So, yeah, doc, I would steer down away from that path. In other words, if you're trying to use jQuery to manipulate your layout, much like I said, if you want to use 3D transforms or other things like that, choose your poison and stick with it. Don't make strings, it's the same thing. Can you communicate with CSS via JavaScript, or GSS via JavaScript? Maybe. I, probably, probably, I mean, ultimately, it's a JavaScript implementation. So, yeah, I think you could. I mean, there's a fair bit, you can see in the configuration, it is JavaScript. So, yeah, probably. I'm not sure what crazy things are coming up with there now, but I'll head to my bets. Okay, guys, there's five, so we'll leave it there. Thanks very much. See y'all pretty nice. Please give feedback, good, bad, or indifferent. Any feedback is welcome, better than silence.